More than 5 years have passed since last update.

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

Android

Last updated at 2016-06-29Posted at 2016-06-29

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up