I'm working on an android app that has a section that feels like an iPhone home screen. There's a bunch of pages that are essentially displaying the same data in different configurations and users should be able to quickly move between them. Generally there won't be more than 4 or 5 pages.
I could just replicate the experience with the iPhone home screen with multiple dots on the bottom of the page, but that doesn't feel very android-friendly. What's the design pattern in android for viewing and interacting with this type of view? I know the android home screen has a variant with dots, but I've never seen it used within an app.
Screenshots or links to existing apps would be great.
The stock Android launcher has left/right paging behavior on the home screen, and it's open source.
This is the Workspace class. Pay special attention to the onTouchEvent and onInterceptTouchEvent methods. The utility classes Scroller and VelocityTracker are used together to define the behavior for snapping to a page when the user lets go from a drag.
https://android.googlesource.com/platform/packages/apps/Launcher2/+/master/src/com/android/launcher2/Workspace.java
Hootsuite uses this design pattern and it works well in my opinion. I don't think it affects the user experience on Android in a negative way. I find that the biggest problem with people porting iPhone applications to Android is the fact that they try to port every single design pattern over. I don't think what you're trying to implement will be an issue.
Related
From Android I know Master detail flow which allows you to have this side by side master detail activity on bigger devices while having two separate activities on a smaller device. As shown on this page in the figures 23-1 and 23-2.
Now I am implementing in Xamarin for cross platform development and I would like to recreate this behavior as I really like it. The MasterDetailPage as it is called in Xamarin works correctly on a tablet, however on a small phone it shows a side menu for the master list view instead of a separate page. (this side menu is triggered by the burger menu button) Since my master page should already show more information than just a title in the list view, I would prefer it to be the normal android master detail flow with two pages. Is there a way to do this with Xamarin where I don't have to code it completely from scratch?
I haven't found any answers to it, but maybe that is because I search a bit wrong. I just don't know how to describe it better than as the "normal master detail" on android. But that doesn't give me useful results. Thanks for any help, also references to where I can find this.
Edit: Thanks to SushiHangover I now know that this behavior is called Split by xamarin. However they do not allow it on phones. Is there a workaround?
I should begin by saying that I'm brand new to android development, although I have a good understanding of the fundamentals of java. That being said, I usually learn best by doing, so I'm writing an app for a campus magazine I work for and trying to learn through the process of making it.
At the top of the screen is a bar with two spinners labeled "issues" and "sections," which allow the user to filter the articles shown to only those in the respective issue / section. The rest of the screen is taken up by what I will describe as a vertically-oriented gallery, which shows the headline for each story underneath an image associated with it. The user can then "flip" through the stories in the magazine by scrolling through the "gallery." Selecting one of the stories will open the full story up in ViewPager.
I have two main questions at this point:
1) Initially, I planned to place the "issues" and "sections" spinners in the ActionBar. However, as I understand it, ActionBars are not displayed to users using Android 2.x. Given that these elements are critical to navigating the app, and that a majority of android users are still using 2.x, this seems unacceptable. As a result, I'm using an ActionBar-less theme and essentially drawing my own action bar via a linear layout on top of my main activity. Am I correct in my understanding that ActionBars do not display on Android 2.x devices? If so, am I correct in including my "tool bar" as a part of the main activity, or is there a better way to implement it? (Perhaps as a fragment? I don't really understand how those fit in yet...).
2) I am aware that the gallery widget is deprecated, so obviously I'm not going to use it. What alternative widgets would best achieve the same visual goal of having the user "flip" through the stories in the magazine by scrolling through the widget? Is there a way to animate a ListView to achieve this goal?
Again, any help - particularly which helps me to understand the wider issues involved here - will be greatly appreciated.
Thanks in advance.
You can use ActionBarSherlock - it is compatible down to Android v 1.6.
ViewPager might help you
clients want exact replica app on iphone and android. the iphone design is the only one thought about, and it frequently has tabs on the lower part of the screen
in android, this can be replicated but the primary way of doing this was deprecated, for various reasons. (tabhost, tab groups, activity) android's replacement methods include action bars and viewpagers and fragments with a varying degree of backwards compatibility but they don't really put the resulting tabs at the bottom of the screen.
similarly, multiplatform web app tools like Sencha Touch can generate intuitive "bottom tabs" on both platforms. So for Android there are still a variety of ways to do bottom tabs, so it would be fiction to tell a client that they need to change their iphone design for android
how do developers and consultants approach this. any best practices?
I don't quite know what you're asking for. If it's a programming solution, then someone who's made bottom tabs before could answer. I've never done it, so I don't know if there's an easier way than the brute force do-it-yourself approach.
If it's a consultation answer, then the best approach that's worked for me is to convince the client that the "Android way" is to put tabs on the top. As such, people who use Android phones regularly come to expect a certain way things are done. Especially since ICS came out, soft buttons have been moved to the bottom of the screen. These can't be shifted, moved, or removed and having tabs on the bottom could result in the user accidentally pressing either back, home, or process-list.
I am developing a mobile app using Titanium. I came across the Google Plus, Tweetdeck, Market Apps for Android. To switch between the tabs they use the slide gesture. Its like the next view simply slides in based on your swipe/drag. I would also like to add the same kind to behavior for my app I would like to have it work on both Android and iOS platforms. How can I have it?
I have tried Ti.UI.scrollableView. The problems I faced were
The sliding was not as responsive as seen in the above apps.
The view does not move along with the finger drag. It moves after the finger drag is finished.
It seems to take more memory as the application response slows drastically and animations dont appear to be smooth.
Kindly let me know if there is any other alternative to implement this kind of experience in the app.
Thanks!!
What you basically need is a Ti.UI.ScrollableView which implements the native Android ViewPager. Those other Apps are binding their Tabs to the ViewPager. You can't do this with a Ti.UI.TabGroup but you can either use your own Tab views or some other module that provides this functionality like this. You could also have a look at my Alloy widget here - it provides a custom tab-indicator for Ti.UI.ScrollableView (without another module).
For Android you should consider using a third-party library to implement such functionality.
Personally I use PagerSlidingTabStrip which I have found that works really well.
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