In order to provide a good user experience, one of the most important steps in designing and developing an Android application is to determine how the user will navigate the app. You should start by designing the screens hierarchy to clearly show the relationship among different screens. Then, decide on how to effectively traverse your content.
Android provides various navigation paradigms such as tabs, navigation drawers and up and back navigation. It is important to understand the best practices associated with those paradigms in order to provide a coherent navigation experience for users. Always remember that users expect similar components to behave in similar ways. Following best practices will avoid your users from getting lost and will make using your app easier.
SongExplorerForAll v4
One common pattern found in almost all Android applications is the navigation drawer. A navigation drawer is basically a panel which is revealed when the user swipes from the left edge of the screen (although a navigation drawer can also be found on the right). It generally displays a list containing the main top-level navigation options. In SongExplorerForAll v4, we add an empty navigation drawer to the app.
This is done by declaring a DrawerLayout as the root view layout of our Main Activity.
SongExplorerForAll v5
The SongExplorerForAll app displays a list of top artists worldwide. However, the Last FM Api also allows us to query a list of top artists based on top charts for a particular country (For example, the top chart artists in France might be different from the top chart artists in Spain). In SongExplorerForAll v5, we give the user the option to choose between either to display the top artists worldwide or to display the top artists based on top charts for Mauritius. The user chooses between those two top-level options via the navigation drawer. To achieve this we need to do the following:
- Create the appropriate url to query the top chart artists for a particular country
- Populate the list in the navigation drawer with the two values Top Artists Worldwide and Top Artists in Mauritius. Here, since there are only two items, it is not necessary to use a RecyclerView. A ListView with a simple ArrayAdapter is enough.
- On selecting one of the two items from the ListView, we need to get a reference to the ArtistListFragment being displayed and update it accordingly. Getting a reference to the fragment is done by first adding a tag to the fragment on creation and then using this tag to access it.
SongExplorerForAll v6
Another key component for navigating an Android app is the action bar. The action bar is located at the top of the screen and basically is used for
- Branding purposes (includes the application name, logo and branding color)
- Making important and commonly used actions prominent and easily accessible
- Ensuring consistent navigation together with tabs
In Android 5.0 Lollipop, the Toolbar was released which is basically a generalization of the action bar. While the action bar is part of the activity window, the Toolbar can be placed anywhere within a layout. A Toolbar can be set as the action bar using the setActionBar() method.
In SongExplorerForAll v6, we add a Toolbar to the Main Activity and set it as the action bar. We then add two menu elements, share and about. The share menu is displayed as a share icon in the Toolbar while the about menu is displayed when the user clicks on the more button (three vertical dots) in the action bar. When adding an icon, it is important to provide resources for the different density buckets (mdpi, hdpi, xhdpi, xxhdpi etc.) in order to ensure good graphical quality and performance on all screen densities.
Finally, we also add the drawer indicator in the action bar.
Leave a Reply