Android Tablets: Fragments and Multi-Pane UI design

When creating an Android application one of the most important aspects is the User Interface.  No matter what the application’s purpose is users will want a smooth easy to look at layout.  These layouts need to be able to adjust to different screens and orientations on a variety of devices.  One of the ways developers can achieve a better looking layout on larger screens is by using Panels.  By using Panels, developers can utilize screen space by combining multiple views into a single compound view.  Panels are better used with tablets since the screen size is much larger than mobile phones.  Generally on Android phones an application will first display a single view and Activity, and once a user chooses an item on the first view another Activity will open and display a different View.  By using Panels on tablets, a view can be viewed from a panel on the left while simultaneously viewing the panel with a separate view on the right.  Now of course a developer must take into account the orientation of the screen.  Applications will be required to transition between the horizontal and vertical screens.  A list of different ways to transistion from one orientation to the other is shown below.  Using multi-pane UI designs and one of these techniques to keep functionality will give users easier and faster navigating ability.

 

This image shows how two views are displayed simultaneously using both panels and fragments for the UI design.  The left pane displays a ListView and the right pane displays the Detailed View of the web contents selected from the category.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Stretch (Right):  When the orientation changes simply keep the content the same, but change the width of each view!

 

 

 

 

 

 

 

 

 

 

 

 

 

Rearrange (Left):  When the orientation changes just rearrange the panels to better fit each.

 

 

 

 

 

 

 

 

 

 

Expand & Collapse (Right):  When the orientation changes collapes and shorten one of the panes to show only important information rather than details.  Then optionally add an expand button to change back to normal width.

 

 

 

 

 

 

 

 

Show or Hide (Left):  When the orientation  changes just show one pane as full screen and hide the other.  Allow the option for users to show hidden panes.

 

 

 

 

 

 

 

 

In order to have the views on a compound view interact independently within the same activity a developer will want to use fragments.  Fragments were introduced in order to handle more flexible layout designs on larger screens.  Fragments are basically used to represent the behavior in an Activity.  They can also be called “Sub-Activities” because a fragment’s lifecycle lies within the lifecycle of the Activity it is in and also behave very similar to Activities.  Fragments can be thought of as having more than one Activity on the same screen simultaneously.  When creating a multi-pane UI a developer will need to combine multiple fragments within a single activity.   For example, when a list view and a detail view are in a compound view in a single Activity a developer can use a fragment within the list view to determine when an item is clicked.  That fragment will determine if a separate fragment within same activity will need to change the contents of the detail view.  This will allow the UI to be much more efficient and allow users to interact with Views without having to change Activities on the screen.