Image is skewed on Android TV

fasteque commented 7 years ago

When I try to load this particular image, it gets skewed as you can see. That's the first time I see this issue on Android TV, I've never had this issue before (I'm also using images with the same resolution).

Test image: https://www.mycloud.ch/s/S00339A78D4B53E687A5F536B4AD90FD3B91180FC81D086F523D7813A130C2F1 Result on screen: https://www.mycloud.ch/s/S002854C7D41ACC6A035E5DDFADE5B3037098A1DC071E13E413AD251DE8EFFFA

I've observed that if I don't change the format, then the image is correctly rendered on screen.

Originally the image was loaded from the network (see logs), but it occurs also when used as a drawable.

Please notice that if I try to use this image on a sample application running on a mobile (S7 Edge, Android 7.0), everything works fine.

Glide Version: 3.7.0 and 3.8.0-SNAPSHOT Integration libraries: okhttp3-integration:1.4.0@aar Device/Android Version: Nvidia Shield TV, Android 7.0 Issue details / Repro steps / Use case background: loading an image in a ImageView

Glide load line / GlideModule (if any) / list Adapter code (if any):

Glide.with(context)
    .load(R.drawable.test)
    .asBitmap()
    .format(PREFER_ARGB_8888)
    .skipMemoryCache(true)
    .diskCacheStrategy(DiskCacheStrategy.NONE)
    .into(imageView);

Layout XML:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <ImageView
        android:id="@+id/slideshow_image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:adjustViewBounds="true"
        android:scaleType="fitCenter"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/slideshow_image_overlay"
        android:layout_width="@dimen/mycloud_slideshow_video_icon_overlay"
        android:layout_height="@dimen/mycloud_slideshow_video_icon_overlay"
        android:layout_centerInParent="true"
        android:src="@drawable/video_overlay"
        android:visibility="gone"/>

    <RelativeLayout
        android:id="@+id/slideshow_loading_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone">

        <ProgressBar
            android:id="@+id/slideshow_progress_bar"
            style="?android:attr/progressBarStyleLarge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:indeterminateTint="@color/colorPrimary"
            android:indeterminateTintMode="src_in"
            android:progressBackgroundTint="@color/colorPrimary"/>
    </RelativeLayout>
</RelativeLayout>

Stack trace / LogCat:

03-02 13:44:03.771 1881-2009/? I/chromium: [1881:2009:INFO:mdns_cast_service.cc(706)] Recent mDNS app subtypes: [supported:'233637DE',] [unsupported:]

                                           --------- beginning of system
03-02 13:44:04.183 679-1321/? I/ActivityManager: START u0 {cmp=com.swisscom.mycloud/.tv.slideshow.SlideshowActivity (has extras)} from uid 10140 on display 0
03-02 13:44:04.184 23865-23912/com.swisscom.mycloud D/ADBMobile: ADBMobile Debug : Analytics - Request Queued (ndh=1&cid.&AVID.&as=0&id=2C5C072F8530A64D-40000305C000219A&.AVID&.cid&aamlh=6&vid=18162109733677354189&ce=UTF-8&c.&a.&DeviceName=SHIELD%20Android%20TV&OSVersion=Android%207.0&TimeSinceLaunch=63&RunMode=Application&Resolution=1920x1080&AppID=myCloud%201.0.0%20%281%29&.a&mycloud_tvapp.&v2.&platform=Google%20Play&device=tv%20app&uid=18162109733677354189&language=de&subsection=photos%2Ftimeline%2Fphoto&section=photos&channel=online&version=2016%2F09%2Fv%3A1.0.0&.v2&.mycloud_tvapp&.c&t=00%2F00%2F0000%2000%3A00%3A00%200%20-60&mid=80516297130458303154287904315188415800&pageName=tvapp%2Fphotos%2Ftimeline%2Fphoto&aamb=cIBAx_aQzFEHcPoEv0GwcQ&aid=2C5C072F8530A64D-40000305C000219A)
03-02 13:44:04.186 753-767/? D/RSMouse: mFeatureEnabled=true  mPackageEnabled=false
03-02 13:44:04.228 23865-23865/com.swisscom.mycloud D/SlideshowFragment: ####### thumbnail URL: https://library.prod.mdl.swisscom.ch/thumbnail/Storage::Photos::Asset::dDRXWGZQVXN0QmtNS3FBdWR5cTlrdz09?cache=false&height=2160&access_token=Me4/EFx20UGYQ7Xltq4ozQ==
03-02 13:44:04.231 23865-23865/com.swisscom.mycloud D/SlideshowFragment: ####### thumbnail URL: https://library.prod.mdl.swisscom.ch/thumbnail/Storage::Photos::Asset::R1JnNzJWRXlvMDVwSks5VFZIRVRkUT09?cache=false&height=2160&access_token=Me4/EFx20UGYQ7Xltq4ozQ==
03-02 13:44:04.233 753-24287/? D/RSMouse: mFeatureEnabled=true  mPackageEnabled=false
03-02 13:44:04.257 23865-23971/com.swisscom.mycloud D/ADBMobile: ADBMobile Debug : Analytics - Request Sent(ndh=1&cid.&AVID.&as=0&id=2C5C072F8530A64D-40000305C000219A&.AVID&.cid&aamlh=6&vid=18162109733677354189&ce=UTF-8&c.&a.&DeviceName=SHIELD%20Android%20TV&OSVersion=Android%207.0&TimeSinceLaunch=63&RunMode=Application&Resolution=1920x1080&AppID=myCloud%201.0.0%20%281%29&.a&mycloud_tvapp.&v2.&platform=Google%20Play&device=tv%20app&uid=18162109733677354189&language=de&subsection=photos%2Ftimeline%2Fphoto&section=photos&channel=online&version=2016%2F09%2Fv%3A1.0.0&.v2&.mycloud_tvapp&.c&t=00%2F00%2F0000%2000%3A00%3A00%200%20-60&mid=80516297130458303154287904315188415800&pageName=tvapp%2Fphotos%2Ftimeline%2Fphoto&aamb=cIBAx_aQzFEHcPoEv0GwcQ&aid=2C5C072F8530A64D-40000305C000219A)
03-02 13:44:04.268 679-699/? I/ActivityManager: Displayed com.swisscom.mycloud/.tv.slideshow.SlideshowActivity: +75ms
03-02 13:44:04.279 23865-23907/com.swisscom.mycloud D/OpenGLRenderer: endAllActiveAnimators on 0x96649380 (AssetCardView) with handle 0x92da7eb0

fasteque commented 7 years ago

Additional remarks

Nvidia Shield, Android 7.0: issue is reproducible
Xiaomi Mi Box, Android 7.0: issue is reproducible
Xiaomi Mi Box, Android 6.0: issue is not reproducible
Custom TV player, Android 5.1.1: issue is not reproducible

UgglyNoodle commented 7 years ago

I also observed this issue using Glide 4.0.0 on Nvidia Shield, Android 7.0 when loading the following images:

https://i.redd.it/i6e3jrhi5idz.jpg https://i.redditmedia.com/dKnJGi2Wmv1QiMzMlaUQPQFEtwiSwTpu9dQ58Z-VOgo.jpg?s=ef28188c88f5d493351ed73f9795cd01 https://i.redditmedia.com/Wuau4sxxknMXKjgxBxmtYeMhMFzdHJ8a4Y123ye5X2M.jpg?s=f4fdb5983a2250b265dd3eed99a60230

Glide.with(this)
    .load(path)
    .listener(this)
    .apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.DATA))
    .into(mImageView);

