Remove the white screen a Slide window transition creates when it starts

Question

I am using an activity with a black background. That same activity has a toolbar and a DrawerLayout as well. This white screen makes the look inconsistent.

It can become more apparent when there is a very slow Slide transition when opening an activity.

Is there any way to remove this?

Code that sets the enter transition on the second activity:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        Window window = activity.getWindow();

        Slide slide = new Slide();
        slide.setSlideEdge(Gravity.RIGHT);
        slide.excludeTarget(android.R.id.statusBarBackground, true);
        slide.excludeTarget(android.R.id.navigationBarBackground, true);
        window.setEnterTransition(slide);
        window.setExitTransition(slide);
    }

My styles

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>

    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowActivityTransitions">true</item>
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowAllowEnterTransitionOverlap">false</item>
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowSoftInputMode">stateAlwaysHidden|adjustResize</item>
</style>

Okay I'll update you. But I have already tried window.setReturnTransition(slide); along with window.setExitTransition(slide); and window.setEnterTransition(slide); on the calling activity and nothing changed. I am going to try only putting the window.setReturnTransition(slide); — John Ernest Guadalupe, Nov 09 '15 at 06:35

score 26 · Accepted Answer · edited May 23 '17 at 12:02

How to fix the white screen during the slide in transition for the started activity:

karaokyos answer utilizes the pre Lollipop activity transitions. These transitions target the whole activity screen and don't provide capabilities to exclude parts of the screen during the transition.

John Ernest Guadalupe approach utilizes the transitions introduced in Lollipop (Activity & Fragment Transitions). The observed "white screen" is the window background, that is fading in during the transition (more info about Activity & Fragment Transitions ). I guess you are setting the "black background" of your activities in the root view of your layout? Setting the window background to black should solve your problem.

Programmatically:

window.setBackgroundDrawable(new ColorDrawable(Color.BLACK));

Theme:

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

This is the resulting transition.

Edit: How to provide the required slide out (left) transition for the calling activity

First Activity:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    Slide slide = new Slide();
    slide.setInterpolator(new LinearInterpolator());
    slide.setSlideEdge(Gravity.LEFT);
    slide.excludeTarget(android.R.id.statusBarBackground, true);
    slide.excludeTarget(android.R.id.navigationBarBackground, true);
    window.setExitTransition(slide); // The Transition to use to move Views out of the scene when calling a new Activity.
    window.setReenterTransition(slide); // The Transition to use to move Views into the scene when reentering from a previously-started Activity.
    window.setBackgroundDrawable(new ColorDrawable(Color.BLACK));
}

Second Activity:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Window window = getWindow();
    Slide slide = new Slide();
    slide.setInterpolator(new LinearInterpolator());
    slide.setSlideEdge(Gravity.RIGHT);
    slide.excludeTarget(android.R.id.statusBarBackground, true);
    slide.excludeTarget(android.R.id.navigationBarBackground, true);
    window.setEnterTransition(slide); // The Transition to use to move Views into the initial Scene.
    window.setReturnTransition(slide); // The Transition to use to move Views out of the Scene when the Window is preparing to close.
    window.setBackgroundDrawable(new ColorDrawable(Color.BLACK));
}

You can try different interpolators to change the pace of the transition.

Resulting transition with LinearInterpolator:

If you want to get rid of the gap between the slide out of the first and slide in of the second activity you can set:

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

How to debug transitions:

It can become a lot more apparent when you set a very slow duration to the Slide transition when opening an activity.

To (visually) debug transitions there are 3 options ("Window animation scale","Transition animation scale", "Animation duration scale") in the development settings to multiply the duration of all transitions/animations.

