Skeleton Android

Simple yet powerful skeleton animation for all view in android
Minimum API 17



See demo project
See demo APK

Usage:

Step 1:

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.3'
}

Step 2:

add name space on top layout

xmlns:Skeleton="http://schemas.android.com/apk/res-auto" 

Step 3:

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="http://schemas.android.com/apk/res/android"
    xmlns:Skeleton="http://schemas.android.com/apk/res-auto"
    xmlns:app="http://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>

Final step

Nothing really! Just build your app, watch the magic happen ;) .

Configure XML

SkeletonGroup

• 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

SkeletonView

• 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

Configure Java

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

Contributing

You are welcome to contribute with issues, PRs or suggestions.