Animation / Layouts / Transition

Manual Layout Transitions – Part 2

Layout transitions are an important aspect of Material design as they help to indicate the user flow through an app, and help to tie visual components together as the user navigates. Two important tools for achieving this are Activity Transitions (which we’ll cover in the future) and Layout Transitions which we have covered on Styling Android before. However Layout Transitions are only supported in API 19 and later. Previously we looked at how the animations in Dirty Phrasebook were achieved, and in this article we’ll take a further step and look to automatically generate animations between two distinct layout states.

The Transitions framework introduces the concept of Scenes to represent specific layout states. We’ll mimic this by defining two separate layouts, one which represents the default view and a second which represents the layout when we’re in input mode. Let’s begin by creating these two layouts – we’ll base them on the Dirty Phrasebook layouts, but we’ll simplify them a little to make them easier to understand.

First here’s the default layout

This is the same basic layout as we used previously, but it has been simplified a little. The controls that we’re interested in are those with the IDs toolbar, focus_holder, input, input_view, input_done, and translation.

It looks like this:

Screenshot_2015-05-17-22-17-21

The layout for when we’re in input mode is:

This is almost identical the the previous layout, the differences are:

  1. input_view is now aligned to the top of its parent rather than below the toolbar. Essentially it now covers the toolbar.
  2. input_done is now visible – previously it was invisible.
  3. translation is now invisible – previously it was visible.

It looks like this:

Screenshot_2015-05-17-22-17-26
These two layouts represent the two states of the UI – they would be our Scenes if we were using the Transitions API.

What we’re going to do this time is to switch between the two layouts as we toggle in and out of input mode and as, before, we detect the focus change in our MainActivity:

As well as detecting the focus change we also add some logic to the setContentView() method. We’ll be switching between the layouts by calling setContentView() and it’s important to remember that the view hierarchy will change, so we need to find the Views within the layout each time the layout changes. Also we need to remove the focus listener and re-attach it to the new input View.

As before, we have a TransitionController which handles the focus change:

Currently all this does is call setContentView() on the Activity to switch between the two layouts.

If we now try this, we can see that we jump between the two states, but lack the animations. In the next article in this series we’ll look at how to get things animating.

The source code for this article is available here.

© 2015, Mark Allison. All rights reserved.

CC BY-NC-SA 4.0 Manual Layout Transitions – Part 2 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

Leave a Reply

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