前回の続き
今回はボタンにアイコン画像を表示する方法と、アイコンとテキストを一緒に表示する方法の説明です。

サンプル: https://github.com/stack3/AndroidButtonSample

アイコンボタン

サンプルを起動するといくつかの中に以下のボタンが表示されています。

01

これはImageButtonを使って表示しています。

<ImageButton
  android:id="@+id/imageButton1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/ic_launcher"
  android:background="@drawable/button_gradient_pink"
  android:contentDescription="@string/desc" />

android:src

res/drawable*/にある画像リソースを指定できます。画像フォーマットはpngが推奨されています。jpgなども表示できますが。

android:background

前回のようにbackgroundを指定することでボタン背景をグラデーションなどカスタマイズできます。カスタマイズする必要がなければ、この属性は指定しません。

アイコンとテキストを一緒に表示する

サンプルで表示されている中に以下のようなボタンがあるはずです。

02

このようなボタンを表示する時はImageButtonではなく通常のButtonを使います。

テキストの左側にボタンを表示する場合

<Button
  android:id="@+id/buttonAndText1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:drawableLeft="@drawable/ic_launcher"
  android:text="@string/text"
  android:background="@drawable/button_gradient_pink" />

android:drawableLeft

テキストの左に表示する画像リソースを指定します。

テキストの右側にボタンを表示する場合

<Button
android:id="@+id/buttonAndText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/ic_launcher"
android:text="@string/text"
android:background="@drawable/button_gradient_pink" />

android:drawableTop

テキストの上に表示する画像リソースを指定します。

他にもdrawableRight,drawableBottomという属性もあるので必要に応じて使い分けてください。

ちなみにdrawableLeftを指定してtextを指定しないと、ImageButtonと同じようにアイコンが中心に表示されるボタンになります。ImageButtonは使わなくてもよいかもしれません。