Transition Animation between Activity to Fragment

This project explains how transition take place in Android from one Activity to another. And Animation by clicking list item with result of showing Details of respective items in another activity.When transition from one activity to another activity we can easily draw a picture between two screens.In Detail Screen we display next consecutive list items and by clicking on respective  list item shows details of the respective item followed by Animation.

It determines how shared element views are animated from one Activity/Fragment to another during a scene transition.

Android devices used to support transitions between activities and fragments that involved transitions of the entire view.let us take one Example, list view consists of different row items. Clicking any row would show details of that respective row in the next screen(activity/fragment) and we can easily differentiate the transition between two screens.

And also on clicking row item shows details of the row and also with that showing next list item in detail screen by attaching fragment to load next item details with animation.

Add following item in your Theme for transition.

   <item name="android:windowContentTransitions">true</item>

As you can see a android:transitionName attribute is declared as a string in the root view of both the layouts.

android:transitionName="@string/transition"
  • Main Activity:

Create  a custom List view which populates its layout from a Array List in Main Activity. We need to define model to represent the data for each list item.

//array list with model for data source

final ArrayList<Model> values = new ArrayList<Model>();        

//initialize ListView

ListView listView = (ListView) findViewById(R.id.list_view);  

//adapter with passing data of each list item
CustomAdapter adapter = new CustomAdapter(this, values);

//attach adapter to listview
 listView.setAdapter(adapter)

//Passing each list item data from list view to another activity.

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
   @Override
   public void onItemClick(AdapterView<?>parent,View view,int  position,long id){ 
        Intent intent = new Intent(MainActivity.this, 
                                                  DetailView.class);

        //passing respective list item data 
        intent.putExtra("position",values);
       


        //Get the transition name from the string

        String transitionName = getString(R.string.transition);
        
        //define the view that animation start

   //ActivityOptionsCompat.makeSceneTransitionAnimation work only on api level >= 21.

       
        ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,
                        view,   // Starting view
                        transitionName    // The String
                );
        //start the intent
        ActivityCompat.startActivity(MainActivity.this, intent, options.toBundle());
    }
});

 

 

  • DetailView Activity :

In Detail Activity we can achieve different types of animation when on click list item which  shown in bottom of the detail layout.

Some examples are shown in detail activity .First create anim subfolder in res folder for animation. The animation examples are given below.

1.bottom_in.xml:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator"> 
<translate android:fromYDelta="100%p" 
           android:toYDelta="0" android:duration="500"/>
 </set>

 

2.top_out.xml:

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:interpolator="@android:anim/linear_interpolator"> 
<translate android:fromYDelta="0" 
           android:toYDelta="-100%p" 
           android:duration="500"/>
</set>

 

In detail activity by on click next listview item we can draw a animation with displaying detail view of that list item in fragment by passing respective list item data to fragment.

//initialize animation and load animation 
Animation topOut;
topOut = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.top_out);

//animation start
AndroidFragment.androidLayout.startAnimation(topOut);

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *