Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to start an Activity with Shared Element Transition Animation

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 563
    Comment on it

    A view that moves from one activity to another in a smooth motion is possible with the help of Shared Element Transition. Its a type of animation when user clicks on certain view in one activity the view smoothly expands to the next activity. When user navigates back the view shrinks to the previous activity.


    To make a screen transition animation between two activities that have a shared element:

    • Enable window content transitions in your theme by.
     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    
        <item name="android:windowContentTransitions">true</item>
     </style>
    
    • Define your transition as an XML resource.
    <string name="transition_string">Shared Element Transition</string>
    

    • Assign a common name to the shared elements in both layouts with the android:transitionName attribute.

    • Finally use the ActivityOptions.makeSceneTransitionAnimation() method.

        btnTransitionAnimation = (Button)findViewById(R.id.btnTransitionAnimation);
        final View viewStart = findViewById(R.id.image_small);
    
    // define a click listener
    btnTransitionAnimation.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent = new Intent(MainActivity.this, Next_Activity.class);
    
    
        // Get the transition name from the string
        String transitionName = getString(R.string.transition_string);
    
    
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName=""
        ActivityOptions options = null;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            options = ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,
                    viewStart, // starting view
                    transitionName // the string
            );
        }
    
    
        // start the new activity
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
            startActivity(intent, options.toBundle());
        }
    }
    
    });
    
    • To reverse the scene transition animation when you finish the second activity, call the Activity.finishAfterTransition() method instead of Activity.finish().

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: