User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I was wondering, is there any official guideline from material design, on how a action moded toolbar should look like?
For instance, should there be a highlighted line at the bottom of toolbar? Or, should it just be a plain color?
Note, if we don't do any customization, highlighted color at bottom is what we get in Android 5. However, in GMail app, it is using plain color only.
I appreciate your concern on following the guidelines.
I disagree on the answers above that the guidelines are only to be referred and you could use your own sort of imagination. Although true, it discourages developers and motivates them to follow design patterns they might have not tested, thus causing an unexpected outcome.
Hence, it's always good to validate and check if there's something in the guidelines you could take inspiration from.
The Toolbar is the most iconic part of Material Design ever since ActionBar was deprecated.
Here are all colors and metrics you'll need to know to follow proper Material Design conventions for the Toolbar and the App bar:
https://www.google.co.in/design/spec/layout/structure.html#structure-app-bar
No, you shouldn't highlight the bottom of the Toolbar with Accent Color line. That was somewhat followed in Kitkat design principle and has been abandoned ever since.
Now regardless of the Toolbar you select the one thing you definitely need to follow is to Elevate the toolbar. This happens on Z index, showcasing that the Toolbar is on top of the other elements and yet below Status bar and Nav bar.
To do this, in Android XML, for Toolbar use the following property.
android:elevation="4dp"
Just remember Material Design is a set of GUIDELINES, you don't need to follow them to the A. As a matter of fact, in some specific cases many designers and developers (me included) do the EXACT OPPOSITE to what Material Design guidelines suggests. A common example is buttons statuses, there's a lot of discussion on how is Material button's approach correct, even in this same site.
All this introduction is to give you the answer to your question, which is: do whatever you want as long as the important part of the toolbar specs is respected, which is the z-index and 3d-ish aspect provided by shadows that you can see in both your examples. Note that this is for sheet steps like in your examples, because you could use different seams as well, but for your scenario, the 3d aspect is paramount, and the most widely used.
You can see more examples and user cases at Structure --> Structure of Toolbars, and you can see the suggested amount of elevation for each element. While you'll see there's no line in any sample, you can do it if you want, just be careful that your decorative element doesn't collide with element's behavior. For example, that line looks like an active tab, and it's weird that you get that by default in Android, just tested it out of curiosity and really not getting that bottom border, are you sure you don't have some style or using a wrong element there?
