Genta Hirauchi

公開日：2020/02/14
更新日：2020/08/03

【Kotlin基礎】ImageButtonで画像のボタンを実装する方法を解説

  • Kotlinで画像をボタンにする方法が知りたい
  • ImageButtonの画像がうまく表示されない。

こんな悩みを抱えている方、いらっしゃいませんか？
Kotlinには、ImageButtonという画像のボタンを実装するViewがあります。

本記事では、ImageButtonの実装方法や、画像がうまく表示されない場合の対処法などを、サンプルコードを交え、わかりやすく解説しております。

目次

ImageButtonで画像のボタンを実装する方法

Kotlinで画像のボタンを実装するには、ImageButtonというViewを使用します。

【公式ドキュメント】 ： ImageButton | Android Developers

ImageButtonを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。

xmlでImageButtonを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。
※ “soccer_ball”という画像をdrawableフォルダに保存していることを前提としております。

  • xmlで実装
<ImageButton
   android:src="@drawable/soccer_ball"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton/>タグで、ImageButtonを実装します。

また、画像を指定するには、android:srcを使用します。@drawable/はdrawableフォルダを示しております。

表示結果を見ると、画像の背景がグレーで、画像の周りに隙間ができております。これは、ImageButtonのデフォルトの背景が適応されているからです。背景は、android:backgroundで変更することができます。

  • xmlで実装
<ImageButton
   android:src="@drawable/soccer_ball"
   android:background="@android:color/transparent"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
Point
  • <ImageButton/>タグで、ImageButtonを実装する
  • 画像を指定するには、android:srcを使用する

コードで動的にImageButtonを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

  • コードで実装
val imageButton = ImageButton(this)
imageButton.setImageResource(R.drawable.soccer_ball)
imageButton.setBackgroundColor(ContextCompat.getColor(this, android.R.color.transparent))
imageButton.layoutParams = LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

val linearLayout = findViewById<LinearLayout>(R.id.container)
linearLayout.addView(imageButton)

ImageButton()で、ImageButtonのインスタンスを生成しております。

画像を指定するには、setImageResource()を使用します。引数には、画像のIDを指定します。

背景色を指定するには、setBackgroundColor()を使用します。引数には、色のIDを指定します。

最後に、親レイアウトのlinearLayoutに対し、addView()でImageButtonを追加しております。

Point
  • コードで実装するには、ImageButton()でインスタンスを生成した後、addView()で追加する
  • コードで画像を指定するには、setImageResource()を使用する
  • コードで背景を指定するには、setBackgroundColor()を使用する

なお、クリックイベントの実装や、クリックイベントの有効・無効の切り替えなどは、Buttonと同様の方法で設定できます。Buttonについて詳しくまとめた記事もございますので、合わせてご覧いただけると幸いです。

【Kotlin基礎】Buttonでボタンを実装する方法を解説

Kotlinには、Buttonというボタンを実装するViewがあります。本記事では、Buttonの実装方法やボタンにクリックイベントを実装する方法を、サンプルコードを交え、わかりやすく解説しております。

画像の設定方法の違いについて

これまで紹介したサンプルコードでは、画像の設定にsrcを使用しておりました。しかし実は、ImageButtonの画像は、backgroundでも設定することができます。この章では、srcによる設定と、backgroundによる設定の違いや、それぞれの注意点について解説致します。

srcによる画像設定

まずはsrcによる画像設定についてです。まずは以下のサンプルコードをご覧ください。

  • activity_main.xml
<ImageButton
   android:src="@drawable/soccer_ball"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton
   android:src="@drawable/soccer_ball"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

ImageButtonとTextViewを交互に表示させるサンプルコードです。
注目していただきたいのは、ImageButtonのサイズです。横幅、縦幅ともにwrap_contentが設定されております。ですので、ImageButtonは画像の大きさに合わせたサイズになります。

では、このImageButtonのサイズを変更すると、どうなるでしょうか。1つは画像よりも大きく、もう1つは画像よりも小さく設定してみます。

  • activity_main.xml
<ImageButton
   android:src="@drawable/soccer_ball"
   android:layout_width="200dp"
   android:layout_height="300dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton
   android:src="@drawable/soccer_ball"
   android:layout_width="100dp"
   android:layout_height="50dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

ImageButtonのサイズを大きくした場合は、ImageButtonの中央に画像が表示されました。一方ImageButtonのサイズを小さくした場合は、画像が切れて表示されました。

ImageButtonのサイズに合わせ、画像の比率を保ったまま画像を表示させるには、scaleTypeを設定する必要があります。

scaleTypeにfitCenterを指定すると、画像がImageButtonのサイズに合わせていい感じに表示されます。

  • activity_main.xml
<ImageButton
   android:src="@drawable/soccer_ball"
   android:scaleType="fitCenter"
   android:layout_width="200dp"
   android:layout_height="300dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton
   android:src="@drawable/soccer_ball"
   android:scaleType="fitCenter"
   android:layout_width="100dp"
   android:layout_height="50dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
Point
  • srcで画像を設定する場合、scaleTypeで画像の表示方法を設定できる

backgroundによる画像設定

続いてbackgroundによる画像設定についてです。先ほどのsrc同様、ImageButtonとTextViewを交互に表示させるサンプルコードを用意しました。

  • activity_main.xml
<ImageButton
   android:background="@drawable/soccer_ball"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton
   android:background="@drawable/soccer_ball"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

ImageButtonのサイズを変更してみます。

  • activity_main.xml
<ImageButton
   android:background="@drawable/soccer_ball"
   android:layout_width="200dp"
   android:layout_height="300dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton
   android:background="@drawable/soccer_ball"
   android:layout_width="100dp"
   android:layout_height="50dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

今度は、ImageButtonのサイズに合わせて、画像の比率が変わって表示されました。

では、画像の比率を変えないよう、scaleTypeにfitCenterを設定すると、どうなるでしょう？

  • activity_main.xml
<ImageButton
   android:background="@drawable/soccer_ball"
   android:scaleType="fitCenter"
   android:layout_width="200dp"
   android:layout_height="300dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

<ImageButton
   android:background="@drawable/soccer_ball"
   android:scaleType="fitCenter"
   android:layout_width="100dp"
   android:layout_height="50dp" />

<TextView
   android:text="テキストです。"
   android:textSize="24dp"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />

何も変化はありませんね。このように、背景として画像を設定した場合、あくまで画像は背景なので、ImageButtonのサイズに合わせるように、比率を変えて表示されてしまいます。

ですので、ImageButtonの比率と画像の比率が異なる場合は、backgroundではなく、srcによる指定が必要となります。

Point
  • backgroundで画像を設定する場合、scaleTypeは効かず、ImageButtonのサイズに合わせ、比率を変えて表示される

まとめ

  • xmlでImageButtonを実装するには、<ImageButton/>タグを使用する
  • xmlで画像を指定するには、android:srcを使用する
  • コードでImageButtonを実装するには、ImageButton()でインスタンスを生成した後、addView()で追加する
  • コードで画像を指定するには、setImageResource()を使用する
  • コードで背景色を指定するには、setBackgroundColor()を使用する
  • srcで画像を設定する場合、scaleTypeで画像の表示方法を設定できる
  • backgroundで画像を設定する場合、scaleTypeは効かず、ImageButtonのサイズに合わせ、比率を変えて表示される

関連記事