Change color title bar - android

I want to change the color of the title bar. I tried this:
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/ColorBar</item>
</style>
<style name="ColorBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/white</item>
<item name="android:textColor">#color/orange</item>
</style>
But it doesn't work. What is wrong in my code shown above?
EDIT : it's the color of the text i want to change, not the background (it's running for the background)

This should work for all devices, you will need the support library (appcompat_v7)
<style name="Theme" parent="#style/BaseTheme"></style>
<style name="BaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="actionBarStyle">#style/ActionBar</item>
<item name="android:actionBarStyle">#style/ActionBar</item>
</style>
<style name="ActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/orange </item>
<item name="background">#color/orange </item>
<item name="android:titleTextStyle">#style/ActionBar.Text</item>
<item name="titleTextStyle">#style/ActionBar.Text</item>
</style>
<style name="ActionBar.Text" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/orange</item>
</style>
manifest :
android:theme="#style/Theme"

There may be problem with the android version. You should consider old ones and new ones. Try adding these both lines for different versions.
<item name="android:background">#drawable/your_color</item>
<item name="background">#drawable/your_color</item>

Does changing the parent to parent="#android:style/Widget.Holo.Light.ActionBar.Solid" make a difference?
If not, let me know what happens if you move the
<item name="android:actionBarStyle">#style/ColorBar</item> into the AppBaseTheme style
Try setting all of these:
<item name="android:background">#color/something</item>
<item name="android:backgroundStacked">#color/something</item>
<item name="android:backgroundSplit">#color/something</item>

This is an easy way for settings the color of the actionbar-title by Java
getActionBar().setTitle(Html.fromHtml("<font color=\"#ffffff\">" + "TITLE" + "</font>"));
If you're using a support library, then you can use getSupportActionBar();.

I'm new to all of this but I found it easier to go to Res > Value > colors.xml and from there you can change the "primary color." This changed the title bar to the color I selected.

Related

Android styles, difference between api levels

I'm trying to learn how to Style my application using the styles.xml file and I need some clarification on a few things to understand it.
In an Item, what is the difference between setting android:actionbarstyle and just actionbarstyle ? I know that in this particular case, I have to define both, but why? And what about all other cases, for example android:colorPrimary and just colorPrimary? In that case I get an error saying that android:colorPrimary can only be used with min API level 21. So does someone have a good explanation on what the android: prefix does and how it affects my app?
Is there a reference to the different parent styles, such as parent="#style/Widget.AppCompat.Light.ActionBar and what they mean? How do I find a list of the different parent styles available for a specific item and what I can "override" in them? Right now, it's mostly guessing on my part....
Just as a reference, I'm posting my current styles.xml file.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="MyTheme"/>
<style name="MyTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/MyTheme.ActionBarTheme</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
<item name="drawerArrowStyle">#style/MyTheme.DrawerArrowStyle</item>
<item name="android:actionOverflowButtonStyle">#style/MyTheme.OverFlow</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="android:homeAsUpIndicator">#drawable/abc_ic_ab_back_mtrl_am_alpha</item>
<item name="colorControlNormal">#color/my_green</item>
<item name="colorControlActivated">#color/my_forest</item>
<item name="colorControlHighlight">#color/my_deep_green</item>
</style>
<style name="MyTheme.ActionBarTheme" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<!-- This sets the BACK arrow to white. Otherwise it's black. Must be placed in the theme-->
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/my_green</item>
<item name="background">#color/my_green</item>
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="colorControlNormal">#color/white</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyTheme.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#color/white</item>
</style>
<style name="MyTheme.OverFlow" parent="Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#color/white</item>
</style>
</resources>
I will try my best to explain and will concentrate on:
<item name="colorPrimary">#color/my_green</item>
<item name="colorPrimaryDark">#color/my_forest</item>
<item name="colorAccent">#color/my_soil</item>
These attributes are regularly available with API level 21. In general you use attributes with the "android" prefix.
If you define all your styles in the styles.xml of your values folder and if you are using app compat, then you need both.
Without the prefix the attributes applies for pre L devices. i.e. App Compat. To get it work for L devices and higher you need to specifiy the attribute again with the "android" prefix.
And to get the other Android styles you can step into them, like you step into classes and the implementations. For Mac I press the command button and then click with the mouse on the specific style.

Android actionbar background around title

