Blinking screen on image transition between activities

Question

I implemented an image transition between two activities using the new shared elements from lollipop. It's working but I get a weird white blinking on the entire screen during the transition and I can't find how to get rid of it. Here is an example:

Here is how the second activity is launched

public static void launch(
            @NonNull Activity activity, @NonNull View transitionView, Game game) {
        ActivityOptionsCompat options =
                ActivityOptionsCompat.makeSceneTransitionAnimation(
                        activity, transitionView, game.gameFullId);
        Intent intent = new Intent(activity, ListImportationLoginActivity.class);
        intent.putExtra(INTENT_EXTRA_GAME, retailer);
        ActivityCompat.startActivity(activity, intent, options.toBundle());
    }

Then in onCreate:

ViewCompat.setTransitionName(mLogoView, mGame.gameFullId);  

And the theme file:

<resources>
    <style name="Theme.MyApp.NoActionBar" parent="Theme.MyApp.NoActionBar.Base">
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>
</resources>  

Thanks for your help

Phenomena

can u please send me code of this animation i am trying it for a long – Isabea

Answer 1

On the exiting activity, call getWindow().setExitTransition(null);

On the entering activity, call getWindow().setEnterTransition(null);

It will prevent the fade out of the exiting activity and the fade in of the entering activity, which removes the apparent blinking effect.

Monti

@AnantShah you could. Why not try it out? You need two activities first. – Monti

@kevinze Thank you. It worked now before that it was not working. one upvote from my side. – Fool

@sativa Let us know more info, like where you called the code, Android version etc. – Monti

@KevinLee I've solved the problem by calling getWindow().setSharedElementsUseOverlay(true); – Carrero

@sativa, getWindow().setSharedElementsUseOverlay(true); defaults to true, so i'm not sure if that actually fixed anything... – Indefinable

However it has some side effects like black backgrounds when the app is killed by the system. – Guesswork

it removes the fading effect. it's like sweeping the matter – Selfmortification

@KevinLee, where should I call these lines? Can you provide a code sample? – Shushan

Answer 2

I solved this issue by changing background color of my default theme, hope this is still can help to someone save the time.

<item name="android:windowBackground">@color/black</item>
<item name="android:colorBackground">@color/black</item>

Cashandcarry

I used @android:color/transparent thanks to this question as all others caused bugs. Cheers! – Inesita

None of the answers here work besides this one. Kudos to you! – Decker

Answer 3

The "white blinking" you are seeing is the result of the two activities alpha-animating in and out during the transition: when activity A starts activity B, activity A fades out and activity B fades in.

If you want to prevent the status bar and/or navigation bar from fading during the transition (and thus reducing the "blinking" effect a bit), you can look at this post.

Paddie

I was wondering if you could help me with this question goo.gl/d5opg5 . It's not one of those "fix-this-for-me" questions, I promise. – Lousewort

Please quote the relevant part of source in your answer. – Panda

Indeed you need to exclude status bar and navigation bar, thank you for pointing it out! – Sapajou

Answer 4

Make some method in helper like

public static Transition makeEnterTransition() {
    Transition fade = new Fade();
    fade.excludeTarget(android.R.id.navigationBarBackground, true);
    fade.excludeTarget(android.R.id.statusBarBackground, true);
    return fade;
}

Execute it in the activity that you are starting like this

getWindow().setEnterTransition(TransitionUtils.makeEnterTransition());

Source https://github.com/alexjlockwood/custom-lollipop-transitions/

Ibsen

How about the nexus devices with soft key bar at the bottom? What's the id of that bar so we can exclude it from the animation as well? – Softball

Answer 5

I have had similar blinking issues and tried many of the examples mentioned here but for me it didn't solve the issues. What did work for me was changing the window background for the second activity theme to transparent. (@Webdma used black, but in my case that made the screen flash black instead of white)

    <item name="android:windowBackground">@android:color/transparent</item>

Oligarchy

Answer 6

<!-- edit in your theme -->
<item name="android:windowEnterTransition">@android:transition/no_transition</item>
<item name="android:windowExitTransition">@android:transition/no_transition</item>

Thimbleful

Answer 7

I had a similar problem. I solved the blinking status bar and navigation bar issues by excluding them from the transition as per @Alex's suggestion, but the screen was still blinking when switching between the activities. When I removed the "finish();" statement after startActivity(); the screen stopped blinking. May it was due to the closing of calling activity. Hope this helps someone.

Kutchins

Answer 8

Some useful answers above. As far as I understand this is caused by activity transition overlap. To overcome this issue I have used the following values in the onCreate() methods of both activities:

getWindow().setAllowEnterTransitionOverlap(false);
getWindow().setAllowReturnTransitionOverlap(false);

Freeborn

Did nothing for me – Pericycle

Answer 9

Add this in your style.xml. This prevents the screen from Blinking

    <item name="android:windowIsTranslucent">true</item>

Stepmother

Answer 10

In my situation, the second activity did not have a status bar which was defined in the activity theme with this tag.

<item name="android:windowFullscreen">true</item>

Since it was not mandatory to hide the status bar in portrait mode, I removed this tag and manually hide/show the status bar when needed and the blinking is gone.

Fairyfairyland

Answer 11

Add these codes inside onCreate of both Activities where you doing Transition elements

   Fade fade = new Fade();
        View decor = getWindow().getDecorView();
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container),true);
        fade.excludeTarget(android.R.id.statusBarBackground,true);
        fade.excludeTarget(android.R.id.navigationBarBackground,true);

        getWindow().setEnterTransition(fade);
        getWindow().setExitTransition(fade);

This will exclude the animation from the navigation and status bar, So no more blinking

Hobgoblin

Answer 12

Elements fade in and out, unless you specify explicitly they are the same on both activities. That includes status and navigation bar.

In your particular case, I would add the toolbar and these two views to the shared elements list:

List<Pair> viewPairs = new ArrayList<>();
viewPairs.add(Pair.create(findViewById(android.R.id.statusBarBackground), Window.STATUS_BAR_BACKGROUND_TRANSITION_NAME));
viewPairs.add(Pair.create(findViewById(android.R.id.navigationBarBackground), Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME));
// Add your views...

Pair[] array = new Pair[viewPairs.size()];
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(), viewPairs.toArray(array)).toBundle();
// ...

ActivityCompat.startActivity(activity, intent, options.toBundle());

Sugarplum

Answer 13

In Java, add the below line in the parent activity after ActivityCompat.startActivity(activity, intent, options.toBundle());

getWindow().setExitTransition(null);

and add the below line in onCreate method of child activity

getWindow().setEnterTransition(null); 

In Kotlin, add the below line in the parent activity

window.setExitTransition = null 

and add the below line in onCreate method of child activity

window.setEnterTransition = null

Praedial