【Android】自作Buttonのタップ時に、タップ時画像を表示する【selector】

ちょっとタイトルがあれで分かりづらいですが、昔作って、去年kotlinで書き直したホーホケキョ!というアプリがあります。

自作しているアプリで、ほとんど保守していなかった【Android】ホーホケキョ! 気まずい沈黙を打ち破れ!【アプリ】というなんともくだらないアプリです。

このアプリ、先日とある方に使ってもらったところ、いろいろとUI的な問題点が見つかったので改修することとしました。
それは、ウグイスボタンを押した時に、音しか鳴らないので押したかどうかが分かりづらいのです。

そこで、State List Drawable(画像の状態リスト)を使って、ボタンタップ時に少し薄い別画像に差し替えてみることにしました。


まず、タップ時の画像を準備

これが意外と大変な作業で、画像関係に疎い私はiPhoneアプリを使ってやったのですが、jpegで保存されてしまったりで四苦八苦。
DropBoxに上げて、MacBookAirで作業して透過画像のpngを作るのに苦労しました。

その時に使った無料のWebツールが以下です。

そんなこんなで、とりあえずオリジナルと、タップ時の画像を準備します。

ホーホケキョアプリのボタン
これがオリジナル。

ホーホケキョボタン、タップ時用画像
これがタップされた時用の画像です。
クオリティはお察しください。かなり適当にやりました。

プロジェクトのres/drawableにselectorを追加する

res/drawable以下に下記のようなselectorを追加します。
今回はuguisu_button.xmlとしました。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/uguisu_icon_pressed"
        android:state_pressed="true" />
    <item android:drawable="@drawable/uguisu_icon" />
</selector>
  • android:state_pressed=”true” がボタン押下時の挙動です。
  • ちなみにandroid:state_focused=”true” というボタンフォーカス時の設定もあります
    • 今回はとりあえず使いません。

もちろん先程準備した
uguisu_icon_pressed.pngもres/drawable以下にアップしておきます。

Fragment(or Activity)用レイアウトファイルにbuttonの設定

オリジナル画像を適用したボタンのbackground属性に先程追加したdrawable/uguisu_button.xmlを設定してあげます。
人によってはselector.xmlというのが一般的らしいですが、ここでは気にしないでください。

fragment_main.xml

    <Button
        android:id="@+id/uguisuButton"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/uguisu_button" />

これでウグイスボタンを押した時の挙動に変化が出るはずです。


実際の動画

webm形式なので見れるか心配ですが、とりあえずこんな感じになります。
Android開発においてState List Drawableはよく使うので覚えておいて損はないかと思います。
私も会社務めしていた頃はよくこれを書き直した記憶があります。

参考資料


コメント

タイトルとURLをコピーしました