SkeletonLayout Documentation

In Java, use SkeletonLayoutUtils to create or apply skeletons. Use createSkeleton() for general views and applySkeleton() for RecyclerView or ViewPager2. Use showSkeleton() to start the loading state and showOriginal() to hide it.

public class MainActivity extends AppCompatActivity {
    
    private Skeleton skeleton;
    
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // Either use an existing Skeletonlayout
        skeleton = findViewById(R.id.skeletonLayout);
        
        // or create a new SkeletonLayout from a given View
        skeleton = SkeletonLayoutUtils.createSkeleton(view);

        // and customize every detail including the layout used for the skeleton mask
        skeleton = SkeletonLayoutUtils.createSkeleton(view, SkeletonConfig.Companion.defaults(this, R.layout.custom_mask));

        // support ViewPager2
        skeleton = SkeletonLayoutUtils.applySkeleton(viewPager2, R.layout.list_item_viewpager2);

        // support RecyclerView
        skeleton = SkeletonLayoutUtils.applySkeleton(recyclerView, R.layout.list_item_recyclerview);

        skeleton.showSkeleton();
    }
    
    // Example callback that hides skeleton
    private void onDataLoaded() {
        skeleton.showOriginal();
    }
}

You can use SkeletonLayout in Kotlin by either finding an existing SkeletonLayout in your view hierarchy or creating a new one from an existing View using the createSkeleton() extension function. For RecyclerView and ViewPager2, use the applySkeleton() extension function.

To toggle the view, use showSkeleton() to display the loading state and showOriginal() to return to the actual content once data is loaded.

class MainActivity : AppCompatActivity() {

    private lateinit var skeleton: Skeleton

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Either use an existing Skeletonlayout
        skeleton = findViewById(R.id.skeletonLayout)

        // or create a new SkeletonLayout from a given View
        skeleton = view.createSkeleton()

        // and customize every detail including the layout used for the skeleton mask
        skeleton = view.createSkeleton(config = SkeletonConfig.default(this, maskLayout = R.layout.custom_mask))
        
        // support ViewPager2
        skeleton = viewPager2.applySkeleton(R.layout.list_item_viewpager2)

        // support RecyclerView
        skeleton = recyclerView.applySkeleton(R.layout.list_item_recyclerview)
        
        skeleton.showSkeleton()
    }

    // Example callback that hides skeleton
    private fun onDataLoaded() {
        skeleton.showOriginal()
    }
}

You can customize the appearance and behavior of the skeleton using the following properties:

The SkeletonConfig class allows you to define the visual style and animation behavior of the skeleton layout. It implements the SkeletonStyle interface and supports both shimmer and pulse animations. You can create a configuration using the SkeletonConfig.default(context) factory method to start with standard library defaults, or instantiate it directly to customize all parameters.

Because properties in SkeletonConfig use observable delegates, you can register a callback using addValueObserver(onValueChanged: () -> Unit) to react whenever any configuration property is updated.

// Create a default configuration
val config = SkeletonConfig.default(context)

// Register an observer to react to changes
config.addValueObserver {
    // Update UI or re-apply skeleton if needed
}

// Customize properties
config.maskColor = Color.RED
config.showShimmer = true
config.pulseMinAlpha = 0.3f

The following properties are available in SkeletonConfig to control the skeleton's appearance and animation behavior: