Material design iconを中央に配置したボタンを作成する

AndroidStudioにはAndroid Material Design Icon Generatorという、マテリアルデザインのアイコンを各dpi毎に生成してくれる便利なプラグインがあり、使っている人も多いのではないかと思います。

しかしいざ実践で使ってみると、デザイン的にはアイコンのサイズは24dpが良いのですが、ボタンやUIとしてタップ可能なエリアは48dpくらいにしたいという事があります。
ImageButtonを使えば同じことができますが、今回紹介する方法はImageButtonにかぎらずbackgroundとして使用できるので、ToggleButtonなどでも使えるので知っておいて損はありません。

以下のようなdrawableのxmlを作ることで、Viewの背景の中央に画像を表示することができます。

center_icon_favorite_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <solid android:color="@color/colorAccent"></solid>
    </shape>
</item>
<item
    android:gravity="center"
    android:drawable="@drawable/ic_favorite_border_white_24dp" >
</item>
</layer-list>

layer-listを使用して背景のshapeと一つのdrawableを重ねています。
またgravity="center" を指定することでアイコン画像を中央に配置しています。

実際にこのdrawableを背景にすると以下のようなUIになります。

layout.xmlは以下の通りです。

<LinearLayout
    android:orientation="vertical"
    android:layout_width="368dp"
    android:layout_height="495dp"
    >
    <Button
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:background="@drawable/center_icon_favorite_background"
        android:layout_marginBottom="10dp"
        />
    <Button
        android:layout_width="148dp"
        android:layout_height="48dp"
        android:background="@drawable/center_icon_favorite_background"
        android:layout_marginBottom="10dp"
        />
    <Button
        android:layout_width="148dp"
        android:layout_height="148dp"
        android:background="@drawable/center_icon_favorite_background"
        />
</LinearLayout>

小さなアイコンを使いつつタップ範囲を広く持っておくことは、デザインとUXの両立をする上で必要なことだと思います。専用の画像を作ってもよいですがせっかく素晴らしいマテリアルアイコンが使えるので、できるだけマテリアルアイコンで済ませていきたいですね。