Skeleton

Additional

Language
Java
Version
v1.0.9 (Dec 17, 2017)
Created
Aug 24, 2017
Updated
Jan 10, 2018
Owner
Rasoul Miri (rasoulmiri)
Contributors
Rasoul Miri (rasoulmiri)
uxitten
2
Activity
Badge
Generate
Download
Source code
APK file

Blurb

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

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.