Setting perfectly circular rounded corners on a MaterialButton in XML

Issue

So I have been trying to find a way to make a MaterialButton from the Material Components library have perfectly rounded corners. What I mean by this is effectively they have a corner size of 50% the height of the button.

In some of the documentation it indicates that this should be possible with the quote below.

Shape size can be determined using a value that is either absolute or a percentage.

I have a couple of working solutions, firstly measuring the view and setting the corner size that way, but then I discovered that the ExtendedFloatingActionButton uses a RelativeCornerSize object.

However, I still cannot find a solution in XML.

Solution

You can use the shapeAppearanceOverlay attribute.

<com.google.android.material.button.MaterialButton
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.Button.50"
    .../>

with:

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

You can use an absolute or a percentage value.

Answered By - Gabriele Mariotti