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

serina - [Android] ImageButton /  Buttonに画像をのせる
お気に入りの画像を使ってボタンのようにタップして何か処理をさせたい場合があります。そんな時は ImageButton が使えます。その他にButtonの画像とする方法もありますがそれぞれ微妙に異なる表示になりますので確認しておきましょう。

Android Studio 3.5.3
API 29



ImageButton

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

image button 02c - [Android] ImageButton /  Buttonに画像をのせる

image button 03c - [Android] ImageButton /  Buttonに画像をのせる

 

 

ImageButtonの画像設定

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

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

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

背景として
android:background


画像をsourceとして
android:src

 

サンプルコード

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

MainActivity.java

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

strings.xml

image button 02c - [Android] ImageButton /  Buttonに画像をのせる

 

画像サイズが大きい場合

 
実はこの画像のサイズが400 x 267pixですが、このPixel 3XLの場合これ以上大きくなると不都合なことが起きます。

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

image button 05 - [Android] ImageButton /  Buttonに画像をのせる

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

image button 06 - [Android] ImageButton /  Buttonに画像をのせる

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

android:background

image button 02c - [Android] ImageButton /  Buttonに画像をのせる

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

image button 07 - [Android] ImageButton /  Buttonに画像をのせる

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

 

画像が小さい場合

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

 
image button 08 - [Android] ImageButton /  Buttonに画像をのせる
 
次はコードでImageButtonを記述する方法と、Buttonに画像を設定するやり方についてです。

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。




シェアする

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

フォローする