ActionBar

App UI / UX – Part 4

Previously in this series we’ve looks at improving the UI of our app to display temperature and humidity obtained from a TI SensorTag device, but in this article we’ll turn our attention to the UX.

Our app architecture is actually really simple: We have a single Activity which displays either of two different Fragment types depending on whether or not we are connected to a SensorTag device.

The first thing that we’re going to look at is the ActionBar. The ActionBar is actually really straightforward, so what can we improve? If you look app when we are displaying the temperature and humidity (i.e. the DisplayFragment is visible), there is actually a refresh option shown and this is only really relevant when we want to initiate a device scan when showing the DeviceListFragment. In the DisplayFragment we actually want to provide an option to disconnect from the current SensorTag device and return to the DeviceListFragment in order to select a different device.

So we need to rename the menu definition res/menu/main.xml to device_list.xml define a new menu definition which will be used in DeviceFragment:

We now need to remove the menu loading logic from the Activity and move it to the individual Fragments:

I’ll only display the changes to DeviceListFragment here, but you can see the changes to DisplayFragment in the sources.

It is important to remember to add setHasOptionsMenu(true); to onCreateView() in order to enable menu setup from the Fragment.

The one thing that I haven’t moved from the Activity is the onOptionsItemSelected() method which handles MenuItem clicks. This may, at first, seem a little odd, but let’s consider what the two menu options do. The “Refresh” item will initiate a new device scan; and the “Disconnect” will close the connection to the SensorTag. Both of these operations are effectively causing a change to the state machine, and the state machine is managed by the Activity. It doesn’t matter to the Activity which menu items are available – it just handles whatever events are triggered by the user. The currently visible Fragment determines which events the user can trigger in that context by only displaying relevant options to the user.

So the after a little bit of refactoring to create a sendMessage() method to reduce duplicate code (see the source for the sendMessage() implementation) onOptionsItemSelected() method looks like this:

The code to disconnect is new – we send a message to the BleService to disconnect, and this will trigger a state change which will cause the DeviceListFragment to be displayed instead of DisplayFragment once the connection status changes.

If we run this we can now see that the icons in the ActionBar change depending on the context and the behaviours provide a clean mechanism for the user to cause state changes only in the appropriate places

While the flow is certainly improved, after watching the video, one obvious area which can be improved is that it is not clear when the device scan ends. In the next article we’ll look at how we can indicate to the user that a scan is running.

The source code for this article is available here.

© 2014, Mark Allison. All rights reserved.

CC BY-NC-SA 4.0 App UI / UX – Part 4 by Styling Android is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Permissions beyond the scope of this license may be available at http://blog.stylingandroid.com/license-information.

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *