So I have a really simple app (picture below). I am using tabs and the scrolling (via swipe or by clicking the tabs) but I was wondering if I could possible change the size of the tabs somewhat dynamically.
For instance, "Home" doesn't need to be as big as "Most Recent", and there is a 4th tab that you cannot see on the screen that would ideally be seen if the tabs were smaller.
How could I go about this? I Googled around but I could not find anything relevant that seemed to work.
You can use title strips instead of tabs to solve this problem pretty easily:
http://developer.android.com/training/implementing-navigation/lateral.html#PagerTitleStrip
Related
I'm not sure a ViewPager is the way to go, but it might.
My goal is to create an App with 3 screens.
A main screen and 2 other screens the are reachable by swiping left and right from the main screen.
i would like to have the screens as Fragments.
I have used a ViewPager, but I would like to get rid of the TabBar, and just stay with the swipe.
I managed to get rid of the Tabs, but the bar remains empty. I want it to be hidden.
Is that possible?
Is there a better way to do it ?
If this question was already answered, I have failed to find it and will appreciate redirection as well.
Thanks a lot,
Giora.
In your AnsroidStudio layout screen, go to the "Design" tab. Click on the theme option and select a theme with "NoActionBar.FullScreen" AFAIK ViewPager does not have any TabBar by default.
I am trying to figure out how airbnb has implemented its Tab Bar, it either seems they have hidden their actionbar and everything has been shifted onto a tab bar but then the right most user icon opens the navigation drawer which should be ideally on actionbar, Or everything is on action bar itself but then how can those 3 tabs/icons on left be implemented on actionbar. (Kindly refer attached image)
Can somebody put some light on how this can be implemented. How to go about it? Also are those 3 icons fragments or separate activities?
Here, is a library which makes your life simpler to implement TabBarView for actionbar tabs.
https://github.com/Mirkoddd/TabBarView
This should give you insight about how to use it for your app.
I've set up a ViewPager in my App with tabs, but I need to position the tabs underneath a button so the layout would be
TitleBar
Button to search activities on a day
Tabs of each day there are activities
Is that kind of layout possible to do using Tabs or will I need a different approach to solve this?
The way the activity is running is theres a main activity, and the layout is just the button and a FrameLayout, and the the list (where the ViewPager is) is set up in a fragment and the fragment is loaded into the FrameLayout. I don't know if this is the best method for this so if not please add your recommendations of a better method I could use.
EDIT: If I could get it so all the tabs were at the bottom of the screen this would also be fine.
Is that kind of layout possible to do using Tabs
Not with action bar tabs. Not only can you not control where the tabs go, you cannot even control if there will be tabs versus a drop-down list.
will I need a different approach to solve this?
You are welcome to use some other tab solution (ViewPager with a tabbed indicator, FragmentTabHost, etc.) where you have more control.
Note that your proposed design does not adhere to Android design aesthetics. Most apps would not have "Button to search activities on a day", but instead a search action bar item, or perhaps a SearchView in the action bar.
If I could get it so all the tabs were at the bottom of the screen this would also be fine.
This is completely against the Android design guidelines. Don't use bottom tab bars on Android.
This is a picture of my phone (Android 2.1 with HKC Sense):
The bit that's got a red border around it is in the Clock app and the Media player on my phone. What is it called? Is it a standard Android interface control?
I've been trying to figure out how to get something like this for the past while and I'm not seeing anything immediately obvious.
I've seen a lot of people referring to the ActionBar or Split ActionBar, but that seems to be something that is anchored to the top. I need this to be at the bottom without any component on the top.
*please excuse
It's an actual pic of the phone, rather than a screenshot - the screenshot app I downloaded wouldn't work.
The fact that the pic was taken with an iPhone, and that the apple logo is clearly reflected in the pic.
You can use Split ActionBar
android:uiOptions="splitActionBarWhenNarrow"
And that will force the action bar items to be hosted on the bottom of the screen for narrow devices, mostly phones. When this flag is set, no components are hosted on the top of the ActionBar, unless you use tab navigation.
See example Image
Keep in mind though, that should you be displaying the layout on a non-narrow device, like a tablet, then the items will be attached to the top ActionBar.
Some other things to consider
Creating a custom view, which you can set to the bottom of the layout. The View would be a scrollable ListView per say, and you can add as many icons as you'd like to it. Here's an example. That would not be a standard nav pattern though.
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.