How to create a circular outlined Material Button in Android?

You can use the app:shapeAppearanceOverlay attribute to define the corner size. You can use the 50% value.

<com.google.android.material.button.MaterialButton    android:layout_width="50dp"    android:layout_height="50dp"    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"    app:icon="@drawable/ic_add_24px"    app:iconSize="24dp"    app:iconGravity="textStart"    android:padding="0dp"    app:iconPadding="0dp"    android:insetLeft="0dp"    android:insetTop="0dp"    android:insetRight="0dp"    android:insetBottom="0dp"    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"    />

with:

  <style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">    <item name="cornerFamily">rounded</item>    <item name="cornerSize">50%</item>  </style>

or with the style="@style/Widget.MaterialComponents.Button.Icon"

It requires at least the version 1.1.0.

With jetpack compose 1.0.x you can use the OutlinedButton applying a CircleShape as shape:

    OutlinedButton(onClick = { /* ... */ },        modifier= Modifier.size(50.dp), // it is important otherwise the button is oval        shape = CircleShape,        border= BorderStroke(1.dp, Color.Blue),        contentPadding = PaddingValues(0.dp),        colors = ButtonDefaults.outlinedButtonColors(contentColor =  Color.Blue)    ) {            Icon(Icons.Default.Add, contentDescription = "content description")    }

By using cornerRadius along with inset you can get the rounded shape:

<com.google.android.material.button.MaterialButton    style="@style/Widget.MaterialComponents.Button.OutlinedButton.Icon"    android:layout_width="48dp"    android:layout_height="48dp"    app:cornerRadius="30dp"    android:insetTop="0dp"    android:insetBottom="0dp"    android:insetLeft="0dp"    android:insetRight="0dp"    app:icon="@drawable/ic_menu"/>

my answer is the enhancement of above answers. to build reusable resource :

<style name="ShapeAppearance.MdcShapeAppearance.SmallComponent.OutlinedCircleButton" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">    <item name="android:insetLeft">@dimen/dip_0</item>    <item name="android:insetRight">@dimen/dip_0</item>    <item name="android:insetTop">@dimen/dip_0</item>    <item name="android:insetBottom">@dimen/dip_0</item>    <item name="android:padding">@dimen/dip_0</item>    <item name="iconGravity">textStart</item>    <item name="iconPadding">@dimen/dip_0</item></style>

then, you can use it as button style. don't forget to add app:cornerRadius="@dimen/dip_20" to make it circle with your desired size

<com.google.android.material.button.MaterialButton        android:id="@+id/btn_plus"        style="@style/ShapeAppearance.MdcShapeAppearance.SmallComponent.OutlinedCircleButton"        android:layout_width="@dimen/dip_20"        android:layout_height="@dimen/dip_20"        app:cornerRadius="@dimen/dip_20"        android:layout_marginEnd="@dimen/dip_16"        app:icon="@drawable/ic_plus"        app:iconTint="?colorOnBackground"        app:layout_constraintBottom_toBottomOf="@id/tv_total_checkout_product"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintTop_toTopOf="@id/tv_total_checkout_product"        app:strokeColor="?colorOnBackground" />