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>

enter image description here

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

enter image description here

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

enter image description here

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)