Skip to content

Shared Element Transitions not working well with Glide #502

Closed
@jmrboosties

Description

@jmrboosties

http://stackoverflow.com/questions/30923463/android-glide-library-not-working-with-shared-element-transitions

See the above Stack Overflow question for more details.

Using UIL I'm able to achieve the effect easily. I'd like to use Glide but if I can't get these transitions to work it might be a dealbreaker. Thanks!

Activity

TWiStErRob

TWiStErRob commented on Jun 18, 2015

@TWiStErRob
Collaborator

Check #487, but mostly the related Glide group conversation I linked... I know it's long and messy, but that may help.

jmrboosties

jmrboosties commented on Jun 18, 2015

@jmrboosties
Author

I'll have a look at this, thank you!

sjudd

sjudd commented on Jun 18, 2015

@sjudd
Collaborator

Are the ImageViews the same size? If not, try using override() to force them to be the same size?

Also if you have a simple sample app demonstrating this, I'd love to test this use case more. It's definitely something we should support.

sjudd

sjudd commented on Jun 21, 2015

@sjudd
Collaborator

Let us know if you have more questions or want to post that sample app :)

jmrboosties

jmrboosties commented on Jun 22, 2015

@jmrboosties
Author

Sorry, was away from computer this weekend. I'll upload the sample app shortly.

jmrboosties

jmrboosties commented on Jun 22, 2015

@jmrboosties
Author

@sjudd link to a github project for the simple app I made trying to test the shared element transition with glide: https://github.com/jmrboosties/glide-sandbox

boxcounter

boxcounter commented on Sep 15, 2015

@boxcounter

Same issue. Any news?

TWiStErRob

TWiStErRob commented on Sep 15, 2015

@TWiStErRob
Collaborator

Hmm, this needs to be reopened, because we have a sample now.

reopened this on Oct 10, 2015
TWiStErRob

TWiStErRob commented on Oct 16, 2015

@TWiStErRob
Collaborator

There's a good workaround at #627 (comment), however it's async and delays transition until the image loads, which might take a while. Loading a lower quality one and then replacing it with a higher one may be better.

1 remaining item

TWiStErRob

TWiStErRob commented on Oct 21, 2015

@TWiStErRob
Collaborator

@MFlisar I think you can add a separate .listener() to the thumbnail's load and to the main load separately so you have more control over when to react.

MFlisar

MFlisar commented on Oct 21, 2015

@MFlisar

@TWiStErRob

Is this possible if I don't use a separate request but thumbnail(0.1f)?

TWiStErRob

TWiStErRob commented on Oct 21, 2015

@TWiStErRob
Collaborator

Hmm that's tricky :) I think you can simply just copy the outer request into .thumbnail()'s parentheses and add .sizeMultiplier(), then you can easily add a listener. (Be careful to manually add the .fitCenter()/.centerCrop() to the thumb's load, that's not automagic.)

The main question is: is it worth loading a thumbnail if you will postpone the transition until the full load completes anyway? I would imagine adding a listener to thumbnail and start the transition on the low quality image, but I don't know what will happen when the full image arrives then... I didn't try this transition yet, but it's in my queue.

MFlisar

MFlisar commented on Oct 21, 2015

@MFlisar

Actually, the question you ask is the reason I said "don't use a thumbnail". I just used it everywhere and therefore didn't realise that this is causing all my attempts to solve the problem to fail...

Actually I'm doing something like you say, but Glide loads my preview and afterwards the really big image is loaded behind it into a scalable subsamling view, so in my case I really don't want to use the thumbnail...

sjudd

sjudd commented on Oct 29, 2015

@sjudd
Collaborator

So in the example @jmrboosties added a while ago, the flashing occurs because the ImageView in MainActivity and the ImageView in DifferentActivity are different sizes. To get a cache hit in Glide, the sizes need to be identical. You can force them to be identical using override().

In our applications we often define a couple of fixed sizes based on screen density to make it easy to do this kind of transition.

If you can't or don't want to use fixed sizes, then you won't get a memory cache hit, and the workaround @TWiStErRob pointed out earlier is also reasonable. As long as your images are reasonably sized, they will decode quickly and the delay won't really be noticeable.

This doesn't happen in Picasso/UIL/etc because they don't cache transformed images by default. The benefit of that approach is that it avoids this kind of problem. The disadvantage is that you frequently use more memory and end up with longer decode times than necessary. I'd imagine that you'd see a similar flash if you used the fit() API with Picasso.

Otherwise this is working as expected, so I'm going to re-close the issue.

X3Daniel

X3Daniel commented on Jun 5, 2016

@X3Daniel

so,what is the final solution?

TWiStErRob

TWiStErRob commented on Jun 5, 2016

@TWiStErRob
Collaborator

@X3Daniel it depends on what your problem is, read Sam's summary just above, read the related issues, try out https://github.com/TWiStErRob/glide-support/tree/master/src/glide3/java/com/bumptech/glide/supportapp/github/_847_shared_transition and if none of these help feel free to open a new issue where we can investigate your problem(s).

X3Daniel

X3Daniel commented on Jun 5, 2016

@X3Daniel

@TWiStErRob Thanks a lot!! i will try the support project later~

sjaramillo10

sjaramillo10 commented on Jun 6, 2018

@sjaramillo10

Hopefully this answer can help you.

fenrir-wangxin

fenrir-wangxin commented on Jul 6, 2018

@fenrir-wangxin

Same issue. Any news?

dakshj

dakshj commented on Jun 16, 2022

@dakshj

One important thing when postponing the transition:

DON'T use a thumbnail or so as this will result in a call of the onResourceReady when the thumbnail is ready and this does interfere with the transition...

After about an incredibly long day of debugging, I too figured out that the latest version of Glide still has issues when mixing lower-quality thumbnails with shared element transitions. I guess that when the full resource is ready, it replaces into the imageview, and that causes issues with the shared element transition (SET) zooming-in weirdly. The second time on, the SET fails completely because the image is replaced into the target so quickly that things just don't work.

I'm still exploring what can be done to fix this. My potential fix would be to just load the thumbnail (which would onlyRetrieveFromCache(true) so that the SET is quick), and on the success of that load will I trigger a load of the full-sized image resource in a separate Glide call.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @jmrboosties@sjudd@MFlisar@X3Daniel@TWiStErRob

        Issue actions

          Shared Element Transitions not working well with Glide · Issue #502 · bumptech/glide