Simple yet powerful skeleton animation for all view in android
Minimum API 17
See demo project
See demo APK
Add JitPack repository in your root build.gradle at the end of repositories.
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Add dependency in your app level build.gradle.
dependencies {
compile 'com.github.rasoulmiri:Skeleton:v1.0.9'
}
add name space on top layout
xmlns:Skeleton="https://schemas.android.com/apk/res-auto"
use SkeletonGroup and SkeletonView in layout
<io.rmiri.skeleton.SkeletonGroup
android:layout_width="match_parent"
android:layout_height="wrap_content">
<io.rmiri.skeleton.SkeletonView ...>
<View ... />
</io.rmiri.skeleton.SkeletonView>
<io.rmiri.skeleton.SkeletonView ...>
<View ... />
</io.rmiri.skeleton.SkeletonView>
</io.rmiri.skeleton.SkeletonGroup>
Example:
<android.support.v7.widget.CardView xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:Skeleton="https://schemas.android.com/apk/res-auto"
xmlns:app="https://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="10dp"
app:cardElevation="10dp"
app:cardUseCompatPadding="true"
app:contentPadding="0dp">
<io.rmiri.skeleton.SkeletonGroup
android:id="@+id/skeletonGroup"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Skeleton:SK_BackgroundViewsColor="#EEEEEE"
Skeleton:SK_animationAutoStart="true"
Skeleton:SK_animationDirection="LTR"
Skeleton:SK_animationDuration="1000"
Skeleton:SK_animationFinishType="gradient"
Skeleton:SK_animationNormalType="gradient"
Skeleton:SK_backgroundMainColor="@android:color/transparent"
Skeleton:SK_highLightColor="#DEDEDE">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<io.rmiri.skeleton.SkeletonView
android:id="@+id/skeletonViewPhoto"
android:layout_width="match_parent"
android:layout_height="300dp"
Skeleton:SK_cornerRadius="0dp"
Skeleton:SK_padding="0dp"
Skeleton:SK_shapeType="rect">
<android.support.v7.widget.AppCompatImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:srcCompat="@drawable/photoTest" />
</io.rmiri.skeleton.SkeletonView>
<io.rmiri.skeleton.SkeletonView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/skeletonViewPhoto"
Skeleton:SK_cornerRadius="10dp"
Skeleton:SK_padding="5dp"
Skeleton:SK_shapeType="rect">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Title" />
</io.rmiri.skeleton.SkeletonView>
</RelativeLayout>
</io.rmiri.skeleton.SkeletonGroup>
</android.support.v7.widget.CardView>
Nothing really! Just build your app, watch the magic happen ;) .
- SK_animationAutoStart: true or false | defult value true
- SK_animationDuration: time animation | default 1000 millisecond
- SK_animationDirection: RTL,LTR,BTT,TTB | default value is LTR
- SK_animationNormalType: none,alpha,gradient | default value is gradient
- SK_animationFinishType: none,alpha,gradient | default value is gradient
- SK_backgroundMainColor: background total SkeletonGroup
- SK_BackgroundViewsColor: background SkeletonViews in this SkeletonGroup
- SK_highLightColor: highLight color animation
- SK_shapeType: rect, oval,text | defult value rect
- SK_cornerRadius: just use for shape type rect | defult value 0dp
- SK_cornerRadiusTopLeft
- SK_cornerRadiusTopRight
- SK_cornerRadiusBottomLeft
- SK_cornerRadiusBottomLRight
- SK_padding: padding view if SK_shapeType equals rect | default value is 0dp
- SK_paddingTop
- SK_paddingRight
- SK_paddingLeft
- SK_paddingBottom
- SK_textLineNumber: just use for shape type text | default value is 3
- SK_textLineLastWidth: full, threeQuarters, half, quarter | default value is threeQuarters
- SK_textLineHeight: hieght of line | defualt value is 24dp
- SK_textLineSpaceVertical: space vertical between lines | default value is threeQuarters 4dp
skeletonGroup.setAutoPlay(true);
skeletonGroup.setShowSkeleton(true);
skeletonGroup.startAnimation();
skeletonGroup.finishAnimation();
skeletonGroup.setSkeletonListener(new SkeletonGroup.SkeletonListener() {
@Override
public void onStartAnimation() {
...
}
@Override
public void onFinishAnimation() {
...
}
});
for use in RecyclerView and Adapter See sample 1 activity in this project
You are welcome to contribute with issues, PRs or suggestions.