Toolbar at the Top in Material Design
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
-
- Posts: 52
- Joined: Mon Jun 24, 2013 4:10 am
- Contact:
Toolbar at the Top in Material Design
I'm just getting started building my first app that will go out into the real world beyond our LAN. I'm studying the guides for iOS and Android.
iOS uses the bottom of the screen for icons - navigation.. But Google seem "adamant" that Android developers use the top of the screen and reserve the bottom for Androids "back, apps, recent" I got a Nexus 5 for testing and I like the platform, but I'm not particularly happy with Google decision to put all the "clutch, steering wheel, keys to the trunk" at the top of the screen... I much prefer that the upper part of the screen be devoted to content like Apple does. Now, I do see some apps on Android that do use the bottom of the screen for tools, menu triggers and navigation icons... how big a deal is it to break Google HIG? I don't think users will be *that* put off that my app follows iOS design more closely that Google engineers' view of the world... (which is, frankly just a tad ugly)
Your thoughts?
iOS uses the bottom of the screen for icons - navigation.. But Google seem "adamant" that Android developers use the top of the screen and reserve the bottom for Androids "back, apps, recent" I got a Nexus 5 for testing and I like the platform, but I'm not particularly happy with Google decision to put all the "clutch, steering wheel, keys to the trunk" at the top of the screen... I much prefer that the upper part of the screen be devoted to content like Apple does. Now, I do see some apps on Android that do use the bottom of the screen for tools, menu triggers and navigation icons... how big a deal is it to break Google HIG? I don't think users will be *that* put off that my app follows iOS design more closely that Google engineers' view of the world... (which is, frankly just a tad ugly)
Your thoughts?
Re: Toolbar at the Top in Material Design
Beauty is in the eye of the beholder.
Like any OS, Android fans can be critical if your app doesn't follow the HIG. I do often see apps in the Play Store that are an obvious port from iOS, so it happens. There can be some criticisms in the comments, but it depends on the target audience.
Apps created to run on old versions of the OS had toolbars at the bottom but those look dated now. Newer Android apps have had toolbars at the top for some time now. Navigation is always at the top, like iOS, but if navigation just goes to the next or previous screen there is frequently no icon at all; swiping does that. Some apps divide the duties, with navigation and the hamburger menu (the three lines or dots that open the sliding panel) at the top, and a few tools at the bottom. This is more common with apps like image editors where there are a lot of preset options that are in a sliding group at the bottom, and which implement changes to the current screen.
I just looked at a few of my installed apps and aside from image editors, none have any tools at the bottom. They're all at the top. Even those with bottom bars always have navigation at the top.
A Google image search for "android material UI" will provide a lot of examples to look at.

