Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 336
John Ernest Guadalupe Avatar asked Nov 06 '15 07:11

John Ernest Guadalupe


People also ask

What are slide transition effects?

A slide transition is the visual effect that occurs when you move from one slide to the next during a presentation. You can control the speed, add sound, and customize the look of transition effects.

What is the definition of transition in computer?

Transition refers to a computer science paradigm in the context of communication systems which describes the change of communication mechanisms, i.e., functions of a communication system, in particular, service and protocol components.

What is transition in computer for Class 6?

Transition is a tool in Microsoft PowerPoint that creates movement in the slides as one slide changes to another during a presentation. The ability to move text and objects, such as shapes, logos, etc., on the slide is called animation.

What do you mean by slide animation?

Slide animations are similar to transitions, but they are applied to individual elements on a single slide—a title, chart, image, or individual bullet point. Animations can make a presentation more lively and memorable.


2 Answers

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.

like image 58
Andreas Wenger Avatar answered Oct 06 '22 20:10

Andreas Wenger


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
    );
}
like image 4
tachyonflux Avatar answered Oct 06 '22 18:10

tachyonflux