Avoid Toolbar overlain by NavigationDrawer

Question

I have created a navigation drawer which overlays the toolbar. But I would like to have my navigation drawer without overlaying the toolbar. How can I acheive this ?

What I want is like the left, and how my app is currently the right:

these are my codes:

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        NavigationView navigationView = findViewById(R.id.nav_view);
        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawer.addDrawerListener(toggle);
        toggle.syncState();
        navigationView.setNavigationItemSelectedListener(this);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
 }
        return super.onOptionsItemSelected(item);
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();
        DrawerLayout drawer = findViewById(R.id.drawer_layout);
        drawer.closeDrawer(GravityCompat.START);
        return true;
    }
}

and this is my main activity:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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" />

    <com.google.android.material.navigation.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" />

</androidx.drawerlayout.widget.DrawerLayout>

just remove the bottom navigation, and add more icons in your "activity_main_drawer.xml" under Menu. — cantona_7, May 14 '20 at 07:24
@cantona_7 I mean how can I remove the bottom navigation ? I didn't get the meaning of that "the bottom navigation" — madan, May 14 '20 at 07:40

score 2 · Answer 1 · answered May 14 '20 at 07:44

You can add layout_marginTop as follows

<android.support.design.widget.NavigationView
    android:layout_marginTop="@dimen/abc_action_bar_default_height_material"
    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" />

Look out here, you might find more interesting solution here

hata · Accepted Answer · 2020-05-14T08:57:39.353

2

Roughly saying, you can. Wrap your layout/activity_main.xml with LinearLayout, and move AppBarLayout to there from layout/app_bar_main.xml.

layout/activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:fitsSystemWindows="true"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.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" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:openDrawer="start">

        <include
            layout="@layout/app_bar_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <com.google.android.material.navigation.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:headerLayout="@layout/nav_header_main"
            app:menu="@menu/activity_main_drawer" />

    </androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

layout/app_bar_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
    tools:context=".MainActivity">

    <include layout="@layout/content_main" />

    <com.google.android.material.floatingactionbutton.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"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Though you may need a few more style adjustements for side effects (those may be posted as other new questions), this time your question itself:

I want not to overlay the toolbar.

should be fulfilled.

For system window's color adjustment:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    getWindow().setStatusBarColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));

    (...)
}

edited May 14 '20 at 08:57

answered May 14 '20 at 07:46

hata

11,633
6
46
69

there is some disarrangement, below toolbar another navigation bar is showing – madan May 14 '20 at 08:24
@madan If you delete the `AppBarLayout` from `app_bar_main.xml`, no toolbar remains. If you are saying about the blueish shadow bar, its not a toolbar just a horizontal shadow. And that is a side effect of arrangement. Another styling issue. – hata May 14 '20 at 08:29
yes toolbar is gone little up and below toolbar status bar is shown, how can i fix that? – madan May 14 '20 at 08:32
@madan Set `android:fitsSystemWindows="false"` of `DrawerLayout` – hata May 14 '20 at 08:38
@madan I updated my answer (`activity_main.xml` and `MainActivity`). Deleted `android:fitsSystemWindows="true"` from `DrawerLayout` and `NavigationView`and move it to the `LinearLayout`. And added coloring code for the system window bar. Adjustments are a bit complex work, though... – hata May 14 '20 at 09:00
@madan And sorry, I don't have an answer for the other question. – hata May 14 '20 at 09:02
nono, you can post the answer in that guy's question's page, please @hata ? – madan May 14 '20 at 09:06
@madan So, I don't know about that pdfViewer. – hata May 14 '20 at 09:12
oh, okay. is there any difference in: ```android:fitsSystemWindows="false"``` in drawerlayout Or, delete android:fitsSystemWindows="true" from DrawerLayout and NavigationViewand move it to the LinearLayout ? – madan May 14 '20 at 09:15
and why are we adding that code in mainactivity? status bar is showing properly even without adding that. sorry for interruption but didn't get that :( – madan May 14 '20 at 09:21
@madan That is just in case. `false` is the default value. And I think the property is for the outmost Layout (this case it is the `LinearLayout`). And without the code in `MainActivity`, system window bar may colored wrongly (on my phone white colored). – hata May 14 '20 at 09:22
okay, what I have done is, removed that attribute from drawerlayout and navigationview and placed in linear layout, but i have not added any code in main activity and it is working perfectly. Am I doing in good way? – madan May 14 '20 at 09:25
you suggested 2 answers and both are working perfectly. so, I'm confused. hehe – madan May 14 '20 at 09:25
@madan If the color is wrong, it's never fatal. An optional treatment. – hata May 14 '20 at 09:28
okay :) can you refer that pdf's question's link to your dev friends? – madan May 14 '20 at 09:33

Avoid Toolbar overlain by NavigationDrawer

2 Answers2