Edited at

角丸ボタンにRipple Effectをつける

More than 3 years have passed since last update.


1. 角丸ボタン用のxmlを作る

drawable配下に角丸ボタン用のxmlを作成する。


drawable/button_bg_white.xml

<?xml version="1.0" encoding="utf-8"?>

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="@color/colorWhite"/>
<stroke
android:width="@dimen/line_small"
android:color="@color/colorGrey"/>
<corners
android:radius="@dimen/corner_radius_normal"/>
</shape>


2. Ripple Effect用の色を定義する


values/colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
<color name="colorWhite.focused">#CCCCCC</color>
</resources>


3. Ripple Effect用のxmlを作成する

drawable配下にRipple Effect用のxmlを作成する。


drawable/button_frame_white.xml

<?xml version="1.0" encoding="utf-8"?>

<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/colorWhite.focused">
<item android:drawable="@drawable/button_bg_white"/>
</ripple>


4. ボタンを作成する

ボタンの背景に作成したRipple Effect用のxmlを設定する。

<Button

android:background="@drawable/button_frame_white"
/>