Skeleton

Additional

Language
Java
Version
v.1.1.7 (Oct 7, 2019)
Created
Aug 24, 2017
Updated
Oct 7, 2019
Owner
Rasoul Miri (rasoulmiri)
Contributors
Rasoul Miri (rasoulmiri)
uxitten
2
Activity
Badge
Generate
Download
Source code
APK file

Advertising

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.