Android drawer navigation dark mode with transparent status bar - android

I use navigation drawer in my app and I try to implement dark theme. When the app doesn't cover the whole screen and the status bar isn't transparent the navigationView is automatically colored to dark. But when the app covers the whole screen and the status bar is transparent the navigationView stays white. How can I force the navigationView to be dark even when the app covers the whole screen and status bar is transparent?
I don't explicitily set the background color or the text color, it uses the default values.
The layout code looks like this:
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:id="#+id/drawer_layout">
<!-- Some other views wrapped in RelativeLayout -->
<com.google.android.material.navigation.NavigationView
android:id="#+id/mainnav"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#menu/mainmenu"
android:layout_gravity="start"
app:headerLayout="#layout/mainmenu_header"
android:fitsSystemWindows="false"
app:insetForeground="#null">
<include android:id="#+id/mainmenuheader"
layout="#layout/mainmenu_header"/>
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
The style that the activity uses to make it fullscreen with transparent status bar looks like this:
<style name="Theme.AppCompat.Light.NoActionBar.FullScreen" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
And finally in the manifest for the activity a apply the theme and set the fitsSystemWindows to true:
<activity
android:name=".map.MapActivity"
android:screenOrientation="portrait"
android:configChanges="uiMode"
android:fitsSystemWindows="true"
android:theme="#style/Theme.AppCompat.Light.NoActionBar.FullScreen" />

Related

Android translucent status bar is always gray with fitsSystemWindows when targeting API 28 (Android 9)

Beginning with API 21, When the style includes <item name="android:windowTranslucentStatus">true</item> and the layout includes android:fitsSystemWindows="true" the status bar becomes translucent and drawer layouts (like the navigation drawer) slide behind the status bar. Previous to targeting API 28, the base color of the status bar would be set by colorPrimaryDark or android:statusBarColor. Now these values are ignored.
This problem actually surfaced in com.android.support:design:27.1.0, but at the time I assumed it was a bug and continued to use com.android.support:design:27.0.2. With the carryover to API 28, it appears this is an undocumented design change. So, how do you set the status bar background color when using fitsSystemWindows on API >= 28?
It turns out the answer to this question is that the base status bar color is now set by the background of the layout item that is set to fitsSystemWindows. That color is then darkened by the translucent status bar scrim. So, in my case, fitsSystemWindows is specified on a CoordinatorLayout inside of a DrawerLayout. Setting android:background on the CoordinatorLayout allows control of the base status bar color.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent" >
<!-- `android:fitsSystemWindows="true"` moves `root_coordinatorlayout` below the system status bar.
When it is specified, the theme should include `<item name="android:windowTranslucentStatus">true</item>`.
`android:background` sets the background color of the status bar, which is then overlaid with a scrim. -->
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinatorlayout"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.my.acivity"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:background="#FF64DD17" >
<!-- The purpose of the `LinearLayout` is to place the included `main_webview` below `app_bar_layout`. -->
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical" >
<!-- The `AppBarLayout` theme has to be defined here because the activity uses a `NoActionBar` theme. -->
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppBarLight" >
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</android.support.design.widget.AppBarLayout>
<!-- Include the main views. -->
<include layout="#layout/main_views" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- The left drawer. -->
<android.support.design.widget.NavigationView
android:id="#+id/navigationview"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:menu="#menu/webview_navigation_menu"
app:itemIconTint="?attr/navigationIconTintColor" />
<!-- Include the right drawer. -->
<include layout="#layout/right_drawer" />
The scrim takes #FF64DD17 and darkens it to #FF3C850E.
When a drawer is open, an additional scrim covers the entire app behind the drawer, darkening the status bar even further to #FF183405.

Android map under transparent system bar

I have a fairly simple layout:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.mapbox.mapboxsdk.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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" />
</FrameLayout>
I want the map to appear under the completly transparent system bars (navigation bar and status bar). To accieve this, I set the status and navigation bar color to android:color/transparent:
<style name="Theme.Lab.Map">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:fitsSystemWindows">false</item>
</style>
But unfortunatly, the map does not appear under the system bars. Instead, the default activity backgound color is visible.
I set fitSystemWindows to false as it helped when I set android:translucentStatusBar to true. The problem with translucentStatusBar is, that the status bar is only semi translucent, not completly transparent as I want it to be.
I somehow have to tell the map - or the activity - that it can expand underneath the systembars.
EDIT
It could also be possible to use translucentStatusBar but change the transparency/opacity of the status bar. I just didn't find a way to do this.

