This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to implement horizontally scrollable tabs?
I would like to implement tabs in an app that essentially also allows swiping between two screens. A good example would be in the App section in the Google Play store. There are horizontal scrollable tabs up top and they move as the screen scrolls.
I am targeting Android 4.0 with this but need to make it backwards compatible.
I am obviously not asking anyone to write the entirety of code on this, I simply am looking for a tutorial somewhere, or advice on how to go about starting this. The Dev site show exactly what I want here: http://developer.android.com/design/building-blocks/tabs.html
But doesn't show HOW to do this (or at least make it visibly clear); it only says that's its good practice to do.
take a look at this API, I use it and its very easy to implement
ViewPagerIndicator
This is usually done by using ViewPager class. In order to make it backward compatible take a look at the ActionBarSherlock project; there you will find examples on how to implement this kind of design pattern and make it work even on Android 1.6.
Also, as Alex said, you can take a look at the ViewPageIndicator project of the same developer if you don't want to care about an action bar.
Related
I'm a long-time Windows developer who is now doing Android development.
I would like to use the exact functionality contained in the following officially documented example on tabs and swipe:
http://developer.android.com/training/implementing-navigation/lateral.html
Deprecated Functionality
However, the downloadable example contains methods & functionality which is deprecated.
I'm confused about why the Android official example which shows how to handle tabs and swiping ends up including code which is deprecated.
Is it not the most recent version?
What Functionality Am I Looking For?
I'll show you two screen shots which display tabs and allow the user to select the tabs to navigate among them or swipe left or right to move through them.
Looks like the following:
I want the user to be able to easily switch between the two tabs and I have a plan to indicate to the user that information on the other tab has been updated by displaying an icon on the current tab.
My Main Question
Is there a similar example which does not include these deprecated
methods?
Related Questions
If I choose to implement the code in my application -- because the solution is quite beautiful and looks easy to implement -- what will the consequences be?
Does it mean that some time in the future the application wouldn't even work properly?
Does it mean that it may not work on some devices (API versions)?
Here's some of the code which is deprecated:
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener()
actionBar.setSelectedNavigationItem(position);
actionBar.addTab();
actionBar.newTab();
It seems that the deprecated functionality is actually related to the ActionBar.
After quite a bit of searching, I found a better example of what I wanted -- sans ActionBar and sans deprecated functionality :
http://developer.android.com/samples/SlidingTabsBasic/index.html
When you get to that page, you will see that there is no documentation for the subject. It's odd. Look very closely in the upper right corner and you'll see a download link which will allow you to download a sample. It looks like:
The sliding tab solution is even more elegant and does not include any deprecated functionality.
Here's what it looks like:
The example is fantastic, because you can traverse through the tabs by swiping the bottom panel. Or you can click any of the tabs to move to the associated tab.
Also, the example gives you some more fucntionality above the tabs with the Show Log menu item which switches out the top portion.
Definitely worth a look and this answers my question.
Hope this helps someone else who is looking.
I'm confused about why the Android official example which shows how to handle tabs and swiping ends up including code which is deprecated.
Not all documentation gets updated. There has been stuff that has been out of date for years on the site, and despite filing issues, it does not get fixed. This is not unique to Android; it is reasonably commonplace in software development.
Is it not the most recent version?
It is the most recent version.
Is there a similar example which does not include these deprecated methods?
I do not know what qualifies as an "example". There are many, many implementations of tabs for ViewPager, both from Google (TabLayout) and from third parties (about half of the entries in the "View Pagers" category in the Android Arsenal). Some of those third-party libraries have sample projects as part of their repositories.
Does it mean that some time in the future the application wouldn't even work properly?
Quite possibly, particularly depending upon your definition of "work properly". We have no means of knowing exactly what will happen in the future (as we used up our last flux capacitor a week ago). Deprecated stuff usually keeps working, but it is at somewhat greater risk of bugs simply due to no longer being aggressively maintained. In the case of action bar tabs, the appcompat-v7 action bar backport does not support them at all.
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
I got stuck with Jake Wharton ViewPagerIndicator.
The problem is that when I try to make a Tab indicator - the result I'm getting is extremely different from what I need and I can't get to style it or make it behave as it should.
So, what I ask for is two things:
1) Am I right when I say that TabIndicator is Foursquare-like ViewPagerIndicator? (when all tabs are shown on screen)
2) Can anyone provide me links to some tutorials or samples of using this type of ViewPagerIndicator, cause samples from JWs' site don't want to get working.
Thanks a lot for your attention!
Jake Wharton provides a lot of examples. Have you checked it?
https://github.com/JakeWharton/Android-ViewPagerIndicator
And you can take a preview installing this apk:
https://play.google.com/store/apps/details?id=com.viewpagerindicator.sample&hl=es
moskis is right on about ViewPagerIndicator. Installing that APK helped me a lot when I first started working with it and it is a great library.
However, to answer the first part of your question and what I think you are asking in general, I think ViewPagerIndicator isn't what you need to solve this specific problem. Foursquare's tabs at the top are the standard Android tabs as shown in http://developer.android.com/design/building-blocks/tabs.html.
Standard Android tabs are implemented using a TabHost and TabWidget. There is an official tutorial about creating a tabbed interface at http://developer.android.com/guide/topics/ui/layout/tabs.html
Foursquare achieves a custom look by providing state-list drawables for the tabs and you will probably want to provide your own to get the style that you want for your app.
Note that I don't have access to the Foursquare implementation, but am going off of what I observe whiel using the app. However, I have implemented a tabbed interface for Android in past projects.
The new Youtube app, and the newer version of JuiceDefender, contains a sliding tabbed layout similar to those seen in Windows 7 Phone. This is a UI feature I would like to include in an app I'm am designing but I cannot find any information or tutorials online. Has anyone seen a tutorial on this?
I believe it's implemented as a HorizontalScrollView containing a TabWidget with custom, fixed-width, tab indicator views.
Now, getting the tab content views to be paged horizontally is less easy, and that requires something like adapting Workspace.java in the Launcher.git project in AOSP.
I have found the answer to this question. The Sliding layout I described is a ViewPager, available from the Android Compatibility Package v4, which is available from the SDK installer.
A tutorial for this can be found here :http://mobile.tutsplus.com/tutorials/android/android-user-interface-design-horizontal-view-paging/
Edit
An improvement over the Android Compatibility package is the http://actionbarsherlock.com/ an improvement over the support package that adds more Jelly bean style stuff.
I haven't seen a tutorial like this, but you won't be able to do something like this with just the native widgets as they are. You're really looking at implementing your own custom widgets and views, or at the very least wrapping the included widgets with your own code. Maybe a future api will have such features built in, but at this point you're forced to do everything yourself if you want such an interface.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Android - iphone style tabhost
I am trying to figure out how to achieve a tab bar look and feel like the one provided in the iOS for android applications? I am using the normal one but it makes my application to look old school. I would like to achieve the same visual experience as the image below:
http://www.android.com/market/data/screenshots/com.i2.android.brasileirao.activity0.png
I have also looked at mobyfactory-uiwidgets-android bu they are far from being equal to the one in the image.
Thanks T
There's nothing that says the TabHost in a tabbed layout needs to be above the tab content area, so feel free to stick it wherever. But please don't put tabs on the bottom just because you can; Android users aren't used to this and you need to have a better reason than "it looks old-school" for violating UX expectations.
If you just want to fix the look of individual tabs themeselves, you can use TabSpec's setContent(View v) method to setup a custom view for a tab. Also see the source code to the Google IO 2010 Schedule app. You can definitely spruce up tabs this way in lots of good ways without messing about with user's understandings of what Android tabs are and how they function.