Glide: How to show pictures with highest res possible

[jahirfiquitiva]

I'm trying to show a big picture in a custom ImageView.

But it looks kind of pixelated or low-res. I also want the picture to fill the screen without being scaled and keeping the aspect ratio. This is the code and the picture filling the screen works, but still looks bad. I tried changing Glide default Bitmap format to ARGB_888, like in this tutorial http://inthecheesefactory.com/blog/get-to-know-glide-recommended-by-google/en but didn't work.

Glide.with(this).load("http://www.jahirfiquitiva.net/wallpapers/CirclesBlue.png")
     .fitCenter().placeholder(d).diskCacheStrategy(DiskCacheStrategy.NONE).into(mPhoto);

And layout is

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              xmlns:fab="http://schemas.android.com/apk/res-auto"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent">

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />

    <jahirfiquitiva.projects.views.TouchImageView
        android:id="@+id/sticker_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar"
        android:scaleType="centerCrop"/>

    <com.melnykov.fab.FloatingActionButton
        android:id="@+id/walls_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="@dimen/fab_margin"
        android:layout_marginEnd="@dimen/fab_margin"
        android:layout_marginRight="@dimen/fab_margin"
        android:src="@drawable/ic_wallpapers_fab"
        fab:fab_colorNormal="@color/white"
        fab:fab_colorPressed="@color/light_grey"
        fab:fab_colorRipple="@color/semitransparent_black" />

</RelativeLayout>

TouchImageView is exactly this: https://gist.github.com/jahirfiquitiva/daaf5a81f09f21a44175

Thanks in advance for any help.

[TWiStErRob]

Try .override(Target.SIZE_ORIGINAL, Target.SIZE_ORIGINAL) and probably you want .dontTransform() instead of .fitCenter().

[jahirfiquitiva]

@TWiStErRob
I tried it, and yes, it shows the picture in its full size. But since it's really big it works slowly (the TouchImageView) ... I think my question was more like, how to show the picture in highest res possible.

The size shown already, is fine, but the picture looks blurry ... I thought it was because of the Bitmap format, but after changed it, the picture still looks bad

[TWiStErRob]

The blurryness may be something like this: https://github.com/bumptech/glide/issues/452#issuecomment-98692040. Please note that the Android decoder is limited to resizing to 2's powers.

The slowness most likely comes from caching. The default is to save the loaded/resized/transformed final image into the cache which in your case is the same size as original. So Glide grabs the URL decodes it and then writes it to the RESULT cache. Adjust .diskCacheStrategy () to your liking SOURCE doesn't save the resized image and all saves both so multiple sizes can be loaded from the same URL with just on download. ALL is most disk space and less network, fastest non-first loads.
Oh just noticed: NONE won't help with speed... it downloads and scales every time, Glide can't make your network faster.

I would suggest to try to make it work without the touchy ImageView, who knows if there are side effects to it.

Also work out the conflict between fitCenter (code) and centerCrop (XML), was that intentional?

Sorry for lot of changes just trying to eliminate the easy stuff.

[TWiStErRob]

Can you please make a screenshot of how "bad" it is?

[jahirfiquitiva]

@TWiStErRob

With speed I'm not refering to Network speed, but that when touching or moving the picture it works slowly.

the fitCenter in code, and centerCrop in xml is intentional because I want the picture to fill the screen and also be scrollable. That was the only way to make it work.

I just want to improve the quality of the loaded picture.

This is how it looks right now:

[sjudd]

You can always ask glide to load the image in maximum texture size for the device, though keep in mind that will use a large amount of memory.

use override() to set the texture size (usually 2048x2048 or 4096x4096 depending on the device, there's a fairly wide range of sizes), and dontTransform() to avoid cropping or clipping the Bitmap. You can still set a scale type on the View itself.

[TWiStErRob]

@jahirfiquitiva Assuming you found your way, if that's not the case feel free to reopen.