CODEWITHSUNDEEP
androidmaterial-designandroid-buttonmaterial-components-androidmaterial-components
AndroidDev123
AndroidDev123

Reputation: 370

Android create custom button with one rounded corner

enter image description here

I would like to implement the black button from this image taken from material.io which is used to expand the bottom sheet. The content of the button is not important its achieving the one rounded corner. When trying to set the corner radius I only have the ability to round all 4 corners not one individual corner. Could someone please advise how they did this? They dont provide any example of this button on that website.

I have this so far which does not work:

 <com.google.android.material.button.MaterialButton
            android:id="@+id/btnBottomSheetGratitude"
            android:layout_width="wrap_content"
            android:layout_height="55dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:gravity="center_vertical"
            android:text="Examples"
            android:background="@drawable/btn_bottom_sheet"
            app:icon="@drawable/ic_baseline_arrow_drop_up_24"
            app:iconPadding="4dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:topLeftRadius="1000dp" />
<solid android:color="@color/white" />
</shape>

Upvotes: 2

Views: 1586

Answers (4)

Ramiz Raja
Ramiz Raja

Reputation: 310

The android:background attribute will not work with MaterialButton as it uses it internally. I think they have made it possible to change it in the newest alpha version of the library but not in the stable versions, yet. So here is how you are going to do it.

First, make sure that your app theme is inheriting from the Material Theme so that we can use all of the material attributes (you can use any of the material themes).

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
...
</style>

Now, define a style for the ShapeAppearance of the MaterialButton.

<style name="shapeAppearance">
    <item name="cornerSizeTopLeft">20dp</item>
</style>

Finally, use it in your XML code where you are defining the button.

<com.google.android.material.button.MaterialButton
            android:id="@+id/loginButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/Widget.MaterialComponents.Button"
            app:shapeAppearance="@style/shapeAppearance"
            android:text="@string/main_fragment_login_label"/>

Now your button should look like below, which is exactly what you are looking for.

enter image description here

Upvotes: 0

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

You can use the shapeAppearanceOverlay attribute:

    <com.google.android.material.button.MaterialButton
        android:insetTop="0dp"
        android:insetBottom="0dp"
        app:shapeAppearanceOverlay="@style/one_rounded"
        app:icon="@drawable/ic_add_24px"
        app:iconPadding="4dp"
      />

with:

<style name="one_rounded">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
    <item name="cornerSizeTopLeft">50%</item>
</style>

enter image description here

Upvotes: 4

Fabio
Fabio

Reputation: 113

Using Material Button:

Define a style in your styles.xml

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

<style name="MyShapeAppearance">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerFamilyBottomLeft">cut</item>
    <item name="cornerSizeTopLeft">10dp</item>
</style>

And then use this style in your MaterialButton. For more info, see the docs or an usage example.

Normal Button:

You can use a ShapeDrawable as a background for the button, for example:

bg_button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="#ff000000"/>

    <corners android:topLeftRadius="10dp"/>
</shape>

Then in your layout:

<Button
    android:id="@+id/cornerButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_button"
    ... />

Upvotes: 0

Ala&#39;a Eng
Ala&#39;a Eng

Reputation: 45

I don't know what exactly you tried, but Try it like this:

android:topLeftRadius="10dp"

Upvotes: 0

Related Questions