How to create a circular outlined Material Button in Android?

Question

I am trying to create a button with an icon in the center. The top and bottom part of the circle are a little flat. Is there a way to do this without using corner radius? Here is my layout for the button.

<com.google.android.material.button.MaterialButton         android:id="@+id/start_dispenser_btn"         style="@style/Widget.MaterialComponents.Button.OutlinedButton"         android:layout_width="175dp"         android:layout_height="175dp"         android:padding="14dp"         app:cornerRadius="150dp"         app:icon="@drawable/ic_play_arrow_black_60dp"         app:iconGravity="end"         app:iconSize="150dp"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintEnd_toStartOf="@+id/stop_dispenser_btn"         app:layout_constraintStart_toStartOf="parent"         app:layout_constraintTop_toBottomOf="@+id/test_dispenser_container"         app:strokeColor="@color/background_black" /> 

Answer 1

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 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")     } 

Answer 2

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"/>