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

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

Android Studio 3.4.2
API 29
AndroidX



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

 
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のスクリーンサイズよりも小さければ、wrap_contentを使えます。むしろこれを使うケースが多いかもしれません。

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

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

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




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

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

以下の3つはAndroidが学習できるオンラインスクールです。


TECH ACADEMY
Androidアプリコース



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



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





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

尚、スクールがダメだと言う人がいますが、やる気があれば問題ありません。与えられるのを待っていてはいけないですね
欲しいものは取りに行くのです。


Google Pixel 3 XLグローバル版
SIMフリー 並行輸入品
6.3インチの大画面
背景をぼかすポートレートモード撮影


Anker PowerCore II Slim 10000
Power IQ 2.0搭載
iPhone & Android対応

シェアする

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

フォローする