Skip to content

Instantly share code, notes, and snippets.

@vxhviet
Created March 1, 2019 04:37
Show Gist options
  • Save vxhviet/71dc10f4a3991c33e0c9425db94e3c2a to your computer and use it in GitHub Desktop.
Save vxhviet/71dc10f4a3991c33e0c9425db94e3c2a to your computer and use it in GitHub Desktop.

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment