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

画像にリスナーsetOnTouchListenerを設定してタップを拾う方法もありますが、Buttonを使うというやり方もあります。Buttonの背景に画像を指定する方法とImageButton を使う方法を試してみます。
　

Android Studio 3.1.4
API 28
Kotlin 1.2.61

ImageButton or Button

　
ImageButtonは、Buttonで背景に画像を設定する場合とよく似ていますが、違いもあります。それぞれ用途に合った使い方を理解しておきましょう。
　

目次
1. ImageButtonでの画像の設定
2. ImageButton と Button の作成
3. ImageButtonをコードで作成

ImageButtonでの画像の設定

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

例として、 icon.png, 200x200pix の画像を res\drawable\ 以下に入れて表示させてみます。(画像は適当に持ってきてください)
　

　
android:background

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/icon" />

<ImageButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

　
android:src

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

<ImageButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

　

　
srcで画像を指定すると薄いグレーのboundsが画像の周りに見えてしまいます。
　

　
これは、backgroundで何かを指定すると消えます。
　

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#888"
    android:src="@drawable/icon" />

<ImageButton

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="#888"

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

　

　
backgroundとsrc設定の違いは、layout_widthとlayout_heightをwrap_contentから固定値に設定すると差が出てきます。
　

android:layout_width="300dp"
android:layout_height="100dp"

1 2	android:layout_width="300dp" android:layout_height="100dp"

　

　
backgroundにするとボタンサイズに影響されてしまいます、背景なので当然なのでしょう。
backgroundのケースはこれ以上あまりできることはありません。

srcの場合は上下が切り取られて表示されています。srcではscaleTypeの設定ができ画像をImageViewの中央に寄せたり、いっぱいに広げたりできます。
　

android:scaleType="center"
android:scaleType="centerCrop"
android:scaleType="centerInside"
android:scaleType="fitCenter"

android:scaleType="center"

android:scaleType="centerCrop"

android:scaleType="centerInside"

android:scaleType="fitCenter"

　

　
centerInsideとfitCenterは「この場合は同じ結果」ですがそれぞれ異なる効果があります。

詳しくはImageView画像をScreenのレイアウトにフィットを参考にしてください。

ImageButton と Button の作成

　
Buttonに画像を設定するにはbackgroundに画像を設定することになります。結果として、ImageButtonのbackgroundと同様の表示となります。

実際にActivity で ImageButton と Button を生成してみます。
MainActivity.kt

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


class MainActivity : AppCompatActivity() {

    private var flg = true

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

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

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

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

// Kotlin Android Extensions

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

class MainActivity : AppCompatActivity() {

private var flg = true

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

imageButton.setOnClickListener{

if (flg) {

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

flg = false

} else {

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

flg = true

}

button.setOnClickListener{

if (flg) {

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

flg = false

} else {

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

flg = true

}

　
レイアウトファイルです。
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:gravity="center"
    android:background="#cfe"
    tools:context=".MainActivity" >

    <TextView
        android:id="@+id/text_imagebutton"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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:background="#888"
        android:contentDescription="@string/image_description"
        android:src="@drawable/icon" />

    <TextView
        android:id="@+id/text_button"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:gravity="center"
        android:text="@string/button" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/icon" />

</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:gravity="center"

android:background="#cfe"

tools:context=".MainActivity" >

<TextView

android:id="@+id/text_imagebutton"

android:textSize="30sp"

android:textColor="#ff0000"

android:layout_width="match_parent"

android:layout_height="wrap_content"

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:background="#888"

android:contentDescription="@string/image_description"

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

<TextView

android:id="@+id/text_button"

android:textSize="30sp"

android:textColor="#ff0000"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="40dp"

android:gravity="center"

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

<Button

android:id="@+id/button"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

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

</LinearLayout>

　
リソースファイル
strings.xml

<resources>
    ...
    <string name="image_button">Image Button</string>
    <string name="button">Button</string>
    <string name="tapped">Tapped</string>
    <string name="image_description">a girl in a coffee shop</string>
</resources>

...

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

<string name="button">Button</string>

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

<string name="image_description">a girl in a coffee shop</string>

</resources>

ImageButtonをコードで作成

　
ついでですが、コードで記述するとどうなるでしょうか
基本的にはButtonをコードで書くのと同じですが画像の設定が異なります
　
MainActivity.kt

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.graphics.BitmapFactory;
import android.view.Gravity;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.graphics.drawable.BitmapDrawable


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)

        // リニアレイアウトの設定
        val layout = LinearLayout(this)
        layout.orientation = LinearLayout.VERTICAL

        val mParent = LinearLayout.LayoutParams.MATCH_PARENT
        val wContent = LinearLayout.LayoutParams.WRAP_CONTENT

        layout.layoutParams = LinearLayout.LayoutParams(
                mParent, mParent)

        // レイアウト中央寄せ
        layout.gravity = Gravity.CENTER
        setContentView(layout)

        // TextView の設定
        val textView = TextView(this)
        val str1 = "Image Button"
        val str2 = "Tapped"
        textView.text = str1

        val textViewLayoutParams = LinearLayout.LayoutParams(
                wContent, wContent)
        textView.layoutParams = textViewLayoutParams
        layout.addView(textView)


        // ボタンの設定
        val imageButton = ImageButton(this)

        // ボタンに画像を設定
        val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon)
        val drawable = BitmapDrawable(resources, bitmap)

        // Bitmapで画像を設定
        //imageButton.setImageBitmap(bitmap)
        // 背景に画像を設定
        imageButton.background = drawable

        val buttonLayoutParams = LinearLayout.LayoutParams(
                wContent, wContent)

        imageButton.layoutParams = buttonLayoutParams
        layout.addView(imageButton)

        var flg = true

        // リスナーをボタンに登録
        imageButton.setOnClickListener {
            if (flg) {
                textView.text = str2
                flg = false
            } else {
                textView.text = str1
                flg = true
            }
        }
    }
}

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.graphics.BitmapFactory;

import android.view.Gravity;

import android.widget.ImageButton;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.graphics.drawable.BitmapDrawable

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

//setContentView(R.layout.activity_main)

// リニアレイアウトの設定

val layout = LinearLayout(this)

layout.orientation = LinearLayout.VERTICAL

val mParent = LinearLayout.LayoutParams.MATCH_PARENT

val wContent = LinearLayout.LayoutParams.WRAP_CONTENT

layout.layoutParams = LinearLayout.LayoutParams(

mParent, mParent)

// レイアウト中央寄せ

layout.gravity = Gravity.CENTER

setContentView(layout)

// TextView の設定

val textView = TextView(this)

val str1 = "Image Button"

val str2 = "Tapped"

textView.text = str1

val textViewLayoutParams = LinearLayout.LayoutParams(

wContent, wContent)

textView.layoutParams = textViewLayoutParams

layout.addView(textView)

// ボタンの設定

val imageButton = ImageButton(this)

// ボタンに画像を設定

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.icon)

val drawable = BitmapDrawable(resources, bitmap)

// Bitmapで画像を設定

//imageButton.setImageBitmap(bitmap)

// 背景に画像を設定

imageButton.background = drawable

val buttonLayoutParams = LinearLayout.LayoutParams(

wContent, wContent)

imageButton.layoutParams = buttonLayoutParams

layout.addView(imageButton)

var flg = true

// リスナーをボタンに登録

imageButton.setOnClickListener {

if (flg) {

textView.text = str2

flg = false

} else {

textView.text = str1

flg = true

}

　
ボタンタップで文字列が変わりましたでしょうか。
　

　
　
関連ページ：