I am an Android developer and enthusiast with over 10 years of Java development experience. I'm big fan of good design an appreciate well though usability design in applications. Juhani is a DZone MVB and is not an employee of DZone and has posted 111 posts at DZone. You can read more from them at their website. View Full User Profile

Android UI Pattern - Expand in Context

01.12.2012
| 4464 views |
  • submit to reddit
This is a very simple pattern that is not very widely used yet but I believe it will be soon. The idea is very simple, and not even new, but very effective and useful. A phone screen can be very small and often there's way more information about any topic than you can fit on the screen. One option is to make the content scroll but that makes it more difficult to access any information beyond the large scrolling block. Enter expand in context






Pattern card

Problem Available screen real estate is too small for showing all information on the screen. Making the full content visible would demand too much space making other content difficult to reach or the content is dynamic and its size is not know and therefore a maximum size must be set.

Solution Create an area with maximum (fixed) size where the content is placed. If the content doesn't fit the area users can tap to expand it to show full content.

It is important to show that there is more content available. A typical way to do that is to have a down arrow on the bottom edge of the expandable area.

If the content doesn't contain any additional controls like buttons and links it can ba a good idea to make the whole area one large hit target for expanding the content. In that case the content area should be clearly visually marked as such.

Making the area collapsable after user has expanded it is optional. If collapsing is possible it is important to maintain correct scrolling position in the parent container after collapse is done. Ie. the content must not jump to a different position. 

Consequences 
  1. More compact UI that allows better overview of full content.
  2. Dynamically loaded content can be safely included in design without having to limit its size.
  3. More fluent UI as users don't have to open another screen to view more content.

 

From http://www.androiduipatterns.com/2011/12/android-ui-pattern-expand-in-context.html

Published at DZone with permission of Juhani Lehtimaki, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Afandi Merathi replied on Sun, 2012/03/18 - 7:12am

be sure to let the user contract the view by tapping on the content surface without having to scroll up and look for the header/contract button.

A visual feedback would be very nice. A subtle change of background or having the view flash for a moment would help the user understand that something changed.

Consequences: you loose the change to handle click event to perform other kinds of actions.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.