Develop Reference

android overflow menu item text not displayed

See end of post for a workaround
I added an overflow menu to my main Android Action. However when pressing the [...] in the top right corner, the PopupMenu does not display the menu items correctly. They are left blank, see the image, it should contait 2 menu items with the strings "Manage" and "About":
This problem only arises for the MainActivity, i.e. the Activity starting at application launch. A secondary Activity, that is spawned later, correctly displays menu items.
The Items do get added to the menue somehow, since the box changes its size with more/less menu items. Also I do get a response when clicking where a menu item is supposed to be, e.g. show a Toast with some text.
Adding the menu items with showAsAction="always" will display the item correctly with it's icon in the ActionBar.
The MainActivity was initially created as a PageView Activity, the Toolbar was then later added to it's layout.
Edit
Making the menu items checkable with android:checkable="true" will show a checkbox next to the empty spot where the text is supposed to be.
layout/main_activity.xml:
<androidx.coordinatorlayout.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=".ui.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.PickupList.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabIndicatorColor="#color/purple_200"
app:tabTextColor="#color/teal_200" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/main_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
layout/main_menu.xml:
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/mainmenu_manage"
android:icon="#android:drawable/ic_menu_manage"
android:title="#string/activitymain_menu_manage" />
<item
android:id="#+id/mainmenu_about"
android:icon="#android:drawable/ic_menu_info_details"
android:title="#string/activitymain_menu_abount" />
</menu>
themes/themes.xml (almost unchanged):
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.PickupList" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
<style name="Theme.PickupList.ActionBar">
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
</style>
<style name="Theme.PickupList.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="Theme.PickupList.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
MainAction.java:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//...
Toolbar toolbar = findViewById(R.id.main_toolbar);
setSupportActionBar(toolbar);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main_menu, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
// works fine
if (id == R.id.mainmenu_about) {
Toast.makeText(this, "about", Toast.LENGTH_SHORT).show();
return true;
} else if (id == R.id.mainmenu_manage) {
Toast.makeText(this, "manage", Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
}
Sorry for the code-dump. I am at my wits end with what else I can do here.
Edit / Workaround:
So in the end I came up with a workaround.
I manually added a menu item with the icon for the overflow menu to the Toolbar and set its showAsAction="always" property.
In the click handler I then create custom PopupMenu and anchor it to the Toolbar with Gravity.END.
The PopupMenu will then display it's items correctly.
I do not mark this solution as an answer, although it effectively solves my problem. It solves the problem with the bad aftertaste, that the android api has defeated me and I still have hope that I (or someone else) sees an error and comes up with a solution that uses the internal overflow menu mechanics.

I just got the same problem you described, no ripple effect whatsoever, but got a response while clicking in the white box from the menu.
Fixed it by adding the following line in my styles.xml
<item name="android:textColor">#000000</item>

How can I override my menu bar to come on my application bar?

I have recycler view + viewpager + toolbar in my activity. When I long click on the row in recycler view it should show me a menu bar with a delete option. But this is what I get. Any ideas as to why it is coming above my application name?
This is the xml of my main activity:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.kaad.sampleproject.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/main_activity_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_activity_tool_bar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#ff00ff"
app:tabMode="fixed"
app:tabSelectedTextColor="#ffffff"
app:tabTextColor="#d3d3d3" />
<android.support.v4.view.ViewPager
android:id="#+id/main_activity_viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/main_activity_tablayout" />
</RelativeLayout>
I kept an add and about menu which never gets displayed for some reason:
Here is the xml of both my menus:
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/menu_bar_main"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:context=".MainActivity">
<item
android:id="#+id/menu_item_new"
android:icon="#drawable/ic_add_white_36dp"
android:title="#string/menu_new"
app:showAsAction="ifRoom|withText" />
<item
android:id="#+id/menu_item_about"
android:title="#string/menu_about"
app:showAsAction="never" />
</menu>
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/menu_bar_delete"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:context=".MainActivity">
<item android:id="#+id/menu_item_delete"
android:icon="#android:drawable/ic_menu_delete"
android:title="#string/delete" />
</menu>
The xml of my styles
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!--<item name="colorPrimary">#FF595951</item>-->
<!--<item name="colorPrimaryDark">#FF5C5C5C</item>-->
<!--<item name="colorAccent">#FFCCCCCC</item>-->
<!--<item name="android:textColorPrimary">#FF0FF0</item>-->
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
</style>
This is Main Activity:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_my_main);
database = new Database(this);
categories = database.getCategories();
myToolbar = (Toolbar) findViewById(R.id.main_activity_tool_bar);
setSupportActionBar(myToolbar);
// Get the ViewPager and set it's PagerAdapter so that it can display items
myViewPager = (ViewPager) findViewById(R.id.main_activity_viewpager);
myPagerAdapter = new MyPagerAdapter(getSupportFragmentManager(), MyMainActivity.this, categories);
myViewPager.setAdapter(myPagerAdapter);
// Give the TabLayout the ViewPager
myTabLayout = (TabLayout) findViewById(R.id.main_activity_tablayout);
myTabLayout.setupWithViewPager(myViewPager);
// Iterate over all tabs and set the custom view
for (int i = 0; i < myTabLayout.getTabCount(); i++) {
TabLayout.Tab myTab = myTabLayout.getTabAt(i);
myTab.setCustomView(myPagerAdapter.getTabView(i));
}
bus.getInstance().register(this);
}
This is how I am calling my menu bar in my main prescription fragment
public class CustomMultiSelectorCallback extends ModalMultiSelectorCallback {
private int count;
public CustomMultiSelectorCallback(MultiSelector multiSelector) {
super(multiSelector);
}
#Override
public boolean onCreateActionMode(ActionMode actionMode, Menu menu) {
super.onCreateActionMode(actionMode, menu);
count = 0;
actionMode.getMenuInflater().inflate(R.menu.list_item_delete, menu);
return true;
}

Issue for About button:
<item
android:id="#+id/menu_item_about"
android:title="#string/menu_about"
app:showAsAction="never" />
update the never part to "ifRoom"
Regarding the menu appearing, can you be more explicit, as to me it seems in Relative Layout you wanted the Toolbar to be top and the views to come after it and that is what it shows.

So I have solved one of the problems. This is what I edited in my code to display add and about buttons in the toolbar.
First, in your onCreate in the fragments, add this line:
setHasOptionsMenu(true);
Second, in your styles, change your theme to something which has NoActionBar. In my case I did this:
<style name="AppThemeOfStyles"parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#FF595951</item>
<item name="colorPrimaryDark">#FF5C5C5C</item>
<item name="colorAccent">#FFCCCCCC</item>
<item name="android:textColorPrimary">#FF0FF0</item>
<item name="windowActionBar">true</item>
<item name="windowNoTitle">true</item>
</style>
I also changed the name of my theme from AppTheme to AppTheme of styles since AppTheme is already a theme defined. So better to change your theme name to something else.
This leads us to the result below:
But my delete is still coming on the top of the toolbar on longpress.
Any suggestions, advice will be appreciated :)
UPDATED:
Use this in your theme for the overlay to work:
<item name="windowActionModeOverlay">true</item>
Here is the end result:

