Image from network with Glide too small on Android

Question

I am trying to download an image from the network and display in the ImageView with Glide using scaleType="centerInside" option.

For some reason, the image, when downloaded from the network, looks much smaller on the screen than when the same image is put into the ImageView from resources.

Example:

Both images can be found here. I would argue that even those images that have been set from resources look smaller than they could actually be when compared to what I see on my laptop. I understand that there is something related to the screen density in play, but how can I make these images be of "user-friendly size", e.g., a bit larger?

Even a different image of 600x250 px size is ridiculously small on the phone (with ImageView's layout_height and layout_width set to "wrap_content").

Code from the Activity:

public class DisplayImagesActivity extends AppCompatActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.display_image_activity);
        setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
        setTitle("Hello StackOverflow!");

        ImageView top_left = (ImageView) findViewById(R.id.top_left);
        ImageView top_right = (ImageView) findViewById(R.id.top_right);
        ImageView bottom_left = (ImageView) findViewById(R.id.bottom_left);
        ImageView bottom_right = (ImageView) findViewById(R.id.bottom_right);

        String[] urls = new String[] {
            "http://imgur.com/6jMOdg0.png",
            "http://imgur.com/AhIziYr.png"
        };

        top_left.setImageResource(R.drawable.top_left);
        top_right.setImageResource(R.drawable.top_right);
        Glide.with(this)
             .load(urls[0])
             .signature(new StringSignature(new Date().toString()))
             .into(bottom_left);
        Glide.with(this)
             .load(urls[1])
             .signature(new StringSignature(new Date().toString()))
             .into(bottom_right);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                this.finish();
                return true;
            default:
                return super.onOptionsItemSelected(item);
        }
    }
}

display_image_activity.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/match_parent"
    android:orientation="vertical">

    <include layout="@layout/_toolbar" />

    <ScrollView
        style="@style/match_parent">
        <RelativeLayout
            style="@style/match_parent"
            android:padding="16dp">

            <TextView
                style="@style/wrap_content"
                android:id="@+id/text_resources"
                android:layout_marginBottom="10dp"
                android:text="From Resources"/>

            <ImageView
                android:id="@+id/top_left"
                android:background="@color/Linen"
                android:layout_width="150dp"
                android:layout_height="120dp"
                android:layout_marginBottom="20dp"
                android:layout_below="@id/text_resources"
                android:scaleType="centerInside"/>

            <ImageView
                android:id="@+id/top_right"
                android:background="@color/Linen"
                android:layout_width="150dp"
                android:layout_height="120dp"
                android:layout_toRightOf="@id/top_left"
                android:layout_toEndOf="@id/top_left"
                android:layout_below="@id/text_resources"
                android:layout_marginLeft="20dp"
                android:layout_marginStart="20dp"
                android:scaleType="centerInside"/>

            <TextView
                style="@style/wrap_content"
                android:id="@+id/text_network"
                android:layout_below="@id/top_left"
                android:layout_marginBottom="10dp"
                android:text="From Network"/>

            <ImageView
                android:id="@+id/bottom_left"
                android:background="@color/Linen"
                android:layout_width="150dp"
                android:layout_height="120dp"
                android:layout_below="@id/text_network"
                android:scaleType="centerInside" />

            <ImageView
                android:id="@+id/bottom_right"
                android:background="@color/Linen"
                android:layout_width="150dp"
                android:layout_height="120dp"
                android:layout_toRightOf="@id/bottom_left"
                android:layout_toEndOf="@id/bottom_left"
                android:layout_below="@id/text_network"
                android:layout_marginLeft="20dp"
                android:layout_marginStart="20dp"
                android:scaleType="centerInside" />

        </RelativeLayout>
    </ScrollView>
</LinearLayout>

Answer 1

I faced the same problem. Glide tries to interpret what my app needs and transforms the images accordingly, resulting in too small images in some places. In my case the ImageViews use adjustViewBounds="true" and MaxWdth/Height leading to problems

While I am not anything close to being a Glide Expert, I found a quick fix working for me.

I simply added a .dontTransform() mehod call, which in my case is OK since I use thumbnails that already have been pre-scaled.

GlideApp.with(context).load(fireStorage).dontTransform().into(imgView);

(Using a Placeholder would probably also have helped, but again, for me this was the easiest way)

Answer 2

This code saved my time. It works for me!

        //Get actual width and height of image
        StrictMode.ThreadPolicy policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();
        StrictMode.setThreadPolicy(policy);
        Bitmap bitmap = null;
        try {
            URL url = new URL(imgUrl);
            bitmap = BitmapFactory.decodeStream((InputStream)url.getContent());
        } catch (IOException e) {
            Timber.e("Image Loading Error %s", e.getLocalizedMessage());
        }

        if (bitmap != null) {
            final float scale = resources.getDisplayMetrics().density;
            final int dpWidthInPx = (int) (bitmap.getWidth() * scale + 0.5f);
            final int dpHeightInPx = (int) (bitmap.getHeight() * scale + 0.5f);

            //Set result width and height to image
            GlideApp.with(imgAns.getContext())
                    .load(imgUrl)
                    .override(dpWidthInPx, dpHeightInPx)
                    .into(imgAns);
        }

Answer 3

Your ImageViews can be that fixed size if you want although they should be flexible with match_parent/wrap_content.

I don't know what Glide does for sure but it looks like the resolution of the images from the network is smaller than the ones from resources. The android:scaleType="centerInside" gives you the behaviour that the image will be SHRUNK until both dimensions of the image fit in the ImageView and it's aspect ratio is maintained. If you want the images to expand to fit the ImageView you probably want android:scaleType="fitCenter" instead. You might also want android:adjustViewBounds to be true/false depending on how you want it to behave if you decide to make the dimensions flexible.

The documentation for scaleType is useful here: https://developer.android.com/reference/android/widget/ImageView.ScaleType.html https://developer.android.com/reference/android/graphics/Matrix.ScaleToFit.html#CENTER

Answer 4

Your images cannot be bigger than what you defined:

android:layout_width="150dp"
android:layout_height="120dp"

Try

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