[Android] ImageView 画像を表示させる３つの方法

アプリで画像を表示させるにはImageViewを使います。画像表示には色々方法がありますが、下のような３つの設定方法について試してみたいと思います。

Android Studio
2024.1.1

ImageView

画像はボタンなどと違って静的なUIとして、例えば背景やあるいは何かを説明する画像などとして使うことが多いでしょう。
　
ここでは３種類の表示方法を取り上げてみます
尚、画像を後から変えたり、サイズの変更などImageView画像を拡大縮小など動的に扱うこともできます。

レイアウトに直接

drawableから読込

assetsから取込

画像はdrawableにコピー＆ペーストします。下は例として
– img_1.jpg
– img_2.jpg
をdrawableに入れます。
画像が無ければ \mipmap\ic_launcher_round\以下のアイコン画像を適当に使うこともできます。

assetsフォルダを作って大きな画像を入れることもできます。
　

目次
1. レイアウトに直接埋め込むケース
2. drawable にある画像を読み込む
3. assets に画像を置きそれを取り込む場合
4. drawable VS assets
5. Picasso ライブラリー

レイアウトに直接埋め込むケース

これは、最初からレイアウトに書き込んでしまうものです。
　
drawable に img_1.jpg を入れた状態で、レイアウトファイル activity_main.xml には以下のように記述します。
また、レイアウトはデフォルトのConstraintLayoutを使ってますが、RelativeLayoutやLinearLayoutでも簡単に作成できます。
　
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">

    <ImageView
        android:src="@drawable/img_1"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/img_description1"/>

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

<ImageView

android:src="@drawable/img_1"

android:scaleType="centerCrop"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:contentDescription="@string/img_description1"/>

</androidx.constraintlayout.widget.ConstraintLayout>

　
リソースファイルですが、contentDescriptionを入れろというワーニングに対応しただけです。この画像の説明を入れるわけですが、なくても大丈夫ではあります。
res¥values¥strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="img_description1">image1</string>
</resources>

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

<string name="img_description1">image1</string>

</resources>

　
以上の設定で画像が表示されました。
　

　
設定内容をみてみると、
　

android:src="@drawable/img_1"

1	android:src="@drawable/img_1"

　
ここでdrawableにある画像 img_1 を表示する source として定義しています。
（jpg, pngの拡張子はいりません）
　

android:layout_width="match_parent"
android:layout_height="match_parent"

1 2	android:layout_width="match_parent" android:layout_height="match_parent"

　
画面の縦横一杯の領域で画像を表示する設定ですが、実際の画像ピクセルと表示領域は必ずしも合ってはいません。scaleTypeは centerCrop を使うと画面に合うように拡大縮小してくれます。
　

android:scaleType="centerCrop"

1	android:scaleType="centerCrop"

　
この場合では、MainActivity.java になにも記述する必要はありません。

drawable にある画像を読み込む

上と同様に画像 img_2.jpg は同じく drawableにあるとして、そのIDコードを

findViewById

で呼びだし setImageResource(ID) で表示します。
コードで画像を呼び出しているので動的に画像の変更ができます。
　

ImageView imageView2 = findViewById(R.id.image_view_2);
imageView2.setImageResource(R.drawable.img_2);

1 2	ImageView imageView2 = findViewById(R.id.image_view_2); imageView2.setImageResource(R.drawable.img_2);

　
レイアウトは、MainActivityで呼ばれるIDに対応させます

android:id=”@+id/image_view_2″
　

    <ImageView
        android:id="@+id/image_view_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

<ImageView

android:id="@+id/image_view_2"

android:layout_width="match_parent"

android:layout_height="match_parent" />

　
まとめるとこうなります
MainActivity.java

//package your.package.name;
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.ImageView;

public class MainActivity extends AppCompatActivity {

    @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;
        });

        ImageView imageView2 = findViewById(R.id.image_view_2);
        imageView2.setImageResource(R.drawable.img_2);

    }
}

//package your.package.name;

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.ImageView;

public class MainActivity extends AppCompatActivity {

@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;

});

ImageView imageView2 = findViewById(R.id.image_view_2);

imageView2.setImageResource(R.drawable.img_2);

}

　
activity_main2.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">

    <ImageView
        android:id="@+id/image_view_2"
        android:scaleType="centerCrop"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/img_description2" />

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

<ImageView

android:id="@+id/image_view_2"

android:scaleType="centerCrop"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:contentDescription="@string/img_description2" />

</androidx.constraintlayout.widget.ConstraintLayout>

　
リソースファイルです
res¥values¥strings.xml

<resources>
    <string name="app_name">YourAppName</string>
    <string name="img_description2">image2</string>
</resources>

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

<string name="img_description2">image2</string>

</resources>