The same images are not skewed when using Glide 3.8.0. I guess this is because the DecodeFormat default changed to ARGB_8888 in 4.0.0?

UgglyNoodle commented 7 years ago

This still occurs using Glide 4.1.0. Is there any workaround for this issue (while still using ARGB_8888)?

UgglyNoodle commented 7 years ago

I checked the dimensions of images for which the skewing occurs, and noticed that at least one of the dimensions is always odd.

5345×3563 5101×3401 5297×2988 5257×3505 5298×6623 10481×3882 2963×2527 3957×2408 3162×4743 3162×4743 3877×5255 2699×3374

sjudd commented 7 years ago

Does forcing DownsampleStrategy.AT_MOST or DownsampleStrategy.AT_LEAST (needs to be applied after all transformations) fix the issue?

It's probably not ARGB_8888, but you could test that as well by changing the decode type to ARGB_8888 in Glide v3 and verifying whether or not you see the issue.

UgglyNoodle commented 7 years ago

Forcing DownsampleStrategy.AT_MOST or DownsampleStrategy.AT_LEAST does not fix the issue.

Using Glide 3.8.0 with ARGB_8888 does cause some images to skew (as noted by the original reporter, fasteque). What's interesting is that Glide 4.1.1 with ARGB_8888 caused some images to be skewed that were not skewed on Glide 3.8.0 with ARGB_8888. Details below.

