android studio: ImageViewで画像をぼやけさせずに拡大する方法

Question

前提・実現したいこと

現在android studioでポケモン図鑑を作ろうとしています。
ImageViewに画像を載せるとき、自動的に画像がImageViewの大きさに合わせて拡縮されますよね？そこで、ゲームで使われるドット絵のように縦横の画素数が極めて少ない画像を画面いっぱいに表示しようとするとぼやけてしまいます。これをぼやけないようにしたいです。

発生している問題・エラーメッセージ

該当のソースコード

MainActivity

package com.example.myapplication

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.os.Environment
import android.widget.ImageView
import com.bumptech.glide.Glide
import kotlin.math.min

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val view = findViewById<ImageView>(R.id.imageView)

        //pngの場合
        view.setImageBitmap(
            BitmapFactory.decodeFile(
                Environment.getExternalStorageDirectory().path + "/MyApp/pikachu_static.png"
            )
        )

        //gifの場合
        Glide
            .with(this)
            .load(
                Environment.getExternalStorageDirectory().path + "/MyApp/pikachu_dynamic.gif"
            )
            .into(view)
    }
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <ImageView
            android:layout_width="0dp"
            android:layout_height="0dp"
            tools:srcCompat="@tools:sample/avatars"
            android:id="@+id/imageView"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            android:layout_marginTop="24dp"
            android:layout_marginStart="24dp"
            android:layout_marginEnd="24dp"
            android:layout_marginBottom="24dp"/>
</android.support.constraint.ConstraintLayout>

試したこと

1. Vector Drawableにする

→ベクタ画像にしたことでぼやけは完全になくなったが、gifには使えない。

1. あらかじめ縦横の画素数を何倍かに増やしておく

→ファイルサイズが大きくなるうえ、何倍に拡大すれば目立たなくなる程度のぼやけになるのかも決定できない。あまりスマートでないのでやりたくない。

1. Bitmap.createScaledBitmap()を使って動的に拡大したものを表示する

→静止画はきれいに表示できる。しかしGlideを使ってgifを表示するときは使えない。

Main Activity

package com.example.myapplication

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import android.os.Environment
import android.support.v7.app.AppCompatActivity
import android.view.ViewTreeObserver
import android.widget.ImageView
import kotlin.math.min

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val view = findViewById<ImageView>(R.id.imageView)

        view.viewTreeObserver.addOnGlobalLayoutListener(
            object : ViewTreeObserver.OnGlobalLayoutListener {
                override fun onGlobalLayout() {
                    //getResizedBitmap()はviewの幅と高さが決定してからでないと使えないためここで画像をセットする
                    view.setImageBitmap(
                        getResizedBitmap(
                            BitmapFactory.decodeFile(
                                Environment.getExternalStorageDirectory().path + "/MyApp/pikachu_static.png"
                            ),
                            view
                        )
                    )
                    //幅と高さだけ取得できれば用済みなのでリスナを削除
                    view.viewTreeObserver.removeOnGlobalLayoutListener(this)
                }
            }
        )
    }

    //originalをviewに入る最大の大きさに拡大する。このときcreateScaledBitmap()のfilterにfalseを指定するとぼやけないっぽい。
    fun getResizedBitmap(original: Bitmap, view: ImageView): Bitmap {
        val magnification = min(view.width / original.width, view.height / original.height)
        return Bitmap.createScaledBitmap(
            original, original.width * magnification, original.height * magnification, false
        )
    }
}

activity_main

さっきと一緒

補足情報（FW/ツールのバージョンなど）

android studioのバージョンは3.3、使用した実機及びエミュレータのOSは8.0、APIレベルは26です。
上にのせたサンプルコードで使っている画像はこの二つです。

pikachu_static

pikachu_dynamic

Comments

[kakajika]

自動的にImageViewの大きさに合わせて画像が拡縮されるということはないと思います。画像ファイルはどのディレクトリに入れていますか？

[REIK727]

画像ファイルは、掲載したソースコードの方ではリソースから読み込んでいましたが実際に作ったアプリの方ではストレージから読み込んでいます(掲載しているほうのソースコードもそれに合わせ一部修正しました)。

