Building a dynamic user interface

Till now, we have seen how to use layouts and activities to implement different screens. Basically an activity takes several views, arrange them according to a specific layout and manage their behaviour as well as the application flow. Since so far we’ve developed applications for smartphones, activities were perfectly fine. However, once we want to optimise our application for tablets, activities can have various limitations.

When dealing with larger screens, designing user interfaces get a little bit more tricky. By using the same user interface for let say a 4 inch smartphone and a 10 inch tablet, a developer would not make optimum use of the space available on the screen.

If we have a look for instance at the SongExplorer v11 app on a 10 inch tablet, we can see that there’s a lot of space which is wasted on the right in the list of artists. One way to optimise the user interface for the tablet would be to use half of the screen for displaying the list of artists and use the other half for displaying the artist details such as the picture and tracks.

Unfortunately, since we have created the two screens using activities, this would require some complicated logic. Activities require full screen control when active and only one activity can be displayed on the screen at a time.

To address this issue, Fragments were introduced. Fragments not only can use a portion of the screen but also allow logic to be encapsulated into smaller building blocks and be reused. Fragments can be added statically to the UI but also dynamically to support different screen configurations.

SongExplorerForAll v1

In SongExplorerForAll v1, we implement the screen showing the list of artists and the screen showing the artist details using fragments instead of activities.

It is important to understand that fragments can only exist within a parent activity so we still need our MainActivity. We add the ArtistListFragment dynamically using a FragmentManager and FragmentTransaction.

You’ll notice here that on selecting a particular artist from the list, the artist details still open in a new activity since for now we haven’t told the application to replace the ArtistListFragment with the ArtistDetailsFragment. We are going to do that in the next version.

SongExplorerForAll v2

In order for fragments to be fully reusable, they should be built in such a way so as to be completely self-contained while at the same time being able to work with other components of the user interface. For instance, we should be able to reuse the ArtistListFragment in another application. However, while in the SongExplorerForAll v2 app the ArtistListFragment might need to communicate with the ArtistDetailsFragment, ArtistDetailsFragment might not necessarily be present in another app. This is why fragments should not communicate directly among each other. All communications among fragments should be performed through the parent activity.

In SongExplorerForAll v2, when an artist is selected from the list, it has to send this information to the ArtistDetailsFragment so that the latter updates itself accordingly. The information is first sent to the containing activity which then takes the appropriate action and passes the information to the ArtistDetailsFragment. This is done by creating an interface in the ArtistListFragment and implementing it in MainActivity.