Page History

...

As of Titanium 10.0.0, you can change the colors of the action bar via the material "actionBarTheme" style, which overrides the colors set by "actionBarStyle" in the theme. You would do this by creating an XML file in the platform/android/res/values folder as shown below.

<style name="MyTheme" parent="@style/Widget.AppCompat.ActionBar">
    <!-- My custom action bar theme with a white background and black text. -->
    <style name="ThemeOverlay.MyActionBar.Light" parent="@style/ThemeOverlay.MaterialComponents.Light">
        <item name="colorPrimary">#FFFFFF</item>
        <item name="colorSurface">#FFFFFF</item>
        <item name="colorOnSurface">#000000</item>
        <item name="android:textColorPrimary">#000000</item>
        <item name="android:textColorSecondary">#000000</item>
    </style>

    <!-- My custom app theme using above white action bar theme. -->
    <!-- Note: This is only supported on Titanium 10.0.0 or higher. -->
    <style name="Theme.MyTheme" parent="@style/Theme.Titanium.Light">
        <item name="actionBarTheme">@style/ThemeOverlay.MyActionBar.Light</item>
    </style>
</style>

Styling the action bar

To change the style of the action bar, create a custom theme to override the Action Bar style properties.  To create a custom theme:

...

Create an XML file in platform/android/res/values. 

...

In the XML file, create an action bar style resource and set the parent style of the action bar style to Widget.AppCompat.ActionBar or another supported Action Bar parent. 

<style name="MyTheme" parent="@style/Widget.AppCompat.ActionBar" />

...

Define action bar properties in the style resource to override the default values from the parent style.

<style name="MyTheme" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@drawable/actionbar_background</item>
</style>

...

In the theme, set the android:actionBarStyle to name of action bar style you created. 

<style name="Theme.CustomActionBar" parent="@style/Theme.AppCompat">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

Modify your tiapp.xml file to use the custom theme: 

...

You would then set the above theme to your application in the tiapp.xml as follows.

 <android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application android:theme="@style/Theme.

...

MyTheme"/>
    </manifest>
</android>

The example below modifies the Action Bar's background color and title text color.

Styling the action bar

For Titanium 9.x.x and older, your only option to change the colors of the action bar is via "actionBarStyle" in a custom theme. You can customize the "actionBarStyle" in Titanium 10.0.0, but the "actionBarTheme" (documented above) will override the style's colors. Note that "actionBarStyle" can be used to customize other aspects of the widget such as it text appearance, size, etc.

You would do this by creating an XML file in the platform/android/res/values folder as shown below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Define a text color for the Action Bar title. -->
    <style name="ThemeTextAppearance.CustomActionBarMyActionBarTitle" parent="@style/ThemeTextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="actionBarStyleandroid:textColor">@style>#000080</MyActionBar</item>
    </style>

    <!-- DefineMy thecustom ActionBaraction stylesbar style. -->
    <style name="Widget.MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleText<TextAppearance.MyActionBarTitle</item>
         <item name="titleTextStyle">@style/MyActionBarTitleText<TextAppearance.MyActionBarTitle</item>
        <item name="android:background">#ffa500</item>
    </style>

    <!-- DefineMy acustom textapp colortheme forusing theabove Actionwhite Baraction titlebar theme. -->
    <style name="MyActionBarTitleText"
           <!-- Note: This applies to Titanium 9.x.x and older versions. -->
    <style name="Theme.MyTheme" parent="@style/TextAppearanceTheme.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColoractionBarStyle">#000080<>@style/Widget.MyActionBar</item>
    </style>
</resources> 

You would then set the above theme to your application in the tiapp.xml as follows.

 <android xmlns:android="http://schemas.android.com/apk/res/android">
    <manifest>
        <application android:theme="@style/Theme.MyTheme"/>
    </manifest>
</android>

Further reading

• Android Themes
• Android Developer: Styling the Action Bar

...