How to set drawerlayout below toolbar with coordin

问题:

I have an xml like this, when I show drawer layout, It overlays Toolbar, I want my drawerlayout below my Toolbar, I cannot figure out how to do it, I tried lots of stuff and I tried it all day long. How can I use CoordinatorLayout with DrawerLayout without overlapping the Toolbar ?

This is my actionbar style:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/ColorPrimary</item>
</style>

This is my layout:

<?xml version="1.0" encoding="utf-8"?>
    <android.support.v4.widget.DrawerLayout
    android:id="@+id/drawerLayout"
    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.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/ColorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <TextView
                    android:id="@+id/toolBarTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textColor="@color/white"
                    android:textSize="18dp"/>

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|bottom"
            android:layout_marginBottom="10dp"
            android:layout_marginRight="10dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:layout_behavior="com.frt.poppcar.utils.FabBehavior"/>

    </android.support.design.widget.CoordinatorLayout>

    <ScrollView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:background="@color/white">

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

            <TextView
                android:id="@+id/mainTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/main"
                android:textColor="@color/five"
                android:textSize="18dp"/>

        </LinearLayout>

    </ScrollView>

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

回答1:

This works for me very well.. u need to have coordinator layout as parent layout and set layout behavior for ur drawer layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

</android.support.design.widget.AppBarLayout>

<!-- to make toolbar scroll and hide towards upside include this line
app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_marginTop="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--<include layout="@layout/navigation_drawer_content"/>-->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.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"
        app:menu="@menu/drawer_view" />

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

回答2:

First of all it's not recommended to do this because of Material Design Style Guide
So then, you should define android:minHeight="?attr/actionBarSize" in your toolbar Layout first. after that define android:layout_marginTop="?attr/actionBarSize" in your NavigationView layout. it's kind of a trick.

回答3:

I think it is too late but you may want to know what was the problem or what you could do.Anyways.

New Support Design Library included NavigationDrawer which you could use it like this answer : https://stackoverflow.com/a/34921695/4409113

<!-- The navigation drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/activity_main_drawer" />

And this should work now after adding and editing some mistakes:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/root_coorinator"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

                <TextView
                    android:id="@+id/toolBarTv"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/app_name"
                    android:textSize="18dp" />

            </android.support.v7.widget.Toolbar>

        </android.support.design.widget.AppBarLayout>


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginEnd="10dp"
            app:elevation="4dp"
            app:fabSize="normal"
            app:layout_anchor="@id/root_coorinator"
            app:layout_anchorGravity="bottom|end|right" />

    </android.support.design.widget.CoordinatorLayout>

    <!--<ScrollView
        android:id="@+id/drawerList"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start">

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

            <TextView
                android:id="@+id/mainTv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="main"
                android:textSize="18dp" />

        </LinearLayout>

    </ScrollView>-->

    <!--Don't use it like that, Use NavigationDrawer instead-->
</android.support.v4.widget.DrawerLayout>

And one thing more, you could use that Toolbar alone without adding that TextView as a title.

Also, you could use that layout inside the NestedScrollView.