Setting perfectly circular rounded corners on a MaterialButton in XML

Question

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.

score 1 · Accepted Answer · answered Jul 01 '20 at 21:16

1

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 Jul 01 '20 at 21:16

Gabriele Mariotti

250,295
77
670
690

1

This works great thank you, for some reason this does not display at all in the layout preview but works at runtime, so I think I discarded a similar solution too quickly! – Henry Twist Jul 01 '20 at 22:05
If it have help you drop a upvote as well ;) – dreamcrash Mar 15 '21 at 16:20

score 0 · Answer 2 · answered Jun 30 '20 at 01:10

0

There are specific commands with Material Design.

I could not explain it better than this answer

It works with Android Studio 3.1 or higher

answered Jun 30 '20 at 01:10

codearn19

136
9

Thanks for your answer, I do not see however any mention of setting corner radius as a percentage? They seem to still use hard coded values. – Henry Twist Jun 30 '20 at 23:04
Are you using Kotlin or Java? – codearn19 Jul 01 '20 at 19:30
Kotlin, although I am comfortable with both! – Henry Twist Jul 01 '20 at 19:55
Kotlin has its own function I believe to use percentage. Check this out: https://developer.android.com/reference/kotlin/androidx/ui/foundation/shape/corner/RoundedCornerShape – codearn19 Jul 01 '20 at 20:31

Setting perfectly circular rounded corners on a MaterialButton in XML

2 Answers2