androidandroid-layoutandroid-buttonmaterial-components-androidmaterialbutton

Setting perfectly circular rounded corners on a MaterialButton in XML


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.

    enter image description here