Glide 4.1.1 with ARGB_8888 - skew (groups A and B) Glide 4.1.1 with ARGB_8888 with DownsampleStrategy.AT_MOST - skew (groups A and B) Glide 4.1.1 with ARGB_8888 with DownsampleStrategy.AT_LEAST - skew (groups A and B) Glide 4.1.1 with RGB_565 - no skew

Glide 3.8.0 with ARGB_8888 - skew (group A only) Glide 3.8.0 with RGB_565 - no skew

Group A: https://i.redd.it/6ayuikn2jgnz.jpg https://i.redd.it/bnvtlpk11inz.jpg

Group B: https://i.redd.it/g06rxz5nrhnz.jpg https://i.redd.it/308kn8c5tenz.jpg https://i.redd.it/dg0yypsw8gnz.jpg https://i.redd.it/kubm438msinz.jpg

UgglyNoodle commented 7 years ago

The skewing occurs on Nvidia Shield, but not on Nexus Player or the Android TV emulator.

davebytes commented 7 years ago

Just wanted to comment quickly that I believe there should be a fix for this in the next shield OS update.

UgglyNoodle commented 7 years ago

Thanks for the info! It would be great to hear any more details you have about this. According to the original reporter it's also reproducible on the Mi Box. Even if this was fixed for the Nvidia Shield, I wouldn't be able to switch my app over to use ARGB_8888 without understanding the cause of this and which other devices are affected.

stale[bot] commented 7 years ago

This issue has been automatically marked as stale because it has not had activity in the last seven days. It will be closed if no further activity occurs within the next seven days. Thank you for your contributions.

UgglyNoodle commented 6 years ago

I can confirm that this issue no longer occurs with Shield Experience 6.2. I'd still like to know the cause of this and which other devices are affected.

sjudd commented 6 years ago

Yeah me too actually. There was one older instance of this: https://github.com/bumptech/glide/issues/129.

If we can figure out exactly what the cause is we might be able to work around it in the library.

For the attached images above, does loading them in any size skew? Or only at specific sizes? If it's specific, could you provide a couple of example sizes?

If you disable Bitmap re-use (use BitmapPoolAdapter) do you still see this?

fasteque commented 6 years ago

Yep, I can confirm as well with Shield Experience 6.2 (main Android version is still 7.0, where the original issue was occurring) is not reproducible anymore.

UgglyNoodle commented 6 years ago

Using BitmapPoolAdapter did not fix the issue. Tested by putting the following in my AppGlideModule:

    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        builder.setBitmapPool(new BitmapPoolAdapter());
    }

Testing with https://i.redd.it/nppva79db5zz.jpg which is 3601×4646, I tried resizing to a number of different heights (837×1080, 837×1079, 836×1078, 835×1077, 834×1076) but the result was always skewed. It seems like it's the source image dimensions which causes the skew, since one of those dimensions is always odd.

UgglyNoodle commented 6 years ago

I uploaded a few test images: https://imgur.com/KbaV1T8, 2699×3374, skew https://imgur.com/CX8cdO2, 2699×3373, skew https://imgur.com/jRE4IMI, 2698×3374, no skew https://imgur.com/t56FtCz, 2698×3373, no skew

bumptech / glide

Image is skewed on Android TV #1765