There’s chances your app gets something from the Internet (or locally) at some point. A list of news, some images, etc. How do you provide a visual information to the user that something is going on?
Here we’ve got a progress dialog that pops up every time the app feels like it should load something.
I’ll tell you the truth: I don’t like dialogs. As a user they remind me a lot of those days when a ‘webmaster’ decided for me that it was time to see something he decided.
I hate loosing control of what I do and I get that feeling with dialogs. As a developer, the life cycle of a dialog was quite hard to manage properly but it got much easier last year with the DialogFragment class.
What annoys me the most with dialogs is when I cannot dismiss/cancel the damn thing. Everything is blocked till the app can load its stuff. When it takes too much time, I lose patience and I just want to press the back button! And then, nothing happens. That’s one of the worst user experience scenario ever: the user has no control and cannot do anything about it.
When the back button is pressed, the minimum would be to stop the loading task and dismiss the dialog. Please don’t use dialogs, or if your client really really wants it, at least make it cancelable.
Pull to refresh
This UI pattern comes from the Twitter iOS app, and is reproduced on Android.
It has been already discussed and debated many times in the Android Community.
My opinion on this is that it depends on the context and the use case. If you’re loading tweets or messages of a live event and your client insists, why not…
Hopefully there are libraries out there to easily add this UI pattern like Android-PullToRefresh (I didn’t try that library myself).
Embedded Progress/Loading View
Right before a list of elements shows up, a progress view is shown, and when the loading is done the list of elements appears. As a user I like this behavior because I can still do whatever I want if the loading is too long (there’s nothing to do for this screen to be « cancelable »).
An easy way to do it is to use ListFragment (I’m not speaking about ListActvitiy because obvisouly everybody is using fragments now, right?) using its default layout (meaning not overriding onCreateView()). To be able to see that progress view in that default layout, set the adapter at the last moment, like when you have your data.
I usually like to provide my own layout for the ListFragment to provide a different progress view and also an empty view.
Indeterminate Progress indicator
Another way to show a progress is to do it in the action bar, where you can show a progress bar within (almost) a simple call.
The user will know that something is going on and she can decide to wait until it’s finished or leave the app (maybe to check the connectivity).
On the bad side, you can’t really customize the look of that progress indicator. It’s kind of really big and has no right margin so it looks stuck to the right side of the action bar.
In some cases, some elements in the action bar could « move » (like a spinner) if there’s not enough space for that indicator.
The view itself feels a little too empty as well, right?
What if we want to provide an action item to refresh the data by an user action?
Indeterminate Progress indicator + Action Item + Loading view
We could put an simple ActionItem in the action bar and trigger the refresh in onOptionsItemMenuSelected(). It really depends on the use case, but isn’t it strange to have two different kind of indicators at the same time in the action bar, one being the indeterminate progress indicator and the other one the action item?
Not to mention the implementation: you’ll need to manage the fact that the user is clicking on the action item when the loader/task is still running…
This user experience is not the greatest but at least the user has full control and is notified by the indeterminate progress indicator and the loading view in the middle of the list.
But how can we do better than that?
Refresh Action Provider + Loading view
Let’s merge the ProgressBar and the ActionItem into a special action item!
This pattern is used by many of the Google apps: the action bar contains a refresh button and when it’s triggered the action item is changed to a ProgressBar. When the load is finished, the button comes back.
A good way to put whatever you want in the action bar aside with your other action items is to implement an ActionProvider. In our case, we’re going to switch between a button and a ProgressBar depending on the state of our loading.
RefreshActionProvider is an android project library to re-use easily this special refresh action item. Plus, there’s a convenient RefreshableListFragment to be extended by your fragments. Try the sample app or fork the project!
There are different ways to show a progress/loading view and to provide a refresh action item, but at the end, it really depends on your use case. The most important thing is to be consistent across your app screens and to really think about the usability of your app.