Over a million developers have joined DZone.
Silver Partner

Android UI Pattern - Expand in Context

· Java Zone

The Java Zone is brought to you by Stormpath—offering a pre-built identity API for developers. Easily build powerful user management, authentication, and authorization into your web and mobile applications. Check out this tutorial to build a simple web app with Spring Boot and Spring Security in 15 minutes.

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

The Java Zone is brought to you by Stormpath—offering a pre-built, streamlined user management API for building web and mobile applications. Learn how token authentication with JWTs (JSON Web Tokens) helps secure websites and avoids the pitfalls of using cookies and sessions.

Topics:

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}