Develop Reference

How to theme Android Material Theme UI Elements with Appcelerator?

There is this useful information and everything works well:
http://docs.appcelerator.com/platform/latest/#!/guide/Android_Themes
The image is also very helpful:
The problem is that I want to have white or very light gray in the top bar. When I set this as "android:textColorPrimary", however, the text is white in the top bar, but in all alerts for instance as well making it invisible/very difficult to read.
How can I set the text color of the bar to white and theme the alert messages and other text in the default text color (dark gray)?
The themeAndroid.xml in app/platform/android/res/values looks like this
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="materialTheme" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#2e7d32</item>
<item name="colorPrimaryDark">#005005</item>
<item name="colorAccent">#80d8ff</item>
<item name="colorSwitchThumbNormal">#49a7cc</item>
<item name="android:colorButtonNormal">#49a7cc</item>
<item name="android:textColorPrimary">#DADADA</item>
<item name="android:spinnerItemStyle">#style/SpinnerItem</item>
<item name="android:spinnerDropDownItemStyle">#style/SpinnerDropDownItem</item>
</style>

If you want to style the color of the actionbar font you need to extend your theme like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="Theme.MyThemeActionbar" parent="Theme.AppCompat">
<item name="colorPrimary">#FF0000</item>
<item name="colorPrimaryDark">#000000</item>
<item name="actionBarStyle">#style/CustomTheme.ActionBarStyle</item>
<item name="actionBarTheme">#style/Theme.ActionBarTheme</item>
<!-- tab -->
<item name="actionBarTabTextStyle">#style/TabStyle</item>
<item name="android:actionBarTabTextStyle">#style/TabStyle</item>
</style>
<style name="Theme.ActionBarTheme" parent="style/Widget.AppCompat.Light.ActionBar">
<!-- actionbar arrow -->
<item name="colorControlNormal">#ffffff</item>
</style>
<style name="CustomTheme.ActionBarStyle" parent="style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<!-- actionbar -->
<item name="elevation">0dp</item>
<item name="android:actionMenuTextColor">#FFFFFF</item>
<item name="android:titleTextStyle">#style/CustomTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/CustomTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="CustomTheme.ActionBar.TitleTextStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<!-- actionbar font -->
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="TabStyle" parent="style/Widget.AppCompat.Light.ActionBar.TabText">
<!-- tab font -->
<item name="android:textColor">#ffffff</item>
</style>
</resources>
Then you can set the font color and the primary color to a different value and leave other thinks to the default values

ActionBar title disappears when I change the style

I'm trying change my ActionBar style, changing the background and title color. The background is ok, but when I try change the titleTextStyle the title that I defined on manifest disappear.
<style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBarStyle</item>
<item name="actionBarStyle">#style/AppTheme.ActionBarStyle</item>
</style>
<style name="AppTheme.ActionBarStyle" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="android:background">#color/dark</item>
<item name="background">#color/dark</item>
<item name="android:textColor">#color/icons</item>
<item name="android:displayOptions">showHome|showTitle|useLogo</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleStyle</item>
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleStyle</item>
</style>
<style name="AppTheme.ActionBar.TitleStyle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#color/icons</item>
</style>
I have another doubt about the color of default icons. For example, I'm using NavigationDrawer and would like to change the color of your icon

That worked for me:
getSupportActionBar().setDisplayShowTitleEnabled(true);

Change Color of Actionbar in Android

I am trying to change the background color of actionbar in my App but this is showing different on my app. Instead of coloring the actionbar the whole activity is color.
I am not sure why this is happening? I just want the main actionbar and settings actionbar colored.
Please check the screenshot.
Main Activity Map:
Preference Settings:
I also have transparent Actionbar with UP Navigation enabled for all my sub activities other than the main activity and preference settings activity.
I am not sure why it is showing like the above:
Here is style.xml (values-v14):
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:background">#FF5050</item>
</style>
<style name="dialogtheme" parent="#android:style/Theme.Holo.Light.DarkActionBar"></style>
<!-- Transparent ActionBar Style -->
<style name="AppTheme.Light.ActionBar.Transparent" parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#android:color/transparent</item>
</style>
<!-- Activity Theme with transparent ActionBar -->
<style name="AppTheme.TransparentActionBar.Light" parent="#style/AppBaseTheme">
<item name="android:actionBarStyle">#style/AppTheme.Light.ActionBar.Transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:displayOptions">showHome|homeAsUp|showTitle</item>
<item name="android:icon">#android:color/transparent</item>
<item name="android:actionBarTabTextStyle">#style/ActionBarTabTextStyle.Tabtheme</item>
<item name="android:actionBarDivider">#drawable/verticallinefordivder</item>
<item name="android:actionBarTabStyle">#style/ActionBarTabStyle.MapsLocation</item>
</style>
<style name="simpledialog" parent="android:Theme.Holo.Light.Dialog">
<item name="android:windowNoTitle">true</item>
</style>
<style name="ActionBarTabTextStyle.Tabtheme" parent="#style/AppBaseTheme">
<item name="android:textSize">18sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">#android:color/black</item>
</style>
<style name="ActionBarTabStyle.MapsLocations" parent="#android:style/Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_indicator</item>
</style>
<style name="myPreferenceTheme" parent="#style/AppBaseTheme">
<item name="android:textColor">#color/blue</item>
</style>
<style name="Widget.ActionButton" parent="#style/AppBaseTheme">
<item name="android:background">?android:attr/actionBarItemBackground</item>
<item name="android:paddingLeft">12dip</item>
<item name="android:paddingRight">12dip</item>
<item name="android:minWidth">56dip</item>
<item name="android:minHeight">?android:attr/actionBarSize</item>
</style>
</resources>

