customization - Changing Background and text color of AppCompat Light DarkActionBar Theme on android

Question

I have used AppCompat Light DarkActionBar Theme for my App.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        
</style>

Is it possible to change the background color and text color of this ActionBar ? If yes, how ?

Answer 1

The following code will allow you to completely style the action bar.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="actionBarStyle">@style/Widget.AppTheme.ActionBar</item>
    <item name="actionBarTheme">@style/ThemeOverlay.AppTheme.ActionBar</item>
    <item name="actionBarPopupTheme">@style/ThemeOverlay.AppTheme.PopupMenu</item>
</style>

Override the action bar style to change the background color or elevation.

<style name="Widget.AppTheme.ActionBar" parent="Widget.AppCompat.ActionBar.Solid">
    <!-- action bar background - without android prefix -->
    <item name="background">...</item>
    <!-- action bar elevation - without android prefix -->
    <item name="elevation">4dp</item>
</style>

Override the action bar theme to define special behavior for all views inside the action bar such as action items, ripple background color, text color.

<style name="ThemeOverlay.AppTheme.ActionBar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <!-- title text color -->
    <item name="android:textColorPrimary">...</item>
    <!-- subtitle text color -->
    <item name="android:textColorSecondary">?android:textColorPrimary</item>
    <!-- action menu item text color -->
    <item name="actionMenuTextColor">?android:textColorPrimary</item>
    <!-- action menu item icon color -->
    <item name="colorControlNormal">?android:textColorPrimary</item>
</style>

You can also change the popup theme.

<style name="ThemeOverlay.AppTheme.PopupMenu" parent="ThemeOverlay.AppCompat.Dark">
    <!-- popup menu background - NEVER "android:background" !!! in themes -->
    <item name="android:colorBackground">...</item>
    <!-- popup menu item text color -->
    <item name="android:textColorPrimary">...</item>
</style>

On the other hand, the following code will allow you to style the window.

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- window background - NEVER "android:background" in themes !!! -->
    <item name="android:windowBackground">...</item>
    <item name="android:textColorPrimary">...</item>
    <item name="android:textColorSecondary">...</item>
</style>

You can also change text color on the action bar directly. But beware! This will not afffect text color of menu items or icons or ripple color! This is probably not what you want in the long run.

<style name="Widget.AppTheme.ActionBar" parent="Widget.AppCompat.ActionBar.Solid">
    <!-- title text color -->
    <item name="titleTextColor">?android:textColorPrimary</item>
    <!-- subtitle text color -->
    <item name="subtitleTextColor">?android:textColorSecondary</item>
</style>