CODEWITHSUNDEEP
androidandroid-actionbarnavigation-drawermaterial-design
Aditya Vyas-Lakhan
Aditya Vyas-Lakhan

Reputation: 13555

Navigation Drawer covers my toolbar

I am using this example of material design navigation drawer,the issue is,when i open my drawer,it covers my action bar too..and my drawer icon is not visible..this is the what i am getting..and following is my code..

<android.support.v4.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">


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

        <LinearLayout
            android:id="@+id/container_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

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

        <FrameLayout
            android:id="@+id/container_body"
            android:layout_width="fill_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />


    </LinearLayout>


    <fragment
        android:id="@+id/fragment_navigation_drawer"
        android:name="info.androidhive.materialdesign.activity.FragmentDrawer"
        android:layout_width="@dimen/nav_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:layout="@layout/fragment_navigation_drawer"
        tools:layout="@layout/fragment_navigation_drawer" />

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

enter image description here

Upvotes: 0

Views: 4200

Answers (5)

parvez rafi
parvez rafi

Reputation: 482

Modifying your code for the result you expect:

<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">

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

<android.support.v4.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:layout_below="@+id/toolbar">

   <FrameLayout
        android:id="@+id/container_body"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <fragment
    android:id="@+id/fragment_navigation_drawer"
    android:name="info.androidhive.materialdesign.activity.FragmentDrawer"
    android:layout_width="@dimen/nav_drawer_width"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:layout="@layout/fragment_navigation_drawer"
    tools:layout="@layout/fragment_navigation_drawer" />

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

</RelativeLayout>


Your Welcome...

Upvotes: 0

Salman khan
Salman khan

Reputation: 1255

This is example of latest navigation view.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:openDrawer="start">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"

   android:layout_height="@dimen/abc_action_bar_default_height_material"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

</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">

   <!--content_main is my layout you can design your own-->
    <include layout="@layout/content_main" />

    <FrameLayout
        android:id="@+id/content"
        layout="@layout/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

 <!-- The navigation drawer with menu items defined in activity_main_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" />

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


</LinearLayout>

Upvotes: 1

VipulKumar
VipulKumar

Reputation: 2395

Whatever you have in android.support.v4.widget.DrawerLayout will be covered by Navigation drawer. See that you have your toolbar in android.support.v4.widget.DrawerLayout, so it is below navigation drawer. All you have to do is keep it out of android.support.v4.widget.DrawerLayout. These are all views, so design your layout in such a way that your toolbar is above android.support.v4.widget.DrawerLayout and its subviews.

However I should state that after Android 5.0 Lollipop, according to material guidelines, the navigation drawer is supposed to go over toolbar. But it is in no way necessary for you to do.

Here is an example layout (However, understanding the theory part is necessary as you can create any type of layout after that)

<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.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        android:background="@android:color/transparent"
        android:minHeight="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/toolBarStyle"
        app:titleTextAppearance="@style/Toolbar.TitleText" />

    <android.support.v4.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:layout_below="@+id/toolbar"
        android:fitsSystemWindows="true">

        <RelativeLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="0dp"
            android:background="@android:color/transparent" />

        <fragment
            android:id="@+id/navigation_drawer"
            class="com.buzzintown.consumer.drawer.NavigationDrawerFragment"
            android:layout_width="310dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            tools:layout="@layout/drawer_layout" />
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>

Upvotes: 2

Shvet
Shvet

Reputation: 1201

You can use Listview instead of fragment it will make navigation drawer below Actionbar.

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

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            style="@style/MyToolBarStyle.Base"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize" />
    </LinearLayout>

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


        <!-- activity view -->
        <!-- Framelayout to display Fragments -->
        <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <!-- navigation drawer -->
        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="@dimen/slider_dimen"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="@android:color/white"
            android:divider="#000"
            android:dividerHeight="1dp" />

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

</LinearLayout>

Upvotes: 0

Thomas R.
Thomas R.

Reputation: 8073

I would suggest to use a linear layout with vertical orientation as parent and then the first child is your toolbar and the second your drawer layout.

linearlayout vertical
  toolbar
  drawerlayout

Hope this helps.

Upvotes: 4

Related Questions