Status Bar Color not changing with Relative Layout as root element

I am just starting to learn android, I am learning to add AppBar. But if I use Relative Layout as the root then Status Bar don't use the color "colorPrimaryDark" defined in the theme. But changing the layout to CoordinatorLayout make it works.
Can someone explain the difference? is it a requirement to use the CoordinatorLayout Layout?
Activity Extends AppCompatActivity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:fitsSystemWindows="true"
tools:context="com.example.ankit.designdemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
</RelativeLayout>
<?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"
android:fitsSystemWindows="true"
tools:context="com.example.ankit.designdemo.MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CoordinatorLayout>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<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 name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
public class MainActivity extends AppCompatActivity {
private DrawerLayout mDrawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.custom_activity);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
actionBar.setDisplayHomeAsUpEnabled(true);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
}

In v21/styles.xml you probably have this line of code:
<item name="android:statusBarColor">#android:color/transparent</item>
And as you are running on API 23, the declared styles are overrided from the ones in v21/styles.xml.
As a solution:
Just remove that line and it will work fine

The styling of the statusbar is done by the
android:fitsSystemWindows
tag. This is currently not supported for RelativeLayout. Either you try another layout like FrameLayout which could work but for know i would suggest to stick to the CoordinatorLayout.
Maybe you get some more details here:
https://medium.com/google-developers/why-would-i-want-to-fitssystemwindows-4e26d9ce1eec

just add this
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);

Android: Status Bar is White

