Buttonにタップエフェクトを実装する

この記事はAndroidスマホ用のアプリ開発の中で、
今後の開発で再使用性が高いと思われるコーディングをまとめたものです。
Javaでの開発経験、XML構文規則、Androidのアプリ開発経験がある方を対象としています。
Androidのアプリ開発でお役にたててれば、嬉しいです。
（これから Androidのアプリ開発やJavaでの開発を始めたい方への案内は、記事の最後で紹介します）

この記事のテーマ

Buttonにタップエフェクトを実装する

リンク

ポイント
これからAndroidのアプリ開発やJavaでの開発を始めたい方へ

ポイント

Buttonをタップした際に視覚的なフィードバックがない場合、タップの有無が判断できません。
解決策のひとつとして、タップ音をSoundPoolで実装する方法がありますが、消音時に効果がありません。
今回は、Buttonのタップエフェクトの実装を紹介します。

エフェクトを実装したButtonクラスを使用する方法

Buttonを継承したCustomButtonクラスを作成します。
タップ時のエフェクトとして、backgroundのDrawableを半透明にします。

◎CustomButton

public class CustomButton extends AppCompatButton {
    public CustomButton(Context context) {
        super(context);
    }
    @SuppressLint("ClickableViewAccessibility")
    public CustomButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        setOnTouchListener((view, motionEvent) -> {
            this.setAlpha(motionEvent.getAction() == MotionEvent.ACTION_UP || motionEvent.getAction() == MotionEvent.ACTION_CANCEL ? 1 : 0.7f);
            return false;
        });
    }
    public CustomButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

Buttonの代わりにCustomButtonクラスを使用します。

   :
   <com.jiseifirm.Assistants.view.CustomButton
        android:id="@+id/control"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/ic_base"
        :
        />
    :

ic_baseはボタンの画像です。

リップルエフェクトを使用する方法

ボタンの画像（ic_base）にリップルエフェクトを追加したDrawableオブジェクトを作成します。

◎bt_base

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:drawable="@drawable/ic_base"/>
</ripple>

Buttonのbackgroundにボタンの画像（ic_base）に代わりにbt_baseを使用します。

   :
   <Button
        android:id="@+id/control"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@drawable/bt_base"
        :
        />
    :

Buttonはデフォルトでリップルエフェクトを実装しています。
しかし、backgroundを設定した場合、エフェクトが無効になります。
foregroundにエフェクトを設定する方法もありますが、四角形のエフェクトになります。
リップルエフェクトの色はcolorで指定（?android:colorControlHighlight）できます。

Vectorアイコンを使用する場合

Buttonの代わりにImageButtonを使用します。

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="@android:color/transparent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:keepScreenOn="true">
    :
    <ImageButton
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="?attr/selectableItemBackgroundBorderless"
        android:src="@drawable/ic_round_back" />
    :

ic_round_backはVectorアイコンです。

srcにVectorアイコン、backgroundにリップルエフェクトを設定します。
リップルエフェクトの色は指定できません。
AndroidManifestのthemeで指定しているstyleに依存します。

今回は、ここまでです。

Buttonにタップエフェクトを実装しているAndroidアプリです。