[Android] ImageButton / Buttonに画像をのせる

Android7 

画像をタップして何か処理をさせたい場合があります。画像にリスナーsetOnTouchListenerを設定する方法もありますが、ここではButtonの背景に画像を指定する方法とImageButton を使う方法を試してみます。
 

Android Studio 2.3
Android 7.1.1

 


ImageButton or Button

ImageButtonでの画像の設定

 
backgroundとsrc:
ImageButtonを使って画像をボタンののようにタップでアクションを起こすことができますが、画像の設定には、「background」に指定する方法と「src」とする場合があります。
以下の icon.png, 200x200pix の画像を\drawable以下に入れて表示させてみます。
 
smile_yuca_cap
 
android:background

 
android:src

 
imagebutton_1
 
srcで画像を指定するとboundsが見えてしまいます。

これは、backgroundで何かを指定すると消えます。
 

 
imagebutton_2
 
backgroundとsrc設定の違いは、layout_widthとlayout_heightをwrap_contentから固定値に設定すると差が出てきます。
 

 
imagebutton_3
 
backgroundにするとボタンサイズに影響されてしまいます、背景なので当然なのでしょう。
backgroundのケースはこれ以上あまりできることはありません。
srcの場合は上下が切り取られて表示されています。srcではscaleTypeの設定ができ画像をImageViewの中央に寄せたり、いっぱいに広げたりできます。
 

 
imagebutton_4
 
centerInsideとfitCenterは「この場合は同じ結果」ですがそれぞれ異なる効果があります。

詳しくはImageView画像をScreenのレイアウトにフィットを参考にしてください。

 

ImageButton と Button の作成

 
Buttonに画像を設定するにはbackgroundに画像を設定することになります。結果として、ImageButtonのbackgroundと同様の表示となります。

実際にActivity で ImageButton と Button を生成してみます。
MainActivity.java

 
activity_main.xml

 

 

全画面のImageButton

 
また、画面全体をButtonあるいはImageButtonにして、それを画像を張り付けると画面タッチのようにボタンを使う使い方もできます。
 
全画面にをボタンにするために
ImageButtonの縦横を最大にします
android:layout_width=”match_parent”
android:layout_height=”match_parent”

画像とスクリーンが比率も大きさも合わないので
余計な部分は切り取って最大に表示します
android:scaleType=”centerCrop”

テキストは別にTextViewをRelativeLayoutで適当な位置に配置すると
こうなります

MainActivity.java

 
activity_main.xml

 
タップすると文字が変わります
 

imageButton008
imagebutton009
 

ImageButtonをコードで作成

 
ついでですが、コードで記述するとどうなるでしょうか
基本的にはButtonをコードで書くのと同じですが画像の設定が異なります
 

 

画像を背景にセットしたりといくつかあります。
 
[モデル 河村友歌]

関連ページ: