Android InsetDrawableを活用する

タグ等、デザイン的に大きくしたくないけれど、タップに反応させるコンポーネントは、実際にタップできる領域を見た目より大きくとるのが鉄則です。



これを実現する方法が3つあります。

1. Viewの階層で実現する

すぐ思いつく方法ですが、Viewが増えるので初心者っぽいです。

<!-- 透明の領域用 --> <FrameLayout ... android:padding="8dp" android:background="@android:color/transparent" > <!-- タグ部分 --> <TextView ... android:paddingTop="2dp" android:paddingLeft="8dp" android:paddingRight="8dp" android:paddingBottom="2dp" android:background="@color/tag_bg" /> </FrameLayout> ＊@color/tag_bgはColorStateListです。 　　



2. 9patch画像で実現する

透明の領域とタグの背景部分をあわせた9patch画像を用意します。Viewが増えないので中級者です。
ただ、各解像度用の画像を用意するのは結構面倒です。おまけにタップしたときの画像も用意しないといけません。



<TextView ... android:background="@drawable/tag_bg" />



3. InsetDrawableで実現する

InsetDrawableを使えばViewも増えないし、画像もいりません。上級者ですね。

res/drawable/tag_bg_normal.xml <?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetTop="8dp" android:insetRight="8dp" android:insetBottom="8dp" android:insetLeft="8dp"> <shape> <solid android:color="@color/green" /> <padding android:top="2dp" android:left="8dp" android:right="8dp" android:bottom="2dp" /> </shape> </inset> res/drawable/tag_bg_pressed.xml <?xml version="1.0" encoding="utf-8"?> <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetTop="8dp" android:insetRight="8dp" android:insetBottom="8dp" android:insetLeft="8dp"> <shape> <solid android:color="@color/orange" /> <padding android:top="2dp" android:left="8dp" android:right="8dp" android:bottom="2dp" /> </shape> </inset> res/drawable/tag_bg.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/tag_bg_pressed" /> <item android:drawable="@drawable/tag_bg_normal" /> </selector>

<TextView ... android:background="@drawable/tag_bg" /> ＊ 残念ながらinsetのなかのshapeのsolidでColorStateListを指定しても適用されませんでした。