2023/7/14

【Kotlin】Android Studioで画像(XML/PNG/JPG)を取り込んで表示させる方法！ImageView

この記事からわかること

Android Studioで画像を取り込む方法
XML/PNG/JPG/形式
ImageViewの使い方
ボタンクリックで表示させる方法
デモプレビューに表示させる方法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Narwhal Feature Drop
Kotlin：2.1.10
Material3
AGP：8.9.2
Gradle：8.11.1
Mac M1：Sequoia 15.4

公式：Android Studio

Android Studioに画像を取り込んで表示させる方法をまとめていきます。

Android Studioに画像を取り込んで表示させる方法

Android Studioにアプリ内で使用する画像を取り込んで表示させるには「app」＞「res」＞「drawable」の中に該当の画像をドラッグ & ドロップすればOKです。画像形式はXML/PNG/JPGどれでも対応しているようです。

ドラッグ & ドロップの際に「drawable」目掛けてドロップしないと正常に入れ込むことができなかったので注意してください。ドロップできると以下のポップアップ(Move)が表示されるので「Refactor」をクリックすれば完了です。

端末の解像度に対応する

先ほどの手順だと元画像が1サイズだけある場合の想定でした。この場合だと端末の解像度に違いによって画像がぼやけたりしてしまうことがあります。これを避けるための方法として2つの方法があります。

解像度(ピクセル密度)ごとに画像を用意する
ベクター画像を使用する

1.解像度(ピクセル密度)ごとに画像を用意する

1つ目の方法はpngやjpgしか用意が難しい場合に活用する方法で、各解像度ごとにリサイズした画像を用意して入れ込む方法です。詳細は以下の記事を参考にしてください。

2.ベクター画像を使用する

ベクター画像(SVGやPSD)で画像が用意できる場合は複数サイズ用意する必要はありません。Android Studioには「Vector Asset Studio」というツールが導入されており、自動でXML形式に変換してくれます。XML形式の画像では画質を低下させずに、さまざまな画面密度に合わせて同じファイルのサイズを変更してくれます。

この方法であれば「XMLファイル1つ」で画像を管理することができるのでAPKサイズの低減にも効果があります。方法は以下の記事を参考にしてください。

ImageViewを使用して表示させる

表示させるためにはImageViewを使用します。表示する画像は属性android:srcで指定します。「drawable」ディレクトリ内にある画像ファイルには@drawable/ファイル名で参照することができます。

activity_main.xml
<ImageView
  android:id="@+id/image"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:src="@drawable/android"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  />

ボタンをクリックで動的に画像を表示する

最初から画像を表示させるのではなく、ボタンをクリックした時に画像を表示するように変更してみます。まずはButtonを追加してImageViewの下に配置し、ImageViewのandroid:srcを一度削除しておきます。

activity_main.xml
<ImageView
    android:id="@+id/image"
    android:layout_width="416dp"
    android:layout_height="233dp"

    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.6"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.453" />

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_label"
    app:layout_constraintTop_toBottomOf="@id/image"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    />

次にMainActivity.ktからボタンをクリックした時の処理を追加します。ImageViewを取得したらsetImageResourceメソッドを呼び出して対象のリソースを渡します。

MainActivity.kt
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView

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

        var image:ImageView = findViewById(R.id.image)
        val button:Button = findViewById(R.id.button)

        button.setOnClickListener {
            image.setImageResource(R.drawable.android)
        }
    }
}

これでボタンをクリックすると画像が表示されるようになりました。

また画像だけでなくマテリアルアイコンを表示させることもできます。使い方に関しては以下の記事を参考にしてください。

【Android Studio】Vector Asset Studioの使い方！マテリアルアイコン画像

Android Studio内でのデモプレビューのみ切り替える

この場合Android Studio内のデモプレビューではクリック後に表示される画像が空白の状況なのでわかりやすいようにAndroid Studio内のデモプレビューでのみ表示するtools:src=@drawable/ファイル名を追加します。

activity_main.xml
<ImageView
  android:id="@+id/image"
  android:layout_width="416dp"
  android:layout_height="233dp"
  tools:src="@drawable/android"
  app:layout_constraintBottom_toBottomOf="parent"
  app:layout_constraintEnd_toEndOf="parent"
  app:layout_constraintHorizontal_bias="0.6"
  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintVertical_bias="0.453" 
  />

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android