Skeleton Android

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



See demo project
See demo APK

Setup :

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

Usage XML:

Step 1:

add name space on top layout

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

Step 2:

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 | default 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: height of line | default value is 24dp
• SK_textLineSpaceVertical: space vertical between lines | default value is threeQuarters 4dp

Usage Java:

Step 1:

Create SkeletonViewGroup

SkeletonViewGroup skeletonViewGroup = new SkeletonViewGroup(context);

Step 2:

Create ArrayList for keep views config

ArrayList<SkeletonModel> skeletonModels = new ArrayList<>();

Step 3:

Add views to skeletonModels You should add views to skeleton models by 3 ways.

Way 1: Defined by 1 view

• setChildView(view)

skeletonModels.add(new SkeletonModelBuilder()
              .setChildView(view1)
              .build())

Way 2: Defined by 1 view and custom width and height

• setChildView(view)
• setCustomWidth(float)
• setCustomHeigh(float)

skeletonModels.add(new SkeletonModelBuilder()
              .setChildView(view1)
              .setCustomWidth(ConverterUnitUtil.dpToPx(getApplicationContext(), 140f))
              .setCustomHeight(ConverterUnitUtil.dpToPx(getApplicationContext(), 50f))
              .build());

Way 3: Defined by 1 view and fill parent

• setChildView(view)
• setIsMatchViewBoolean(boolean)

skeletonModels.add(new SkeletonModelBuilder()
              .setChildView(view1)
              .setIsMatchViewBoolean(true)
              .build());

Way 4: Defined by 2 views (draw from left-top startView to right-bottom endView)

• setStartView(view)
• setEndView(view)

skeletonModels.add(new SkeletonModelBuilder()
              .setStartView(view1)
              .setEndView(view2)
              .build());

Step 4:

Add models to skeletonViewGroup

skeletonViewGroup.setSkeletonModels(skeletonModels);

Step 5:

Add SkeletonViewGroup to layout

ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(
           ViewGroup.LayoutParams.MATCH_PARENT,
           ViewGroup.LayoutParams.MATCH_PARENT);
mainLayoutExample.addView(skeletonViewGroup, layoutParams);

Final step

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

Example:

SkeletonViewGroup skeletonViewGroup = new SkeletonViewGroup(getApplicationContext());
ArrayList<SkeletonModel> skeletonModels = new ArrayList<>();

// Add view 
skeletonModels.add(new SkeletonModelBuilder()
        .setChildView(btn1)
        .setIsMatchViewBoolean(true) //MatchView
        .build());

skeletonModels.add(new SkeletonModelBuilder()
        .setStartView(btn2) // AddView start
        .setEndView(btn3)// AddView end
        .build());
		
skeletonModels.add(new SkeletonModelBuilder()
        .setChildView(btn4)// AddView
        .setCustomWidth(ConverterUnitUtil.dpToPx(getApplicationContext(), 140f)) // CustomWidth
        .setCustomHeight(ConverterUnitUtil.dpToPx(getApplicationContext(), 50f)) // CustomHeight
        .build());

skeletonViewGroup.setSkeletonModels(skeletonModels);

// Add SkeletonViewGroup
ViewGroup.LayoutParams layout = new ViewGroup.LayoutParams(
         ViewGroup.LayoutParams.MATCH_PARENT,
         ViewGroup.LayoutParams.MATCH_PARENT)
mainLayout.addView(skeletonViewGroup, layout);
   

SkeletonModelBuilder

new SkeletonModelBuilder()
      .setChildView(view)
      .setCustomHeight(float)
      .setCustomHeight(float)
      .setStartView(view)
      .setEndView(view)
      .setIsMatchViewBoolean(boolean)

      .setShapeType(SkeletonModel.SHAPE_TYPE_RECT) -> SHAPE_TYPE_RECT, SHAPE_TYPE_OVAL, SHAPE_TYPE_TEXT

      .setPadding(float)
      .setPaddingTop(float)
      .setPaddingBottom(float)
      .setPaddingLeft(float)
      .setPaddingRight(float)

      .setCornerRadius(int)
      .setCornerRadiusTopRight(int)
      .setCornerRadiusTopLeft(int)
      .setCornerRadiusBottomLRight(int)
      .setCornerRadiusBottomLeft(int)
      
      .build();

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.