Transparent toolbar with drawer layout

Question

Currently, I have a transparent toolbar with drawerlayout. It is positioned in a framelayout so the drawerlayout is overlapped by the toolbar but I want it to be underneath.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <!-- Framelayout to display Fragments -->
        <FrameLayout
            android:id="@+id/frame_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></FrameLayout>

        <!-- Listview to display slider menu -->
        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp"
            android:listSelector="@drawable/list_selector"
            android:background="@color/list_background"/>

    </android.support.v4.widget.DrawerLayout>
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/tb_background"
        app:theme="@style/TransparentToolbar"
        app:titleTextAppearance="@style/Toolbar.TitleText"
        >
    </android.support.v7.widget.Toolbar>
</FrameLayout>

How can I make it so transparent toolbar does not overlap drawerlayout?

Answer 1

very first of all you don't need extra frame layout for your drawer layout. Just match your layout as shown below.

Instead using list view you can use new support navigation view for navigation menu as it saves you from extra coding and gives your app an standard looks like other android application.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- this is the main content view -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/tb_background"
        app:theme="@style/TransparentToolbar"
        app:titleTextAppearance="@style/Toolbar.TitleText" />

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:foreground="?android:windowContentOverlay" />
    </LinearLayout>

    <!-- you used here listView -->
    <!-- this is the navigation -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_header"
        app:menu="@menu/navigation_menu" />

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

follow the official documentation below:

Creating Navigation Drawer

NavigationView

Answer 2

You need to keep the DrawerLayout as root layout and inside it use the FrameLayout with Toolbar.

Something like this:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
>

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/tb_background"
        app:theme="@style/TransparentToolbar"
        app:titleTextAppearance="@style/Toolbar.TitleText"
        >
    </android.support.v7.widget.Toolbar>
    <!-- Framelayout to display Fragments -->
    <FrameLayout
        android:id="@+id/frame_container"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>

</FrameLayout>

<!-- Listview to display slider menu -->
    <ListView
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@color/list_divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector"
        android:background="@color/list_background"/>

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