元画像(左)と画面サンプル(右)
##はじめに
画像を用意してください。著作権フリーのものか自身が作成したものがいいと思います。
著作権フリーの場合でも利用制限を確認してください。
illustAC
illust image
いらすとや などなど
画像を表示させる方法はいくつかあるみたいですが、この記事は drawable にファイルを置き、それを ImageView に書き込んで終了です。
##drawable フォルダ
練習用に TestImageView というプロジェクトを用意しました。
app → res → drawable
drawable を右クリック、Show in Explorer をクリックしdrawable-v24 フォルダを展開、ここに使用する画像を置いてください。
AndroidStudio の drawable フォルダを開いて画像ファイルがあればOKです。
なお、Java の変数命名規則が働いていると思われます。数値から始まるファイルは置けませんので、その場合はファイル名を変更してください。
##.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:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/momizi"/>
</androidx.constraintlayout.widget.ConstraintLayout>
上記のコードで表示されたのがこちらの画面。
ちょっと、、上下のサイズが合ってないですね。。大丈夫です、なんとかなります。下に進んでください。
この段階で「java.lang.RuntimeException: Canvas: trying to draw too large(******bytes) bitmap.」というエラーが出る場合は、画像サイズが大きいです。
画像を小さくしてみましょう。
オンライン画像サイズ変更
##ImageView.ScaleType
Qiita のこちらの記事が参考になります。
【ImageView】ScaleTypeと表示画像の対応表
上記のコードの ImageView に android:scaleType="centerCrop" を追記しました。
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/momizi"
android:scaleType="centerCrop"/>
</androidx.constraintlayout.widget.ConstraintLayout>
上記のコードで表示されたのがこちらの画面。
上下左右共に画面に合いました!
##参考
nyanのアプリ開発([Android] ImageView 画像を表示させる3つの方法)
nyanのアプリ開発([Android] ImageView画像をScreenのレイアウトにフィットさせるには)
【ImageView】ScaleTypeと表示画像の対応表