In Android how do you create a button with a progress bar going around it as per Material IO Guidanc-CodePudding

I want to make a button which has an indeterminate progress bar around it's outside,

Based upon the available widgets, I cannot see how to make a circular button with this progress bar on it's outside.

At this point, I have my floating action button:

 <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@ id/floatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:src="?android:attr/actionModeWebSearchDrawable" />

With no progress bar! Please help.

Note the right hand is the suggested answer. Left hand is the style of button I am aiming for.

My code is :

            <com.google.android.material.progressindicator.CircularProgressIndicator
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:progress="50"
                app:indicatorColor="@color/colorAccent"
                app:trackColor="@color/colorPrimary"
                app:trackThickness="2dp"
                />
            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardBackgroundColor="?attr/colorSecondary"
                app:cardCornerRadius="24dp"
                android:layout_gravity="center"
                app:cardPreventCornerOverlap="true">

                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:src="?android:attr/actionModeWebSearchDrawable"/>
            </androidx.cardview.widget.CardView>

        </FrameLayout>
    </LinearLayout>

Basically the left hand button is slightly larger with slightly smaller search image -- can you help me edge closer to this, I have tried playing but can't quite get the sizing right. I thought adding padding would help but doesn't seem to make a difference. I wonder if there is a way to combine your solution with my floating action button - to perhaps get the best of both worlds more easily?

CodePudding user response：

Instead of Floating button maybe you can try it this way with Frame Layout and CardView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

    <com.google.android.material.progressindicator.CircularProgressIndicator
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:progress="50"
            app:indicatorColor="@color/colorAccent"
            app:trackColor="@color/colorPrimary"
            app:trackThickness="2dp"
            />
    <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardCornerRadius="25dp"
            android:layout_gravity="center"
            app:cardPreventCornerOverlap="true">

        <ImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:src="@drawable/app_top_logo"/>
    </androidx.cardview.widget.CardView>

</FrameLayout>
</LinearLayout>