Android Studio 1.1.0. SDK 22 Installed&Compiled, SDK 17 Target (I suppose it's not relevant, because issue occurs also on preview in IDE).
I started playing with Holo theme action bar styling and ran into an issue, involving background color. This is my styles.xml:
<resources>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#ff0d3200</item>
<item name="android:actionBarStyle">#style/BarTheme</item>
</style>
<style name="BarTheme" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#443322</item>
</style>
</resources>
And this is output. I want app title's background color to be the same as action bar's. As I've said, it's the same on the preview, so I don't think it's because my phone(SDK17) or emulator. Overflow button behaves the same way, there just isn't any in this case.
I tried setting android:titleTextStyle in BarTheme to this style:
<style name="TitleTheme" parent="android:TextAppearance.Holo">
<item name="android:background">#443322</item>
</style>
But it didn't change a thing. What do I do to overcome this?
try ,
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">value</item>
<item name="android:titleTextStyle">#style/TitleColor</item>
</style>
<style name="TitleColor" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">value</item>
</style>
Due to David's input I solved my problem myself. I had to set windowBackground, instead of background in AppTheme. I'm not sure what is the exact difference, but it works properly. Remember not to change attribute in your BarTheme, because it won't work with windowBackground. Therefore correct styles.xml file is:
<resources>
<color name="bcColor">#ff0d3200</color>
<style name="AppTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:windowBackground">#color/bcColor</item>
<item name="android:actionBarStyle">#style/BarTheme</item>
</style>
<style name="BarTheme" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#443322</item>
</style>
</resources>
Note that color has to be defined as resource in this case and cannot be hardcoded. The clean way to do this is create colors.xml in values folder and define all colors there.

android Style dropdown of ActionBar

Currently I am working on a little android app. I try to change the background color of the ActionBar's dropdown menu. So far I was only able to change the background color of the ActionBar itself, but not of the dropdown menu. It simply does not change the color. Here is some code from my styles.xml:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light"></style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
<item name="actionBarStyle">#style/MyActionBarStyle</item>
<item name="android:actionDropDownStyle">#style/MyActionDropDownStyle</item>
</style>
<style name="MyActionBarStyle" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/background_color_action_bar</item>
<item name="background">#color/background_color_action_bar</item>
</style>
<style name="MyActionDropDownStyle" parent="#style/Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="background">#color/background_color_action_bar</item>
<item name="android:background">#color/background_color_action_bar</item>
<item name="android:popupBackground">#color/background_color_action_bar</item>
<item name="android:dropDownSelector">#color/background_color_action_bar</item>
</style>
The MyActionBarStyle part works but the MyActionDropDownStyle does not. I suppose that the parent of MyActionDropDownStyle might be wrong. Maybe someone of you has an idea and can help me.
Thanks in advance!

can't change color of actionBar divider

I tried change color of my actionBar divider , but nothing work. I' using android support library v7 for support old devices and custom style, and i also change all action bar drawable, but nothing happend!
<resources>
<style name="MyTheme" parent="Theme.AppCompat">
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent = "Widget.AppCompat.ActionBar">
<item name="background">#drawable/my_action_bar</item>
</style>
</resources>
And my ide show me strange error in layout , why did i get this error? it's not color value
java.lang.NumberFormatException: Color value '#drawable/abs__ab_transparent_dark_holo' must start with #
Solution: Need to add android namespace if use for api level >= 14 .May be it will be helpful to someone.
It is because the "divider" is an image. It's hardcoded in the Holo theme assets.
Look at platforms/android-19/data/res/drawable-xxhdpi/ab_transparent_dark_holo.9.png
The style is declared here for holo dark.
<style name="Widget.Holo.ActionBar" parent="Widget.ActionBar">
...
<item name="android:background">#android:drawable/ab_transparent_dark_holo</item>
...
</style>
It's a background. You will need to change the color in the image and replace the background of your bar.
It also needs different sizes for different resolutions.
Maybe you should set color directly, change your theme as
<item name="android:divider">#color/dividercolor</item>
Then you should add color dividercolor in you /value/color file,like
<item name="dividercolor"> #0099CC </item>
I hope this will be helpful to you
<style name="CustomTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="android:actionBarDivider">#drawable/action_vertical_doted</item>
<item name="android:actionButtonStyle">#style/MyTheme.ActionBar.ActionButton</item>
<item name="android:actionMenuTextColor">#ffffff</item>
<!-- <item name="android:actionMenuTextAppearance">#style/MyTheme.Menu.FontStyle</item> -->
<!-- <item name="android:actionBarSize">50dp</item> -->
</style>
<style name="MyTheme.ActionBarStyle" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="android:background">#drawable/actionbar_bg_shap</item>
<item name="android:displayOptions">none</item>
<item name="android:backgroundSplit">#drawable/actionbar_bg_shap</item>
</style>
<style name="MyTheme.ActionBar.ActionButton" parent="#android:style/Widget.Holo.Light.ActionButton">
<item name="android:background">#drawable/main_button_inactive_tr</item>
</style>

Fully transparent ActionBarSherlock by using theme

I am using ActionBarSherlock 4.0.2.
I need a fully transparent action bar (without the neon color bottom divider). Hence, I have the following style:
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="windowActionBarOverlay">true</item>
<item name="icon">#drawable/ic_home</item>
<item name="titleTextStyle">#style/ActionBarCompatTitle</item>
<item name="android:windowFullscreen">true</item>
</style>
By using above code, I will still have the following effect.
In order to disable the background, I put the following code in SherlockFragmentActivity#onCreate. Then the problem gone.
getSupportActionBar().setBackgroundDrawable(null);
However, I would like to see the solution being implemented in styles.xml instead of Java code, as I have many other devices with different screen configuration. I modified the styles.xml to the following, without using the previously mentioned fix in the Java code.
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="windowActionBarOverlay">true</item>
<item name="icon">#drawable/ic_home</item>
<item name="titleTextStyle">#style/ActionBarCompatTitle</item>
<item name="android:windowFullscreen">true</item>
<item name="android:background">#drawable/transparent</item>
<item name="background">#drawable/transparent</item>
</style>
However, the neon divider still visible. It seems that my fix using android:background and background does not work. Am I missing something?
<style name="AppTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.Sherlock.ActionBar">
<item name="background">#android:color/transparent</item>
<item name="android:background">#android:color/transparent</item>
</style>

Categories

Resources