Edit screen for Attachment screen in Android ICS

Question

I have a situation where I am not allowed to put buttons on Actionbar as well as bottom bar. The bottom bar has Save and Cancel when in Edit mode and to make it consistent across all screen we are not putting additional icon there.

Now, when in Attachment screen, where we can have images, word doc, pdf, etc. How do we design this screen where we can add attachment as well as delete them. I thought of putting a delete button on top of each attachment and a faded box in the last to add one. But the client want the attachments to be viewable as well. That means if i click on them it should be visible as normal doc. But how to put delete and add functionality.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

One solution would be to use one row for every item. Here's how we did it:

The example is iOS, not Android but the pattern stays the same.

Additional thought: You don't need a cancel button.

Answer 2

I would suggest a combination of some of the comments...

A Click would show the image/expand it, what ever. A longer press shows up a certain area at top or bottom where you can drop the file at...

Additional you can add an area - e.g. at the bottom - to duplicate or edit images or the filenames...

Answer 3

Pressing the thumbnail seems like the most natural action for viewing the file. How about repositioning the delete button slightly? I'm still dubious about the grid layout though.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 4

Long tap on an item can bring popup context menu with "Remove item" option. In order to inform user that such feature exist you can show text above grid and below title bar e.g. "To remove item long tap and use Remove option". You can introduce aditional logic around text e.g. do not show it once user removes first item. Long tap is one of the standard features on Android and users are used to it.

Answer 5

Assuming that delete isn't as common an action as view, you could also put the delete action on the view state (a user taps to view the attachment, and then has the option to delete the attachment or go back to the edit screen for all of the attachments).

Answer 6

I imagine a certain area (maybe a bin icon) where items can be dragged to. Items vanish once they arrive at the delete-area. However, a ,,bin'' might not be the best icon, because the user will expect, that he can retrieve icons from the bin. If this is not possible or not intended, the delete area should be visualized another way.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 7

The approved method is to transition to a contextual action bar on a long press to work on "Data"

That pattern is basically, long press, change the "state" of any items you want to be affected, show contextual action bar that lets a user take action(s) or cancel, then revert back to your standard action bar.