#AndroidDev

Done + Discard

A few minutes ago +Reto Meier and +Ian Ni-Lewis talked about a detail-edit screen in a finance app during The Friday App Clinic [see third photo]. The screen was a bit complex, offering something like four different ways to leave the screen with either positive (save) or negative (discard) results. One of the methods even used a floppy disk icon, but let's just gloss over that for now.

There's a visual pattern in some system apps where the Up button is replaced by a Done button, optionally with an adjacent or overflow'd Discard negative action. I personally think this pattern works really well within the framework of—and in the spirit of—the guidelines, so I decided to open source some code showing how to do it.

You can find that code here:

https://android.googlesource.com/platform/developers/samples/android/+/master/ui/actionbar/DoneBar

There are two example layouts in the sample project. The first simply shows the Done button in place of the Up button at the top left, with a Discard action in the overflow. This treatment seems best suited for tasks where you may have more than just the positive/negative actions (e.g. Join contact), requiring more space in the action bar or overflow. It also seems most appropriate for cases where the user is unlikely to want to discard changes, and where the default behavior upon pressing BACK is to save. A real-world example of this is the People app's contact-editing screen or the Clock's alarm-editing screen.

The second shows both Done and Discard enveloping the entire action bar. Done is to the right of Discard to oblige the negative-left-of-positive button layout rule (as of ICS). This layout seems best suited to very simple screens with no alternate actions, or screens where Discard may be a more common action.

One last thing… please remember that since this isn't documented on developer.android.com/design, this isn't formal design guidance. These are merely observations, hence my usage of words like 'seems' throughout this post :)

Thanks!
PhotoPhotoPhoto
3 Photos - View album
Shared publiclyView activity