Develop Reference

Making Navigation Drawer to be drawn over status bar, but only when it is in open state

My app has minSdkVersion 21 and targetSdkVersion 31. I'd like the navigation drawer to be drawn over the status bar, but only when it is in the open state.
This is how the app looks like right now when the navigation drawer is closed, this is how I'd like it to be:
But the problem is when I open the drawer:
The status bar covers part of it and I'd like the drawer to be drawn over the status bar.
Currently, I have in main activity layout:
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- The main content view -->
...
In themes.xml:
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
How can I achieve the desired behavior? I've tried different approaches, but the one here is the closest to what I'd like to get. Except for the described minor detail.

Upon researching the topic even more it turned out that the thing I'd like to achieve in the post doesn't make sense, because many phones have a camera area in the middle of the status bar and rendering the navigation drawer on top of the status bar will make parts of it be overlayed with the camera hole.

app:insetForeground="#ffffff"
Use this in navigation view

Android: Transparent status bar with dynamic actionBar colors and DrawerLayout

I have an activity with a DrawerLayout. Our client requires us to dynamically change the action bar color and the corresponding status bar color of this activity depending upon the item selected from the DrawerLayout. This is easily done. However, my problem is that I am not being able to keep the status bar transparent when I dynamically change the status bar color. When I open the drawer, the colored status bar covers the top of the DrawerLayout like this:
However, I would like my DrawerLayout to look like this:
This I can do with the following line:
<item name="android:windowTranslucentStatus">true</item>
However, my problem is not that I can't set the transparency of the status bar. My problem is that the dynamic changing of the status bar and action bar color doesn't work with windowTranslucentStatus. My status bar color remains the colorPrimaryDark (the mustard-yellowish color visible on the status bar in the pictures above) even after I call getWindow().setStatusBarColor().
Now, I followed this tutorial and this and this stackoverflow questions among many others, but was unable to resolve the issue. All of these articles say that the ActionBar will move to the top, underneath the status bar (so that the status bar overlaps the action bar) once I set the windowTranslucentStatus to true. Afterwards, I should be able to add some padding to the action bar and simply changing the action bar color would also result in a darker status bar of the same color since the status bar is actually translucent and overlapping my action bar. However, for some reason, this does not happen in my case. The action bar stays where it is whether I set fitsSystemWindows to true or false or remove the attribute altogether. The action bar is always below the status bar which is, of course, always yellow if I set transparency.
I have also tried setting an alpha to the status bar color when changing it programmatically. This does make the status bar somewhat transparent, but it looks odd since it is not really dark anymore. Removing the CoordinatorLayout is of no help, either. I have spent several hours trying to fix this and am quite frustrated now. Any help is greatly appreciated.
My activity_main:
<?xml version="1.0" encoding="utf-8"?>
<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">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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">
<include layout="#layout/nav_header_main" />
<android.support.v7.widget.RecyclerView
android:id="#+id/nav_menu_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/nav_header_height"
android:clipToPadding="false"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/size_14dp"
app:layoutManager="LinearLayoutManager" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
And here is the XML for my app_bar_main:
<?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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<FrameLayout
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
<com.quintype.sakshipost.Widgets.CustomMaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

Your problem is caused because getWindow().setStatusBarColor() does not work well with the DrawerLayout. In order to keep your status bar translucent as well as being able to change its color, you have to follow the process below:
Add/modify the following theme in your v21/styles.xml file as below:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowTranslucentStatus">true</item>
</style>
This is the theme that the standard DrawerLayout uses (assuming, of course, that you are using this theme in the activity that has the DrawerLayout). This will make your status bar translucent, as you already know.
Next, remove android:fitsSystemWindows="true" from the CoordinatorLayout in your app_bar_main.
Next, wherever you are changing the color of the toolbar/status bar, use drawerLayout.setStatusBarBackground(colorDrawable) using the same color you use for the toolbar (assuming, of course, that the reference to your DrawerLayout is called drawerLayout). Note that the drawerLayout.setStatusBarBackground() method takes a Drawable object, unlike the window.setStatusBarColor() method, which takes an int color, so you may have to convert your color to a drawable using something like this:
new ColorDrawable(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimary))
This will make sure that your status bar is translucent as well as give it the ability to change colors. Hope you are able to get this to work.

As doc says here, FLAG_TRANSLUCENT_STATUS must not be set.
For this to take effect, the window must be drawing the system bar backgrounds with FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS and FLAG_TRANSLUCENT_STATUS must not be set.

I do this in my app like this.
<style name="AppTheme" parent="Theme.AppCompat.Dark">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
the colorPrimary will set the status bar color, but only if you restart the activity.
so set that to a transparent black color, then in your code restart the activity. You can make more than one style in styles, with different colorPrimary values, then in your activity do this.
//onClick or condition statement here
setTheme(R.style.AppThemeLight);
setContentView(R.layout.activity_link_manager_light);
restart();
public void restart(){
Intent i = getBaseContext().getPackageManager()
.getLaunchIntentForPackage( getBaseContext().getPackageName() );
i.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
startActivity(i);
}
I don't think you need to reset the contentview unless you are switching layouts as well, not sure you can try resetting it to the same layout if it's not working without it.
This definitely works for me but i've never tried to use a transparent value.
You can use this method to reset the entire app theme and switch to a new layout that has different colors hardcoded into it, just leave all the id's the same on the layout and in code you will get the right id as long as you reference the findViewByID AFTER you have setContentView to the proper layout that has the ID you call in it somewhere. The id's for each layout are different but you will always get the ID of the layout that is currently set with setContentView at the time you call findViewByID.
you can also save your current theme to a sharedpref file and use a switch to set the theme upon applaunch before setContentView is called (otherwise the statusbar color won't change)
consider this code. This is near the start of onCreate by the way
String Theme;
SaveData = getSharedPreferences(SaveFileName,0);
Theme = SaveData.getString("Theme","Default Theme");
switch(Theme){
case "Light Theme":
setTheme(R.style.AppThemeLight);
setContentView(R.layout.activity_link_manager_light);
ListTextViewID = R.id.AppListTextViewLight;
ListRowID = R.layout.app_list_item_light;
break;
The way i set the apptheme before i set the contentview is why the statusbar color change works.

Changing Android app's status bar color but keep translucency

For an app I'm building, I used the Design Support Library.
I created an app that uses a TabLayout. A little feature of the app is that when the user changes tabs, the color of both the TabLayout and the Toolbar change to a corresponding color. We're also using the new NavigationView, to present the user with a Material design DrawerLayout.
However, changing the color of both the TabLayout and the Toolbar is no problem at all, we do it in the lines of the following;
String hexColor = String.format("#%06X", (0xFFFFFF & getResources().getColor(R.color.primaryColor)));
getBaseActivity().getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor(hexColor)));
mTabLayout.setBackgroundColor(getResources().getColor(primaryColor));
This is all good, and working like it's supposed to. The problem appears when I try to set the Status bar background. Since the material design specification tells us that the NavigationDrawer should get some special treatment, below image shows how the status bar is actually a form of translucent. The Navigation Drawer falls over my main fragment while the navigation bar is above both, being a translucent bar.
My first thoughts were that it's just a bar with a #7000 hexadecimal value or something, but I couldn't be further from the truth. Doing that doesn't change the color of the actual color it should "darken".
After that I just tried setting the darker version of the required color as the background for the status bar like so;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getBaseActivity().getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(getResources().getColor(R.color.primaryColor));
}
But after doing this, the complete functionality breaks. My view will look like this:
In essence, what can I do to fix this behaviour? I'd really like to change it so that the translucency feature still does what it needs to do according to the Material design spec, but also change the status bar's background color.

I think that there is always a translucent shadow behind it and you can not remove it. So you can try to play around with your colors alpha channel to achieve an acceptable result or think about a workaround solution like this:
As far as I see you just want that the status bar color is slightly different when the navigation drawer is open, right? So why not adding just a empty View with the desired color and the same height as statusbar in your NavigationDrawer layout to achieve the same effect?
Btw, there is a R.dimen.status_bar_height height specification.

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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include layout="#layout/drawerlayout_main" />
<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:menu="#menu/drawer_menu" />
</android.support.v4.widget.DrawerLayout>
Activty theme, set statusBarColor to transparent
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
</resources>
NavigationView extends ScrimInsetsFrameLayout, it will draw some color at the statusbar position

adjustResize not working in lollipop and above with translucent status/Nav

