I'm developing a simple user creation screen in Android using Material Design. The portrait layout is completed, but I'm struggling finding a way to achieve a nice way to lay info out on the landscape version. The portrait: enter image description here

The landscape: enter image description here

So, where would be the save button placed in here ?

Thanks !

  • In the portrait mode, you are using a tick mark for confirmation from the user that he is done editing. Isn't that a confirmation you can depend on to save the content the user has done editing? – Swapnil Borkar Jun 17 '16 at 14:12
  • Also, the landscape view is completely different from the portrait. I would recommend keeping the toolbar on the top itself along with the FAB. If Save is the primary option in your app, ditch the FAB to upload the photo and use it for Saving. Photo upload can be utilised using an image button and a placeholder. – Swapnil Borkar Jun 17 '16 at 14:14
  • why is the toolbar at top missing from the landscape view? – Dave Haigh Jun 17 '16 at 14:38
  • I was kinda of thinking about this fab behavior, putting the save button as the fab and changing the select pic. But I was having the same problem, where to put it on landscape. – Leonardo Jun 17 '16 at 17:29
  • 1
    When I opened this question, I almost fell off my chair because there was a monster on my screen. But then it started to look more like a... dog. And then it started to look sweet. Strange. – palsch Jun 17 '16 at 21:52

Why not just keep the toolbar?

enter image description here

| improve this answer | |

Does the landscape mode offer a significant better user experience? If not, is it worth the effort and compromises? It's acceptable to restrict the app to portrait mode only.

| improve this answer | |

I only fancy having the back button on the toolbar. As a user, it's hard to reach for the confirm/save button if it's in the toolbar. Isn't the whole of this screen to confirm/save? It should be placed in the area where it is easier to reach. A floating action bar perhaps?

On the landscape view, the toolbar should still be placed on the top area. The toolbar is a toolbar.

| improve this answer | |

According to me, The toolbar should only contain the back button.
Devices are getting taller and taller, so the save button on the top would be a bad User Experience for the user when he uses your App one handed.

So I would go for a FloatingActionButton in Bottom|Right of the Screen

I would also suggest a FloatingActionButton which would be hidden till all the data is filled in by the user, when all the data is filled, you can fadeIn your save fab button.

You can also try those FloatingActionButtons which when clicked would provide two smaller fabs above the main Fab. Something like this,

enter image description here
you can keep two fabs
1. Save
2. Clear All

| improve this answer | |
  • The idea is good, with a caveat: a FAB can't be hidden. Also, the question is about WHERE. To place the FAB – Devin Jun 26 '16 at 16:11
  • you can Hide and show the FAB programmatically with a fading effect (have done that in some of my apps). and for WHERE the answer would be Bottom|Right (Like i said in my answer for one handed user experience) – Siddhesh Dighe Jun 26 '16 at 17:50
  • the point is not whether or not you have the ability to do it,the point is you SHOULDN'T do it. As for position, please add it to your answer since it's not there, explaining bottom right of what (viewport? Photo? Form?) keep in mind Material has very specific rules for FAB location – Devin Jun 26 '16 at 22:18
  • There is no rule that you SHOULDN'T do it, many apps use that trick of hiding the fab. its pretty common mate. If you aren't allowing your user to click the save button until he fills all the details, then why show it. There is no place in the design guide stating the you SHOULDN'T do it, so it comes to personal preference cause you haven't even stated a reason of why you SHOULDN'T do it. – Siddhesh Dighe Jun 27 '16 at 7:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.