Progress indicators on Button in Android

Question

I am using Material Design Button in Android project. I want to have the create a Progress Indicator on button when it's pressed. It seems that the Material Design doesn't have the support yet for it.

Does anyone have suggestion how can I achieve the same in Material Design Button.

Thanks

Answer 1

I don't think there any material component is available according to your need, but making a custom layout for the same is very easy, you can use constraint layout and place views accordingly. For example, you can give constraints to the progressbar so that it will be in the middle of your button. Try the following and check if it serves your purpose.

 <androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

      <com.google.android.material.button.MaterialButton
            android:id="@+id/button_accept"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/dimen_24"
            android:layout_marginEnd="@dimen/dimen_24"
            android:backgroundTint="@color/colorGreen2"
            android:elevation="8dp"
            android:padding="@dimen/dimen_4"
            android:src="@drawable/ic_check_white"
            android:text="Accept"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ProgressBar
            android:id="@+id/progress_bar_accept"
            android:layout_width="@dimen/dimen_32"
            android:layout_height="@dimen/dimen_32"
            android:elevation="8dp"
            android:indeterminate="true"
            android:indeterminateTint="@color/colorWhite"
            android:indeterminateTintMode="src_in"
            android:visibility="gone"
            app:layout_constraintBottom_toBottomOf="@+id/button_accept"
            app:layout_constraintEnd_toEndOf="@+id/button_accept"
            app:layout_constraintStart_toStartOf="@+id/button_accept"
            app:layout_constraintTop_toTopOf="@+id/button_accept"/>

 </androidx.constraintlayout.widget.ConstraintLayout>

And now handle visibility of the progressbar by maintaining some logic like using flags to keep the state of it.

If you need to know about constraint layout, you can check it here: https://developer.android.com/reference/android/support/constraint/ConstraintLayout

Hope this helps.