A little change and you action bar will be red:
<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppTheme.Light.ActionBar</item>
</style>
<style name="dialogtheme" parent="#android:style/Theme.Holo.Light.DarkActionBar"></style>
<!-- Transparent ActionBar Style -->
<style name="AppTheme.Light.ActionBar" parent="#android:style/Widget.Holo.ActionBar">
<item name="android:background">#FF5050</item>
</style>
I have changed item in AppBaseTheme & AppTheme.Light.ActionBar .
Now you are good to go. let me know if it works however working at my end :P

You can try set custom view in action bar.
actionBar.setDisplayShowCustomEnabled(true);
actionBar.setCustomView(you_custom_layout);

I know this is not right answer to this question but if you want to edit your ActionBar, you can use this online Android Action Bar Style Generator.
At least you can create a style and check yours to find differences and learn how to edit your ActionBar.

Sherlock Action Bar Styling (DropDown Spinner Navigation)

I am trying to change the drop down background of the sherlock action bar as well as its text color. Here's what I have tried:
<style name="DropDown" parent="Widget.Sherlock.Spinner.DropDown.ActionBar">
<item name="android:popupBackground">#EDEDED</item>
</style>
<style name="TextAppearance" parent="TextAppearance.Sherlock.Widget.TextView.SpinnerItem">
<item name="android:textColor">#A9A9A9</item>
</style>
<style name="SpinnerItemStyle" parent="Widget.Sherlock.TextView.SpinnerItem">
<item name="android:textAppearance">#style/TextAppearance</item>
</style>
<style name="MyTheme" parent="#style/devcheckStyle">
<item name="android:actionDropDownStyle">#style/DropDown</item>
<item name="actionDropDownStyle">#style/DropDown</item>
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
</style>
The main theme being MyTheme, with the following code I am getting the desirable background color, but I am getting nowhere with the text's color inside the drop down navigation. Can someone please help.

Put that code
<item name="android:textColor">#ffffffff</item>
into your MyTheme code should be like:
<style name="MyTheme" parent="#style/devcheckStyle">
<item name="android:actionDropDownStyle">#style/DropDown</item>
<item name="actionDropDownStyle">#style/DropDown</item>
<item name="spinnerItemStyle">#style/SpinnerItemStyle</item>
<item name="android:spinnerItemStyle">#style/SpinnerItemStyle</item>
</style>

Android action bar tab bar divider

I am having problem setting the drawable for the divider. My style.xml looks like this:
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="HCLTheme" parent="android:Theme.Holo.Light">
<item name="android:actionBarStyle">#style/HCLActionBarStyle</item>
<item name="actionBarStyle">#style/HCLActionBarStyle</item>
<item name="android:actionBarTabBarStyle">#style/HCLActionBarTabBarStyle</item>
<item name="android:actionBarTabStyle">#style/HCLActionBarTabStyle</item>
</style>
<style name="HCLActionBarStyle" parent="android:style/Widget.Holo.ActionBar">
<item name="android:background">#drawable/hcl_actionbar_drawable</item>
<item name="background">#drawable/hcl_actionbar_drawable</item>
<item name="android:titleTextStyle">#style/HCLActionBarTitle</item>
</style>
<style name="HCLActionBarTabBarStyle" parent="#android:style/Widget.Holo.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<item name="android:divider">#drawable/divider</item>
<item name="android:dividerPadding">0dp</item>
</style>
<style name="HCLActionBarTabStyle" parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:background">#drawable/action_bar_tab_style</item>
</style>
<style name="HCLActionBarTitle" parent="#android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<item name="android:textColor">#android:color/white</item>
</style>
</resources>
In the HCLActionBarTabBarStyle I'm setting the #drawable/divider as the tab divider. This drawable is a 9patch image, a vertical black line.
Before i set the divider drawable in the xml I'm getting the normal white divider like this:
After i set the drawable in the styles.xml i get this:
So as you can see the divider just gets wider, and its not the black vertical line from the 9patch image. I'm not even sure what the drawable for the divider has to be? A picture or layer list, or can it be a color? In fact i tried all of these 3 but with no success.

Use the property of "actionBarDivider" on the custom style.
Something like below
<style name="AppTheme" parent="AppBaseTheme">
<!-- You app specific customization -->
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:actionMenuTextColor">#color/menu_state_list</item>
<item name="android:actionBarTabStyle">#style/tabStyle</item>
<item name="android:actionBarTabTextStyle">#style/tabTextColor</item>
<!-- Set it like this -->
<item name="android:actionBarDivider">#drawable/verticle_marker_thin</item>
</style>

create tab divider picture
in styles add an item shown below
<item name="android:actionBarTabBarStyle">#style/customTabBar</item>
code for devider in action bar tab indicator
<style name="customTabBar" parent="#style/Widget.AppCompat.ActionBar.TabBar">
<item name="android:showDividers">middle</item>
<!-- give your divider here -->
<item name="android:divider">#drawable/tabindicator</item>
<item name="android:dividerPadding">0dp</item>
where #drawble/tabindicator is a picture in drawble