vxh.viet
3/1/2019 - 4:37 AM

AppCompatButton with Ripple effect and Lift on Touch

AppCompatButton with Ripple effect and Lift on Touch

SOURCE

Quick answer, you can probably get most of this done by using Material Button but if you can change your app theme or it doesn't work use AppCompatButton.

<androidx.appcompat.widget.AppCompatButton
        style="@style/ButtonTextStyle.booking"
        android:text="Book Home Visit"/>

in your values/styles.xml:

<style name="ButtonTextStyle.booking">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:minWidth">0dp</item> // padding doesn't work without minWidth and Height
    <item name="android:layout_height">45dp</item> // can't really center the text vertically so either use wrap_content or use a height big enough for it to center properly
    <item name="android:minHeight">0dp</item>
    <item name="android:includeFontPadding">false</item> // remove font padding to center text vertically
    <item name="android:lineSpacingExtra">0dp</item> // remove line spacing, probably doesn't need for single line item
    <item name="android:paddingStart">18dp</item>
    <item name="android:paddingEnd">18dp</item>
    <item name="android:background">@drawable/bg_green_corner</item> // use this to change corner radius
    <item name="android:textColor">@color/basic_white</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textStyle">normal</item>
    <item name="android:gravity">center</item>
    <item name="android:lines">1</item>
    <item name="android:textAllCaps">false</item>
</style>

and in your drawable/ create bg_green_corner.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle">
            <corners android:radius="5dp"/>
            <solid android:color="@color/fancy_blue"/>
        </shape>
    </item>
    <!-- Put any image or anything here as the drawable -->
    <item android:drawable="?attr/selectableItemBackground"/> // ripple effect
</layer-list>