Material style navigation drawer, statusbar color gets too dark

Question

I am trying to follow the Material Design guidelines to make an app with an actionbar(toolbar) and a navigation drawer, so that it would look like in Google Apps. The solution I have found is to set "android:windowTranslucentStatus" to true in my theme , as well as keeping "android:fitsSystemWindows" as false , compensating for it with extra padding on my toolbar.

The problem is though, that the final color of the statusbar is too dark. Even if I set the toolbar to the same material color as the G-mail app for example, the statusbar color is darker in my app than in the G-Mail app.

Could somebody please point me in the right direction here? I've heard a lot about some custom ScrimLayout hack , but I would like to stick to Android APIs if possible.

What I have right now: http://i.imgur.com/Yj2xmi8.jpg What I would like to have (Gmail app): http://i.imgur.com/hVp2d9b.jpg — Near, Apr 03 '15 at 20:54

Johannes · Answer 1 · 2015-04-04T11:10:50.430

1

I don't know for which api level you're trying this, but for api>=21 try this:

In your values-v21/styles.xml do the following:

   <style name="AppTheme" parent="android:Theme.Material.Light.DarkActionBar">

    <item name="android:colorPrimary">@color/toolbarcolor</item>
    <item name="android:colorPrimaryDark">@color/navdrawercolor</item>

   </style>

sources: Youtube - AndroidDeveloper / from Holo to Material

Edit:

for setting the status bar color in api >=21 you could use:

<item name="android:statusBarColor">@android:color/transparent</item>

and set the fullscreen mode in your onCreate in your activity:

            getWindow().getDecorView().setSystemUiVisibility(
            View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                    | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

edited Apr 04 '15 at 11:10

answered Apr 03 '15 at 21:49

Johannes

21
4

That will not work , as I have android:windowTranslucentStatus set to true ,because otherwise I would not be able to slide my Nav Drawer underneath the statusbar. – Near Apr 03 '15 at 22:03
I haven't , as I have said I would like to stick to Android SDK itself , but just by looking at it, it seems like it's outdated and meant to be used on KK – Near Apr 04 '15 at 08:57
have you tried setting the color like: @android:color/red and then setting the fullscreen mode programmatically like in this post: [link](http://stackoverflow.com/questions/27856603/lollipop-draw-behind-statusbar-with-its-color-set-to-transparent) – Johannes Apr 04 '15 at 11:05
1

I've seen that post before , but now after revisiting it somehow helped me. The thing is , the method in this post is good if you want transparent statusbar. However, I want a tinted statusbar, so that the toolbar would have a color ( primary color , the "500" according to google guidelines) and the statusbar would have the darker (700) tint of that color. One thing I maybe can do , but I'm not sure how , is to figure out an exact semi transparent color code that when overlaying a 500 color , would result exactly in the 700 color. – Near Apr 04 '15 at 15:00
Actually, this wont really be possible , as the google material palette colors are not JUST tinted, they're darker but in a much more complex way than just a black/opacity tint – Near Apr 04 '15 at 15:28
@Near that's true, but I don't think somebody could tell a difference in the case of the statubar. – prompteus Dec 13 '16 at 20:06

score 0 · Answer 2 · answered Jan 08 '16 at 16:57

0

Put this in your styles.xml (v21) inside your AppTheme style

<item name="android:statusBarColor">@android:color/transparent</item> <item name="android:windowDrawsSystemBarBackgrounds">true</item>

answered Jan 08 '16 at 16:57

douglas.iacovelli

1,346
2
14
12

Material style navigation drawer, statusbar color gets too dark

2 Answers2