How to fade out an Activity's UI, and fade in another Activity's UI?

Question

For the moment I have two AppCompatActivity:

1. The main one, which only displays a launcher UI (i.e. : there is only my app's logo, shown in large size) (ConstraintLayout)

2. The home one, which displays both a Drawer navigation menu (DrawerLayout) and the real app's UI (ConstraintLayout).

I want to fade out my launcher UI during 2 seconds. After this animation, I will start the second Activity, which must be faded in.

How should I do this?

I looked for some fading-in and fading-out in the in ConstraintLayout and DrawerLayout but I didn't find them. The idea was to adjust their value within the onCreate event handler of the main and other Activity (for the ConstraintLayout of the main, and also for the DrawerLayout and ConstraintLayout of the other).

Fitted

You should take a look to android transitions. More info here: developer.android.com/training/transitions/start-activity#java – Valente

@NicolaGallazzi Impossible. I have tried, but this transition concerns the main activity of my application. However, transitions must be used between 2 activities (of the same application). The transition I have written isn't executed. You can see my problem here: #52237812 . I think I'm going to implement Aksh's solution. What do you think of that? – Fitted

Answer 1

To fade out current activity:

Create a style in res/values:

<style name="PageTransition.Activity" parent="@android:style/Animation.Activity">
    <item name="android:activityOpenEnterAnimation">@android:anim/fade_in</item>
    <item name="android:activityOpenExitAnimation">@android:anim/fade_out</item>
    <item name="android:activityCloseEnterAnimation">@android:anim/fade_out</item>
    <item name="android:activityCloseExitAnimation">@android:anim/fade_in</item>
</style>

Then in your activiy's style which is usually Apptheme for MainActivity: add this line :

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/one</item>
        <item name="colorPrimaryDark">@color/one</item>
        <item name="colorAccent">@color/colorAccent</item>

        name="android:windowAnimationStyle">@style/PageTransition.Activity</item>

    </style>

To start next activity's UI delayed: For your case, you'll need to use handler to delay transitions:

 private final int interval = 1000; // 1 Second
    private Handler handler = new Handler();
    private Runnable runnable = new Runnable() {
        public void run() {

        ValueAnimator animator1 = ValueAnimator.ofInt(10, 0);

        animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {


                float x = (Integer) valueAnimator.getAnimatedValue() / (float) 10;
                yourview.setAlpha(x);
            }
        });

        animator1.setDuration(500);
        animator1.start();
}

Call this oncreate:

handler.postAtTime(runnable, System.currentTimeMillis() + interval);
handler.postDelayed(runnable, 2000); //two seconds

Obviously, you wanna set your initial alphas to 0. Hope this helped!

EDIT:

Define your own fadein-fadeout anims if your want to customize duration...

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_quad"
    android:fromAlpha="startalpha" android:toAlpha="endalpha"
    android:duration="{YourDuration in ms}"/>

If the previous way fails for some APIs, use this before starting your activity:

...
overridePendingTransition(int enterAnim, int exitAnim);
startActivity(intent);
....

Nan

"To fade out current activity" : I tried to do that but the animation isn't executed. To be sure, I would want to test this animation with a duration. How could I specify the latter in the XML file? – Fitted

I added overridePendingTransition(R.anim.fade_out_home_activity, 0); but my main activity still doesn't fade in :-/ Can I show you the entire code? – Fitted

overridePendingTransition(R.anim.fade_out_home_activity, 0): 0 is not any alpha value. so , use this: overridePendingTransition(R.anim.fade_in_other_activity, R.anim.fade_out_home_activity); Create anims first obviously; fade_in should be the first parameter – Nan

For the moment, I just want to set the fade in effect on the main activity. That's why I gave 0 as second param's value, as indicated in the documentation: (developer.android.com/reference/android/app/Activity): "exitAnim : int A resource ID of the animation resource to use for the outgoing activity. Use 0 for no animation.". In fact for the moment, I want to fadeIn my main activity, then fade it out, then fade in the new activity. – Fitted

Are you able to animate transition now? (As you said 0 is for no anim, but it creates somewhat jittery effect..) – Nan

MainActivity cannot be faded in oncreate as far as I know. But you can fade it out before starting another activity by that overridePendingTransition(R.anim.fade_in_other_activity, R.anim.fade_out_home_activity) I told you earlier. It'll fade out mainactivity and fade in the to the intent – Nan

if you want to fade in mainactivity, you can use handler tho – Nan

Ah I think I got your point..you're able to animate when starting another activity;however, mainactivity doesn't fades in oncreate..Am I right..if so, use handler – Nan

Let us continue this discussion in chat. – Fitted