In my application I'm using a mix of the actionbar tabs and the "old" TabWidget. I have no problems styling the actionbar tabs using a custom style theme.
<style name="MyTheme" parent="#android:style/Theme.Holo">
<item name="android:logo">#drawable/logo</item>
<item name="android:actionBarTabStyle">#style/MyActionBarStyle</item>
<item name="android:tabWidgetStyle">#style/MyTabStyle</item>
</style>
The TabWidgetStyle doesn't seem to have the same effect on the "old" TabWidget though. I've been trying to change the blue bottom tab-indicator color to red without any success. Does anyone have any tips on how to do this? Do I have to create an a separate tab class and use that as the tab indicator?
Thanks.
Related
On android 7 (nexus phone) the title in my context menu appears white. I would expect it to be black as it is on all other devices I tested. The rest of the app looks good.
Update:
I figured out that the colorAccent is the culprit (AppCompat styles various things based on that). I set it to white in a child theme because the tabBar needs to have white tab indicators.
So now the issues is that I need white tab indicators in the actionbar, black titles in dialogs and context menus and Orange text on buttons styled with the Button.Borderless.Colored style. All of these seem to be controlled with colorAccent. I can make a seperate style for the buttons. But the styles of the dialogs and tab indicators are still conflicting. For legacy reasons I cannot use the new toolbar with a tablayout (That one is stylable) but have to use the Actionbar. Any ideas?
White title in context menu screenshot:
Thanks in advance!
Theme:
<resources>
<!-- default theme -->
<style name="Theme.MyApp" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Remove actionbar -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<!-- Basic coloring -->
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
<!-- AppCompat dialog themes -->
<item name="dialogTheme">#style/Theme.MyApp.Dialog</item>
<item name="alertDialogTheme">#style/Theme.MyApp.Dialog.Alert</item>
///// Tried this with a custom style but that just f*cked up my tabs...
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
<!-- Alert and dialog styles -->
<style name="Theme.MyApp.Dialog" parent="Theme.AppCompat.Light.Dialog">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
<style name="Theme.MyApp.Dialog.Alert" parent="Theme.AppCompat.Light.Dialog.Alert">
<item name="colorPrimary">#color/MyAppOrange</item>
<item name="colorPrimaryDark">#color/MyAppOrangeDark</item>
<item name="colorAccent">#color/MyAppOrangeDark</item>
</style>
</resources>
Djangow, you need to define a new style that with the text color as the specific color you want and then set that style in the app theme you want to use. See this link for the exact coding needed.
UPDATE: Djangow, I apologize. I looked into it and found that you have to add this line <item name="android:actionMenuTextColor">#color/your_color</item> to the main App theme. I found the answer here. Hope that helps
i am using ActionBar to create an android app in eclipse with Tab Navigations and i would like to customize each of my tabs separately to add custom background color and icon to them. How can i set background, and icon to a tab on the ActionBar?
Thanks in advance!
When you create a new Android project/Android Activity, there are some templates you can choose from. Once of those should be for a tabbed navigation activity using ActionBar tabs. Somewhere in the generated code you'll see it's creating instances of ActionBar.Tab and adding them to the ActionBar. You can call setIcon() on the ActionBar.Tabs.
For theme customization, I recommend you use this website, it will generate all the necessary drawables and xml resources, and you can just drop those all into your project. ActionBar Style Generator
I just found a workaround for this problem. I'm still unable to customize each tab separately, but i can load a drawable background to the Navigation Tab Bar in the XML;
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="android:Theme.Light">
<item name="android:backgroundStacked">#drawable/tab_bg</item>
<item name="android:height">60dp</item>
</style>
The result is the following, which is exactly what i wanted;
http://i.imgur.com/DB9LRwD.png
In my TextView I enabled text-selection with android:textIsSelectable.
The problem is, that the appearing actionbar is white and the color of the buttons (copy , select, etc.) is white too. (I use actionbarsherlock 4.4.0)
Is there a possibility to change the color of these items in the styles.xml and if yes: What is the correct way?
Edit:
I found out that i can customize the ActionMode Tab using:
<style name="MyCustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionModeBackground">#color/color1</item>
<item name="android:actionModeSplitBackground">#color/color1</item>
</style>
But i am not able to change the color of the buttons
After hours of trying I finally found a method to separate the actionbar tabbar from the actionbar manualy.
actionbar convert tabs to list navigation if there is no room
But now there is one problem left. The tabs don't fill the tabbar.
EDIT
The tabs are added to the actionbar by:
ActionBar.Tab relatieTab = actionBar.newTab().setText("Relaties");
actionBar.addTab(relatieTab);
Try to switch the parent. If that doesn't work try visiting this post: Stacked ActionBar tab bar not filling parent
Good luck :)
Use the following to customize the tabs in action bar:
<style name="MyAppActionBarTabStyle" parent="#android:style/Widget.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tabindicator</item>
<item name="android:minWidth">40dip</item>
<item name="android:maxWidth">40dip</item>
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">1</item>
</style>
Make sure that the activity where you are setting these navigation tabs has the following in its #android:theme
<style name="MyAppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/MyAppActionBarTabStyle</item>
</style>
I still could not figure how how to detect whether the tabbar is separate i.e. below main action bar or merged (when in landscape OR larger screens even in portrait)
Another interesting thing to know is how to prevent tab bar from collapsing to a spinner when space is not enough.
As and when I find out answers to my questions above, will update the post. Until then hope the styles help few other ppl
I just solved this problem today.
They key was using <item name="android:padding">0dp</item> like so...
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar">
</style>
<style name="LoginActionBar"
parent="#style/MyActionBar">
<item name="android:actionBarTabStyle">#style/LoginActionBarTabs</item>
</style>
<style name="LoginActionBarTabs"
parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:padding">0dp</item>
</style>
You don't need that many styles, but I didn't want to take any chunks out, which may have lead to confusion.
I also see that you already worked around this, but I figured I'd add my answer for the next person to come looking for this.
I want to change default ActionBar tab's height, but can't find any info about. Is there some style attribute or method to set height of tabs?
Thanks.
You have to change the height of the actionbar in order to change the height of the tabs.
theme.xml
<style name="YourTheme" parent="#android:style/Theme.Holo">
<item name="android:actionBarTabStyle">#style/tab_nav</item>
<item name="android:actionBarTabTextStyle">#style/tab_nav_text</item>
<item name="android:actionBarSize">80dp</item>
..
</style>
This is how you style the tabs. Although, I was having trouble actually getting the height to change. I'm not sure you can set a height via a Style to the TabView. You may have to create custom View and apply that to your tabs in your code. All the styles and attributes you need to reference are in the SDK. Look in the Values folder of the platform version you're working with. That's how I typically find out how to do this.
<style name="Widget.Holo.Tab" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:height">#dp</item>
</style>
<style name="Your.Theme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/Widget.Holo.Tab</item>
</style>
Be Aware that using
android:theme="#android:style/Theme.Holo.Light.NoActionBar.Fullscreen"
instead of
android:theme="#android:style/Theme.Holo.Light.NoActionBar"
leads to the following problem: if you switch from [NoActionBar Activity] to [ActionBar Activity] ActionBar will JUMP