Display content under toolbar

Question

Hello I'm attempting to simply put my content below the toolbar but at the moment when I run my application some of the content is hidden behind it when it should be below it.

I have read up about using a frame layout to attempt to separate it but I have come a little stuck. I'm currently using a basic android studio navigation drawer template provided with the software and was wondering what changes I have to make.

My coordinator layout

<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.design.widget.AppBarLayout>

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

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

---

My drawer layout

<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:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main"
    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"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer" />

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

What changes do I need to make?

Answer 1

Many ViewGroups allow their children to overlap. These include FrameLayout, RelativeLayout, CoordinatorLayout, and DrawerLayout. One that does not allow its children to overlap is LinearLayout.

The answer to your question really depends on what the end result should be. If you are trying to just have a Toolbar that is always on screen and some content below it, then you don't need a CoordinatorLayout and AppBarLayout at all, you can just use a vertical LinearLayout with two children:

<LinearLayout android:orientation="vertical" ...>
    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        ... />

    <FrameLayout 
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ... />
</LinearLayout>

Note layout attributes of the FrameLayout.

If you want to do the fancy stuff where the toolbar scrolls on and off the screen as you scroll the content, then you need an AppBarLayout and you need to give your content area a special attribute like this:

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

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll"
            ... />
    </android.support.design.widget.AppBarLayout>

    <FrameLayout 
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        ... />
</android.support.design.widget.CoordinatorLayout>