AppBar layout is covering everything

Question

I have a layout like this. The problem is the Appbar layout is on top of everything, i.e. it covers the viewpage (I have to use padding to shift a bit down) and navigation drawer. How should I order this layout so that the appbar does not cover the other 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.xyz.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        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:layout_weight="1"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="@string/app_name">

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

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


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

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

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp"
            android:background="@color/colorPrimaryDark"/>
    </android.support.v4.widget.DrawerLayout>

    <ImageButton
        android:id="@+id/left_nav"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center_vertical|left"
        android:background="?android:selectableItemBackground"
        android:src="@drawable/ic_navigate_before_black_24dp" />

    <ImageButton
        android:id="@+id/right_nav"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center_vertical|right"
        android:background="?android:selectableItemBackground"
        android:src="@drawable/ic_navigate_next_black_24dp" />

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

So, with this layout I am getting something like this:

See, the first planet is hidden below the appbar. Also, another problem is the left_nav should be below the navigation.

In the 2nd screenshot you can see the common fragments are also covered by appbar (in this map, the mylocation tab, which should be on top-right corner, is hidden by the appbar)

Answer 1

I did a similar layout in one of my project and below code snippet works perfectly for me. Please try it out.

<FrameLayout 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.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.xyz.MainActivity">


    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/dropshadow"
            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:layout_weight="1"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:title="@string/app_name">

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

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

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/shop_custom_toolbar"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <ImageButton
            android:id="@+id/left_nav"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical|left"
            android:background="?android:selectableItemBackground"
            android:src="@drawable/ic_navigate_before_black_24dp" />

        <ImageButton
            android:id="@+id/right_nav"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical|right"
            android:background="?android:selectableItemBackground"
            android:src="@drawable/ic_navigate_next_black_24dp" />
    </android.support.design.widget.CoordinatorLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimaryDark"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>