Android skeleton loading examples 2023

by Codeplayon · Published June 29, 2023 · Updated June 29, 2023

Hi Android developer in this android blog we are learn about the Android skeleton loading example. like your can show animation on ui till now API not getting response like Facebook, Instagram, LinkedIn etc more Apps using like these type of progress loading.

android skeleton View design till the view gets loaded

Table of Contents

How to create this type of layout while loading content? So lets learn about this like in your App you have using any API call for getting date for to server. there so many type of progress bar using in different different App as requirement.

In this android skeleton loading I am using a dependencies name AGSkeletonLoading add below dependencies in your app build.gradle and sync your project. AG Skeleton Loading is a library to provide a easy way to include skeleton loading.

implementation 'com.github.AgnaldoNP:AGSkeletonLoading:1.2'

You can use android skeleton loading by replace an view and view group layout for it correspondent on this library. let’s make an example by using a SkeletonRelativeLayout souce code for your XML file.

<aglibs.loading.skeleton.layout.SkeletonRelativeLayout
android:id="@+id/skeletonLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
app:clipToText="false">

<ImageView
    android:id="@+id/img001"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:src="@drawable/ic_email" />

<TextView
    android:id="@+id/text001"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_marginStart="8dp"
    android:layout_marginTop="2dp"
    android:layout_toEndOf="@+id/img001"
    android:text="Lorem Ipsum is simply dummy text" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:layout_below="@+id/text001"
    android:layout_toEndOf="@+id/img001"
    android:text="Lorem Ipsum Text" />

</aglibs.loading.skeleton.layout.SkeletonRelativeLayout>

After adding Above code in your xml file add below code to your java call to run the animation,

SkeletonRelativeLayout skeletonLayout;

On Create

skeletonLayout =rootView.findViewById(R.id.skeletonLayout);
skeletonLayout.isLoading();

Add whare you can start loading 
skeletonLayout.startLoading();

Add whare you can Stop loading 
skeletonLayout.stopLoading();

splitSkeletonTextByLines

If the layout or some inner layout is an EditText, it defines if the skeleton considers each line to be drawn or if its drawn as only one rectangle

 <aglibs.loading.skeleton.view.SkeletonTextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_marginBottom="20dp"
     android:lineSpacingExtra="4dp"
     android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
     app:splitSkeletonTextByLines="true" />

 <aglibs.loading.skeleton.view.SkeletonTextView
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:lineSpacingExtra="4dp"
     android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
     app:splitSkeletonTextByLines="false" />

SkeletonListView and SkeletonRecyclerView

If you want to build a list using ListView or RecyclerView with a skeleton loading you need to create a layout that represents the item list. Once the layout is created need to reference it by adding skeletonViewHolderItem property, as you can see int the snippet bellow.

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingStart="2dp"
    android:paddingTop="10dp"
    android:paddingEnd="2dp"
    android:paddingBottom="10dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/img017"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_email" />

    <TextView
        android:id="@+id/text016"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="2dp"
        android:layout_toEndOf="@+id/img017"
        android:text="Lorem Ipsum is simply dummy text" />

    <TextView
        android:id="@+id/text015"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text016"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_toEndOf="@+id/img017"
        android:text="Lorem Ipsum Text" />

</RelativeLayout>

Add list item into layout.

<aglibs.loading.skeleton.layout.SkeletonListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:skeletonViewHolderItem="@layout/item_list"/>

<aglibs.loading.skeleton.layout.SkeletonRecyclerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:skeletonViewHolderItem="@layout/item_list"/>