Apps created to run on old versions of the OS had toolbars at the bottom but those look dated now. Newer Android apps have had toolbars at the top for some time now. Navigation is always at the top, like iOS, but if navigation just goes to the next or previous screen there is frequently no icon at all; swiping does that. Some apps divide the duties, with navigation and the hamburger menu (the three lines or dots that open the sliding panel) at the top, and a few tools at the bottom. This is more common with apps like image editors where there are a lot of preset options that are in a sliding group at the bottom, and which implement changes to the current screen.
I just looked at a few of my installed apps and aside from image editors, none have any tools at the bottom. They're all at the top. Even those with bottom bars always have navigation at the top.
A Google image search for "android material UI" will provide a lot of examples to look at.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
-
- VIP Livecode Opensource Backer
- Posts: 10052
- Joined: Sat Apr 08, 2006 7:05 am
- Contact:
Re: Toolbar at the Top in Material Design
This is a worthy read:
http://www.visionmobile.com/product/dev ... er-nation/#
Among the other useful tidbits there is this breakdown of developer deployment focus:
26% - both iOS and Android
28% - Android only
12% - iOS only
I read Apple's iOS HIG again a few weeks ago, and the most striking thing was how non-specific it was compared to things like the early Mac HIG. They have many recommendations about certain specifics, but for overall design they seem pretty liberal.
The Android HIG is equally broad, but their Material Design guidelines are much more detailed. As you read that spec and the rationale behind their decisions, and use more apps that employ those conventions, it doesn't seem a bad set of guidelines at all.
And with the number of apps deployed on both platforms using Material Design as a foundation, users of either OS are at least as accustomed to that as anything, since outside of Material Design there just isn't much in the way of specific UI recommendations.
http://www.visionmobile.com/product/dev ... er-nation/#
Among the other useful tidbits there is this breakdown of developer deployment focus:
26% - both iOS and Android
28% - Android only
12% - iOS only
I read Apple's iOS HIG again a few weeks ago, and the most striking thing was how non-specific it was compared to things like the early Mac HIG. They have many recommendations about certain specifics, but for overall design they seem pretty liberal.
The Android HIG is equally broad, but their Material Design guidelines are much more detailed. As you read that spec and the rationale behind their decisions, and use more apps that employ those conventions, it doesn't seem a bad set of guidelines at all.
And with the number of apps deployed on both platforms using Material Design as a foundation, users of either OS are at least as accustomed to that as anything, since outside of Material Design there just isn't much in the way of specific UI recommendations.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
-
- Posts: 52
- Joined: Mon Jun 24, 2013 4:10 am
- Contact:
Re: Toolbar at the Top in Material Design
Currently we have this designed for the bottom of the app with the status bar hidden at the top.

There will be a text quote that appears on the card with a photo... and it will be stored in a variable... then we let the user do what she wants:
Favorites | Tweet | Facebook | Email | Search | Categories
Technically these are all "Tools" and only "Categories" goes to another screen.
Putting all that at the top of the app just would spoil the image...

There will be a text quote that appears on the card with a photo... and it will be stored in a variable... then we let the user do what she wants:
Favorites | Tweet | Facebook | Email | Search | Categories
Technically these are all "Tools" and only "Categories" goes to another screen.
Putting all that at the top of the app just would spoil the image...
-
- VIP Livecode Opensource Backer
- Posts: 10052
- Joined: Sat Apr 08, 2006 7:05 am
- Contact:
Re: Toolbar at the Top in Material Design
Sounds like you have a look you like. No worries: Google doesn't penalize apps overr style. In fact, I've never heard of then making stylistic demands at all. That sort of thing should be up to customers to decide what they like on their phones.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
-
- Posts: 52
- Joined: Mon Jun 24, 2013 4:10 am
- Contact:
Re: Toolbar at the Top in Material Design
OK...I'm already liking the forum here... just wish there was email subscription/notification when someone posts on a thread I'm "watching"
Hey! I also help with open source ... how come we don't get a badge too
Hey! I also help with open source ... how come we don't get a badge too

-
- VIP Livecode Opensource Backer
- Posts: 10052
- Joined: Sat Apr 08, 2006 7:05 am
- Contact:
Re: Toolbar at the Top in Material Design
There may be a way to do that in your User Control Panel - see the Digests section. If not perhaps you could write an RSS widget in LC to monitor for you.Brahmanathaswami wrote:OK...I'm already liking the forum here... just wish there was email subscription/notification when someone posts on a thread I'm "watching"

Write to Heather. When the email address used at Kickstarter matches the one used here it's usually automatic, but sometimes it may take a nudge. Mine didn't show up for a few weeks, but after I wrote her at support AT livecode.com it got sorted out quickly.Hey! I also help with open source ... how come we don't get a badge too
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn
Re: Toolbar at the Top in Material Design
I don't remember having to do anything, and I get emails for those. Make sure you've entered your email address in the User Control Panel -> Profile -> Account Settings.Brahmanathaswami wrote:OK...I'm already liking the forum here... just wish there was email subscription/notification when someone posts on a thread I'm "watching"
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Toolbar at the Top in Material Design
And if you are just "watching" a topic then down at the bottom of the page there is "subscribe" which you untick to suscribe??
And there is this; Simon
And there is this; Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!