Mobile mockups for Android style
 | This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. |
Current Android layout
[edit]Current layout uses a custom toolbar/navbar style which always has a giant empty search bar, eating up space. Since we use the Android 1.x/2.x-style menus, on 3.x or 4.x we get a compatibility menu button (in the lower-right corner here) which isn't very attractive.
There is some talk of making this toolbar hide when unused, and return when tapping on text etc.
Mockup with action bar style
[edit]Android 3 & 4 like to do an "action bar" which is a special toolbar; extra items can spill over into an "overflow menu" similar to the classic menu's extra items "more" submenu.
This mockup uses a similar style; the mockup proposes moving the page title and a section marker into the action bar, which could be used to click and pull out a table of contents for navigation...? (Not really central to the design though.) This may be more useful as a general thing to show than an empty search box, which is replaced with a smaller search icon.
When clicking onto that, you'll get an expanded search field and the search screen takes over -- this is similar to behavior in Google's Gmail app and others.
This action bar could be made hidable/overlay-style as well.
Mockup for tablet
[edit]To make better use of extra screen space, we could keep the search/history/saved area open as a navigation sidebar. The action bar on Honeycomb and Ice Cream Sandwich tablets is similar to on ICS phones, and could have more or fewer items on it. This action bar should not hide, as we have plenty of screen space.
Positioning things on the bar might be a little funky. :)
A partial mockup using darker theme running in a modified copy of the app, running on Honeycomb 3.2 (Samsung modified):
Mockup with split action bar
[edit]It's possible to configure the action bar to split itself across the top and bottom of the screen on narrow screens (portrait-mode view on phones). You can see this in Google's Gmail app.
More icons for action-bar items are made available on the bottom bar, and the overflow menu sits down there too. A landscape-mode view is not included, but could combine most of the items onto a single bar view to save space. In tablet view you'd also have everything on top.
This version may also be a good model for the iOS app, where there's no standard menu/overflow menu convention, but toolbars are very common. The toolbar (lower for iPhone/iPod, up top for iPad) would also need to include back and forward buttons as there's no hardware or standard software back button.
