Search code examples
androidandroid-5.0-lollipop

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


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>

Solution

  • 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.

    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:

    Resulting transition

    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.