リップルカラーの変更方法

# はじめに
Buttonのリップルカラーを変更したいと思ったが、思い通りの色に変更することができなかった。 ここではButton（Material）のリップルカラーの変更方法の手順をまとめます。

# 目標
以下のようなOutlineButtonを作成します。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/9d1da62f-761a-054f-d5e5-d7db59fb0b94.gif  width=200>

## Layout
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    >

    <com.google.android.material.button.MaterialButton
        android:id="@+id/button"
        style="@style/Widget.MaterialComponents.Button.OutlinedButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:theme="@style/Theme.MaterialComponents"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:strokeColor="?attr/colorPrimary"
        />

</androidx.constraintlayout.widget.ConstraintLayout>
```

リップルカラーをいじっていないボタンを生成します。 この状態だとリップルカラーは`colorPrimary`になっているのと思います。
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/b3d9a838-69ee-a3be-22e7-f849eae6a2bb.gif  width=200>
今回は黒のリップルカラーにしたいので、`rippleColor`というアトリビュートを変えればいいのか！と思って黒に変更してみたが。。。

```activity_main.xml
...
<com.google.android.material.button.MaterialButton
 ...
 app:rippleColor="@color/colorBlack"
...
```

<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/289190/0c02d57f-eb5c-329e-0709-172fc99a7623.gif  width=200>
あれ、なんか濃くね？
ここで、デフォルトのボタンがどのようになっているか`xml`をたどってみました。
`<item name="rippleColor">@color/mtrl_btn_text_btn_ripple_color</item>`この`mtrl_btn_text_btn_ripple_color`を見てみると、

```mtrl_btn_text_btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">

  <item android:alpha="@dimen/mtrl_low_ripple_pressed_alpha" android:color="?attr/colorPrimary" android:state_pressed="true"/>
  <item android:alpha="@dimen/mtrl_low_ripple_focused_alpha" android:color="?attr/colorPrimary" android:state_focused="true" android:state_hovered="true"/>
  <item android:alpha="@dimen/mtrl_low_ripple_focused_alpha" android:color="?attr/colorPrimary" android:state_focused="true"/>
  <item android:alpha="@dimen/mtrl_low_ripple_hovered_alpha" android:color="?attr/colorPrimary" android:state_hovered="true"/>
  <item android:alpha="@dimen/mtrl_low_ripple_default_alpha" android:color="?attr/colorPrimary"/>

</selector>
```
ここで`alpha(不透明度)`を設定していた。なので、この`?attr/colorPrimary`を自分のしたい色に変更してやれば良さそう。

```btn_ripple_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:alpha="@dimen/ripple_pressed_alpha" android:color="@color/black" android:state_pressed="true" />
    <item android:alpha="@dimen/ripple_focused_alpha" android:color="@color/black" android:state_focused="true" android:state_hovered="true" />
    <item android:alpha="@dimen/ripple_focused_alpha" android:color="@color/black" android:state_focused="true" />
    <item android:alpha="@dimen/ripple_hovered_alpha" android:color="@color/black" android:state_hovered="true" />
    <item android:alpha="@dimen/ripple_default_alpha" android:color="@color/black" />

</selector>
```
pressedやfocusedは、ボタンを押した時やフォーカス時の色は設定できます。（正直ボタンをfocuseやhoverってあんまり実感わかない）
作成したxmlファイルを、`rippleColor`に適応させる。

```activity_main.xml
...
<com.google.android.material.button.MaterialButton
 ...
 app:rippleColor="@drawable/btn_ripple_color"
...
```
以上でリップルカラーを変更できました！