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