There are questions talking about this problem but I didn't solve mine by existed answers.
This is my styles-v21.xml:
<style name="MainTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:colorBackground">#EEEEEE</item>
</style>
I've set windowSoftInputMethod="adjustResize" for related Activity of course.
Here is my layout.xml, notice that the root FrameLayout is used for specific function thus it is needed:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/rl_background"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--This View is used to fill the space of status bar-->
<View
android:id="#+id/statusbar"
android:layout_width="match_parent"
android:layout_height="#dimen/statusbar_size"/>
<!--I've set this toolbar as Actionbar-->
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#id/statusbar"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/actionbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Two EditTexts inside -->
</RelativeLayout>
</ScrollView>
</RelativeLayout>
</FrameLayout>
When I don't touch the EditText, everything looks fine: status bar View stays where it should be and navigation bar doesn't overlay content(doen't make content invisible but content is under it in fact).
In similar questions, people often teach us to set fitsSystemWindow="true", I did this to different layouts inside my layout.xml and got different results.
Setting fitsSystemWindow="true" in:
1.FrameLayout:
AdjustResize works, but status bar View now stays below the real status bar. Status bar's color turns to windowBackground. Navigation bar became entirely transparent because it shows other fragment's content where this fragment was added.
2.First RelativeLayout:
AdjustResize works, but status bar View was below real status bar.Navigation bar isn't too transparent to show other fragment but overlays content.
3&4.ScrollView&RelativeLayout inside ScrollView:
AdjustResize doesn't work and others are same to condition 2.
I also used a method to write my own FrameLayout like this:https://stackoverflow.com/a/22266717/3952691 but as the author said, setting bottom will cause error. Because I use translucent navigation bar, I also need to draw bottom inset. And I try its upgrade version:https://gist.github.com/romannurik/8919163, no use too.
Sorry for can't provide pictures but I really need help.Thank you!

Android Navigation Drawer and windowActionBarOverlay = true

I'm trying to implement the new Android Navigation Drawer in my application. I have created a BaseActivity.java that handles the Drawer setup and listeners, and I have two subactivities that extend this base class. On the second activity, I plan to use a different action bar style, using the following attrs:
<item name="android:windowActionBarOverlay">true</item>
<item name="android:background">#android:color/transparent</item>
to make the action bar transparent, and make content richer, as there is a picture header in my layout.
I've achieved just that, but now the problem is, that because the content is expanding to take advantage of the extra space of using the ActionBar as overlay, the Navigation Drawer itself is expanding too and it overlaps the ActionBar, creating a pretty awful looking layout:
What I'd like to have done, is the actual content (frame layout that will be populated with a fragment) to take up the extra space, but have the nav drawer still go underneath the action bar, similar to the Play Music App:
Any ideas on what I can do to make that happen?
EDIT So, as per Ahmad's assistance I set the marginTop on the ListView only. Here's the layout:
<!-- The navigation drawer -->
<ListView android:id="#+id/left_drawer"
android:layout_marginTop="?android:attr/actionBarSize"
<!-- This was added after seeing the crazy effect, but does nothing -->
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_width="240dp"
android:layout_height="fill_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:background="?attr/listviewBackground"
/>
And now, it works great for the top side, but for some reason there's also a margin at the bottom of the view, which doesn't make any sense to me at all. Here's a screenshot.
Not sure what's causing it :(

And now, it works great for the top side, but for some reason there's also a margin at the bottom of the view, which doesn't make any sense to me at all. Here's a screenshot.
If you set your ListView gravity to start|bottom it solves your problem. No additional margin is added at the bottom. Looks like the DrawerLayout default gravity is start|center
<ListView
android:id="#+id/left_drawer"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start|bottom"/>

In case anyone is interested in another take to this question. Here's what happened.
I tried setting only the margin to the top of the list view like this:
android:layout_marginTop="?android:attr/actionBarSize"
But as mentioned on the edited question, that had a weird behaviour where there was also a margin on the bottom despite not being set on the layout resource file.
So, I was looking closely at the Play Music App and noticed that it's not actually a margin, but rather some padding, and additionally they are using a custom background that fills the space specified by the padding with a transparent color.
Here's what I did:
Set Padding at the top of the ListView, rather than margin:
android:paddingTop="?android:attr/actionBarSize"
As said before, it's important to not hard code the dimensions as they vary per device.
Create a custom drawable that has a top part transparent, and then rest of a solid color:
It looks somehow like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<solid android:color="#80000000" />
</shape>
</item>
<item android:top="#dimen/action_bar_default_height">
<shape
android:shape="rectangle">
<solid android:color="#color/light_gray" />
</shape>
</item>
Note that I tried to use ?android:attr/actionBarSize on the drawable, but that made the app force close. Instead, I searched through grepcode and found a few dimen files with different sizes for the action bar, so I added those to my own project's dimen files.
For values: 48dp
For values-land: 40dp
For values-sw600dp: 56dp
And after that, I think I looks great, notice on the screenshot how the listview and the actionbar don't overlap, and the transparent part of the listview is just the right size.
Hope that helps anyone who was wondering how to achieve this.

You can set a margin at the top of your layout, so that the content draws itself below the ActionBar.
Just add this in your parent layout:
android:layout_marginTop="?android:attr/actionBarSize"
The attribute actionBarSize refers to, like you would have already guessed, to the size of the ActionBar. You can't set an absolute value as a margin, since the ActionBar does not always have the same size across all Android devices (It's bigger on tablets, smaller on handset devices).
Edit:
Set the margin to the ListView.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="#+id/left_drawer"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"/>
</android.support.v4.widget.DrawerLayout>
The Google Music app does the same:

I solved this problem using paddingTop:
<FrameLayout
android:id="#+id/menu_frame"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingTop="?attr/actionBarSize" >
<ListView
android:id="#+id/left_drawer_list"
android:layout_width="240dp"
android:layout_height="match_parent" />
</FrameLayout>
Hope that helps

I have created a working demo following the above guide and tested on 2.x to 5.x
You can clone from Github
The important thing to play around is in Main Activity
toolbar = (Toolbar) findViewById(R.id.toolbar);
res = this.getResources();
this.setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeButtonEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
{
ScrimInsetsFrameLayout scrimInsetsFrameLayout = (ScrimInsetsFrameLayout)
findViewById(R.id.linearLayout);
scrimInsetsFrameLayout.setOnInsetsCallback(this);
}
and the call back
#Override
public void onInsetsChanged(Rect insets) {
Toolbar toolbar = this.toolbar;
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams)
toolbar.getLayoutParams();
lp.topMargin = insets.top;
int top = insets.top;
insets.top += toolbar.getHeight();
toolbar.setLayoutParams(lp);
insets.top = top; // revert
}
Absolutely the Theme for V21 does the magic
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- API 21 theme customizations can go here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/accent_material_light</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
</style>