Lollipop Activity Transitions

Lollipop Activity Transitions

One of the most interesting aspects of the Material Design specifications is the visual continuity between activities. With just a few lines of code, the new Lollipop APIs allow you to meaningfully transition between two activities. This breaks the classic activity boundaries of the previous Android versions and allows the user to understand how elements go from one point to another.

Example

In this tutorial, we are going to learn how to achieve this result with Google’s Material Design guidelines.

VIDEO DEMO

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill required details. By default my activity is MainActivity.java.

2. Open build.gradle and include this libraries show below:

3. Create activity_main.xml and add the RecylerView to it..

4. Create POJO class naming User.java for RecyelerView rows.

5. For circle shape view create circle_bg.xml under drawable directory.

6. Now create custom_user_row_layout.xml for RecyclerView row items and set above created circle_bg.xml to View.

For android:transitionName attribute check Step 10.

7. For RecyclerView click listener create RecyclerClickListener.java class and add the following code to it. This class will be use for implementing click listener on RecyclerView items.

8. Now create RecyclerView_Adapter.java for displaying views and setting data over views.

Important Lines: 

9. Now create new directory naming values-v21 under res directory and under that directory create styles.xml. Here you have to enable content transitions and set the entrance and the exit of the views that are shared between the two activities.

Please note that your project must be targeted to (and thus be compiled with) at least Android API 21 or 21+.

The animations will be ignored on systems that don’t have Lollipop installed. Unfortunately, because of performance reasons, the AppCompat library does not provide complete backward compatibility for these animations.

10. Now you have to point out the relationship between the two common elements of the views. In this example, the shared views are the field containing the name of the User, the one of the phone number, user name, and the colored circle. For each of them, you have to specify a common transition name. For this reason, start adding in the strings.xml resource file the following items:

Then, for each of the three pairs, in the layout files add the android:transitionName attribute with the corresponding value. For the User Name, the code looks like this:

Repeat the same process for the other two views, that we had done in Step 6.

11. For showing details of user form one activity to another create new layout naming details_activity_layout.xml and add the transition attributes.

12. Now open your MainActivity.java and the following code to it. In this following code the main code that we need to focus is:

You will need to attach a specific ActivityOptions bundle to the intent. The method you need is makeSceneTransitionAnimation, which takes as parameters the context of the application and as many shared elements as we need. In the onItemClick method of the RecyclerView.

For each shared element to be animated, you will have to add to the makeSceneTransitionAnimation method a new Pair item. Each Pair has two values, the first is a reference to the view you are transitioning from, the second is the value of the transitionName attribute.

Be careful when importing the Pair class. You will need to include the android.support.v4.util package,not the android.util package. Also, remember to use ActivityCompat.startActivity method instead of the startActivity method, because otherwise you will not be able to run your application on environments with API below 16.

13. Finally create  DetailsActivity.java and get the receive data from MainActivity and set over views.

On back navigation click call super.onBackPressed() else the back transition will not appear.

14. That’s all you have to done.

Thanks. 🙂

Download Source Code – >

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)