Convert Figma logo to code with AI

sharish logoShimmerRecyclerView

No description available

4,014
551
4,014
18

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

8,494

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

  1. 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" />
  1. 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()
  1. 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

  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}
  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.sharish:ShimmerRecyclerView:v1.3'
}
  1. 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" />
  1. 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
    }
}
8,494

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Android Arsenal Build Status

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:

  1. This type of shimmer effect uses the whole ViewHolder item to animate on.
List DemoGrid Demo
  1. Here the shimmer effect only applied on for those views which background color is nontransparent.
List DemoGrid Demo

Shimmer effect types

  1. 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.

  2. 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 AttributesJava MethodsExplanation
app:shimmer_demo_child_countsetDemoChildCount(int)Integer value that sets the number of demo views should be present in shimmer adapter.
app:shimmer_demo_layoutsetDemoLayoutReference(int)Layout reference to your demo view. Define your my_demo_view.xml and refer the layout reference here.
app:shimmer_demo_layout_manager_typesetDemoLayoutManager(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_widthsetDemoShimmerMaskWidth(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

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