I am about to start porting an iOS application to Android targeting ICS devices. The PM/designers had originally agreed that we will follow the Android design guidelines to provide users with a consistent experience. However, when I received the wireframes, I noticed that their "tab bar" is at the bottom and that several screens have "segmented controls" at the top.
When I explained that these patterns don't follow the guidelines, they came back with a response to the effect of "Instagram for Android does it and they've been featured and have millions of users."
So I took a look at the Instagram Android app. Here is what the offending screen looks like:
My question is, what would this type of screen look like if it followed the design guidelines. Obviously the tabs would be on top using the ActionBar APIs. However, at that point I think that the segmented controls would only confuse the user since they would appear as a secondary tab bar. I am not familiar with any Android design patterns that mimic the iOS segmented controls in situations like this. Would an ActionBar spinner containing the 2 items be appropriate here? If so, it would seem that we would not be able to keep the "NEWS" title.
Any help is appreciated.
PS. Taking a look at the offending screen with hierarchyviewer reveals that the Instagram tab implementation uses the deprecated TabHost/TabWidget and that the segmented controls are implemented via a (custom) ViewSwitcherButton class.
Related
I have a hard time trying to come with a good and acceptable layout for an activity for a tablet, but I'm not sure that if my design is compatible with Google's design guidelines.
In short: my application receives a network sniffer log file and shows statistics on different features on the data. For example, traffic over time, PM over time, show the traffic as a time line, different graphs, pie charts etc.
The first thing comes to mind for a design for this activity is a multi-pane layout (like Gmail's for tablets). The first pane would be the different features specified above, the second would have controls on the third one (which would display a graph) to filter different data, colorize and other things and settings.
The problem is, the second pane is not a list that opens a content (like in Gmail), but a pane that controls the third one.
My solution for this is to create just a two-pane layout: Only the second one (with the controls) and of course the third one with the graphs. The list of the features would be on a navigation drawer that the user would have to slide in order to switch to another feature.
Is this design compatible with Google's design guidelines? Is it logical for the user?
I don't recommend using the navigation drawer for tablets, at least not in landscape mode. Three panels should work fine and you can use the navigation drawer for portrait mode only.
Android design methodology is flexible so instead of trying to use the latest design patterns try figuring out what best suits your data.
Anyway, a good example for an app displaying content in 3 different panels is the Android Wordpress app. Check it out here: https://play.google.com/store/apps/details?id=org.wordpress.android
I want to make a slick GUI for my application. But how would i go about creating a cusom title bar with a back button? And are there any tools to make custom buttons for in android? Or to help make a GUI? Also are there any books that talk HEAVELY about android GUI's?
I want to make a slick GUI for my application.
That's nice.
But how would i go about creating a cusom title bar with a back button?
No sensible Android developer puts "a back button" on the screen, since the OS provides a BACK button for the user.
Be careful when doing too much with custom title bars right now. The Android title bar is morphing into the Honeycomb "action bar" for Android 3.x, and there is a decent chance that Ice Cream Sandwich will give phones the "action bar" as well. While you can style the action bar and do lots of slick things with it, it has a structure that should be adhered to, so Android applications can have a consistent look and feel. If you make your phone apps too dependent on a radically different sort of "custom title bar", you may get UX complaints from users.
That being said, personally I find the easiest way to do a "custom title bar" is to simply get rid of the existing title bar (e.g., android:theme="#android:style/Theme.NoTitleBar" on the <activity> in the manifest) and then do the "title bar" in the activity's own layout. Or, use FEATURE_CUSTOM_TITLE, as described in this blog post.
And are there any tools to make custom buttons for in android?
Photoshop. The GIMP. Microsoft Paint. Etc.
If you are referring to an image to go on the face of a button, you only need one image. If you are referring to a custom background, that gets more complicated, as they will probably need to be nine-patch PNG files, one for each different state of relevance (normal, pressed, selected, etc.).
Or to help make a GUI?
Eclipse has drag-and-drop GUI development nowadays.
Also are there any books that talk HEAVELY about android GUI's?
Assuming you really mean "heavily" (and were distracted by the SHIFT key while typing), then pretty much all of them do. It's not like they're covering Web servers or Beowulf clusters or something.
As to whether they meet your standards for "HEAVELY", read the tables of contents.
I'm developing an App in iPhone and a version for Android.
The iPhone version of the App uses a Tabbar on the bottom of the screen (for other screens / ViewControllers: Home, Favorites, Search in a list, ...).
I want to make the layout of the 2 versions of the App (the one for iPhone and the one for Android) the same as much as possible according to the best layout guidelines.
Android App's usually uses not a tabbar, but it's with a SubMenu. But, I find more an more Android App's that uses a tabbar at the bottom of the screen in stead of a submenu for handling this. I know that a TabBar on the bottom of the screen is not usual for an Android App and may seem strange for those users.
So, what I want to know is may it be OK to use a tabbar like iPhone at the bottom of the screen, or is it NOT DONE for Android? (Also according to screen use optimalisation and the android UI patern guidelines : by this I mean uses the mast of the screen for the App itself and not for navigating through the App).
The equivalent Android pattern for the 'Tabbar' is 'ActionBar', you can find more information on this widely-used pattern here: Android Patterns - ActionBar
how to show tab bar below of the screen like in iphone in android?
You may also want to consider using the Dashboard Pattern, applying graphics and style to look exactly as you want.
https://gist.github.com/882650
Android UI design patterns Presentation from Google I/O 2010
Desktop apps have top level menus (File, Edit, Search, ..., Help).
Web apps have very similar thing, menu tabs (Logo, Questions, Tags, Users, Badges, ...).
However I cannot find equivalent of top level menu in Android framework. Assume that my app has 5 main activities. According to menu design guidelines options menu should contain actions related to current activity. So how an app should allow users to easily switch to one of five main activities.
It seems that different apps solve the problem in different ways. Some have a tab list at the top of the screen, some at the bottom. Even Google applications aren't consisted in that field. Google Listen has an options menu item called 'Listen Home', however Listen main activity has no that options menu item. Others have two icons in app luncher which start two different activities from one app.
I realize that due to small phone screens Android apps have to be designed in a slightly different way than web or desktop apps. But I have a feeling that the app top level menu topic was omitted in Android framework. And developers are on their own here. Or am I missing something?
Update: this is Google blueprint for a great app
Update2: this an example app of these patterns
Update3: GreenDroid library helps a lot implementing these patters in your apps. It seems that dashboard and action bar patterns are becoming quite popular.
You should take a look at this Google I/O session: http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
They talk about the design patterns they used for the Twitter application and basically the type of concept you are asking about. Basically, your activity should have a top bar that gives the user specific tasks to do in the view or allows them to switch into another activity.
Google has not implemented anything like this into the actual SDK yet so you're sort of on your own in terms of implementing it but the main concept is given in the presentation. This is the direction that Google would like to see Android shift into though.
Hopefully this helps you out somewhat.
The file/edit menus of desktop apps have a very different purpose than the questions/tags etc. tabs at the top of this webpage.
The contents of the file/edit menu should be implemented as in the options menu that appears when you press the menu button. This is, as you noted, to save space on the smaller screens.
App navigation like the questions/tags etc could be implemented using a Tab Layout. You are right that apps vary in whether or not the tabs are on the top or bottom, but I don't think thats a huge deal. In my unscientific look through apps on my phone, the bottom seems to be more common. However, I think it might depend on your specific implementation which you decide.
A lot of apps don't require any sort of navigation like that, and can get away with just having a path forward or back via the back button. I think this is preferable for a lot of applications, but won't work in all cases.
I'm not sure what more you would want built into the framework.. It seems like you can accomplish any kind of navigation desired with the above options.
You can look at the source of the Google IO app
ioshed