Shared Animation

Shared animation is provided by android. It will animate the view from one position to another position while the new fragment or activity is entering. This Example will show you how to use shared animation in the activity.

Note: Before getting started you have to check that your activity must extend AppCompatActivity or ActivityCompat.

Steps:-


1) Open style.xml and add transition event true.
2) Add the string in string.xml to specify the name of the animation. You can give the static name also but the name must be the same in both the view.
3) Give android: transition name to view you want to move.
4) Add compact animation code to start the animation.


So let's start with changing the style. So do that first open the style.xml file add the below code in it.

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowContentTransitions">true</item> //here
</style>

So after the changes are done for the style we are going to create the string for the transition. The transition string is a unique key and used by the android to identify the correct view to make the proper animation.

Example:
<string name="transitionAnimation">TransitionAnimation</string>
// name of the animation you can give any name

So now we are going to create the content file which has all the view. Here is the 
content.xml for me:

<LinearLayout>
    <ImageView       
        android:id="@+id/imageView"
        android:layout_width="200dp"
        android:layout_height="400dp" 
       android:src="@drawable/ic_wallpaper" 
       android:transitionName="@string/transitionAnimation"/>
</LinearLayout>


Same as the content we have to create the Detail_view.xml.

<LinearLayout >
    <ImageView        
        android:id="@+id/imageView_details"
        android:layout_width="match_parent"
        android:scaleType="fitXY"
        android:layout_height="400dp"
        android:src="@drawable/ic_wallpaper"
        android:transitionName="@string/transitionAnimation"/>
</LinearLayout>

So our view created now let's bind the view with the activity and add the animation logic.

   public class MainActivity extends AppCompatActivity {

    @Override    

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView view = (ImageView) findViewById(R.id.imageView);

        view.setOnClickListener(new View.OnClickListener() {
            @Override            
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, DetailsActivity.class);
                ActivityOptionsCompat options = ActivityOptionsCompat.
                        makeSceneTransitionAnimation(MainActivity.this, v, getString(R.string.transitionAnimation));
                startActivity(intent, options.toBundle());
            }
        });
    }

You don't have to do any code in the details activity for the animation so we are just binding 
the correct view.

public class DetailsActivity extends AppCompatActivity{

    @Override    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.detail_view);
    }
}

If you want to move more than one view then you have to create a pair of the views and pass it. For example,

Intent intent = new Intent(this, Details.class);
Pair<View, String> p1 = Pair.create((View)ivProfile,"image");
Pair<View, String> p2 = Pair.create(vtext, "text");
Pair<View, String> p3 = Pair.create((View)tvSend, "button");
ActivityOptionsCompat options = ActivityOptionsCompat.
        makeSceneTransitionAnimation(this, p1, p2, p3);
startActivity(intent, options.toBundle());

Comments

  1. This comment has been removed by the author.

    ReplyDelete
  2. Write more; that’s all I have to say. It seems as though you relied on the video to make your point. You know what you’re talking about, why waste your intelligence on just posting videos to your blog when you could be giving us something enlightening to read?
    Surya Informatics

    ReplyDelete

Post a Comment