In the Android Design Guidelines it states that "There are two types of tabs: fixed and scrollable."
I can't find any documentation in the ActionBar documentation to support the ability to specify either type of tabs.
How do you specify a tab group to be fixed or scrollable? If you can't, what governs whether the tabs are fixed or scrollable exactly?
The number of tabs dictates whether the tab group is fixed or scrollable. For example, if you have one tab, they'll be fixed but if you have like six then they'll become scrollable because all six can't fit on one screen.
If you want to see it in action on a pre-3.0 device, download the Action Bar Sherlock sample and select Feature Toggles from the main list and then select "Tabs" as your navigation mode. Now you can add tabs to the bar and at first, they'll get smaller to cram them all in and then once you have enough you can scroll through them.
UPDATE: There is now a page on this in the official documentation that says "Fixed tabs are displayed with equal width, based on the width of the widest tab label. If there is insufficient room to display all tabs, the tab labels themselves will be scrollable." Read more here.
It's worth noting that the setting
android:showAsAction
will also have an effect on how tabs are shown, at least in 4.0+ devices. Setting
<item name="android:showAsAction">always</item>
as part of a theme will result in all tabs being given equal spacing on the screen, without scrolling, if space is available to do so.
Related
Screenshots
Background
Graphical tabs started to appear in stock Android application around ICS. However, they are quite different from the traditional tabs (link). Moreover, I have found no related tutorials.
Differences with Traditional Tabs
Graphics instead of text, obviously.
No selection indicator at bottom.
The color of the contents (graphics) indicates the selection instead.
Suspicions
Are they just tabs with an icon but no text, combining together with a suitable theme?
If yes, how to theme the tabs to achieve such effects?
The main difference is that old style tabs were implemented using TabHost and TabWidgets. However, since the introduction of the Action Bar the tabs are implemented as action bar tabs.
You can read about styling the tabs in here.
Basically you can create your own indicator, as well as choose between icons, text etc.
I have chosen action bar with navigation tabs for fulfilling my app requirement.
If I set three tabs in navigation mode, window width is good enough to show all the tabs. When I add more than 3, say 5, tabs are visible and I can access it by scrolling horizontally. Even though, tabs are visible only on scrolling to right and user may not aware that more tabs are available.
Is it possible to add arrow images in Navigation TabView if more tabs were available? I believe navigation tabs are shown in stack view of actionbar. Is there some way to add custom view in stacked layout of actionbar?
possibly unrelated (and feel free to comment as such so that I delete the answer) but have you considered using swipe views instead of ActionBar tabs?
http://developer.android.com/training/implementing-navigation/lateral.html
They're really easy to use and you can customize them very easily to do what you want and to include any sort of layout you deem applicable to your app. Have a look at
http://viewpagerindicator.com/
for ideas on what's possible.
I am looking for a Tab navigation UI component that would work similarly to the SlidingPaneLayout, i.e. would show as many tabs as possible and make the tabs slidable left/right when the tabs wouldn't fit on the screen (in my case its tablets vs smartphones case). An example of it would be Slideable top navigation UI pattern.
Is there any library I could use to implement such component in my app?
Action bar tabs and ViewPager are the one's you are looking for. These are in built feature of Android, Easy to access and backward compatible to earlier versions as well.
ActionBar tabs is the one that will give you the tab like feature.
ViewPager on the other hand will provide the functionality of swipe.
Here is a step by step example on both.
i have an action bar with a Tab navigation. While running on 3.1 everything was fine, but once i installed the app on a 4.1 device the tabs where forced to be displayed as a spinner, wrecking my layout design.
Looks like the tabs are taking too much space (if i remove some of the fragments everyting looks ok again.
Is there a way to stop this behaviour and display the navigation as tabs again just as in android 3.1? Does anyone know?
thanks!
I found the answer here. Had to set the navigation mode AFTER adding the tabs.
First of, just to clarify: This is not a bug and it works as intended. Reference this discussion on the Google code forums.
However, I came to the solution that if you override:
<bool name="abs__action_bar_embed_tabs">false</bool> //for ActionBarSherlock
<bool name="android:action_bar_embed_tabs">false</bool> //for default ActionBar
You won't have a NAVIGATION_MODE_LIST in portrait mode. However you won't have embedded tabs and if you rotate your screen to landscape it won't work either.
By default you'll have embedded tabs and therefore a NAVIGATION_MODE_LIST on a screen with a width of >480dp.
This behavior occurs (I assume) because the embedded tabs are limited to the width of the ActionBar, so if you override the boolean value it'll have tabs in a separate row and it won't collapse. But unfortunately I can't explain myself why this does not work in landscape.
Sorry, but you can't stop this. This is a feature, not a bug, according to Google. See: http://code.google.com/p/android/issues/detail?id=24439
As I understand you should consider using a ViewPager + PagerTitleStrip if you have many tabs and want to make them scrollable all time.
Here is a quote from ttps://code.google.com/p/android/issues/detail?id=24439#c9:
If your UI contains many tabs to the point where you hit the scrolling
tabs or collapse-to-spinner case regularly, you might consider using a
PagerTitleStrip as an indicator rather than full tabs to present this
info in a less cluttered way. This can be especially useful if the set
of tabs displayed is under user control. Clickable tabs work best when
there is a small, bounded set such as in the YouTube app. Scrolling
tab strips lose one-touch access to any tab, their primary advantage
over a simple title strip. Examples of the PagerTitleStrip style can
be found in the Android Market and Google+ apps.
I would not recommend using tricks as nobody guarantee that tricks will works stable.
If you really want to still use tabs and stop it from collapsing to a spinner, it is technically possible using reflection IF you happen to be setting a customView for the tabs:
View v = <your custom tab view>;
Tab tab = actionBar.newTab().setCustomView(v);
do{
v = (View)v.getParent();
} while (v!=null && !v.getClass().getSimpleName().equalsIgnoreCase("ScrollingTabContainerView"));
if(v!=null) {
try {
Method allowCollapse = v.getClass().getDeclaredMethod("setAllowCollapse", new Class[] { Boolean.TYPE });
allowCollapse.setAccessible(true);
allowCollapse.invoke(v, new Object[]{ false });
} catch (Exception e) {
}
}
If there is not enough space, the tabs will scroll in the ActionBar. The Tabs and any Menu actionItems are given 1/2 the screen width so you can calculate if the tabs will end up scrolling or not and make adjustments to tabs, menu actionItem labels etc or force the tabs into a stacked mode to avoid the scrolling tabs... OR as previously suggested, using the PagerTitleStrip instead.
I've asked a similar question about the Android ActionBar before: Change ActionBar Tabs background color
I still don't have an answer to the question: when will the two line design/when the one line design used? I've set a custom divider to my tab bar and it's also being used in the horizontal layout. However to create drawables/styles based on the orientation/screen size etc I need to know when which layout is being used. Looking through the Android source it seems they are using the same drawables for both layouts, so that doesn't really help me. The same problem applies when changing the font color of the Tab View.
I fear that it'll be decided in code which format is being used, so there's not really any way around this. Can anyone confirm this? Or is there at least a way to find out in code if the Action bar is one lined or two lined?
Android will stack tabs beneath the action bar when it deems the screen size/orientation to be narrow (like on a normal sized screen in portrait, or on a small sized screen regardless of orientation). Similarly if there are many tabs, in some cases they will appear as a drop-down list in order to ensure the best fit in the action bar.
The Action bar is a highly adaptive UI control. If you are going to use its navigation modes I would strongly suggest not trying to anticipate their configuration or attempt to apply styles that are specific to each one. Your tab drawables will always need to be 9patch anyway because the base action bar height will also vary across orientations and screen sizes (notice its height is slightly smaller in landscape).
That said, you can query the action bar height at runtime using its getHeight() method. This Honeycomb Gallery example included in the SDK uses a bunch of logic in an OnGlobalLayoutListener to ensure that the Fragment layout responds to the various action bar sizes appropriately.