LoginSignup
36
35

More than 5 years have passed since last update.

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

Last updated at Posted 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"
    />
36
35
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36
35