[Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

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

Android Studio
2024.1.1

ImageButton

画像をタップして何かのActionが欲しい場合です。やり方はいろいろあり、そのまま画像にOnTouchListenerを設定する方法がストレートかもしれません。

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

目次
1. ImageButtonの画像設定
2. サンプルコード
3. 画像サイズが大きい場合
4. 画像サイズが小さい場合

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 com.example.kotlinimagebutton

import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat
// ViewBinding
import com.example.kotlinimagebutton.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
        
        var flg = true

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

//package com.example.kotlinimagebutton

import android.os.Bundle

import androidx.activity.enableEdgeToEdge

import androidx.appcompat.app.AppCompatActivity

import androidx.core.view.ViewCompat

import androidx.core.view.WindowInsetsCompat

// ViewBinding

import com.example.kotlinimagebutton.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

private lateinit var binding: ActivityMainBinding

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

binding = ActivityMainBinding.inflate(layoutInflater)

setContentView(binding.root)

ViewCompat.setOnApplyWindowInsetsListener(binding.root) { v, insets ->

val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)

insets

}

var flg = true

binding.imageButton.setOnClickListener{

if (flg) {

binding.textImagebutton.text = getString(R.string.tapped)

flg = false

} else {

binding.textImagebutton.text = getString(R.string.image_button)

flg = true

}

　
レイアウトの設定ですが、画像をbackgroundで設定し、ImageButtonのサイズを指定しています。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fdc"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_imagebutton"
        android:text="@string/image_button"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

    <ImageButton
        android:id="@+id/image_button"
        android:contentDescription="@string/image_description"
        android:background="@drawable/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

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

<androidx.constraintlayout.widget.ConstraintLayout

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

xmlns:app="http://schemas.android.com/apk/res-auto"

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#fdc"

tools:context=".MainActivity">

<TextView

android:id="@+id/text_imagebutton"

android:text="@string/image_button"

android:textSize="30sp"

android:textColor="#ff0000"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.1" />

<ImageButton

android:id="@+id/image_button"

android:contentDescription="@string/image_description"

android:background="@drawable/image"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

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>

build.gralde

...
android {
    ...
    buildFeatures {
        viewBinding = true
    }
}
...

...

android {

...

buildFeatures {

viewBinding = true

}

...

これで実行すると

タップしてみましょう

画像サイズが大きい場合

実はこの画像のサイズは画面サイズに合わせた大きさなので、画面サイズが異なる機種では不都合なことが起きます。

例えば、縦横倍の画像サイズにするとbackgroundに画像を設定するとアスペクトレシオが無視されてこうなります。
image_large.jpg (800 x 533pix)
android:background

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

<ImageButton

...

android:background="@drawable/image_large"

...

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

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

<ImageButton

...

android:src="@drawable/image_large"

...

対策：
android:background

スクリーン横幅に収まるように横幅と縦を計算して指定すれば改善できますが、機種の画面が変わるたびに画像サイズを自動計算して合わせないといけなくなります。

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

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

ただし! ボタン領域としては残ります。透明になっただけでタップに反応します。

    <ImageButton
        android:id="@+id/image_button"
        android:src="@drawable/image_large"
        android:scaleType="centerInside"
        android:background="#0000"
        ...
         />

<ImageButton

android:id="@+id/image_button"

android:src="@drawable/image_large"

android:scaleType="centerInside"

android:background="#0000"

...

画像が小さい場合

画像はAndroidのスクリーンサイズよりも小さければ、wrap_contentが働き画像サイズのボタンになります。

<ImageButton
        ...
        android:src="@drawable/image_small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
 />

<ImageButton

...

android:src="@drawable/image_small"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

...

　
　　
　
References:
ボタン | Android デベロッパー | Android Developers
ImageButton | Android Developers