Android UI Pattern - Expand in Context
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.
- More compact UI that allows better overview of full content.
- Dynamically loaded content can be safely included in design without having to limit its size.
- More fluent UI as users don't have to open another screen to view more content.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)