How to have a button with backgroundTint and corner radius

Question

I wanna have a button with backgroundTint and corner radius :D Here is the style I defined:

<style xmlns:tools="http://schemas.android.com/tools" name="myButton" parent="Widget.AppCompat.Button.Colored">
    <item name="android:background">@drawable/button_light</item>
    <item  name="android:backgroundTint" tools:targetApi="lollipop">#e0e0e0</item>
</style>

And the @drawable/button_light code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="15dp" />
    <solid android:color="#FAFAFA" />
</shape>

And I apply @style/myButton to the button I want and the result is I have round corners but no ripple effect (backgroundTint doesn't work indeed). How can I solve this?

Try latest matrial button introduced in support library 28 https://material.io/develop/android/components/material-button/ & also look here https://stackoverflow.com/questions/26346727/android-material-design-button-styles — Mohamed Mohaideen AH, Aug 25 '18 at 08:44

shubhamgarg1 · Accepted Answer · 2018-08-25T09:34:19.713

1

You can use layer-list to achieve this.

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
      <shape 
          android:shape="rectangle">
          <corners android:radius="15dp" />
          <solid android:color="#FAFAFA" />
      </shape>
   </item>
   <!-- Put any image or anything here as the drawable -->
   <item android:drawable="?attr/selectableItemBackground"/>
</layer-list>

edited Aug 25 '18 at 09:34

answered Aug 25 '18 at 08:27

shubhamgarg1

1,619
1
15
20

comment in xml must be like html syntax comment – 5ec20ab0 Aug 25 '18 at 08:54
@shubhamgarg1 Thanks ! it solved my problem . What if I want to change the ripple color ? – Alireza Imani Aug 25 '18 at 09:21

score 0 · Answer 2 · answered Aug 25 '18 at 08:48

Create a drawable/butt.xml file containing:

     ?xml version="1.0" encoding="utf-8"?>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:state_pressed="false"> 
                <shape android:shape="rectangle">
                <corners android:radius="1000dp" />
                <solid android:color="#41ba7a" />
                <stroke
                    android:width="2dip"
                    android:color="#03ae3c" />
                <padding
                    android:bottom="4dp"
                    android:left="4dp"
                    android:right="4dp"
                    android:top="4dp" />
                </shape>
            </item>
            <item android:state_pressed="true"> 
                <shape android:shape="rectangle">
                <corners android:radius="1000dp" />
                <solid android:color="#3AA76D" />
                <stroke
                    android:width="2dip"
                    android:color="#03ae3c" />
                <padding
                    android:bottom="4dp"
                    android:left="4dp"
                    android:right="4dp"
                    android:top="4dp" />
                </shape>
            </item>
        </selector>

2: Use it in button tag in any layout file in your code

<Button
    android:layout_width="220dp"
    android:layout_height="220dp"
    android:background="@drawable/butt"
    android:text="@string/btn_scan_qr"
    android:id="@+id/btn_scan_qr"
    android:textSize="15dp"
/>

score 0 · Answer 3 · answered Aug 25 '18 at 08:59

you can use from this library :

material ripple effect

to add ripple effect to your button and adding your shape to button

like this :

<com.balysv.materialripple.MaterialRippleLayout
                            style="@style/RippleStyleBlack"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginRight="10dp"
                            >

                            <Button
                                android:id="@+id/call_btn"
                                android:layout_width="60dp"
                                android:layout_height="25dp"
                                style="@style/Base.Widget.AppCompat.Button.Borderless"
                                android:text="call"
                                android:textSize="12sp"
                                android:background="@drawable/call_btn_bg"
                                android:textColor="@color/deep_orange_600"
                                />

                        </com.balysv.materialripple.MaterialRippleLayout>

How to have a button with backgroundTint and corner radius

3 Answers3