[Android] ImageView ScaleType 画像をScreenにフィットさせる

Android端末の画面サイズは様々で画像のサイズをスクリーン画面にフィットさせるには ImageView.ScaleType を上手に使わないといけません。

Android Studio
2024.1.1

ImageView.ScaleType

設定のパラメータは８つあります
Google Developer：Reference ImageView.ScaleType

1. CENTER
  - Viewの中央に表示
  - 拡大/縮小無し
  - android:scaleType=”center”
    　
    小さい画像　大きい画像
    　　
    　
2. CENTER_CROP
  - Viewの中央に表示
  - View内で画像の縦横比を維持して余分な部分はCrop（切り取り）
  - android:scaleType=”centerCrop”
    　
    　　
    　
3. CENTER_INSIDE
  - Viewの中央に表示
  - View内で画像の縦横比を維持し画像すべてをView内に配置
  - android:scaleType=”centerInside”
    　
    　　
    　
4. FIT_CENTER
  - Viewの中央に表示
  - View内で画像の縦横比を維持しViewの全体に拡大/縮小して配置
  - android:scaleType=”fitCenter”
    　
    　　
    　
5. FIT_END
  - 右下に寄せて配置
  - View内で画像の縦横比を維持しView全体に拡大/縮小
  - android:scaleType=”fitEnd”
    　
    　　
    　
6. FIT_START
  - 左上に寄せて配置
  - View内で画像の縦横比を維持しView全体に拡大/縮小
  - android:scaleType=”fitStart”
    　
    　　
    　
7. FIT_XY
  - 画像の縦横比は関係なくView内でリサイズして全画面
  - android:scaleType=”fitXY”
    　
    　　
    　
8. MATRIX
  - Image Matrix を使うときに使用する
  - android:scaleType=”matrix”

画像が小さい大きいというのは単にそのサイズではなく規定した「View」よりも大きいか小さいかといことです。
　
以下の大小の画像を使ってみました。

image1
200×200

image2
900×900(実機画面サイズによる)

　
レイアウトファイルは以下のように記述して
android:scaleType をそれぞれ変えて試してみます。
またTitleが邪魔になるのでNo Action BarのActivityでの設定です。
　
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"
    tools:context=".MainActivity">

    <ImageView
        android:src="@drawable/image1"
        android:scaleType="center"
        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" />

</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"

tools:context=".MainActivity">

<ImageView

android:src="@drawable/image1"

android:scaleType="center"

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" />

</androidx.constraintlayout.widget.ConstraintLayout>

CENTER

Viewの中央に表示
拡大/縮小無しでそのまま表示

android:scaleType="center"

1	android:scaleType="center"

　
image1：画像の拡大はなく中央に配置

image2: 画像の縮小はなく中央に配置

CENTER_CROP

Viewの中央に表示
View内で画像の縦横比を維持して余分な部分はCrop（切り取り）

android:scaleType="centerCrop"
android:layout_width="wrap_content" 
android:layout_height="wrap_content"

android:scaleType="centerCrop"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

　
image1：画像の拡大はなく中央に配置

image2: 画像縦方向を縮小して中央に配置

image1は”center”と変わりませんが、referenceでは Center the image in the view とありScreenの中央とは言っていないのでViewの範囲を match_parent で画面いっぱいに引き伸ばすと

android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:scaleType="centerCrop"

android:layout_width="match_parent"

android:layout_height="match_parent"

画像縦方向を拡大して中央に配置となりました

例えばViewの範囲のセンターが右下にある場合

    <ImageView
        android:src="@drawable/image1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.75"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.85" />こ

<ImageView

android:src="@drawable/image1"

android:layout_width="300dp"

android:layout_height="300dp"

android:scaleType="centerCrop"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintHorizontal_bias="0.75"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.85" />こ

View：
Horiaontal baias = 0.75
Vertical baias = 0.85
縦横サイズ: 300dpx300dp

この条件でのcenterCropです

CENTER_INSIDE

Viewの中央に表示
View内で画像の縦横比を維持し画像すべてをView内に配置

android:scaleType="centerInside"

1	android:scaleType="centerInside"

image1：画像の拡大はなく中央に配置

