Skeleton
A library provides an easy way to show skeleton loading view like Facebook and Alipay
Top Related Projects
An easy, flexible way to add a shimmering effect to any view in an Android app.
DEPRECATED - Memory efficient shimmering effect for Android applications by Supercharge.
Quick Overview
Skeleton is an Android library that provides a shimmer effect for loading screens. It offers a simple way to create skeleton loading views, which are placeholder UI elements that mimic the layout of the actual content while it's being loaded, providing a smoother user experience.
Pros
- Easy to implement with minimal code changes
- Customizable appearance and animation
- Supports RecyclerView, ViewGroup, and ImageView
- Lightweight and efficient
Cons
- Limited to Android platform
- May not be suitable for complex or highly dynamic layouts
- Requires additional setup for custom views
- Not actively maintained (last update was in 2018)
Code Examples
- Basic implementation for a ViewGroup:
Skeleton.bind(viewGroup)
.load(R.layout.item_skeleton)
.show()
This code binds a skeleton loading view to a ViewGroup, using a custom layout for the skeleton.
- Implementing skeleton loading for a RecyclerView:
Skeleton.bind(recyclerView)
.adapter(adapter)
.load(R.layout.item_skeleton)
.count(10)
.show()
This example sets up skeleton loading for a RecyclerView, specifying the adapter, skeleton item layout, and the number of skeleton items to show.
- Customizing the shimmer effect:
Skeleton.bind(viewGroup)
.load(R.layout.item_skeleton)
.shimmer(true)
.angle(20)
.color(R.color.shimmer_color)
.show()
This code demonstrates how to customize the shimmer effect by adjusting its angle and color.
Getting Started
To use Skeleton in your Android project, follow these steps:
- Add the JitPack repository to your project's build.gradle file:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
- Add the dependency to your app's build.gradle file:
dependencies {
implementation 'com.github.ethanhua:Skeleton:1.1.2'
}
-
Sync your project with Gradle files.
-
In your activity or fragment, use the Skeleton.bind() method to create skeleton loading views for your UI elements.
Competitor Comparisons
An easy, flexible way to add a shimmering effect to any view in an Android app.
Pros of Shimmer-android
- More mature and widely adopted, backed by Facebook
- Offers a more customizable shimmer effect with various animation properties
- Provides both Java and Kotlin support
Cons of Shimmer-android
- Limited to shimmer effect only, less versatile for different loading styles
- Requires more setup and configuration for complex layouts
Code Comparison
Skeleton:
Skeleton.bind(recyclerView)
.shimmer(true)
.count(10)
.color(R.color.shimmer_color)
.load(R.layout.item_skeleton)
.show()
Shimmer-android:
val shimmerFrameLayout = findViewById<ShimmerFrameLayout>(R.id.shimmer_view_container)
shimmerFrameLayout.startShimmer()
Summary
Skeleton offers a more comprehensive solution for creating skeleton loading screens with various styles, while Shimmer-android focuses specifically on the shimmer effect. Skeleton provides an easier setup for complex layouts, but Shimmer-android offers more customization options for the shimmer animation itself. The choice between the two depends on the specific requirements of the project and the desired loading effect.
DEPRECATED - Memory efficient shimmering effect for Android applications by Supercharge.
Pros of ShimmerLayout
- More customizable shimmer effect with options for angle, color, and width
- Supports both static and dynamic shimmer layouts
- Easier integration with existing layouts due to its FrameLayout-based approach
Cons of ShimmerLayout
- Limited to shimmer effects only, while Skeleton offers more placeholder types
- May have slightly higher memory usage due to additional view layers
- Less suitable for complex, nested layouts compared to Skeleton's view-based approach
Code Comparison
ShimmerLayout:
<com.facebook.shimmer.ShimmerFrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Your shimmer layout here -->
</com.facebook.shimmer.ShimmerFrameLayout>
Skeleton:
<com.ethanhua.skeleton.SkeletonLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:skeleton_shimmer="true">
<!-- Your skeleton layout here -->
</com.ethanhua.skeleton.SkeletonLayout>
Both libraries offer easy-to-use XML implementations, but ShimmerLayout focuses solely on shimmer effects, while Skeleton provides a more comprehensive placeholder solution with additional features like custom shapes and animations.
Pros of ShimmerRecyclerView
- Provides a built-in shimmer effect for loading states
- Easier to implement for RecyclerView-specific use cases
- Offers more customization options for the shimmer animation
Cons of ShimmerRecyclerView
- Limited to RecyclerView implementations
- May require more setup for complex layouts
- Less flexible for non-RecyclerView UI components
Code Comparison
ShimmerRecyclerView:
<com.cooltechworks.views.shimmer.ShimmerRecyclerView
android:id="@+id/shimmer_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:shimmer_demo_child_count="10"
app:shimmer_demo_layout="@layout/layout_demo_grid"/>
Skeleton:
Skeleton.bind(recyclerView)
.load(R.layout.item_skeleton_news)
.show()
ShimmerRecyclerView is specifically designed for RecyclerView implementations, offering a more straightforward approach for this particular use case. It provides built-in shimmer effects and customization options for the animation.
Skeleton, on the other hand, offers a more flexible solution that can be applied to various UI components beyond RecyclerView. It provides a simpler API for implementing skeleton loading states across different views in an Android application.
The choice between these libraries depends on the specific requirements of your project and whether you need a solution tailored for RecyclerView or a more versatile option for different UI components.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Skeleton(Deprecated)
The library provides an easy way to show skeleton loading view like Facebook and Alipay.
It now uses a memory optimised version of shimmer animation so it is even faster and you can animate bigger layouts as well.
Preview
Demo Apk
you can scan the qrcode for download demo apk
Feature
- Light
- Noninvasive, you don't need to make changes to existing code.
- Wide applicabilityï¼it is available for all views
- Memory optimised
Getting started
In your build.gradle:
dependencies {
implementation 'com.ethanhua:skeleton:1.1.2'
implementation 'io.supercharge:shimmerlayout:2.1.0'
}
Usage
For RecyclerView:
skeletonScreen = Skeleton.bind(recyclerView)
.adapter(adapter)
.load(R.layout.item_skeleton_news)
.show();
 For View:
skeletonScreen = Skeleton.bind(rootView)
.load(R.layout.layout_img_skeleton)
.show();
More Config:
.shimmer(true) // whether show shimmer animation. default is true
.count(10) // the recycler view item count. default is 10
.color(color) // the shimmer color. default is #a2878787
.angle(20) // the shimmer angle. default is 20;
.duration(1000) // the shimmer animation duration. default is 1000;
.frozen(false) // whether frozen recyclerView during skeleton showing default is true;
when data return you can call the method to hide skeleton loading view
skeletonScreen.hide()
Thanks
Top Related Projects
An easy, flexible way to add a shimmering effect to any view in an Android app.
DEPRECATED - Memory efficient shimmering effect for Android applications by Supercharge.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot