Screen flicker while fragment transition

Question

Here is the link to recording while pressing back button

While i am using a animation in a fragment transaction it's working fine but i am getting a flicker of the next screen which is annoying me. I have been searching for it since 2 days no progress.

I am using this code for transition

public void moveToBaseSelect() {
    FragmentTransaction ft = fragmentManager.beginTransaction();
    ft.setCustomAnimations(R.anim.enter_from_right,R.anim.exit_to_left,R.anim.enter_from_left,R.anim.exit_to_right);
    ft.replace(R.id.home_frame, new BaseSelectFragment(), HomeActivity.BASE_SELECT);
    ft.addToBackStack(HomeActivity.BASE_SELECT);
    ft.commit();

}

public void moveToLogin()
{
    if(fragmentManager.getBackStackEntryCount()>=1 && fragmentManager.getBackStackEntryAt(fragmentManager.getBackStackEntryCount()-1).getName().equals(HomeActivity.LOGIN))
        return;

    FragmentTransaction ft = fragmentManager.beginTransaction();
    ft.setCustomAnimations(R.anim.enter_from_right,R.anim.exit_to_left,R.anim.enter_from_left,R.anim.exit_to_right);
    ft.replace(R.id.home_frame, new LoginFragment(), HomeActivity.LOGIN);
    ft.addToBackStack(HomeActivity.LOGIN);
    ft.commit();
}

The anim files

enter from left

<set>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fillAfter="true"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXDelta="-100%p"
        android:toXDelta="0%p" />
</set>
</set>

Enter from right

<?xml version="1.0" encoding="utf-8"?>
<set>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fillAfter="true"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXDelta="100%p"
        android:toXDelta="0%p" />
</set>
</set>

exit to left

<?xml version="1.0" encoding="utf-8"?>
<set>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fillAfter="true"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXDelta="0%p"
        android:toXDelta="-100%p" />
</set>
</set>

exit to right

 <?xml version="1.0" encoding="utf-8"?>
<set>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fillAfter="true"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromXDelta="0%p"
        android:toXDelta="100%p" />
</set>
</set>

---

I have tried a alternative that's working by using animator instead of anim and app.fragment instead of v4.fragment

But I am extremely curious to know is there any solution if i stick with the anim method

Evvie

The code looks Okay. While switching Fragment are you doing any work that will block main thread ? – Decameter

Can you share the code where you are calling these functions. I want to see the flow. Also mention if flicker occurs on all transitions like forward and back? – Spongin

I am just calling the above functions on button click – Evvie

Without looking at a bigger picture, it's hard to tell. – Circumstance

Are you using the support library ? If yes which version ? – Piwowar

I updated the support library from 27.0.2 -> 27.1.0 and I'm seeing something similar – Carlson

@Carlson exact same thing here, I reverted to 27.0.2 and the flicker went away. This workaround: #49180795 fixed it for me without having to go back to 27.0.2. – Indifference

Cheers for the link @Indifference – Carlson

I have tried a alternative that's working by using animator instead of anim and app.fragment instead of v4.fragment – Evvie

Answer 1

Remove your <set> elements in your animation files. I just had this problem and It disappeared when I removed them.

My xml for an animation:

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_mediumAnimTime"
    android:fromXDelta="0%"
    android:toXDelta="-100%" />

Corsica

This should be the accepted answer. Removing the set will remove the flicker. Thanks! – Mariannamarianne

Still its flicker, I changed animation file also not working – Hardtop

Answer 2

The issue is because commit() is asynchronous and presumably some race condition causes the flickering. Solved by making transaction manager do commitNow() instead of commit()

Marchall