This actually makes sense. But the "white screen" I am referring to, should actually "look" or "be" the next screen. Like when using karaokyo's answer, the view "sliding in" is the next activity. Is this possible with the Lollipop transitions? Not just setting the color of the "windowBackground" but actually seeing the next activity while the "exitTransition" is playing? — John Ernest Guadalupe, Nov 11 '15 at 09:19
@John Ernest Guadalupe I just added a gif with the resulting effect. I assume you are trying to remove the fadding effect of the previous activity (on the left side during the transition) ? — Andreas Wenger, Nov 11 '15 at 12:59
Yes I am trying to do that and I want it to slide out to the left as well while the other activity slides in from the right. Sorry I haven't fiddled around with the transitions yet — John Ernest Guadalupe, Nov 12 '15 at 01:04
@John Ernest Guadalupe updated the Answer to provide the slide out transition for the calling activity — Andreas Wenger, Nov 12 '15 at 10:59
Wow thanks for the very informative answer. But the most important one of all was the windowBackground attribute and the setting of interpolators. Thank you very much — John Ernest Guadalupe, Nov 12 '15 at 23:04
The answer is thorough, however the part that shows how to get rid of the gap does not work. I think it's not possible to do this with the current API, therefore you have to remove the exit transition in order to get rid of the gap. — OriShuss, Jun 02 '18 at 17:22

score 4 · Answer 2 · answered Nov 09 '15 at 03:49

Seems like the old activity will not "stay" in view when you have a custom transition. I don't know when that started, but you definitely didn't need a stay animation in some previous API levels. The old 2.0 era overridePendingTransition still works fine:

anim/slide_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="600"
        />
</set>

anim/slide_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:duration="600"
        />
</set>

anim/stay.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:duration="600"/>
</set>

Main activity's startActivity:

startActivity(intent);
overridePendingTransition(
        R.anim.slide_in,
        R.anim.stay
);

Second activity's return:

@Override
public void onBackPressed() {
    super.onBackPressed();

    overridePendingTransition(
            0,
            R.anim.slide_out
    );
}

This is what I implemented now. The only problem with this is that the Navigation Bar appears before the enter animation, but that is more acceptable than the white screen. Do you know of any way to prevent the Navigation bar from showing in this route? — John Ernest Guadalupe, Nov 09 '15 at 06:36
You could take a look at fragment transaction animations: http://stackoverflow.com/questions/4817900/android-fragments-and-animation. But there are some limitations with the z ordering of fragments that might make it not viable in this situation. — tachyonflux, Nov 09 '15 at 23:26

score 0 · Answer 3 · answered Nov 29 '17 at 09:46

I also had this problem but with fragment transitions and since all the solutions that came up were just setting the window background which probably works with activities I wasn't really getting anywhere. Than I thought => let's just try to set the background of rootview in the fragment I'm pushing in to transparent.. And voila, this did the trick. So the rootview of the fragment that I'm pushing looks like this in xml:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">

score 0 · Answer 4 · answered Jun 02 '18 at 17:21

This is a little late, but I encountered the same thing myself, and found no answer for it in the internet.

The reason for the gap between the screens is that you call both an exit transition and an enter transition.

The exit transition happens as soon as you call startActivity, and the enter transition happens later, after the onCreate of the new activity.

Therefore, the order of events will be:

Activity A exits
Wait for activity B to finish loading
Activity B enters

For me the solution was to simply remove the exit transition. The outcome looks pretty much the same, and the lack of the exit transition is barely noticeable as a new activity slides over it.

After removing the exit transition, the time when there was a "white screen" is not seen because in that time Activity A is still present.

score 0 · Answer 5 · answered Jul 02 '23 at 15:52

I have the same problem when navigating to fragments. I changed windown background to transparent and the problem was fixed. I hope this help.

@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getActivity().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));

    TransitionInflater inflater = TransitionInflater.from(requireContext());
    setEnterTransition(inflater.inflateTransition(R.transition.slide_right));
}

Remove the white screen a Slide window transition creates when it starts

5 Answers5

How to fix the white screen during the slide in transition for the started activity:

Edit: How to provide the required slide out (left) transition for the calling activity

How to debug transitions:

Linked