Convert Figma logo to code with AI

ethanhua logoSkeleton

A library provides an easy way to show skeleton loading view like Facebook and Alipay

3,668
454
3,668
29

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

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

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

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

  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.ethanhua:Skeleton:1.1.2'
}
  1. Sync your project with Gradle files.

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

Skeleton(Deprecated)

GitHub license
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

img img img img

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

https://github.com/team-supercharge/ShimmerLayout