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

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

Android Studio
2024.1.1

ImageButton

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

目次
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.java

//package com.example.testimagebutton;

import android.os.Bundle;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import android.widget.ImageButton;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private boolean flg = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_main);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        // TextView の設定
        TextView text = findViewById(R.id.text);

        // イメージボタンを設定
        ImageButton imageButton = findViewById(R.id.image_button);
        imageButton.setOnClickListener( v ->  {
            if (flg) {
                text.setText(R.string.tapped);
                flg = false;
            } else {
                text.setText(R.string.image_button);
                flg = true;
            }
        });

    }
}

//package com.example.testimagebutton;

import android.os.Bundle;

import androidx.activity.EdgeToEdge;

import androidx.appcompat.app.AppCompatActivity;

import androidx.core.graphics.Insets;

import androidx.core.view.ViewCompat;

import androidx.core.view.WindowInsetsCompat;

import android.widget.ImageButton;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private boolean flg = true;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

EdgeToEdge.enable(this);

setContentView(R.layout.activity_main);

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {

Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());

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

return insets;

});

// TextView の設定

TextView text = findViewById(R.id.text);

// イメージボタンを設定

ImageButton imageButton = findViewById(R.id.image_button);

imageButton.setOnClickListener( v -> {

if (flg) {

text.setText(R.string.tapped);

flg = false;

} else {

text.setText(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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:textColor="#ff0000"
        android:textSize="30sp"
        android:text="@string/image_button"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/image"
        android:contentDescription="@string/image_description"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="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:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/text"

android:layout_width="200dp"

android:layout_height="wrap_content"

android:textColor="#ff0000"

android:textSize="30sp"

android:text="@string/image_button"

android:gravity="center"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.1" />

<ImageButton

android:id="@+id/image_button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/image"

android:contentDescription="@string/image_description"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

strings.xml

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

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

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

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

</resources>

画像サイズが大きい場合

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

android:background

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

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

android:background

    <ImageButton
        android:id="@+id/image_button"
        android:layout_width="400dp"
        android:layout_height="267dp"
        android:background="@drawable/image2"
...

<ImageButton

android:id="@+id/image_button"

android:layout_width="400dp"

android:layout_height="267dp"

android:background="@drawable/image2"

...

android:src
srcの場合は画像が見切れてしまうので

scaleTypeとしてcenterInsideを入れて画像をボタン内に収めるようにします

<ImageButton
        android:id="@+id/image_button"
        android:layout_width="400dp"
        android:layout_height="267dp"
        android:src="@drawable/image2"
        android:scaleType="centerInside"
...

<ImageButton

android:id="@+id/image_button"

android:layout_width="400dp"

android:layout_height="267dp"

android:src="@drawable/image2"

android:scaleType="centerInside"

...

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"

...

　
　
　
関連ページ：

簡単な Button アプリを作る
ButtonをJavaコードだけで設定する
カスタムボタンを作る
ImageButton：Button, ImageButton に画像を設定する
onClickListenerの色々な設定
Button 配列を設定する