For some reason, the status bar is now white. Or rather, an off white, with another shade of white for the icons faintly visible against the bright background. Which is wrong, because my appbarlayout uses a blue shade as its color. Up until now, this has been working fine, I don't know what I did to cause this. I've tried manually setting the statusBarColor to colorPrimaryDark (#0277bd), but it's not working.
I just don't know why this is happening in the first place. I'm pasting my activity's layout.xml, maybe someone can clue me in to what I'm doing wrong here.
A few notes:
The themes used haven't been changed from their defaults, which are to use the primary color settings. I changed those to the right shade of blue that I wanted, but when I did that change everything was working.
My layout.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"
android:statusBarColor="#color/colorPrimaryDark"
tools:context=".activities.ContactsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/contactsActivityAppbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:statusBarColor="#color/colorPrimaryDark"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/contactsActivityToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<!-- app:layout_scrollFlags="scroll|enterAlways" -->
<android.support.design.widget.TabLayout
android:id="#+id/contactsActivityTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
android:scrollbarStyle="insideOverlay"
android:paddingBottom="1dp"
android:background="#color/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/contactsTabsViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#0288d1</color>
<color name="colorPrimaryDark">#0277bd</color>
<color name="colorAccent">#FF4081</color>
</resources>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<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 name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
Edit: Ok, found an interesting solution, really want to understand it, not just rely on it. Also, it might not be the best answer long term.
Anyway, to the base application theme (AppTheme) in styles.xml, I added the following line:
<item name="android:windowBackground">#color/colorPrimaryDark</item>
It worked, it made the background of everything that I didn't specifically assign a color that color. But it also made the status bar that color, so I went through and added my own backgrounds to other things to fix them.
I feel like this isn't the ideal solution, though, and would just like more feedback in general. Also, even without this line before, it was coloring the status bar just fine. I have no idea what I did to break it in the first place.
Thanks.
Edit: Here is the activity code. Thanks.
import android.content.Intent;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import io.craigmiller160.contacts5.R;
import io.craigmiller160.contacts5.fragments.ContactsGroupsFragmentPage;
import io.craigmiller160.contacts5.fragments.ContactsListFragmentPage;
import io.craigmiller160.contacts5.fragments.ContactsTabsPagerAdapter;
public class ContactsActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_contacts);
Toolbar toolbar = (Toolbar) findViewById(R.id.contactsActivityToolbar);
setSupportActionBar(toolbar);
ViewPager viewPager = (ViewPager) findViewById(R.id.contactsTabsViewPager);
ContactsTabsPagerAdapter adapter = new ContactsTabsPagerAdapter(getSupportFragmentManager());
adapter.addFragmentPage(new ContactsListFragmentPage(), "Contacts");
adapter.addFragmentPage(new ContactsGroupsFragmentPage(), "Groups");
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.contactsActivityTabs);
tabLayout.setupWithViewPager(viewPager);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.displaySettings) {
Intent intent = new Intent(this, DisplaySettingsActivity.class);
startActivity(intent);
return true;
}
return super.onOptionsItemSelected(item);
}
}

<item name="android:statusBarColor">#android:color/transparent</item>
You'll see that line of code in values/styles/styles.xml(v21) . Remove it and that solves the issue

You can achieve by this.
Go to your style.xml(v21) and just change the color
<item name="android:statusBarColor">#color/colorPrimary</item>
I hope this will solve your issue.

Try this as your 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"
android:fitsSystemWindows="true"
tools:context=".activities.ContactsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/contactsActivityAppbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/contactsActivityToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/contactsActivityTabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#android:color/white"
android:scrollbarStyle="insideOverlay"
android:paddingBottom="1dp"
android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/contactsTabsViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
I think you may have set the theme multiple times and its confusing itself.
If everything is done right, the Status bar will get its colour from colorPrimaryDark.

In styles.xml,
Replace this:
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
with:
<style name="NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
And make respective changes in Manifest.xml

I can't say that I've looked into this in any great detail, but none of the other answers have suggested "windowDrawsSystemBarBackgrounds" - which seems to work without needing to set the status bar colors explicitly. Thus, values-v21/styles.xml:
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>

I had this exact problem.
I fixed it by changing the app theme to extend the NoActionBar AppCompat style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:windowBackground">#color/alabaster</item>
</style>
My activity layout is:
<?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:ignore="MergeRootFrame">
<android.widget.RelativeLayout
android:id="#+id/chat_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
Where the RelativeLayout holds a Fragment which just has a RecyclerView inside a RelativeLayout. So remove the android:statusBarColor="#color/colorPrimaryDark" and fitSystemWindow xml lines and change your theme and I think that should work.

To achieve this in any activity
Add the style:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
Use CoordinatorLayout as root layout in XML for Activity
In oncreate() method, before setcontentview use
window.decorView.systemUiVisibility =
View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN

CoordinatorLayout not drawing behind status bar even with windowTranslucentStatus and fitsSystemWindows

I am trying to draw views behind the status bar like this:
I tried to produce this effect with the recommended techniques, but I get this:
It's clear from the screenshot that none of my app content is being drawn behind the status bar.
What's interesting is that somehow, the Nav Drawer manages to draw behind the status bar:
Stuff I did:
Use support library widgets - CoordinatorLayout, AppBarLayout, Toolbar, DrawerLayout
windowTranslucentStatus set to true in my app theme
fitsSystemWindows set to true on my CoordinatorLayout
This is my app theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#android:color/transparent</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
This is my activity layout:
<android.support.v4.widget.DrawerLayout
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<FrameLayout android:id="#+id/page_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
The FrameLayout in my activity layout is replaced with this fragment layout:
<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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:background="#android:color/holo_blue_bright"
tools:context=".MainActivity">
<TextView android:text="#string/lorem_ipsum"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:elevation="0dp"
android:theme="#style/AppTheme.TransparentAppBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:title="#string/hello_blank_fragment"
app:popupTheme="#style/AppTheme.OverflowMenu" />
</android.support.design.widget.AppBarLayout>
<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_dialog_email" />
</android.support.design.widget.CoordinatorLayout>

edit for future readers: there's a lot of good information on the subject and the issue on the comments too, make sure to read through them.
original answer:
Your theme is wrong, that's why.
Unfortunately, there're differences on how to activate in in Kitkat or Lollipop. On my code I did it in Java, but you can also achieve it in XML if you want to play with the V21 folders on your resources tree. The name of the parameters will be very similar to the Java counterparts.
Delete the android:windowTranslucentStatus from your XML and in Java use like that:
public static void setTranslucentStatusBar(Window window) {
if (window == null) return;
int sdkInt = Build.VERSION.SDK_INT;
if (sdkInt >= Build.VERSION_CODES.LOLLIPOP) {
setTranslucentStatusBarLollipop(window);
} else if (sdkInt >= Build.VERSION_CODES.KITKAT) {
setTranslucentStatusBarKiKat(window);
}
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
private static void setTranslucentStatusBarLollipop(Window window) {
window.setStatusBarColor(
window.getContext()
.getResources()
.getColor(R.color. / add here your translucent color code /));
}
#TargetApi(Build.VERSION_CODES.KITKAT)
private static void setTranslucentStatusBarKiKat(Window window) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
then you can call from your activity setTranslucentStatusBar(getWindow());
edit:
making the status bar translucent and drawing behind it (for some reason I cannot understand) are two separate tasks in Android.
I've looked more on my code and I'm for sure have A LOT more android:fitsSystemWindows="true" on my layout than just the CoordinatorLayout.
below are all the Views on my layout with android:fitsSystemWindows="true" on them:
CoordinatorLayout
AppBarLayout
CollapsingToolbarLayout
ImageView (with the background image)
FrameLayout (with the content of the header)
so my suggestion is to just test/try filling up android:fitsSystemWindows="true" on your XML.

This was really confusing for me but I eventually figured it out for my combination of views which looks like this:
<android.support.v4.widget.SwipeRefreshLayout - **no fitsSystemWindow set**
<android.support.design.widget.CoordinatorLayout- android:fitsSystemWindows="true"
<android.support.design.widget.AppBarLayout - android:fitsSystemWindows="true"
<android.support.design.widget.CollapsingToolbarLayout - android:fitsSystemWindows="true"
<RelativeLayout - android:fitsSystemWindows="true"
<ImageView - android:fitsSystemWindows="true"
I also used the methods posted by Budius in my app to get the transparent status bar working:
Delete the android:windowTranslucentStatus from your XML and in Java use like that:
public static void setTranslucentStatusBar(Window window) {
if (window == null) return;
int sdkInt = Build.VERSION.SDK_INT;
if (sdkInt >= Build.VERSION_CODES.LOLLIPOP) {
setTranslucentStatusBarLollipop(window);
} else if (sdkInt >= Build.VERSION_CODES.KITKAT) {
setTranslucentStatusBarKiKat(window);
}
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
private static void setTranslucentStatusBarLollipop(Window window) {
window.setStatusBarColor(
window.getContext()
.getResources()
.getColor(R.color. / add here your translucent color code /));
}
#TargetApi(Build.VERSION_CODES.KITKAT)
private static void setTranslucentStatusBarKiKat(Window window) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}

If I want to draw behind StatusBar I use CoordinatorLayout as most parent view of Activity (android:fitsSystemWindows="false")
styles.xml(v21)
<style name="MyTheme.NoActionBar.TransparentStatusBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
Then If you want to change statubarcolor, you have to remove TRANSLUENT_FLAG like this
Window window = activity().getWindow();
if(showTransluent){
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(Color.TRANSPARENT);
}else {
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(ContextCompat.getColor(activity(), R.color.colorPrimaryDark));
}
If I want StatusBar to be transluent and simultanieousy kepping view away from hidding behind StatusBar I use as most parent view FrameLayout with argument
My styles.xml(v21) look like
<resources>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
<style name="AppTheme.NoStatusBar" parent="AppTheme.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
</resources>
And styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
Maybe the point key here is to be sure that you use AppCompactActivity as well as you use Theme.AppCompact as root for your styles.

Add this
android:fitsSystemWindows="true"
in the inner views of the AppBarLayout, it solved the issue for me