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!
Related
If I am on a tab in a tabbed activity, and I change tabs, how do I make the title bar and tab indicator change colors? An example of what I'm talking about can be seen below (done on paint).
App bar changing color when different tabs are selected
I figure that manipulating the different elements and what color resources that they use could be done to change everything uniformly, but at the same time, I don't know how to do that. I have four tabs, and four sets of colors picked from the material design library, red, blue, green and yellow. Including red dark, blue dark, etc.
I'm not using the default tab layout activity that comes with android studio, instead, I am using one similar to the one used here
https://androidbelieve.com/navigation-drawer-with-swipe-tabs-using-design-support-library/
minus the navigation drawer. All help would be sincerely appreciated, though I'm afraid that I'm still quite a beginner so I would appreciate it if you could make it as simple as possible.
:D
You can just right code according to selected tab position
for tab 1
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#F00")));
for tab 2
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#FF0")));
for tab 3
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#F0F")));
I use
getWindow().setStatusBarColor(color);
for change color title bar.
I have a tablayout in fragment which has its colors predefined in the xml. When the fragment is initialised, the tablayout shows the right color.
However in certain devices (Especially api 21 and above), the tablayout changes its color to white without any reason when some action happens in the fragment. I am nowhere touching the tablayout color through my code. Can someone explain why. Also, I noticed when keyboard comes up in the fragment for any user action, the tab layout color changes to white. Can activity resizing be a cause of this ? It seems when keyboard comes up, the tablayout background color seems to go away as if it has moved up or something.
My Home with tab layout.
I resolved this issue by setting tablayout drawable xml's for selected and unselected states instead of using just background color from resources
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'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)
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