How to draw an indeterminate ProgressBar for material card on android

Viewed 153

I have a list of material cards in my layout as follows and I am trying to load data from backend, while loading I would like to show a progress bar. I have implemented a circular progressbar but would like to implement the loading for items as shown in the image below.

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="6dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="50dp"
        android:layout_height="50dp" />

    <TextView
        android:id="@+id/headingText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/appImage"
        android:paddingLeft="16sp"
        android:paddingRight="16dp"
        android:text="Title"
        android:textColor="#000"
        android:textSize="18sp"
        tools:ignore="RtlHardcoded" />

    <TextView
        android:id="@+id/subHeaderText"
        style="@style/Base.TextAppearance.AppCompat.Subhead"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/headingText"
        android:layout_toRightOf="@+id/appImage"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:text="SubTiltle"
        android:textColor="#000"
        android:textSize="15sp" />
    
</com.google.android.material.card.MaterialCardView>

I have used simple progress bar horizontal and circular but not sure how to draw a progress bar for card loading I have found this https://github.com/zhanghai/MaterialProgressBar but not sure how to use it for my case.

enter image description here

Can anyone point out how to implement such loading?

In general is it possible for any layout to have such loading.

0 Answers
Related