Tab item width in Action Bar (Android) - android

I'm using 12 tabs in an Activity, in the Action Bar (target is API 17, tested on Galaxy Nexus 4.2.2).
As expected, I get a horizontall scrolling list of tabs under my action bar. In the screenshot below, you can see that the last tab (B, on the right) is noticably smaller than the other tabs (don't take the "E" tab into account, it can be scrolled as there are 4 more tabs on the left).
You can see from the blue glow that there is nothing more to scroll. I'm using the default Theme.Holo.Light.DarkActionbar, without any custom view yet.
Why is this last tab smaller than the other ? And how can I make sure that it gets the same width as the others ?

Indeed I came accross the same problem and the only work around I found was to disable the dividers between tabs. Looks like there is a bug in the native actionbar that does not take care of the dividers size when measuring tab bar container.
<style name="actionBarTabBarStyle" parent="#style/Widget.Sherlock.Light.ActionBar.TabBar">
<item name="android:showDividers">none</item>
</style>
(Here I'm using actionbarsherlock but it is not the source of the problem you could extend your style from parent="#android:style/Widget.Holo.ActionBar.TabBar")
And apply it in your theme:
<item name="android:actionBarTabBarStyle">#style/actionBarTabBarStyle</item>
If you absolutely need the actionBar divider, one simple solution may be to add it directly to the tab background (left or right)

Related

SlidingTabStrip indicator underneath SlidingTabLayout

I am using a fragment pager adapter for two tabs, based almost identically on the code from the Sliding Tabs Basic sdk sample. All was working fine until I tried to swap out the action bar for the tool bar. I had to switch up my theme to light, and now I've noticed that the tabs were using a transparent default colour. I want my tabs to be the same colour as the tool bar, but in setting the colour, they are obscuring the sliding tab strip indicator completely. What is the correct way to push the SlidingTabStrip to the front?
I've tried setting the background resource of the tab programmatically rather than via the selectableItemBackground theme property. The background still obscures the indicators.
I've tried to bringToFront() or bringChildToFront() the SlidingTabStrip in multiple places, (it is created in the constructor of the SlidingTabLayout). I've tried it after the for loop in SlidingTabLayout.populateTabStrip() which seems sensible as this is where the tab views are created.
I wonder why no-one else has had this issue ?!
Well I figured out the solution and it actually took me far too long - by inverting the problem we can leave the selectableItemBackground transparent when unpressed, and set:
<item name="android:windowBackground">#color/my_bg_color</item>
in the theme itself. This means I can have my tabs the same colour as the tool bar and not obscure the indicator. It's a weird set-up though, because if I did want the tabs a different colour to the windowBackground or tool bar, with the indicator un-obscured, this would not be the solution!

Should I hide the android actionbar or try to style it

I am building an app for Android and iOS. It is working but the creative people want to totally change the style so that the top part of the screen (where the actionbar is on android) is taller and has their logo centered in it.
Should I hide the actionbar and put the logo (and custom nav icons) at the top of my layouts, OR should I try to change the style of the actionbar (make it taller and include the logo in the center)? Either option seems a bit painful, but I don't think I can talk them out of it.
you should create own View. You can't center any item (icon, logo, title) in ActionBar, also you can't change height. Android ACtionBar's guidelines are very strict. You might change some params by using "findViewById" and passing hardcoded android ids, but they might change for different device manufacturers resulting no change on these units (or even some crashes)
Personally, I would probably modify the ActionBar and try to maintain as much of the functionality as possible. Especially if this is a long running project and it might go back to the standard action bar later.
You can do this by adding your own custom view that will contain your centered logo to the action bar:
getActionBar().setDisplayShowCustomEnabled(true);
getActionBar().setCustomView(R.layout.action_bar_view);
You can then use the action buttons and home/up buttons as you normally would.
Depending on your needs however, you may find it challenging to keep the logo centered since the home and action buttons will add to the left and right respectively which will shift the center view if unbalanced. If so, you can still use your custom action bar view from above and add buttons directly to it inside a FrameLayout to maintain the centering.
To change the height, you can use themes and styles. Wherever you define your styles, set the actionBarStyle and the height in that style:
<style name="MainTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBarStyle</item>
</style>
<style name="ActionBarStyle">
<item name="android:height">70dp</item>
</style>

ActionBarSherlock tab height not adjustable on Jelly Bean

I am creating an application with ActionBarSherlock and using ActionBar tabs. Below is how I am defining tabs:
actionBar.addTab(actionBar.newTab().setText("test").setTabListener(new TabListener<AccountsListFragment>(this, "accounts",AccountsListFragment.class)));
I am trying to change the height of the tabs. From what I understand there is no way to change just the height of the tabs. You also have to change the height of the main action bar(I am pulling my definition of the main action bar from)
http://developer.android.com/design/patterns/actionbar.html#considerations-split-action-bars
So how you change the height of the action bar is using the below style inside the main theme
<item name="actionBarSize">100dp</item>
<item name="android:actionBarSize">100dp</item>
The above code seems to work on all devices to change both the Main action bar and the tabs except jellybean. I tested this on a 4.1.2 galaxy nexus. Also on a 4.2 Nexus 7. It seems to work the same on both. It only changes the main action bar and not the tab height at all.
We also tried a custom view for the tabs which did not help us.
If anyone can point me to where in google it says that they do not allow changing height of tabs anymore(Which I doubt is the case) or give me a style to fix this issue. I would greatly appreciate it. If you even give me an example on a normal action bar and not sherlock that should help me.
To me it sounds like a silent bug fix. They make some of these at every new release. I doesn't make sense that changing the height of the actionbar should increase the size of the tabs and it isn't something that has been encouraged by Google, rather it's a hack developers have found nice to use. Your only other option is to make it yourself, but it's quite complex and could prove to be time consuming.
Similar post here:
Change Actionbar height on Android JellyBean

Remove bottom border of tabhost in ICS (ActionBarSherlock, v4 support lib)

I'm on Android ICS (4.0.3) using ActionBarSherlock and the v4 support library. I am trying to figure out where the bottom border of the tab host is defined and can be customized/removed.
Referring to the screenshot below, I'd like to remove the bottom border for an active tab. The active tab view itself doesn't have a bottom border, the bottom border seen on the screenshot (circled in red) seems to be coming from the underlying tabhost or somewhere. I just could not find the style or attribute to overwrite yet. The same goes for the very light, ~2-3px drop shadow that you can see beneath the tab section. Did not see where it's defined either.
In your theme add
<item name="android:windowContentOverlay">#null</item>

Android change of ActionBar tab from some width

I have one tough question. I am now playing with design of the Android application and I have the problem with way how the tabs are displaying from some width of display. I use ActionBarSherlock library and ViewPager for tabs.
The problem is that I use yellow color for ActionBar, black for tabs and again yellow for tab indicators, but when I look at the application on wider screen or in landscape mode (I guess approximately from width 400dp) I can't see the indicators, because tabs are hiden in action bar and indicator has exactly the same color. Is there som way how to change color of tab indicators from some display width?
I have tried to do it by making of layout-sw400dp/layout.xml, new 9patche's and new styles, but I can't make it work this way and I think now that it is impossible to do it this way. Do you have any idea how to do this?
Thank you very much in advance.
UPDATE
I have solved it in the following way. I have created folders drawable-w400dp and drawable-land (for ancient phones). Only phones where it will probably be displayed in the wrog way are black berry like androids.
Have you tried using the Action bar style generator. I used this and my tabs have highlights in both orientations http://jgilfelt.github.com/android-actionbarstylegenerator/ it generates 9patches and XML for you

Categories

Resources