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?

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

Answer 2

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"
/>

Answer 3

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>