[Android & Kotlin] ImageButton とButtonに画像を貼る

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

image button 02c - [Android & Kotlin] ImageButton とButtonに画像を貼る

image button 03c - [Android & Kotlin] ImageButton とButtonに画像を貼る

Android Studio 3.5.3
API 29

ImageButton

　
やりたいことは画像をタップしてのなんらなのActionが欲しいのだと思います。やり方はいろいろあり、

そのまま画像にOnTouchListenerを設定する方法がストレートです。また、ボタンに画像を設定することもでき簡単です。

ImageButtonという画像を使うことを前提にしたUIもあります。ここではButtonに画像を載せるとどうなるかやってます。
　

目次
1. ImageButtonの画像設定
2. サンプルコード
3. 画像サイズが大きい場合
4. 画像サイズが小さい場合
5. ImageButtonをコードで作成
6. Buttonに画像を設定する

ImageButtonの画像設定

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

例として、芹菜ちゃんの 400 x 267pix の画像(3:2)を res\drawable\ 以下に入れて表示させてみます。(画像はお好みのもので)
　

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

背景として
android:background

<ImageButton
    ...
    android:background="@drawable/image" />

<ImageButton

...

android:background="@drawable/image" />

画像をsourceとして
android:src

<ImageButton
    ...
    android:src="@drawable/image" />

<ImageButton

...

android:src="@drawable/image" />

サンプルコード

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

MainActivity.kt

package your.package.name

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
// Kotlin Android Extensions
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        var flg = true

        imageButton.setOnClickListener{
            if (flg) {
                textImageButton.text = getString(R.string.tapped)
                flg = false
            } else {
                textImageButton.text = getString(R.string.image_button)
                flg = true
            }
        }
    }
}

package your.package.name

import androidx.appcompat.app.AppCompatActivity

import android.os.Bundle

// Kotlin Android Extensions

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

var flg = true

imageButton.setOnClickListener{

if (flg) {

textImageButton.text = getString(R.string.tapped)

flg = false

} else {

textImageButton.text = getString(R.string.image_button)

flg = true

}

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#fdc"
    android:gravity="center"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/text_imagebutton"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="@string/image_button"/>

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:contentDescription="@string/image_description"
        android:background="@drawable/image" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

android:background="#fdc"

android:gravity="center"

tools:context=".MainActivity" >

<TextView

android:id="@+id/text_imagebutton"

android:textSize="30sp"

android:textColor="#ff0000"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:gravity="center"

android:text="@string/image_button"/>

<ImageButton

android:id="@+id/image_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="10dp"

android:contentDescription="@string/image_description"

android:background="@drawable/image" />

</LinearLayout>

strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="image_button">Image Button</string>
    <string name="tapped">Tapped</string>
    <string name="image_description">Serina</string>
</resources>

<string name="app_name">YourAppName</string>

<string name="image_button">Image Button</string>

<string name="tapped">Tapped</string>

<string name="image_description">Serina</string>

</resources>

画像サイズが大きい場合

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

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

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

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

android:background

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="400dp"
        android:layout_height="267dp"
        android:layout_margin="10dp"
        android:contentDescription="@string/image_description"
        android:background="@drawable/image" />

<ImageButton

android:id="@+id/image_button"

android:layout_width="400dp"

android:layout_height="267dp"

android:layout_margin="10dp"

android:contentDescription="@string/image_description"

android:background="@drawable/image" />

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

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="400dp"
        android:layout_height="267dp"
        android:scaleType="centerInside"
        android:layout_margin="10dp"
        android:contentDescription="@string/image_description"
        android:src="@drawable/image_large" />

<ImageButton

android:id="@+id/image_button"

android:layout_width="400dp"

android:layout_height="267dp"

android:scaleType="centerInside"

android:layout_margin="10dp"

android:contentDescription="@string/image_description"

android:src="@drawable/image_large" />

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

<ImageButton
        ...

        android:background="#0000"
        ... 
/>

<ImageButton

...

android:background="#0000"

...

画像が小さい場合

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

<ImageButton
        ...
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
 />

<ImageButton

...

android:layout_width="wrap_content"

android:layout_height="wrap_content"

...

　

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