Develop Reference

Activity's status bar color is different for no apparent reason

I've created a new activity and for some reason, when it is used, it uses a different color in the status bar. What's strange is that in the "design" preview it renders the correct color.
Below are two screen shots, the darker color is the correct color.
Incorrect
Correct
The themes are the same as the other .xml layouts, so I'm having trouble really figuring out where this error is coming from. Below is the code for the layout:
activity_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.brewguide.android.coffeebrewguide.MenuActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:id="#+id/myfragment"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm not sure what other code would be useful to include for diagnosing this.
Edit:
styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="DescriptionTextView">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:background">#color/mainBackground</item>
</style>
<!--style for the start button in the clock view layout-->
<style name="AppTheme.Button.Start" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/complimentaryLeft</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the stop button in the clock view layout-->
<style name="AppTheme.Button.Stop" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorPrimary</item>
<item name="android:textColor">#color/cardview_dark_background</item>
</style>
<!--style for the reset button in the clock view layout-->
<style name="AppTheme.Button.Reset" parent="Widget.AppCompat.Button.Colored">
<item name="colorButtonNormal">#color/colorAccent</item>
<item name="android:textColor">#color/cardview_light_background</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="spinBars">true</item>
<item name="color">#android:color/white</item>
</style>

I had the same issue. For me it was an issue with a second styles.xml file (still not sure why I had two). The specific line that was causing the issue was:
<item name="android:statusBarColor">#android:color/transparent</item>
I don't see this in your posted styles.xml, but perhaps it will help someone else.

Check your colors.xml for color named primary_dark and change it to be the same to primary, because Android use that(primary_dark) color to colorize status bar.

Managed to programatically set the color using the following line:
getActivity().getWindow().setStatusBarColor(ContextCompat.getColor(context, R.color.colorPrimaryDark));
I would prefer to have this done in the .xml however.

Android Toolbar menu text color

I'm trying to change my Toolbar's menu item text color here, but it doesn't work. Here's my style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarStyle">#style/AppTheme.ToolbarStyle</item>
<item name="buttonStyle">#style/AppTheme.ButtonStyle</item>
<item name="colorControlHighlight">#color/colorPrimary</item>
</style>
<style name="AppTheme.ToolbarStyle" parent="Base.Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#color/colorPrimary</item>
<item name="titleTextColor">#android:color/white</item>
<item name="titleTextAppearance">#style/TextAppearance.AppCompat.Widget.ActionBar.Title
</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
layout xml:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="#string/app_name"
app:titleMarginStart="#dimen/margin_l"
/>
I have tried to set the Toolbar theme directly in xml, but the menu item is still back. Is there a solution to this?

Add these lines in your AppTheme style
<item name="actionMenuTextColor">#color/white</item>
<item name="android:actionMenuTextColor">#color/white</item>

