How can I change the button radius in Material Design 3?

June 27, 2022

Google tells me I can change the button radius as you can see in the image below but not explain how

I want to change from rounded full (7) to rounded small (3) as you can see in the image below

Here is the button

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:insetLeft="0dp"
        android:insetTop="0dp"
        android:insetRight="0dp"
        android:insetBottom="0dp"
        android:text="..." />

>Solution :

You need to use app:cornerRadius="10dp" property of MaterialButton to apply cornerRadius

<com.google.android.material.button.MaterialButton
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:insetLeft="0dp"
  android:insetTop="0dp"
  android:insetRight="0dp"
  android:insetBottom="0dp"
  app:cornerRadius="10dp"
  android:text="..." />

and if you want cut in border-radius then please try this

Create style like this

<style name="ShapeAppearance.MyApp.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">10dp</item> // change cornerSize as per your requiremnt 
 </style>

Then apply this style in your button like this

<com.google.android.material.button.MaterialButton
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      app:layout_constraintBottom_toBottomOf="parent"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:insetLeft="0dp"
      android:insetTop="0dp"
      android:insetRight="0dp"
      android:insetBottom="0dp"
      android:layout_margin="30dp"
      android:padding="30dp"
      app:shapeAppearanceOverlay="@style/ShapeAppearance.MyApp.SmallComponent"
      android:text="..."
      />

OUTPUT