MaterialButton does not get rounded when changing radius

user_13564911 0
Viewed 103

I can't tell if this is an issue with the material library or from my end. I'm trying to show two buttons aligned horizontally. However, the first one is showing as it's supposed to show but the other one is not showing as expected.

Here's how the buttons look in Android Studio's layout editor: (expected behavior)

enter image description here

And this is how it shows on a mobile device: (wrong behavior)

enter image description here

My XML is like this:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="17dp">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_share"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignEnd="@+id/view"
            android:layout_centerHorizontal="true"
            android:layout_marginStart="12dp"
            android:layout_marginEnd="7dp"
            android:layout_marginBottom="10dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="@string/share_btn_txt"
            android:textColor="#FFFFFF"
            android:textSize="14sp"
            app:backgroundTint="#424242"
            app:cornerRadius="@dimen/buttons_corners_radius"
            app:elevation="5dp"
            app:fontFamily="@font/whitney"
            app:icon="@drawable/round_share_white_48dp"
            app:iconGravity="textStart"
            app:rippleColor="#2D2D2D" />

        <View
            android:id="@+id/view"
            android:layout_width="0dp"
            android:layout_height="1dp"
            android:layout_centerHorizontal="true" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btn_download"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/view"
            android:layout_centerHorizontal="true"
            android:layout_marginStart="7dp"
            android:layout_marginEnd="12dp"
            android:layout_marginBottom="10dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="@string/download_btn_txt"
            android:textColor="#FFFFFF"
            android:textSize="14sp"
            app:backgroundTint="@color/colorPrimary"
            app:cornerRadius="@dimen/buttons_corners_radius"
            app:elevation="5dp"
            app:fontFamily="@font/whitney"
            app:icon="@drawable/round_get_app_white_48dp"
            app:iconGravity="textStart"
            app:rippleColor="@color/colorPrimaryDark" />

    </RelativeLayout>

I'm avoiding using the weight attribute. (tested it as well but still getting the same behavior).

If you guys have any idea how to solve this issue is appreciated.

android java
3 Answers

You can create an xml drawable file for MaterialButton. btn_drawble.xml =>

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
         android:color="#2D2D2D">
        <item android:id="@android:id/background">
            <shape android:shape="rectangle" >
    
                <corners android:radius="12dp" />

                <gradient
                    android:startColor="@color/color_blue"
                    android:endColor="@color/color_blue"
                    android:angle="0"/>
    
            </shape>
        </item>
    
 </ripple>

And Set background of button created xml file =>

<com.google.android.material.button.MaterialButton
            android:id="@+id/btn_download"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/view"
            android:layout_centerHorizontal="true"
            android:layout_marginStart="7dp"
            android:layout_marginEnd="12dp"
            android:layout_marginBottom="10dp"
            android:text="@string/download_btn_txt"
            android:textColor="#FFFFFF"
            android:textSize="14sp"
            app:elevation="5dp"
            app:fontFamily="@font/whitney"
            android:background="@drawable/btn_drawble"
            app:icon="@drawable/round_share_white_48dp"
            app:iconGravity="textStart"/>
user_86455770

You'll need to use a material theme. Set the parent of your app of your AppTheme to a material theme ex: Theme.MaterialComponents.Light.NoActionBar. Material components require a material theme as parent to work correctly

user_22951970

It seems like it was my fault, I didn't notice that I was changing the button shape dynamically.

Unfortunately, I can't delete this question because Stackoverflow doesn't allow me.

:(

user_135649110
Related