Having a material toolbar you can play with styling modifying text title and menu texts as follows:
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#android:color/white"
android:elevation="6dp"
android:theme="#style/App.ToolbarStyle"
app:titleTextAppearance="#style/App.ToolbarTitleTex"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="#menu/create_item_menu"
app:titleTextColor="#android:color/black" />
Where this style lets you change the color of the icon of the left:
<style name="App.ToolbarStyle" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">#color/colorPrimary</item>
</style>
Also you can change the title text appearance with another style:
<style name="App.ToolbarTitleTex" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">18sp</item>
<item name="fontFamily">#font/roboto_bold</item>
</style>
And finally to change the menu item style you need to add this item property to the main style/theme of the app (the one you set in the AndroidManifest file:
<item name="actionMenuTextAppearance">#style/App.ToolbarMenuItem</item>
With:
<style name="App.ToolbarMenuItem" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="android:textSize">14sp</item>
<item name="fontFamily">#font/roboto_bold</item>
<item name="textAllCaps">true</item>
<item name="android:textStyle">bold</item>
</style>
The final result would be something like this:

You need to declare a Theme like this
<style name="Theme.PopupOverlay.Menu" parent="ThemeOverlay.AppCompat.Light" >
<item name="android:textColor">#android:color/white</item>
</style>
And then, in your Toolbar in layout view you must specify to use that theme
<androidx.appcompat.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/Theme.PopupOverlay.Menu" />

Modern way under Material3 theming.
<style name="AppTheme" parent="Theme.Material3.Dark">
<item name="toolbarStyle">#style/ToolBarStyle</item>
...
</style>
<style name="ToolBarStyle" parent="#style/Widget.Material3.Toolbar">
<item name="titleTextColor">#android:color/holo_green_light</item>
<item name="navigationIconTint">#android:color/holo_blue_light</item>
<item name="materialThemeOverlay">#style/ToolbarThemeOverlay</item>
</style>
<style name="ToolbarThemeOverlay" parent="">
<item name="actionMenuTextColor">#android:color/holo_red_light</item>
</style>
materialThemeOverlay - is the key to apply the colors to action menu items

In your theme file you have to put this :
<style name="AppTheme.ActionBar" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="actionMenuTextColor">#color/text_color</item>
...
</style>
and apply above theme to Toolbar view as like this android:theme="#style/AppTheme.ActionBar"
detailed example:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/AppTheme.ActionBar"/>

Text background issue on Toolbar

When adding some alpha to my Toolbar background color, I notice there is a background applied to the title's TextView:
Here is my layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#0099cc">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>
<ImageView
android:id="#+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/image"/>
</FrameLayout>
And my styles.xml:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowActionBar">false</item>
<item name="windowActionBar">false</item>
</style>
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:windowBackground">#null</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="android:actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<!--For compatibility-->
<item name="actionBarStyle">#style/FullscreenActionBarStyle</item>
<item name="windowActionBarOverlay">true</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="background">#color/black_overlay</item>
<item name="android:background">#color/black_overlay</item>
</style>
<style name="ActionBarTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">50sp</item>
</style>
</resources>
"black_overlay" color value is #66000000
I am using AppCompat and Support libraries v24.2.1.
Do you have any idea on how to get rid of this text background?
Cheers.

As you can see in the following issue, the problem comes from the attribute app:theme. It is applied to every view that a viewgroup inflate.
Replace app:theme by style:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/FullscreenActionBarStyle"
app:titleTextAppearance="#style/ActionBarTitle"/>

Alright, removing the background properties on the FullscreenActionBarStyle style and putting it in the Toolbar layout definition make it work.
As #apelsoczi pointed out, settings these properties in the toolbar style also apply them on children components.

Encapsulate a TextView inside the Toolbar and set the value of that.
<android.support.v7.widget.Toolbar
...>
<TextView ... />
</android.support.v7.widget.Toolbar>

How can I use Light SearchView on Dark App Bar on android?

This is my main activity xml:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_menu_search" />
This is my styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
The problem is that I want to use white text on the AppBar, but at the same time I want the search suggestions to have dark text on white background (like holo). Currently the suggestions are shown in dark theme. If I use ThemeOverlay.AppCompat.ActionBar, then the suggestions turn white but the text on appbar is turned Black, and I want it to remain white.
Please help me! I am also attaching screenshots for demonstration purposes:
This has white title text.
see the dropdown suggestions? they should be white-themed.

Here is how I succeeded to achieve that:
You need to override the styles autoCompleteTextViewStyle and textAppearanceSearchResultTitle in your theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="autoCompleteTextViewStyle">#style/myAutoCompleteTextViewStyle</item>
<item name="textAppearanceSearchResultTitle">#style/mySearchResult</item>
...
</style>
<style name="myAutoCompleteTextViewStyle" parent="Widget.AppCompat.Light.AutoCompleteTextView">
<item name="android:popupBackground">#color/White</item>
</style>
<style name="mySearchResult" parent="TextAppearance.AppCompat.SearchResult.Title">
<item name="android:textColor">#color/Black</item>
</style>

appcompat v7 23, actionbars, transparency

I think I went all over SO for the answer. I think I am being trolled by Android L... Seems no matter what I do that actionbar's background still defaults to colorPrimary
the layout.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="#+id/dl_main"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.farmdog.farmdog.MainActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="top"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!--layout_behavior="TransparentScrollingViewBehavior"/>-->
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--android:theme="#style/AppTheme.AppBarOverlay">-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_scrollFlags="scroll|enterAlways"/>
<!--android:background="?attr/colorPrimaryDark"-->
<!--app:theme="#style/AppTheme.AppBarOverlay">-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:popupTheme="#style/AppTheme.PopupOverlay"-->
</android.support.design.widget.AppBarLayout>
........
and styles.xml (v21)
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<!-- colorPrimaryDark wont work on API level < 21 -->
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#color/mainBkgndHard</item>
<item name="android:textColor">#color/appTextColor</item>
<item name="android:buttonStyle">#style/ButtonTheme</item>
<!--<item name="android:fitsSystemWindows">true</item> hmmm, primaryColor expands on the statusbar now...-->
<!-- attempt taking actionbar shadow away -->
<item name="elevation">0dp</item>
<item name="android:windowContentOverlay">#null</item>
<!-- the following line breaks the build-->
<!--<item name="windowContentOverlay">#null</item>-->
<!-- attempt drawing underneath the actionbar - all fail as of 'com.android.support:appcompat-v7:23.1.1.'-->
<item name="windowActionBarOverlay">true</item>
<item name="actionBarStyle">#style/MyActionBar</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<!--<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">-->
<!--<item name="android:background">#color/colorActionBar</item>-->
<!--<item name="background">#color/colorActionBar</item>-->
<!--<item name="windowActionBarOverlay">true</item>-->
<!--<item name="android:windowActionBarOverlay">true</item>-->
<!--</style>-->
<style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="android:background">#color/colorActionBar</item>
<!--For compatibility-->
<item name="background">#color/colorActionBar</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>

I think you are doing it in the wrong way.I mean, the following Toolbar Hasn't any PrimaryColor or even Background:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
app:layout_scrollFlags="scroll|enterAlways"/>
<!--android:background="?attr/colorPrimaryDark"-->
<!--app:theme="#style/AppTheme.AppBarOverlay">-->
<!--android:layout_height="?attr/actionBarSize"-->
<!--app:popupTheme="#style/AppTheme.PopupOverlay"-->
So, this will works on (v21) versions only without any background or PrimaryColor.and as you can see, Toolbar is going to be like your Activity Theme which that has:
<item name="colorPrimary">#color/colorPrimary</item>
With:
Theme.AppCompat.Light.DarkActionBar
And, if you don't set any background color or PrimaryColor, because of:
Theme.AppCompat.Light.DarkActionBar
and your Toolbar, it has to be like that:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
Otherwise, it should crashed(i guess, not sure) because you have a Theme with DarkActionBar and one Toolbar with no background.
I think this is the problem!
Edit:
For completing the answer, since this code was simple anyway, i'll add it here:
Add this also in your AppBarLayout:
android:theme

Inspired from Mohsen answer, I did the following:
Defined a theme named AppTheme with parent Theme.AppCompat.Light.NoActionBar
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
In AndroidManifest.xml, I assigned AppTheme as the android:theme
android:theme="#style/AppTheme"
Created another theme for AppBarLayout named CollapsingToolbarTheme with parent Theme.AppCompat.Light.NoActionBar
<item name="colorPrimary">#color/transparent</item>
<item name="colorPrimaryDark">#color/dark</item>
<item name="colorAccent">#color/colorAccent</item>
Finally, I assigned the new CollapsingToolbarTheme as the theme of AppBarLayout
android:theme="#style/CollapsingToolbarTheme"