Using Shimmer To Show Progress

Using Progress Bar

As you can see below image, a progress bar shows the loading state of data.

<ProgressBar
android:id="@+id/pb_progress_bar"
android:layout_width="36dp"
android:layout_gravity="center"
android:layout_height="36dp"/>
pb_progress_bar.isVisible = true
pb_progress_bar.isVisible = false

Using Shimmer

From below image you can see how we can make loading state beautiful.

  1. In your build.gradle just add
implementation 'io.supercharge:shimmerlayout:2.1.0'
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto">


<androidx.cardview.widget.CardView
android:id="@+id/cv_rest"
android:layout_width="match_parent"
android:layout_margin="16dp"
app:cardCornerRadius="16dp"
android:background="@color/shimmer"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:layout_height="180dp">

<View
android:id="@+id/iv_restaurant"
android:layout_width="match_parent"
android:background="@color/shimmer"
android:layout_height="match_parent"/>

</androidx.cardview.widget.CardView>

<View
android:id="@+id/tv_rest_name"
android:layout_width="match_parent"
android:maxLines="1"
android:ellipsize="end"
android:background="@color/shimmer"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="8dp"
android:layout_height="24sp"/>

<View
android:layout_width="160dp"
android:maxLines="1"
android:ellipsize="end"
android:background="@color/shimmer"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="8dp"
android:layout_height="24sp"/>

<View
android:layout_width="160dp"
android:maxLines="1"
android:ellipsize="end"
android:background="@color/shimmer"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="8dp"
android:layout_height="24sp"/>

<View
android:layout_width="160dp"
android:maxLines="1"
android:ellipsize="end"
android:background="@color/shimmer"
android:layout_marginHorizontal="16dp"
android:layout_marginTop="8dp"
android:layout_height="24sp"/>


</LinearLayout>
<color name="shimmer">#16000000</color>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<io.supercharge.shimmerlayout.ShimmerLayout
android:id="@+id/shimmer_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<LinearLayout
android:id="@+id/ll_loading_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<include layout="@layout/shimmer_loading_layout" />

<include layout="@layout/shimmer_loading_layout" />

</LinearLayout>
</io.supercharge.shimmerlayout.ShimmerLayout>
</LinearLayout>
ll_loading_view.isVisible = true
recyclerview.isVisible = false
shimmer_view.startShimmerAnimation()
ll_loading_view.isVisible = false
recyclerview.isVisible = true
shimmer_view.stopShimmerAnimation()

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gaurav Rajput

Gaurav Rajput

Working remotely as Android Developer