Circular Progress Indicator inside Buttons, Android Material design-CodePudding

I have just read that buttons (MaterialButton) (

Bassically when you press the button remove text and show a progress indicator, but there is no clue about how to implement it, does anybody already deal with it?

it will be really appreciate any hint. Thanks

CodePudding user response：

One of the ways this can be achieved is to create a Layout where you'll have a container and place both the button and the CircularProgressIndicator

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/some_height"
        android:background="#00000000"
        android:layout_marginRight="@dimen/margin_right"
        android:layout_marginLeft="@dimen/margin_left">

        <Button
            android:id="@ id/btn_download"
            android:layout_width="match_parent"
            android:layout_height="@dimen/some_height"
            android:text="Download"
            android:layout_gravity="center"
            android:visibility="visible"
            android:textColor="#FFFFFF"/>

     
    <com.google.android.material.progressindicator.CircularProgressIndicator
            android:id="@ id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </FrameLayout>

Then you would just toggle the visibility of the progress bar and remove the text.

Another way is to use custom animation drawable. You would then add this to your button as a drawableStart or drawableEnd with some positioning, or perhaps even as a background.

3rd option would be, as per: https://stackoverflow.com/a/65180647/13187710

BTW, in the xml code above, you can substitute Button with MaterialButton.