Hee,
First of all I want to say that I am using ActionBarSherlock (the screenshots are taken on a Samsung Galaxy S3).
I have an actionbar with a tabbar in it, I want that the tabbar has a grey color when it is splitted (the tabbar is underneath the actionbar) and a transparant color (or same color as actionbar background) when the tabbar is inside the actionbar.
Here is a little code snippit of my styles.xml:
<style name="Theme.OSP.Light" parent="#style/Theme.Sherlock.Light">
<item name="actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="android:actionBarStyle">#style/Widget.Styled.ActionBar</item>
<item name="actionBarTabBarStyle">#style/Widget.Styled.ActionBar.TabBar</item>
<item name="android:actionBarTabBarStyle">#style/Widget.Styled.ActionBar.TabBar</item>
</style>
<style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar">
<item name="android:background">#F0F0F0</item>
<item name="background">#F0F0F0</item>
</style>
<style name="Widget.Styled.ActionBar.TabBar" parent="Widget.Sherlock.Light.ActionBar.TabBar">
<item name="android:background">#E0E0E0</item>
<item name="android:gravity">center</item>
</style>
Below are some screenshots to make my question more clear.
Landscape (actionbar not splitted). This is not OK, the tabbar should have the same color as the actionbar, but instead it has the same grey color:
Portrait (actionbar splitted). This is OK, the tabbar has a grey color in this state:
I've found a wonderful website were you can generate an android theme in seconds! This solved all my problems:
http://jgilfelt.github.com/android-actionbarstylegenerator/
EDIT
Also see the following link for a working answer: Change ActionBar Tabs background color
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 have my style defined as follows:
<style name="actionBarTheme" parent="android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#drawable/button_style</item>
<item name="android:titleTextStyle">#style/actionBarTitleText</item>
</style>
And the actionBar is actually of the color defined in button_style (correctly working in other parts of the code). The problem is that the items are not working correctly (the background color is too light).
Any idea on how to solve this? Thanks
EDIT:
In the picture there is the touch-feedback that I have now. The button_style has another touch effect (a darker one) since this is almost invisible.
You can have this affect with actionButtonStyle
<style name="appTheme">
<item name="android:actionBarStyle">#style/actionBarTheme</item>
<item name="android:actionButtonStyle">#style/actionButtonTheme</item>
</style>
and then place your button style as the background of that.
<style name="actionButtonTheme">
<item name="android:background">#drawable/button_style</item>
</style>
You will still need to set the background of your action bar but this only needs to be a colour or drawable image as that is all that will actually be used.
I followed this Guide to style my ActionBar. I use fixed tabs in my app so I want to theme the tabs too.
(Note: I'm using the appcompat theme to ensure some backwards compatibility)
So I used
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
<item name="android:actionBarStyle">#style/CustomActionBar</item>
<item name="actionBarStyle">#style/CustomActionBar</item>
<item name="android:actionBarTabStyle">#style/CustomActionBarTabs</item>
<item name="actionBarTabStyle">#style/CustomActionBarTabs</item>
</style>
as my theme.
I set the ActionBar background without problems, but then I tried theming the tabs with:
<style
name="CustomActionBarTabs"
parent="#style/Widget.AppCompat.ActionBar.TabView" >
<item name="android:background">#drawable/customtheme_actionbar_tab_indicator</item>
<item name="background">#drawable/customtheme_actionbar_tab_indicator</item>
</style>
The background points to a StateList where I set different drawables for different contexts, which works kind of as expected. Except it works just for the tabs. Not for the ActionBar.
The separator and the background of the tab bar is not themed.
How can I theme those ? (The grey part)
Theme Creation Guidelines
I wonder if there are any guidelines for creating a theme that looks good ?
(good = similar to default theme, so the app fits into the android ecosystem)
Because If you look closely at the default themes you can see a small line at the bottom of the ActionBar drawable. (The part which is light green in my theme)
There may be other things which you should consider when creating a theme that looks similar to the default themes, so it would be nice to some guideline.
Also: Should the TabBar always be darker than the ActionBar ?
(If so, how much darker?)
How much brighter/darker than the ActionBar color should the image color (like the color of the overflow button in the image) be ?
Thanks in advance,
Uriel
Add this
<style
name="CustomTheme"
parent="#style/Theme.AppCompat.Light" >
.
.
.
<item name="android:actionBarTabBarStyle">#style/TabBar</item>
</style>
And then
<style name="TabBar" parent="#style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:background">/** Whatever color you want, like #ffff00 **/</item>
</style>
Just incase, it may help somebody
This below worked for me
<style name="Theme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarTabStyle">#style/Theme.MyActionBarTab</item>
<item name="actionBarTabTextStyle">#style/Theme.MyActionBarTabText</item>
</style>
<style name="Theme.MyActionBarTab" parent="#style/Widget.AppCompat.ActionBar.TabView">
<item name="android:background">#color/gray_mask</item>
</style>
<style name="Theme.MyActionBarTabText" parent="Widget.AppCompat.Light.ActionBar.TabText">
<item name="android:textColor">#color/black</item>
<item name="android:textSize">#dimen/size_28</item>
<item name="android:gravity">center</item>
<item name="textAllCaps">false</item>
</style>
Once again I'm fighting with ActionBar styles for SDK 14 and above. I'm trying to remove/reduce spacing between Tab icons since the default spacing does not fit well in my design. Currently my style looks like:
<style name="sMain" parent="#android:style/Theme.Holo">
<item name="android:actionBarStyle">#style/mTabAreaBackground</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle</item>
</style>
<style name="mTabAreaBackground" parent="#android:style/Widget.Holo.ActionBar.Solid">
<item name="android:backgroundStacked">#2b2f33</item>
</style>
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#android:color/transparent</item>
<!-- below attributes have no effect -->
<item name="android:width">0dp</item>
<item name="android:height">0dp</item>
</style>
I "removed" the active Tab indicator by making it transparent since my Tab icons already have one. I assumed that the spacing between Tab icons was somehow related to the Tab indicator, which was still there though I made it transparent. Therefore I tried to apply a width and height of 0 in the same style (inherited from style/Widget.Holo.ActionBar.TabView). I don't know if my assumption was incorrect or I'm doing something wrong, I also could not find any documentation/examples related to adjusting spacing between Tab icons.
Any suggestions are appreciated.
AFAIK, the spacing is because of the padding on the TabView.
You should changing the padding on the TabView something like below.
<style name="ActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#android:color/transparent</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
</style>
The default padding on the TabView seems to be 16dp.
I'm using ActionBarSherlock for an Android app I'm making, and am displaying an image on one of my screens. On this screen, I want the actionbar to go away and come back as the user presses on the screen without the image being stretched. This part I have working, but to do so I created the following style and applied it to that screen. . .
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
The problem is, now my action bar is transparent and I can't figure out why. If I change the parent of my style to Theme.Sherlock.Light.DarkActionBar, it is no longer transparent but doesn't look the same as Theme.Sherlock, so it will be inconsistent with the rest of my app.
I've also tried the following. . .
<style name="MyActionBar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="background">#color/black</item>
</style>
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
Can anyone tell me why the windowActionBarOverlay items are making my actionbar transparent, and what I can do to fix it? Thank you.
As the transparent ActionBar is a feature called "Actionbar Overlay", I think the problem is inside this line:
<item name="windowActionBarOverlay">true</item>
You may need to set it to false.
Please have a read of the following paragraph:
To enable overlay mode for the action bar, you need to create a custom
theme that extends an existing action bar theme and set the
android:windowActionBarOverlay property to true
Also please have a look at Overlaying the Actionbar on Android Developers