- Notifications
You must be signed in to change notification settings - Fork62
rasoulmiri/Skeleton
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Simple yet powerful skeleton animation for all view in android
Seedemo project
Seedemo 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.1.4'}add name space on top layout
xmlns:Skeleton="http://schemas.android.com/apk/res-auto"
use SkeletonGroup and SkeletonView in layout
<io.rmiri.skeleton.SkeletonGroupandroid: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.CardViewxmlns: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.SkeletonGroupandroid: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"> <RelativeLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"> <io.rmiri.skeleton.SkeletonViewandroid: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.AppCompatImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"app:srcCompat="@drawable/photoTest" /> </io.rmiri.skeleton.SkeletonView> <io.rmiri.skeleton.SkeletonViewandroid: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"> <TextViewandroid: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 | 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
- 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
Create SkeletonViewGroup
SkeletonViewGroupskeletonViewGroup =newSkeletonViewGroup(context);
Create ArrayList for keep views config
ArrayList<SkeletonModel>skeletonModels =newArrayList<>();
Add views to skeletonModelsYou should add views to skeleton models by 3 ways.
Way 1: Defined by 1 view
- setChildView(view)
skeletonModels.add(newSkeletonModelBuilder() .setChildView(view1) .build())
Way 2: Defined by 1 view and custom width and height
- setChildView(view)
- setCustomWidth(float)
- setCustomHeigh(float)
skeletonModels.add(newSkeletonModelBuilder() .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(newSkeletonModelBuilder() .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(newSkeletonModelBuilder() .setStartView(view1) .setEndView(view2) .build());
Add models to skeletonViewGroup
skeletonViewGroup.setSkeletonModels(skeletonModels);
Add SkeletonViewGroup to layout
ViewGroup.LayoutParamslayoutParams =newViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT);mainLayoutExample.addView(skeletonViewGroup,layoutParams);
Nothing really! Just build your app, watch the magic happen ;) .
Example:
SkeletonViewGroupskeletonViewGroup =newSkeletonViewGroup(getApplicationContext());ArrayList<SkeletonModel>skeletonModels =newArrayList<>();// Add viewskeletonModels.add(newSkeletonModelBuilder() .setChildView(btn1) .setIsMatchViewBoolean(true)//MatchView .build());skeletonModels.add(newSkeletonModelBuilder() .setStartView(btn2)// AddView start .setEndView(btn3)// AddView end .build());skeletonModels.add(newSkeletonModelBuilder() .setChildView(btn4)// AddView .setCustomWidth(ConverterUnitUtil.dpToPx(getApplicationContext(),140f))// CustomWidth .setCustomHeight(ConverterUnitUtil.dpToPx(getApplicationContext(),50f))// CustomHeight .build());skeletonViewGroup.setSkeletonModels(skeletonModels);// Add SkeletonViewGroupViewGroup.LayoutParamslayout =newViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT)mainLayout.addView(skeletonViewGroup,layout);
newSkeletonModelBuilder() .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(newSkeletonGroup.SkeletonListener() {@OverridepublicvoidonStartAnimation() {... }@OverridepublicvoidonFinishAnimation() {... }});
for use in RecyclerView and Adapter See sample 1 activity inthis project
You are welcome to contribute with issues, PRs or suggestions.