タップ時のripple（波紋）エフェクトがうまく表示されない

## 経緯

透過度を設定したViewをタップした際にエフェクトを表示したかったのですが、なぜだかうまくいきません。薄いような、またそもそも出ていなかったり。

なので試してみました。

## 結論
背景に対してmaskを指定すれば解決、でした。

```
<item android:id="@android:id/mask">
```

## サンプル

下みたいな画面を作成して検証してみました。

![Screenshot_1630748499.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1773816/3e91091c-02eb-fca6-9e95-c7094cfdbe93.png)

こんな感じの。（MainActivityは割愛）

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

     <TextView
        android:id="@+id/sample_text_view"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@drawable/background_sample"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:text="textview_1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/sample_text_view2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/background_sample2"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:text="textview_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/sample_text_view"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/sample_text_view3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginTop="20dp"
        android:background="@drawable/background_sample3"
        android:clickable="true"
        android:focusable="true"
        android:gravity="center"
        android:text="textview_3"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/sample_text_view2"
        app:layout_constraintEnd_toEndOf="parent" />

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

また、各TextViewに指定しているdrawableは以下。

``` background_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#80B7B9BD">
    <item>
        <shape android:shape="rectangle">
            <!-- ここが背景色。透過度0%（透過なし）-->
            <solid android:color="#ECC91B" />
        </shape>
    </item>
</ripple>
```

``` background_sample2.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#80B7B9BD">
    <item>
        <shape android:shape="rectangle">
            <!-- 透過度50%（半透過）-->
            <solid android:color="#80ECC91B" />
        </shape>
    </item>
</ripple>
```

``` background_sample3.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#80B7B9BD">
    <item>
        <shape android:shape="rectangle">
            <!-- 透過度100%（完全透過）-->
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</ripple>
```

### mask設定前
上記の状態で実行してみます。
textview_1　⇨　textview_2　⇨　textview_3　⇨　textview_2　⇨　textview_1
の順番でタップしています。

![before.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1773816/d9128561-351d-69d3-2c40-968562c6f7ab.gif)

textview_1をタップした時はみえていますが、
半透明のtextview_2はなんか薄く、textview_3に至ってはエフェクトが出ていません。

### mask設定後
各drawableにmaskを設定します。

``` background_sample.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#80B7B9BD">

    <!-- このitemを追加 ここから -->
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
    <!-- ここまで -->

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#ECC91B" />
        </shape>
    </item>
</ripple>
```

追加するitemにはcolorが設定されていますが、反映はされません。
transparent以外を指定してあげればなんでも良いかと。

```
<solid android:color="@android:color/white" />
```

この状態で実行してみます。先ほど同様、
textview_1　⇨　textview_2　⇨　textview_3　⇨　textview_2　⇨　textview_1
の順番でタップしています。

![after.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1773816/ebf78ded-5cf0-80d2-65dc-e1bfc988fd71.gif)

どれをタップしてもエフェクトが表示されましたね。

## まとめ
簡単なことなのに、結構ハマってしまいました。
若干手間ですが、背景に透過度が設定されている場合はmaskを設定しましょう。

終わりです。