[Android] ImageButton に画像を設定する

お気に入りの画像を使ってボタンのようにタップして何か処理をさせたい場合があります。そんな時は ImageButton が使えます。

Android Studio
2021.1.1




ImageButton

 
ImageButtonに画像を設定してボタンのようにそれをタップでTextViewの文字を変えるアプリです。

1x1.trans - [Android] ImageButton に画像を設定する

1x1.trans - [Android] ImageButton に画像を設定する

 

 

ImageButtonの画像設定

 
background と src:
ImageButtonを使って画像をボタンののようにタップでアクションを起こすことができますが、画像の設定には、「background」に指定する方法と「src」とする場合があります。

例として、芹菜ちゃんの 400 x 267pix の画像(3:2)を res\drawable\ 以下に入れて表示させてみます。(画像はお好みのもので)
 
1x1.trans - [Android] ImageButton に画像を設定する

ImageButtonへの設定はそれぞれ以下のようにできます。

背景として
android:background



画像をsourceとして
android:src

 

サンプルコード

 
Android の Button アプリを作ってみると簡単だった のようにやれば簡単にできます。

MainActivity.java


 
レイアウトの設定ですが、画像をbackgroundで設定し、ImageButtonのサイズを指定しています。またLinearLayoutで記述しました。(デフォルトの Constraintlayout ではありません)
activity_main.xml


strings.xml


1x1.trans - [Android] ImageButton に画像を設定する

 

画像サイズが大きい場合

 
実はこの画像のサイズが400 x 267pixですが、例えば、800 x 533 pix の画像サイズにするとbackgroundに画像を設定すると縮小されてしまいます。
android:background

1x1.trans - [Android] ImageButton に画像を設定する

srcで画像を設定すると画像が切り取られてしまいます。
android:src

1x1.trans - [Android] ImageButton に画像を設定する

対策:
画像比率が3:2でこのスマホの場合は横幅が411dpなので、それに収まるように横幅を400dp, 縦を267dpに指定すれば改善できます。

android:background


1x1.trans - [Android] ImageButton に画像を設定する

android:src
srcの場合は更にscaleTypeとしてcenterInsideを入れて画像をボタン内に収めるようにします。


1x1.trans - [Android] ImageButton に画像を設定する

srcで画像を指定すると薄いグレーのboundsが画像の周りに見えてしまいます。
これはbackgroundに透明色などを設定すると
android:background=”#0000″
見えなくなります。ただしボタン領域としては残ります。

 

画像が小さい場合

 
画像はAndroidのスクリーンサイズよりも小さければ、wrap_contentを使えます。むしろこれを使うケースが多いかもしれません。


 
1x1.trans - [Android] ImageButton に画像を設定する


 
次はコードでImageButtonを記述する方法と、Buttonに画像を設定するやり方についてです。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする