Top Related Projects
BRVAH:Powerful and flexible RecyclerAdapter
An Android Animation library which easily add itemanimator to RecyclerView items.
The bullet proof, fast and easy to use adapter library, which minimizes developing time to a fraction...
"Favor composition over inheritance" for RecyclerView Adapters
Epoxy is an Android library for building complex screens in a RecyclerView
Flexible multiple types for Android RecyclerView.
Quick Overview
ShimmerRecyclerView is an Android library that provides a custom RecyclerView with a shimmering effect for loading placeholders. It enhances the user experience by displaying an animated loading state while data is being fetched, giving a polished and professional look to your Android applications.
Pros
- Easy integration with existing RecyclerView implementations
- Customizable shimmer effect (color, duration, direction)
- Supports both linear and grid layouts
- Lightweight and efficient
Cons
- Limited to RecyclerView implementations only
- May require additional setup for complex list item layouts
- Not actively maintained (last update was in 2018)
Code Examples
- Basic implementation of 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/demo_layout"
app:shimmer_demo_layout_manager_type="linear_vertical" />
- Showing and hiding shimmer effect programmatically:
val shimmerRecyclerView = findViewById<ShimmerRecyclerView>(R.id.shimmer_recycler_view)
// Show shimmer effect
shimmerRecyclerView.showShimmerAdapter()
// Hide shimmer effect and show actual data
shimmerRecyclerView.hideShimmerAdapter()
- Customizing shimmer effect:
shimmerRecyclerView.setDemoLayoutReference(R.layout.custom_demo_layout)
shimmerRecyclerView.setDemoChildCount(5)
shimmerRecyclerView.setShimmerColor(R.color.shimmer_color)
shimmerRecyclerView.setShimmerAngle(0)
shimmerRecyclerView.setShimmerDuration(1000)
Getting Started
- 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.sharish:ShimmerRecyclerView:v1.3'
}
- Use ShimmerRecyclerView in your layout XML:
<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/demo_layout"
app:shimmer_demo_layout_manager_type="linear_vertical" />
- In your activity or fragment, show the shimmer effect and hide it when data is loaded:
val shimmerRecyclerView = findViewById<ShimmerRecyclerView>(R.id.shimmer_recycler_view)
shimmerRecyclerView.showShimmerAdapter()
// Load your data here
// When data is loaded, hide shimmer and set your adapter
shimmerRecyclerView.hideShimmerAdapter()
shimmerRecyclerView.adapter = yourAdapter
Competitor Comparisons
BRVAH:Powerful and flexible RecyclerAdapter
Pros of BaseRecyclerViewAdapterHelper
- More comprehensive feature set, including drag & drop, animations, and multi-item types
- Larger community and more frequent updates
- Better documentation and examples
Cons of BaseRecyclerViewAdapterHelper
- Steeper learning curve due to more complex API
- Larger library size, which may impact app size
- No built-in shimmer effect for loading states
Code Comparison
ShimmerRecyclerView:
mShimmerRecyclerView.showShimmerAdapter();
mShimmerRecyclerView.hideShimmerAdapter();
BaseRecyclerViewAdapterHelper:
adapter.setAnimationEnable(true);
adapter.setAnimationFirstOnly(false);
adapter.setAnimationWithDefault(BaseQuickAdapter.AnimationType.AlphaIn);
Summary
BaseRecyclerViewAdapterHelper offers a more feature-rich solution for RecyclerView implementations, with a wide range of customization options and animations. However, it lacks the specific shimmer effect for loading states that ShimmerRecyclerView provides out of the box. ShimmerRecyclerView is more focused on providing a smooth loading experience with its shimmer effect, while BaseRecyclerViewAdapterHelper offers a broader set of tools for RecyclerView management. The choice between the two depends on the specific needs of your project, with BaseRecyclerViewAdapterHelper being more suitable for complex list implementations and ShimmerRecyclerView for projects prioritizing a polished loading experience.
An Android Animation library which easily add itemanimator to RecyclerView items.
Pros of recyclerview-animators
- Offers a wide variety of pre-built animations for RecyclerView items
- Supports custom animations for add, remove, and change operations
- Easy to implement with minimal code changes
Cons of recyclerview-animators
- Focused solely on animations, lacking shimmer effect functionality
- May require additional customization for complex loading states
- Potentially higher performance overhead for complex animations
Code Comparison
ShimmerRecyclerView:
ShimmerRecyclerView shimmerRecycler = findViewById(R.id.shimmer_recycler_view);
shimmerRecycler.showShimmerAdapter();
recyclerview-animators:
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setItemAnimator(new SlideInLeftAnimator());
Summary
ShimmerRecyclerView is specifically designed for creating shimmer loading effects in RecyclerViews, making it ideal for displaying loading states. On the other hand, recyclerview-animators provides a broader range of animations for RecyclerView items, offering more flexibility for general item animations but lacking built-in shimmer functionality.
ShimmerRecyclerView is more focused and easier to implement for shimmer effects, while recyclerview-animators requires more setup but offers greater versatility for various animation types. The choice between the two depends on whether the primary goal is to create loading effects or to add diverse animations to RecyclerView items.
The bullet proof, fast and easy to use adapter library, which minimizes developing time to a fraction...
Pros of FastAdapter
- More comprehensive and feature-rich library for RecyclerView adapters
- Supports a wide range of item types and layouts out of the box
- Offers advanced features like drag-and-drop, swipe-to-dismiss, and multi-selection
Cons of FastAdapter
- Steeper learning curve due to its extensive feature set
- May be overkill for simple RecyclerView implementations
- Larger library size compared to ShimmerRecyclerView
Code Comparison
ShimmerRecyclerView:
ShimmerRecyclerView shimmerRecycler = findViewById(R.id.shimmer_recycler_view);
shimmerRecycler.showShimmerAdapter();
FastAdapter:
FastAdapter<Item> fastAdapter = FastAdapter.with(items);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setAdapter(fastAdapter);
While ShimmerRecyclerView focuses on providing a shimmer effect for loading states, FastAdapter is a more comprehensive solution for RecyclerView adapters. ShimmerRecyclerView is simpler to implement for basic loading animations, but FastAdapter offers a wider range of features and customization options for complex list implementations.
FastAdapter is better suited for projects requiring advanced RecyclerView functionality, while ShimmerRecyclerView is ideal for those specifically looking to add a shimmer effect to their loading states with minimal setup.
"Favor composition over inheritance" for RecyclerView Adapters
Pros of AdapterDelegates
- Promotes a more modular and flexible approach to RecyclerView adapters
- Easier to maintain and extend complex list structures
- Supports composition over inheritance, allowing for better code organization
Cons of AdapterDelegates
- Requires more initial setup and boilerplate code
- May have a steeper learning curve for developers new to the concept
- Potentially overkill for simple list structures
Code Comparison
ShimmerRecyclerView:
class MyAdapter : ShimmerAdapter<MyViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
// Create and return ViewHolder
}
override fun onBindViewHolder(holder: MyViewHolder, position: Int) {
// Bind data to ViewHolder
}
}
AdapterDelegates:
class MyAdapterDelegate : AdapterDelegate<List<Any>>() {
override fun isForViewType(items: List<Any>, position: Int): Boolean {
return items[position] is MyItem
}
override fun onCreateViewHolder(parent: ViewGroup): RecyclerView.ViewHolder {
// Create and return ViewHolder
}
override fun onBindViewHolder(items: List<Any>, position: Int, holder: RecyclerView.ViewHolder, payloads: List<Any>) {
// Bind data to ViewHolder
}
}
Epoxy is an Android library for building complex screens in a RecyclerView
Pros of Epoxy
- More comprehensive solution for building complex RecyclerViews
- Supports automatic diffing and efficient updates
- Provides a powerful DSL for building and composing view holders
Cons of Epoxy
- Steeper learning curve due to its complexity
- Requires more setup and configuration
- May be overkill for simpler RecyclerView implementations
Code Comparison
ShimmerRecyclerView:
shimmerRecyclerView.showShimmerAdapter()
shimmerRecyclerView.hideShimmerAdapter()
Epoxy:
class MyEpoxyController : EpoxyController() {
override fun buildModels() {
// Define and add models here
}
}
Key Differences
- ShimmerRecyclerView focuses specifically on adding shimmer effects to RecyclerViews
- Epoxy is a more comprehensive solution for building complex RecyclerViews with various view types
- ShimmerRecyclerView is easier to implement for simple shimmer effects
- Epoxy offers more flexibility and power for complex list structures
Use Cases
ShimmerRecyclerView:
- Quick implementation of loading effects in RecyclerViews
- Simple list structures with uniform item types
Epoxy:
- Complex RecyclerViews with multiple view types
- Lists requiring efficient updates and diffing
- Applications needing a scalable solution for building RecyclerViews
Flexible multiple types for Android RecyclerView.
Pros of MultiType
- More flexible and versatile for handling multiple view types in RecyclerView
- Simpler API and less boilerplate code for registering and binding view types
- Better support for modular and reusable components in complex lists
Cons of MultiType
- Lacks built-in shimmer effect for loading states
- Requires more setup for simple lists with a single view type
- May have a steeper learning curve for developers new to the concept
Code Comparison
MultiType:
class ImageViewBinder : ItemViewBinder<Image, ImageViewBinder.Holder>() {
override fun onCreateViewHolder(inflater: LayoutInflater, parent: ViewGroup): Holder {
return Holder(inflater.inflate(R.layout.item_image, parent, false))
}
override fun onBindViewHolder(holder: Holder, item: Image) {
holder.imageView.setImageResource(item.resId)
}
class Holder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val imageView: ImageView = itemView.findViewById(R.id.image)
}
}
ShimmerRecyclerView:
class MyAdapter : RecyclerView.Adapter<MyAdapter.ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
return ViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false))
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
// Bind data to views
}
class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
// Define views
}
}
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
ShimmerRecyclerView
Intro
A custom recycler view with shimmer views to indicate that views are loading. The recycler view has a built-in adapter to control the shimmer appearance and provide two methods -
-
showShimmerAdapter() - set up a demo adapter a predefined number of child demo views.
-
hideShimmerAdapter() - restores your adapter to show the actual child elements.
Demo Screen
There are two kinds of shimmer animation which you can see here:
- This type of shimmer effect uses the whole ViewHolder item to animate on.
List Demo | Grid Demo |
---|---|
- Here the shimmer effect only applied on for those views which background color is nontransparent.
List Demo | Grid Demo |
---|---|
Shimmer effect types
-
As you can see the first demo examples show that the whole ViewHolder item is animated. To achieve the desired effect, the children of the ShimmerLayout should have a nontransparent background.
-
You can achieve the second kind of shimmer effect by adding only one ViewGroup child to the ShimmerLayout with a transparent background. This ViewGroup will have the other views with nontransparent backgrounds on which the effect will be seen.
You may wonder how can you add background to the root view of the ViewHolder, if you do not have direct access to the ShimmerLayout and the only child has a nontransparent background. The solution for this is to use the
shimmer_demo_view_holder_item_background
attribute.
Attributes and Methods
Following are the attributes and methods to initialise the demo views.
XML Attributes | Java Methods | Explanation |
---|---|---|
app:shimmer_demo_child_count | setDemoChildCount(int) | Integer value that sets the number of demo views should be present in shimmer adapter. |
app:shimmer_demo_layout | setDemoLayoutReference(int) | Layout reference to your demo view. Define your my_demo_view.xml and refer the layout reference here. |
app:shimmer_demo_layout_manager_type | setDemoLayoutManager(LayoutManagerType) | Layout manager of demo view. Can be one among linear_vertical or linear_horizontal or grid. |
app:shimmer_demo_shimmer_color | - | Color reference or value. It can be used to change the color of the shimmer line. |
app:shimmer_demo_angle | - | Integer value between 0 and 30 which can modify the angle of the shimmer line. The default value is zero. |
app:shimmer_demo_mask_width | setDemoShimmerMaskWidth(float) | Float value between 0 and 1 which can modify the width of the shimmer line. The default value is 0.5. |
app:shimmer_demo_view_holder_item_background | - | Color or an xml drawable for the ViewHolder background if you want to achieve the second type of shimmer effect. |
app:shimmer_demo_reverse_animation | - | Defines whether the animation should be reversed. If it is true, then the animation starts from the right side of the View. Default value is false. |
Usage
Define your xml as:
<com.cooltechworks.views.shimmer.ShimmerRecyclerView
xmlns:app="http://schemas.android.com/apk/res-auto"
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_grid_child_count="2"
app:shimmer_demo_layout="@layout/layout_demo_grid"
app:shimmer_demo_layout_manager_type="grid"
app:shimmer_demo_angle="20"
/>
where @layout/layout_demo_grid
refers to your sample layout that should be shown during loading spinner. Now on your activity onCreate, initialize the shimmer as below:
ShimmerRecyclerView shimmerRecycler = (ShimmerRecyclerView) findViewById(R.id.shimmer_recycler_view);
shimmerRecycler.showShimmerAdapter();
Adding to your project
- Add the following configuration in your build.gradle file.
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
dependencies {
implementation 'com.github.sharish:ShimmerRecyclerView:v1.3'
}
Developed By
- Harish Sridharan - harish.sridhar@gmail.com
Used libraries
- ShimmerLayout: the library which achieves the shimmer effect in a memory efficient way.
License
The repo is released under following licenses
Apache License for ShimmerRecycler
Apache License for ShimmerLayout
Top Related Projects
BRVAH:Powerful and flexible RecyclerAdapter
An Android Animation library which easily add itemanimator to RecyclerView items.
The bullet proof, fast and easy to use adapter library, which minimizes developing time to a fraction...
"Favor composition over inheritance" for RecyclerView Adapters
Epoxy is an Android library for building complex screens in a RecyclerView
Flexible multiple types for Android RecyclerView.
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