Sunlight 3.04.01 – Adding Activity Transitions

New transition effects, introduced with KitKat and completed in the Lollipop release allow a nice way to make smooth transitions between Activites. This is also one of the main concepts of user interface behavior in Material Design.

[*Caution: Outdated content. My sunlight project has been discontinued. It refers to earlier versions of the v7 appcompat Library (21.0.3) and Android Studio (1.1).  I’ll keep the posts online for reference but with the current version of appcompat Library things may be different / easier today, so please refer to more up-to-date sources.]

This article is part of the Sunlight project and refers to Lesson 3  (Display Content in DetailActivity) of Googles Udacity Course “Developing Android Apps”.

Oh, must I, Miss Sophie?

No. In fact this may be the wrong moment to implement it, since the design part is to be covered in lesson 5 and this stadium of development is very immature. But it looks so nice and we all are keen on sweet lollipops.

WYSIWYG: (Android 4.1 without transitions on the left, Android 5.0 on the right.)

So let’s add an Activity Transition

Even if they only work in Android 5. At first some adjustments have to be made.

Turn off the lights

We switch back to the dark style of Android. Why? The build in touch (ripple) effects simply looks better since the Theme.AppCompat.Light.NoActionBar seems not to match the generic lists, created by the RecyclerViewLinearLayoutManager combo. (Light effects on light background. Hard to see…)

In styles.xml we switch the base theme from Theme.AppCompat.Light.NoActionBar to Theme.AppCompat.NoActionBar

And in list_item_forecast.xml we remove the text color by deleting this attribute:

 android:textColor=”@color/primary_text_default_material_light”

Now the bright color perfectly fits. And we add the clickable attribute to the TextView. (Which is important! Otherwise the ripple effect won’t show up later.) So here is our new version of list_item_forecast.xml

Coupling the Views

Next step is to create a pair of views that will be the shared / constant elements between the list and the detail view. Those will be the TextView in the detail fragment and the clicked list item in the list. For a detailed description please look at the developer docs, the “Start an activity with a shared element” section.

The target element in the fragment_detail.xml will be marked with a android:transitionName attribute:

The source will be set in the onClick handler in our ForecastViewHolder (in the ForecastFragment.java file). Instead of simply starting the new Activity with an intent, we create a bundle that contains references to our paired views. But only if we are on Android L or above. This is the code in the onClick handler context:

Jack the rippler

It’s easy to get this fancy new ripple animation (in Lollipop / L / API 21) attached to an element. Simply add these parameters:

But there is an issue shown in the IDE because we have specified min API level of 10 for this project:

To keeps things nice and clean, we skip the last line and will instead add it via code in the constructor of our ForecastViewHolder (ForecastFragment.java file), surrounded by our version check:

This is not the cleanest approach, but as I mentioned in the introduction of this article: This whole thing is not considered to be a “best practice” in programming art. It’s to demonstrate the general concept of view transitions and to get some fancy animations.

There and Back Again

If you start the app now, you will get the ripple effect and the transition from list to detail view. But when closing the detail view, there will be no shared element – just the standard transition.
To round up this behavior, we will leave the DetailActivity by calling the finishAfterTransition() method of the android.support.v4.app.ActivityCompat class. Implemented in the onOptionsItemSelected method:

The Circle of Life

And that’s it. Now we’ve gone through a complete circle of transitions from list to detail an back.

Take a look at the complete code on GitHub and compare it to the one without transitions.

If you’d like to read more about this, I recommend this series of articles by Alex Lockwood.

In the upcoming posts I will stick closer to the Udacity curriculum and whenever possible try to avoid those corny misuse of qoutation, book and film titles as sub-headlines.

 

Leave a Reply

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