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
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));
(...)
}
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.
<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
Write Android Logcat Data to a File
Android: Automatically Choose Debug/Release Maps API Key
Android Material: Status Bar Color Won't Change
Starting the Android Emulator in Sdk Tools, Revision 12
How to Run an Android App in Background
Accessing Contents of R.String Using a Variable to Represent the Resource Name
How to Send Data Back from Onpostexecute in an Asynctask
Adb - Android - Getting the Name of the Current Activity
Adding Ripple Effect to Recyclerview Item
How to 'Restart' an Android Application Programmatically
Android + Pair Devices via Bluetooth Programmatically
How Is Staticlayout Used in Android
How to Limit the Height of Spinner Drop Down View in Android
Cancel Notification on Remove Application from Multitask Panel
Differencebetween Activity and Context
Add Button to a Layout Programmatically