How to make buttons rounded with Material Design Theming?

user_9291997 0
Viewed 4681

I want my button to have rounded corners like:

Rounded Button // 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.

material-components material-components-android material-design android-button android
4 Answers

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>

enter image description here

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>
user_20165620

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.

user_11395140

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

enter image description here

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

user_128309570

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>
user_82050990
Related