Shimmer impact in Android: Tutorial

Greatest solution to present loading indicator

Shimmer impact in Android gives a chic resolution to the loading display screen. With the deprecation of Android ProgressDialog in APIv26, Google discouraged the utilization of UI blocking loading widgets which forestall the person from interacting with the app, e.g. navigating again, whereas its content material is loading. As options, they advised the utilization of ProgressBar and Notification. However, Notification message is displayed exterior your app’s UI and ProgressBar doesn’t at all times match your app’s native design or UI and needs to be custom-made so much.

To reinforce the person expertise Fb constructed an Android library named Shimmer, that gives a straightforward means so as to add a shimmering impact to your UI whereas the content material is being loaded. You’ll be able to see this impact nearly in every single place because it has change into a normal amongst UI designers.
[one_second]

[/one_second][one_second]

[/one_second]

On this put up we’ll see how we will elegantly deal with the content material loading utilizing Shimmer library. So, let’s dive into the code:

Step 1 : Obtain

Add the next dependency in your undertaking to incorporate Shimmer

// Gradle dependency on Shimmer for Android
        dependencies 
implementation 'com.fb.shimmer:shimmer:0.5.0'
 

!-- Maven dependency on Shimmer for Android --
<dependency>
   <groupId>com.fb.shimmer</groupId>
   <artifactId>shimmer</artifactId>
   <model>0.5.0</model>
</dependency>

Step 2 : Modify your values/colours.xml

Add the next colour in you colours.xml file

<colour title="shimmer_item_color">#808080</colour>

Step 3 : Modify your values/dimens.xml

Add the next dimens in your dimens.xml

<dimen title="imageWidth">74dp</dimen>
<dimen title="imageHeight">74dp</dimen>	
<dimen title="marginStandard">12dp</dimen>
<dimen title="paddingStandard">8dp</dimen>
<dimen title="textSizeHeading">12sp</dimen>
<dimen title="textSizeDescription">10sp</dimen>
<dimen title="shimmerItemHeight">90dp</dimen>

Step 4 : Create a brand new structure file

<?xml model="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/_90sdp">

<ImageView
android:id="@+id/iv"
android:layout_width="@dimen/imageWidth"
android:layout_height="@dimen/imageWidth"
android:layout_marginStart="@dimen/marginStandard"
android:layout_marginEnd="@dimen/marginStandard"
android:background="@colour/shimmer_item_color"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="father or mother"
app:layout_constraintStart_toStartOf="father or mother"
app:layout_constraintTop_toTopOf="father or mother" />

<TextView
android:id="@+id/titleTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/paddingStandard"
android:layout_marginEnd="@dimen/paddingStandard"
android:background="@colour/shimmer_item_color"
android:textSize="@dimen/textSizeHeading"
app:layout_constraintBottom_toTopOf="@id/desTv"
app:layout_constraintEnd_toEndOf="father or mother"
app:layout_constraintStart_toEndOf="@id/iv"
app:layout_constraintTop_toTopOf="@id/iv" />

<TextView
android:id="@+id/desTv"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@colour/shimmer_item_color"
android:strains="2"
android:textSize="@dimen/textSizeDescription"
app:layout_constraintBottom_toBottomOf="@id/iv"
app:layout_constraintEnd_toEndOf="@id/titleTv"
app:layout_constraintStart_toStartOf="@id/titleTv"
app:layout_constraintTop_toBottomOf="@id/titleTv" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 5 : Modify your current recordsdata

In your structure file, the place you need to present the shimmer impact, add the next code on the very backside:

<com.fb.shimmer.ShimmerFrameLayout
    android:id="@+id/shimmerLoadingView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="heart"
    android:orientation="vertical"
    shimmer:period="800">
    <!-- Including 7 rows of placeholders -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
<embody structure="@structure/shimmer" />
<embody structure="@structure/shimmer" />
<embody structure="@structure/shimmer" />
<embody structure="@structure/shimmer" />
<embody structure="@structure/shimmer" />
<embody structure="@structure/shimmer" />
<embody structure="@structure/shimmer" />
</LinearLayout>
</com.fb.shimmer.ShimmerFrameLayout>

In your Java file, the place the above talked about structure file is ready as content material view, add the next code:

pirvate ShimmerFrameLayout shimmerLoadingView;

@Override
protected void onCreate(Bundle savedInstanceState) 
    tremendous.onCreate(savedInstanceState);
    setContentView(R.structure.layout_file_name);
    shimmerLoadingView = findViewById(R.id.shimmerLoadingView);
    loadData();

@Override
public void onDataAvailable(Information information) {
    shimmerLoadingView.stopShimmerAnimation();
    shimmerLoadingView.setVisibility(View.GONE);
    //deal with/load your information into your UI parts

@Override
public void onResume() 
    tremendous.onResume();
    shimmerLoadingView.startShimmerAnimation();


@Override
protected void onPause() 
    shimmerLoadingView.stopShimmerAnimation();
    tremendous.onPause();

All our apps include Shimmer impact inbuilt. Don’t hesitate to debate your app undertaking.