How to make buttons rounded with Material Design Theming?

Question

I want my button to have rounded corners like:

// Image taken from google

To achieve this with material theming in android is to set the: shapeAppearanceSmallComponent to have a rounded corner.

But setting shapeAppearanceSmallComponent also affects all other components such as EditText so now they are rounded as well.

So instead of setting it to shapeAppearanceSmallComponent, I created a shapeMaterialOverlay. Set this overlay to a buttonStyle and set this button style in the theme as the default button style.

It works but only for default buttons. If I needed a TextButton as such:

<Button
    ...
    style="@style/Widget.MaterialComponents.Button.TextButton"/>

The TextButton won't be rouned. So as a workaround, I created MyTextButton style which extends from TextButton and set the shapeOverlay there as well.

so Now if I need a TextButton, I'll do:

<Button
    ...
    style="@style/Widget.MaterialComponents.Button.MyTextButton"/>

instead.

I will have to do this for all other button types. I was wondering whether this approach is correct and if not, can anyone guide me on how to properly do this?

Thank you very much.

Please use Google document for `Shape Theming ` --- https://material.io/develop/android/theming/shape/ — Dickens A S, Apr 06 '20 at 07:35
@DickensAS the documentation doesn't actually include the scenario I presented above. — Archie G. Quiñones, Apr 06 '20 at 13:12
it is there `4dp` under the title `Using shapeAppearance in the theme` — Dickens A S, Apr 06 '20 at 15:08

Gabriele Mariotti · Accepted Answer · 2020-04-06T08:12:02.910

7

Just use the app:shapeAppearanceOverlay attribute in the layout.

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

with:

  <style name="buttomShape">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

The only way to apply it to all buttons is to define custom styles for all the button styles as you are just doing. Something like:

  <style name="...." parent="Widget.MaterialComponents.Button">
    <item name="shapeAppearance">@style/buttomShape</item>
  </style>

  <style name="..."  parent="Widget.MaterialComponents.Button.TextButton">
    <item name="shapeAppearance">@style/buttomShape</item>
  </style>

edited Apr 06 '20 at 08:12

answered Apr 06 '20 at 07:48

Gabriele Mariotti

320,139
94
887
841

That's exactly what I did as well (as I described above). I was wondering if that was the correct thing to do or is there a better way. – Archie G. Quiñones Apr 06 '20 at 13:11
@ArchieG.Quiñones For my experience there isn't a shapeAppearance attribute in the theme dedicated only for buttons. – Gabriele Mariotti Apr 06 '20 at 13:27
ok then. Will probably accept your answer if no one else answer the question with a better one. – Archie G. Quiñones Apr 06 '20 at 14:48

score -1 · Answer 2 · answered Apr 06 '20 at 07:34

-1

You can set a background drawable on your button. The drawable could look like this:

<shape android:shape="rectangle">
    <solid android:color="@android:color/blue" />
    <corners android:radius="10dp" />
</shape>

This will give you rounded corners for your button background.

answered Apr 06 '20 at 07:34

Marco7757

735
9
16

1

outdated way to do a rounded button. – Archie G. Quiñones Apr 06 '20 at 13:08
"All attributes from MaterialButton are supported. Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior." - Android Docs – Umair Ayub Jan 02 '21 at 18:46

score -1 · Answer 3 · answered Apr 06 '20 at 08:08

-1

You know there is a site for creating custom layouts for buttons here is the Link

it is a auto generated Code you don't have to code. Maybe it will be helpful for everyone

answered Apr 06 '20 at 08:08

Flying Dutchman

365
6
13

1

Outdated way to make a rounded button. – Archie G. Quiñones Apr 06 '20 at 13:09
"All attributes from MaterialButton are supported. Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior." - Android Docs – Umair Ayub Jan 02 '21 at 18:47

score -2 · Answer 4 · answered Apr 06 '20 at 07:41

-2

Create a drawable xml file

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <stroke
        android:color="@color/colorPrimary"
        android:width="1dp" />
    <corners
        android:radius="30dp"
        android:bottomLeftRadius="30dp"
        />
    <solid
        android:color="#4c95ec"

        />

</shape>

answered Apr 06 '20 at 07:41

Wahdat Jan

3,988
3
21
46

1

this is the outdated way to do a rounded button – Archie G. Quiñones Apr 06 '20 at 13:08
you should devote my answer if its wrong or not working, there is no way to say that this is outdated – Wahdat Jan Apr 06 '20 at 15:13
1

if you haven't noticed yet, I already down voted it. And YES, it is outdated :) – Archie G. Quiñones Apr 06 '20 at 16:34
i mean you should not – Wahdat Jan Apr 06 '20 at 17:12
"All attributes from MaterialButton are supported. Do not use the android:background attribute. MaterialButton manages its own background drawable, and setting a new background means MaterialButton can no longer guarantee that the new attributes it introduces will function properly. If the default background is changed, MaterialButton cannot guarantee well-defined behavior." - Android Docs – Umair Ayub Jan 02 '21 at 18:48

How to make buttons rounded with Material Design Theming?

4 Answers4

Linked