また画像の拡縮に関してですが、ImageViewは掲載したXMLに書かれているように「上下左右24dpのマージンを確保しつつ画面いっぱいに広げる」といったものになっています。先ほどこのマージンを大きくすることでImageViewが小さくなるようにし、画像がどのように表示されるのか確かめてみたのですがやはり画像の方もImageView同様小さくなっていました。なので「自動的にImageViewの大きさに合わせて画像が拡縮される」ということに間違いはなさそうなのですが...

[kakajika]

画像がImageViewのサイズよりも小さく描画されることを期待しているということでしょうか？それならばImageViewのScaleTypeを調整することによりそのような挙動になるはずです。
あくまでImageViewのサイズに合わせつつ描画時にボケないようにする方法については、回答に書きますね。

Answer 1

以下の3点をおさえてもらえば、お望みの挙動になると思います。

1. リソースファイルから読み込む際の拡縮について

Androidではdrawableフォルダに入れた画像ファイルを読み込む際に、フォルダのdpiと端末のdpiを比較して自動的に画像を拡縮した状態で読み込まれます。この機能は、 drawable-nodpi フォルダに画像ファイルを入れるようにすることで無効にできます。BitmapFactory.OptionsのinScaledをfalseにすることでも同じ挙動を実現できますが、読み込み方が限定されてしまうので前者の方法のほうが便利です。
編集後のご質問のようにストレージから画像ファイルを読み込むのであれば関係ないので、これはスルーしてください。

2. ImageViewの描画時の補間について

ImageViewのサイズよりも小さい画像をセットして描画する場合、デフォルトで PaintのFILTER_BITMAP_FLAG が有効になっているのでBilinear補間が効いた状態で描画されます。おそらく今回問題とされているのはこれが一番の原因でしょう。これを無効にするには、ImageViewを継承したクラスで描画処理をオーバーライドすれば可能です。

class NoFilterImageView(...) : AppCompatImageView(...) {
    // 特定のフラグを無効にするためのDrawFilter
    private val drawFilter = PaintFlagsDrawFilter(Paint.FILTER_BITMAP_FLAG, 0)

    override fun onDraw(canvas: Canvas) {
        val originalDrawFilter = canvas.drawFilter
        canvas.drawFilter = drawFilter // drawFilterを変更
        super.onDraw(canvas)
        canvas.drawFilter = originalDrawFilter // drawFilterを元に戻す
    }
}

3. Glideの読み込み時の拡縮について

Glideで画像を読み込む場合にも、デフォルトではGlide内部でImageViewのサイズに合わせて画像を拡縮する変形が行われます。RequestOptions#dontTransform を指定することでこれを無効にできます。

Glide.with(...)
    .setDefaultRequestOptions(RequestOptions().dontTransform())
    .load(...)
    .into(imageView)

Comments

[REIK727]

今試してみました。すごいです、png, gif共に完全に希望通りの挙動になりました。本当にありがとうございました。

Answer 2

これは直接の回答になっていないのですが・・・もしかしたら今後役にたつかと思い回答させてもらいます。

androidには解像度というのがあり、それは機種によって1(mdpi)：1.5(hdpi)：2(xhdpi)：3(xxhdpi)：4(xxxhdpi)というふうに分かれています。(数字はmdpiを1としたときの解像度の倍率)。

それで例えば、xxhdpiの機種でxhdpiの画像のみしか用意しないなどすると、画像がぼやけやすく、動きものろくなってしまいます。(実際に私がはまったことがあります・・・)

これを解決するにはBatch drawable importerというプラグインを使います。導入のしかたまでは記しませんが、それでいくらかぼやけなくなるかもしれません。
でも、これはドット絵を引き延ばす対策にはなっていないので、他のかたの回答をまつことをおすすめします。

Comments

[REIK727]

回答ありがとうございます。ご紹介いただいたBatch drawable importerを使ってみましたが、画像をインポートした時点ですでにぼやけたものになっており、ご指摘の通りドット絵には向かないようです。

あまり回答がつかないことからやはり一般的な解決法はないようなので、とりあえず現在は静止画についてはcreateScaledBitmap()でぼやけないように拡大、gifについてはデコーダを自力で作れないか検討しています。ご協力ありがとうございました。