2

I have a quick question. How to depict an icon which you could press for choosing other options (i.e. when you press it a dialog appears with set of icons - and after your choosing the dialog closes and the new icon appears instead of old one). Should I depict it with picker or maybe as button? Anyway it should be clear that you can push it and some options will appear. What Google material design advise us?

Thanks.

  • 2
    Don't be bound by Google's Material Design. UX is much more than what Google says. – DarrylGodden Jan 26 '17 at 19:43
3

Basically what you need is a Material Design dropdown menu. That kind of menu shows the currently selected option with an arrow beside. Clicking on that lets you select one of the presets available and replaces the previous text and/or icon when minimised.

enter image description here

As you see in the picture, you can use text, an icon or even both. These kind of dropdowns are used for example in office suites for font or alignment settings. The image above shows what the elements involved should look like in various states.

Some of the dropdowns allow for custom values while also displaying a few useful presets and others just offer the presets without editable values. For the dropdowns with icons, only the icon is visible when the dropdown is minimised while the expanded view also shows a short title next to that.

Material Design dropdowns can be used in toolbars as well as small info windows, registration forms and more.

enter image description here

1

I wouldn't set the controller to edit the button in the button itself.

If the controller for the setting is in a settings panel (with other settings), it can trigger a dropdown or similar.

For example:

or also:


Material design - Lists: Controls

Material design - Dialogs

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.