markdown AppCompatButton具有Ripple效果和Touch on Touch

Posted 2021-05-05

# AppCompatButton with Ripple effect and Lift on Touch

[SOURCE](https://stackoverflow.com/a/52015382/1602807)

Quick answer, you can probably get most of this done by using [Material Button](https://material.io/develop/android/components/material-button/) but if you can change your app theme or it doesn't work use AppCompatButton.

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

in your `values/styles.xml`:

```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
<?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>
```