画像がViewよりも小さくView内に収まっていればサイズを変更しない

image2：画像は縮小されてView内に収まるように配置

画像が大きい場合は縮小されView内に収める

Google referenceでは

CENTER_CROP: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).

CENTER_INSIDE: Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).

larger than か less than の違いだけであとの文面は同じ
とにかくViewの中に収まるように配置されるようです。

FIT_CENTER

Viewの中央に表示
View内で画像の縦横比を維持しViewの全体に拡大/縮小して配置

android:scaleType="fitCenter"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:scaleType="fitCenter"

android:layout_width="match_parent"

android:layout_height="match_parent"

image1：画像を拡大して中央に配置

image2：画像を縮小して中央に配置

FIT_END

右下に寄せて配置
View内で画像の縦横比を維持しView全体に拡大/縮小
ここでもViewの範囲に注意が必要

android:scaleType="fitEnd"
android:layout_width="match_parent" 
android:layout_height="match_parent"

android:scaleType="fitEnd"

android:layout_width="match_parent"

android:layout_height="match_parent"

mage1：画像を拡大して右下に配置

mage2：画像を縮小して右下に配置

FIT_START

左上に寄せて配置
View内で画像の縦横比を維持しView全体に拡大/縮小

android:scaleType="fitStart"
android:layout_width="match_parent" 
android:layout_height="match_parent"

android:scaleType="fitStart"

android:layout_width="match_parent"

android:layout_height="match_parent"

　
image1：画像を拡大して左上に配置

image2：画像を縮小して左上に配置

FIT_XY

画像の縦横比は関係なくView内でリサイズして全画面

android:scaleType="fitXY"
android:layout_width="match_parent" 
android:layout_height="match_parent"

android:scaleType="fitXY"

android:layout_width="match_parent"

android:layout_height="match_parent"

image1：画像を縦横が画面いっぱいになるように拡大

1x1.trans - [Android] ImageView ScaleType 画像をScreenにフィットさせる

image2：画像を縦横が画面いっぱいになるように拡大/縮小

MATRIX

Matrixで画像を変形させるケースで使います。

ImageView#setImageMatrix(Matrix)

1	ImageView#setImageMatrix(Matrix)

例えばこのように画像を30°回転させたものを表示させる場合です
MainActivity.java

//package com.example.testscaletype;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Matrix;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.image_view);
        Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),
                R.drawable.image2);

        // 画像の横、縦サイズを取得
        int imageWidth = bitmap1.getWidth();
        int imageHeight = bitmap1.getHeight();

        // Matrix インスタンス生成
        Matrix matrix = new Matrix();

        // 画像中心を基点に30度回転
        matrix.setRotate(30, (float)imageWidth/2, (float)imageHeight/2);

        // 90度回転したBitmap画像を生成
        Bitmap bitmap2 = Bitmap.createBitmap(bitmap1, 0, 0,
                imageWidth, imageHeight, matrix, true);
        imageView.setImageBitmap(bitmap2);
    }
}

//package com.example.testscaletype;

import android.app.Activity;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.Matrix;

import android.os.Bundle;

import android.widget.ImageView;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ImageView imageView = findViewById(R.id.image_view);

Bitmap bitmap1 = BitmapFactory.decodeResource(getResources(),

R.drawable.image2);

// 画像の横、縦サイズを取得

int imageWidth = bitmap1.getWidth();

int imageHeight = bitmap1.getHeight();

// Matrix インスタンス生成

Matrix matrix = new Matrix();

// 画像中心を基点に30度回転

matrix.setRotate(30, (float)imageWidth/2, (float)imageHeight/2);

// 90度回転したBitmap画像を生成

Bitmap bitmap2 = Bitmap.createBitmap(bitmap1, 0, 0,

imageWidth, imageHeight, matrix, true);

imageView.setImageBitmap(bitmap2);

}

　
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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</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"

tools:context=".MainActivity">

<ImageView

android:id="@+id/image_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toLeftOf="parent"

app:layout_constraintRight_toRightOf="parent"

app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
これは、他とは毛色が違うので、別物として扱うことになりますね
　
　
関連ページ:

References:
ImageView.ScaleType – Android Developers
Matrix | Android デベロッパー | Android Developers