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?

Screak

looking to resize shrink/ scale up/down a view under collapsing toolbar. absolute pain in the ass. – Assurance

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>

Jointure

Edited to add layout attributes to make things more clear. – Jointure

Thank you very much, sorted the problem didn't realize how simple it was :D – Screak

Answer 2

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Add this code to your frame tag

Willaims

It's not that simple. He didn't say he wants the Toolbar to scroll off screen. – Jointure

I just want my standard page content under the toolbar :D – Screak

Try my solution before. :D – Willaims

@HoàngVũNam The problem with your solution is if he doesn't make the toolbar scroll, then the bottom of his framelayout will always be off screen. That's why I said it's not so simple. – Jointure

You have save my Day.. Thank You @BrianHoang.. happy Coding.. – Strapped

Answer 3

As @Brian Hoang and @Karakuri said using the layout_behaviour property:

app:layout_behavior="@string/appbar_scrolling_view_behavior"

seems to be a very good solution. Even if you don't have any animations at the moment but you plan to have in the future then you can still keep the CoordinatorLayout and an AppBarLayout in case you want to add animations in the future.

---

What the property seems to do in general from my understanding, is to calculate the height of the whole AppBarLayout UI component. The UI component that uses the layout_behaviour property with the @string/appbar_scrolling_view_behaviour will automatically be shown exactly below the AppBarLayout regardless of what the height is.

In this way there is no need to hardcode any top margins in the UI that is supposed to be under the AppBarLayout.

In the code below the include_app_bar_with_tabs_layout (AppBarLayout) has a fixed height of 200dp (it can be wrap_content or anything else). Then the RelativeLayout that contains the content of the screen uses the layout_behaviour property.

---

Have a look at the code and UI image below:

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

    <include
        layout="@layout/include_app_bar_with_tabs_layout"
        android:layout_width="match_parent"
        <!-- this can be anything, even wrap_content -->
        android:layout_height="200dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/Green"
        <!-- this tells it to be below the include_app_bar_with_tabs_layout (AppBarLayout) -->
        app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

        <android.support.v4.view.ViewPager
            android:id="@+id/view_pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/adView" />

        <com.google.android.gms.ads.AdView
            android:id="@id/adView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            app:adSize="BANNER"
            app:adUnitId="@string/banner_ad_unit_id"
            tools:background="@color/green"
            tools:layout_height="50dp" />
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Huckaby