Navigation Drawer semi-transparent over status bar not working
Your status bar background is white, the background of your drawer LinearLayout
. Why? You are settings fitsSystemWindows="true"
for your DrawerLayout
and the LinearLayout
inside it. This causes your LinearLayout
to expand behind the status bar (which is transparent). Thus, making the background for the drawer part of the status bar white.
If you don't want your drawer to extend behind the status bar (want to have a semi-transparent background for the whole status bar), you can do two things:
1) You can simply remove any background value from your LinearLayout
and color the background of your content inside it. Or
2) You can remove fitsSystemWindows="true"
from your LinearLayout
. I think this is a more logical and cleaner approach. You will also avoid having a shadow being cast under the status bar, where your navigation drawer doesn't extend.
If you want your drawer to extend behind the status bar and have a semi-transparent, status bar sized overlay, you can use a ScrimInsetFrameLayout
as a container for your drawer content (ListView
) and set the status bar background using app:insetForeground="#4000"
. Of course, you can change #4000
to anything you want. Don't forget to keep fitsSystemWindows="true"
here!
Or if you don't want to overlay your content and only display a solid color, you can just set the background of your LinearLayout
to anything you want. Don't forget to set the background of your content separately though!
EDIT: You no longer need to deal with any of this. Please see Design Support Library for a times easier Navigation Drawer/View implementation.
Navigation Drawer Over Status Bar In Nougat?
You are having a colored status bar. So navigation drawer is not visible behind it. Make your Status bar transparent and then it will be there.
http://blog.raffaeu.com/archive/2015/04/11/android-and-the-transparent-status-bar/
<!-- Make the status bar traslucent -->
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowTranslucentStatus">true</item> // add this item tag inside your Theme Styles.xml and Styles(v21).xml:
</style>
DrawerLayout with completely transparent status bar
Set NavigationView's insetForeground to transparent
<com.google.android.material.navigation.NavigationView
android:id="@+id/nv_navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:insetForeground="@android:color/transparent" />
NavigationView and Translucent Status Bar
Look at this:
So the files are:
values:
<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>
values-v21
<resources>
<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>
and MainActivity
layout:
<?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">
<android.support.design.widget.CoordinatorLayout
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">
<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>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
<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>
<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>
and the result:
nav_header:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark"
android:orientation="vertical"
android:gravity="bottom">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:src="@android:drawable/sym_def_app_icon"
android:id="@+id/imageView" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="Hello Again"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="me@android.com"
android:id="@+id/textView" />
</LinearLayout>
android - Transparent Navigation Bar but not Status Bar
Not exactly what I wanted but I found a workaround using Translucent Navigation Bar. The final code looks something like this:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
//set navigation bar translucent
Window window = getWindow();
window.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
//now the status bar is translucent too, which we have to fix
//first we get status bar height
int statusBarHeight = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
statusBarHeight = getResources().getDimensionPixelSize(resourceId);
}
//then set it as top padding for the main layout
ConstraintLayout mainLayout = (ConstraintLayout) findViewById(R.id.mainLayout);
mainLayout.setPadding(0,statusBarHeight,0,0);
}
Where top padding is added to the main layout of the activity.
If anyone knows how to do something similar with transparent navigation bar, perfect, but otherwise I am happy with my solution.
Android Status Bar transparent with Navigation Drawer - Appbar elevation
Add this line in toolbar
app:elevation="0dp"
status bar colour shows white not transparent while using navigation drawer under status bar in Android Kitkat 4.4 version
For API 21+
<style name="AppTheme" parent="android:Theme.Holo.NoActionBar.TranslucentDecor">
...
</style>
For API level 19+
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:windowTranslucentStatus">true</item>
</style>
Also your layout should have android:fitsSystemWindows="false"
NOTE: In Android KitKat you cannot change the color of the status bar except if you use the following solution because only in Lollipop Google introduced the attribute statuBarColor
So for that you need to check this transparent status bar in KITKAT
Related Topics
How to Hide a Button Programmatically
Android - Configure Spinner to Use Array
How to Draw a Route, Along an Existing Road, Between Two Points
Android.Database.Cursorindexoutofboundsexception: Index 0 Requested, with a Size of 0
How to Sign an APK with More Than One Certificate
Which Websocket Library to Use in Android App
Android Volley + JSONobjectrequest Caching
Encode and Decode Bitmap Object in Base64 String in Android
Show and Hide a View With a Slide Up/Down Animation
How to Center Icon and Text in a Android Button with Width Set to "Fill Parent"
How to Add APKs in an Aosp Build
Getting the Battery Current Values for the Android Phone
Android Studio - How to Make an Avd with Arm Instead of Haxm
Progressdialog Not Shown When Asynctask.Get() Called