Translucent/Transparent status bar + CoordinatorLayout + Toolbar + Fragment

I have following setup:
I'm using AppCompat
MainActivity, that holds a fragment and has a toolbar, that's hiding when scrolling down
Fragment with RecyclerView
all views that should fit the screen have the according android:fitsSystemWindows="true" in the xml layout
The problem is, I can't get the statusbar transparent in this case. What I do is following:
Create the activity and call setContent
Then I try to adjust the activity to programmatically get a translucent toolbar like following:
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public void themeNavAndStatusBar(Activity activity)
{
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP)
return;
Window w = activity.getWindow();
w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
w.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
w.setFlags(
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS,
WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
w.setNavigationBarColor(activity.getResources().getColor(android.R.color.transparent));
w.setStatusBarColor(activity.getResources().getColor(android.R.color.transparent));
}
Replace the placeholder in the activity (#+id/frame_container) with the fragment
The statusbar is solid colored in this case, and the views are not drawn underneath it... Why?
What I want
I want a toolbar, that is scrolled of the screen and hiding completely while the content underneath this toolbar should fitScreen and be drawn behind the transparent nav bar.
Layouts
Here's my main activity:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/clMain"
android:fitsSystemWindows="true"
android:background="?attr/main_background_color"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:fitsSystemWindows="true"
android:background="#null"
app:elevation="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="?actionBarThemeStyle"
app:popupTheme="?actionBarPopupThemeStyle"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivToolbarDataSource"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:layout_width="24dp"
android:layout_height="24dp" />
<TextView
android:id="#+id/tvToolbarTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:theme="?actionBarThemeStyle"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="#+id/tvToolbarSubTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
android:theme="?actionBarThemeStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<!-- BUG: http://stackoverflow.com/questions/30541409/coordinatorlayoutappbarlayout-does-not-draw-toolbar-properly -->
<View
android:layout_width="fill_parent"
android:layout_height="1dp"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frame_container"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="32dp"
android:src="#drawable/ic_local_offer_white_24dp"
app:backgroundTint="?attr/colorPrimary"
app:borderWidth="0dp"
app:fabSize="normal"
app:rippleColor="?attr/colorPrimaryDark"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="com.test.classes.ScrollAwareFABBehavior"/>
</android.support.design.widget.CoordinatorLayout>
And here is my fragment, that will be placed in the main activity:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srlImages"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rvImages"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="#+id/tvEmpty"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
EDIT - Screenshots
I use a light/dark base theme and theme everything by hand (because the user can select any color as primary/accent color), so don't mind that the toolbar is white (it's the default's theme background color and primary color). I added a black border as well so that you see where the activity ends...
First Screenshot: Shows the toolbar, nothing is scrolled
Second Screenshot: I just started scrolling => the toolbar now should scroll away
Third Screenshot: the main content should now scroll underneath the nav bar...
In the end, I'll of course make the toolbar and navbar semi transparent for a better visual effect...
tl;dr Set android:fitsSystemWindows="false" at least to the root CoordinatorLayout and to the inner fragment container, #frame_container.
This might not be the final solution (i.e. there might be other fitsSystemWindows to change) so tell me if you have any problems.
why
When it comes to status bar, I think of fitsSystemWindows like so:
fitsSystemWindows="false" : draws the view normally, under the status bar because of the window flags you have set.
fitsSystemWindows="true" : draws the view normally, under the status bar because of the window flags you have set, but adds a top padding so that content is drawn below the status bar and they don't overlap.
In fact, in my opinion, the white you see is not the status bar color, but rather your CoordinatorLayout background. That is due to fitsSystemWindows="true" on the coordinator: it draws the background to the whole window, but adds top padding to the content so inner views are not covered by status bar.
This is not what you want. Your inner content must be covered by the status bar, and so you have to set fitsSystemWindows="false" to the coordinator (so it won't apply top padding) and probably to the content itself.
Once you get how it works, it is easy to debug and achieve the effect you are looking for. Actually, it is not. Years pass, but I still spend hours trying to figure out the right fitsSystemWindows combination, because most Views (in the support libraries at least) override the default behavior that I stated above, in ways that are mostly not intuitive. See this post for a small guide on how to use it.
Edit your styles.xml (v21) , add the following style
<style name="AppTheme.Home" parent="AppTheme.Base">
<!-- Customize your theme here. -->
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
You can change parent theme as per your liking, but now declare this theme in your AndroidManifest.xml file for a particular activity like this :
<activity
android:theme="#style/AppTheme.Home"
android:name=".HomeActivity"
android:launchMode="singleTop"
android:screenOrientation="portrait" />
This will let your content visible under the transparent actionbar.
Now use the following to align your toolbar below the StatusBar properly, call this in your oncreate:
toolbar.setPadding(0, getStatusBarHeight(), 0, 0);
Get statusbar height using following :
public int getStatusBarHeight() {
int result = 0;
int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
if (resourceId > 0) {
result = getResources().getDimensionPixelSize(resourceId);
}
return result;
}
Remove the following from your coordinator layout tags :
android:fitsSystemWindows="true"
Now in order to collapse your toolbar or hide it you may refer to this tutorial
Make sure you are using following version of design support library, as it is bug free :
compile 'com.android.support:design:23.1.0'
After reading your descriptions about your question, I thought styles of Google Photos matches your requirement.
OK, there are just some tips for your question. After my test, it works.
If you want to show content behind status bar, you need add <item name="android:windowTranslucentStatus">true</item> into your
style when Android version level is larger than 19(namely KitKat)
If you want to show content behind navigation bar, you need add
<item name="android:windowTranslucentNavigation">true</item> into your
style when Android version level is larger than 19(namely KitKat)
If you want to hide Toolbar smoothly when content is scrolled up
and to show Toolbar smoothly when content is scrolled down, you
need to add app:layout_collapseMode="parallax" into your
Toolbar's attributes based on your current codes.Of course, you
need coordinate Toolbar with CollapsingToolbarLayout
CoordinatorLayout and AppBarLayout.
as some users said, by setting android:fitsSystemWindows="false", the layout overlapped below statusbar.
I solved it by setting android:fitsSystemWindows="true" and in CoordinatorLayout tag setting app:statusBarBackground="#android:color/transparent".
For me, the reason was not that it did not work per se, but that I use the material drawer library from Mike Penz and this library does use fullscreen + offset + custom background behind the toolbar so I had to solve the problem respecting that special setup...
I'll reward the points to the in my opinion most informative answer though...
I had the same issue and my solution was add android:fitsSystemWindows="true" to the DrawerLayout
<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">
....
</android.support.v4.widget.DrawerLayout>
I had relevant issues depend on android:fitsSystemWindows setting.
Once false:
Snacks was drawn under the Navigation bar
Once true:
Status bar had none transparent background
Solution was really simple...
Just to add android:layout_marginBottom="48dp". to CoordinatorLayout like that:
just to add <android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:map="http://schemas.android.com/apk/res-auto"
tools:context=".MapsActivity"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
android:layout_marginBottom="48dp">
Theoretically Navigation bar should have fixed size "48dp", but in future releases potentially it may change (like Status bar got slimmer by 1dp in Marshmallow), so I wouldn't rely on fixed size.
Better additionally get it and apply on run time.
If You are using Google Map like me You may want to know ActionBar/Toolbar size and the navigation bar in run time:
in onCreate use this code:
final TypedArray styledAttributes = MapsActivity.this.getTheme().obtainStyledAttributes(
new int[]{android.R.attr.actionBarSize});
mToolbarHeight = (int) styledAttributes.getDimension(0, 0);
styledAttributes.recycle();
// translucent bars code. Will not fire below Lollipop
// Ask NavigationBar Height
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.coordinatorLayout),
new OnApplyWindowInsetsListener() { // setContentView() must be fired already
#Override
public WindowInsetsCompat onApplyWindowInsets(View v, WindowInsetsCompat insets) {
statusBar = insets.getSystemWindowInsetTop(); // You may also need this value
mNavBarHeight = insets.getSystemWindowInsetBottom();
if (mMap != null)
mMap.setPadding(0, mToolbarHeight, 0, mNavBarHeight);
// else will be set in onMapReady()
SharedPreferences.Editor editor = mSharedPref.edit();
editor
.putInt(NAVBAR_HEIGHT_KEY, mNavBarHeight)
.commit(); // Save the results in flash memory and run the code just once on app first run instead of doing it every run
return insets;
}
}
);
And what's important. If You got some additional layers like drawer etc put them encapsulating the CoordinatorLayout inside rather than outside as otherwise it will make other views inside shorter by the marginBottom
Here's what I did to have the toolbar have the same color as the status bar, by getting the status bar transparent:
build.gradle
...
implementation 'androidx.core:core-ktx:1.2.0'
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.1.0'
**ScrollingActivity.kt**
```kt
class ScrollingActivity : AppCompatActivity(R.layout.activity_scrolling) {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setSupportActionBar(toolbar)
}
}
activity_scrolling.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" android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#f00" android:fitsSystemWindows="true" android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="#dimen/text_margin" android:text="#string/large_text" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
styles.xml
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<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>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>
manifest
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.lb.myapplication">
<application
android:allowBackup="true" android:icon="#mipmap/ic_launcher" android:label="#string/app_name"
android:roundIcon="#mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="#style/AppTheme">
<activity
android:name=".ScrollingActivity" android:label="#string/app_name"
android:theme="#style/AppTheme.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
You should add the following code to your theme, this code will make the status bar transparent:
<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>
Additionally, add scroll behavior to your top app bar. The following example shows the top app bar disappearing upon scrolling up, and appearing upon scrolling down:
<androidx.coordinatorlayout.widget.CoordinatorLayout
...>
<com.google.android.material.appbar.AppBarLayout
...>
<com.google.android.material.appbar.MaterialToolbar
...
app:layout_scrollFlags="scroll|enterAlways|snap"
/>
</com.google.android.material.appbar.AppBarLayout>
...
</androidx.coordinatorlayout.widget.CoordinatorLayout>
First add this code to AppBarLayout:
app:liftOnScroll="true"
Then update your "app:layout_scrollFlags" in your toolbar:
app:layout_scrollFlags="scroll|enterAlways|snap"
This will work, I am pretty sure.

Android NavigationView (material support lib) doesn't interact with the status bar properly

I'm following the example from here to integrate the new Material Design Support library's NavigationView into my app.
My general layout looks like this:
activity.xml
<android.support.v4.widget.DrawerLayout
android:fitsSystemWindows="true">
<!-- main content -->
<android.support.design.widget.NavigationView
.. />
</android.support.v4.widget.DrawerLayout>
themes.xml
<style name="MyTheme" extends "Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
MyActivity.java
onCreate(..) {
..
// This color can be different depending on some conditions.
DrawerLayout.setStatusBarBackground(color);
}
However, I keep getting a grey status bar, and the NavigationView does not draw under the status bar. I think the grey status bar is because I didn't define a custom colorPrimaryDark attr in the theme. However, I would assume DrawerLayout.setStatusBarBackground would override and set the status bar color. I can't find much documentation on the new NavigationView. Does anyone have any ideas?
Add your styles for API 21+ in values-v21/themes.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
</resources>
In activity.xml, try setting android:fitsSystemWindows="true" on your NavigationView (in addition to the DrawerLayout).
For every one struggling with this, your layout file should be something like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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">
...
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/drawer_header"
app:menu="#menu/menu_drawer"/>
</android.support.v4.widget.DrawerLayout>
You have to include
android:fitsSystemWindows="true"
in the DrawerLayout and in the NavigationView.
Sigh, I figured out my problem. There was some weird abstraction that we use to add a debug drawer on the right-hand side. As a result, the overall view hierarchy actually looks like this
<DrawerLayout id="debug">
<LinearLayout id="debug_drawer" />
<DrawerLayout id="nav_drawer" fitsSystemWindows="true">
<NavigationView .... />
</DrawerLayout>
</DrawerLayout>
So I was calling DrawerLayout.setStatusBarColor on the wrong drawer and setting fitsSystemWindows on the wrong drawer. As a result, the window never interacts with the status bar :(

Set elevation to View automatically the elevation of the Toolbar, how to change this?

I'm using a theme that will not show the ActionBar by default:
<style name="AppTheme" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
However, I'm replacing it with Toolbar in xml:
<LinearLayout 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"
android:orientation="vertical"
... >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_VenueDetail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/MainColor" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/MainColor"
android:elevation="#dimen/default_elevation"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
in OnCreate:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar_VenueDetail);
setSupportActionBar(toolbar);
The expected result is a flat Toolbar and a shadow below the LinearLayout, which is exactly what preview in Android Studio shows me:
However in real life, the Toolbar has also taken effect:
I want to just put the shadow below another View and keep my Toolbar flat, how to achieve this? Is this even possible?
Do not set the toolbar as a support actionbar. You can still set navigation button, title and inflate menu on the toolbar but the elevation shouldn't be applied unless you set it explicitly in code or in the activity layout.
Having said that, make sure that the removing the elevation is not against the principles of material design.

Categories

Resources