Navigation Drawer Below Toolbar

Navigation Drawer Below Toolbar

You should move DrawerLayout as top parent and move Toolbar out of DrawerLayout content container.
In short this looks like:

RelativeLayout
----Toolbar
----DrawerLayout
---ContentView
---DrawerList

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/top_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar">

<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background_color" />

<ListView
android:id="@+id/drawer"
android:layout_width="260dp"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar"
android:layout_gravity="start"
android:layout_marginTop="56dp" />

</android.support.v4.widget.DrawerLayout>
</RelativeLayout>

However, Material Design guidelines state that Navigation Drawer should be above the Toolbar.

How to put navigation drawer below toolbar?

certainly android:layout_marginTop="?attr/actionBarSize" do the job in

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">

But the problem is drawerlayout is top of the toolbar. That is why the fading here.
you can remove fading by

mDrawerLayout.setScrimColor(getResources().getColor(android.R.color.transparent));

But on some devices it may look wired.

Solution

When working with Android studio. We can create NavigationDrawerActiviity
There are 3 files named

activity_main.xml

app_bar_main.xml

nav_header_main.xml

content_main.xml

So we can skip app_bar_main.xml and we can remove the fading.

Step 1

Make the root view of the activity main as Vertical LinearLayout

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:fitsSystemWindows="true"
tools:context="com.example.MainActivity">
</LinearLayout>

In activity_main.xml add DrawerLayout and include content_main.xml in DrawerLayout. and Add AppBarLayout above the DrawerLayout.

<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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.qproinnovations.schoolmanagement.activity.HomeActivity">
<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.v7.widget.Toolbar>

</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!-- drawer view -->
<include layout="@layout/content_main" />
<!-- drawer content -->
<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:menu="@menu/activity_home_drawer" />
</android.support.v4.widget.DrawerLayout>

</LinearLayout>

Step 2

add and replace setContentView() of NavigationDrawerActiviity to

setContentView(R.layout.activity_main);

Finally we have

enter image description here

Avoid Toolbar overlain by NavigationDrawer

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));

(...)
}

screenshot

Put Navigation Drawer below Toolbar and above TabLayout

Instead of using DrawerLayout as root Create RelativeLayout as root and put DrawerLayout below Toolbar inside RelativLayout something like:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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"
android:fitsSystemWindows="true"
android:orientation="vertical">

<include
android:id="@+id/toolbar"
layout="@layout/toolbar_main" />

<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/toolbar">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<com.astuetz.PagerSlidingTabStrip
android:id="@+id/vp_indicator"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="@color/colorPrimary"
app:pstsIndicatorColor="@color/white"
app:pstsIndicatorHeight="2dp"
app:pstsShouldExpand="true"
app:pstsTabTextColor="@drawable/switcher_indicator_text_selector"
app:pstsTabTextSize="@dimen/text_size_large"
app:pstsUnderlineColor="@color/colorPrimary"
app:pstsUnderlineHeight="2dp" />

<android.support.v4.view.ViewPager
android:id="@+id/vp_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

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

</android.support.v4.widget.DrawerLayout>

<FrameLayout
android:id="@+id/frame_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

How to put navigation-drawer under app-bar for mobile in vuetify?

This worked for me.

Vuetify navigation drawer under app-bar

<v-app id="inspire">
<v-overlay
:value="drawer"
z-index="4"
>
</v-overlay>
<v-navigation-drawer
v-model="drawer"
app
clipped
hide-overlay
:style="{ top: $vuetify.application.top + 'px', zIndex: 4 }"
>
</v-navigation-drawer>

<v-app-bar
app
clipped-left
dark
color="#447fa6"
>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
</v-app>

Codepen

How do I make DrawerLayout to display below the Toolbar?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- The toolbar -->
<android.support.v7.widget.Toolbar
android:id="@+id/my_awesome_toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary" />

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/my_drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<!-- drawer view -->
<LinearLayout
android:layout_width="304dp"
android:layout_height="match_parent"
android:layout_gravity="left|start">

<!-- drawer content -->

</LinearLayout>

<!-- normal content view -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- The rest of content view -->

</LinearLayout>
</android.support.v4.widget.DrawerLayout>

</LinearLayout>


Related Topics



Leave a reply



Submit