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

はじめに

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

目標

以下のようなOutlineButtonを作成します。

Layout

<?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になっているのと思います。

今回は黒のリップルカラーにしたいので、rippleColorというアトリビュートを変えればいいのか！と思って黒に変更してみたが。。。

activity_main.xml

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

あれ、なんか濃くね？ ここで、デフォルトのボタンがどのようになっているか`xml`をたどってみました。 `@color/mtrl_btn_text_btn_ripple_color`この`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"
...

以上でリップルカラーを変更できました！