androidtranslucencyandroid-statusbarmaterialdrawer

MaterialDrawer library turns a translucent status bar into a opaque one

I am using MaterialDrawer library for adding a drawer to my activities. The activities must have translucent status bar. Like the picture below:

enter image description here

This is the top part of my activity, when the library has not added to it yet.

When I add a drawer using the library:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        DrawerMenu.addTo(this);
    }

}

And the DrawerMenu helper class:

public class DrawerMenu {
    public static void addTo(final Activity activity) {
        AccountHeader headerResult = new AccountHeaderBuilder()
            .withActivity(activity)
            .withHeaderBackground(R.drawable.drawer_header)
            .addProfiles(
                    new ProfileDrawerItem()
                            .withName("Ashkan")
                            .withEmail("ashkan@sarlak.com")
                            .withIcon(ContextCompat.getDrawable(activity, R.drawable.profile_pic))
            )
            .withOnAccountHeaderListener(new AccountHeader.OnAccountHeaderListener() {
                @Override
                public boolean onProfileChanged(View view, IProfile profile, boolean currentProfile) {
                    return false;
                }
            })
            .build();

        new DrawerBuilder()
            .withActivity(activity)
            .withAccountHeader(headerResult)
            .addDrawerItems(new PrimaryDrawerItem().withName("Login"))
            .withOnDrawerItemClickListener(new Drawer.OnDrawerItemClickListener() {
                @Override
                public boolean onItemClick(View view, int i, IDrawerItem iDrawerItem) {
                    Toast.makeText(activity, "Login!!!", Toast.LENGTH_LONG).show();
                    return true;
                }
            })
            .build();
    }
}

I will get this result:

enter image description here

The status bar is obviously non translucent and activity content is not below it.

However when I open the drawer, it goes beneath the status bar:

enter image description here

Also this is the theme that I'm applying to the activity:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowTranslucentNavigation">false</item>
</style>

What is the problem here?

Solution

  • The screenshot you have posted looks like your app should be displayed in fullscreen mode.

    So with the screenshots you posted you use the basic configuration of the MaterialDrawer. In most cases people who use the drawer want their content (including the Toolbar) to be displayed below the StatusBar but the drawer behind the StatusBar. So what basically happens here is that the logic of the MaterialDrawer will set your app into the translucent StatusBar mode so the content will move behind it. Additionally it will add the ScrimInsetsFrameLayout which will then add the padding to the top so the content will be below the StatusBar.

    In your case you want your content also to go behind the StatusBar so you want to also move your content behind the StatusBar.

    This can be implemented by adding the withFullscreen(true) flag to the Builder of the MaterialDrawer

    This is how it's done programmatically

    //Create the drawer
result = new DrawerBuilder()
    .withActivity(this)
    .withFullscreen(true)
    .withSavedInstance(savedInstanceState)
    .build();

    This will also make your NavigationBar translucent.

    There is an open issue about this topic which will probably also improve the behavior here. https://github.com/mikepenz/MaterialDrawer/issues/698

    So implementing an additional flag to don't include the ScrimInsetsFrameLayout https://github.com/mikepenz/MaterialDrawer/issues/698#issuecomment-143674729

    Ok as an addition. If you want just the StatusBar to be translucent. then you have to do following. Use one of the TranslucentStatus themes (or a child of it) for this activity

    @style/MaterialDrawerTheme.Light.TranslucentStatus

    And then build the drawer as shown here:

    //Create the drawer
result = new DrawerBuilder()
    .withActivity(this)
    .withFullscreen(true)
    .withTranslucentNavigationBarProgrammatically(false)
//note that the translucentNavigationBarProgrammatically comes AFTER the withFullscreen method

    This will result in an transparent StatusBar but with a black NavigationBar