CoordinatorLayout + ActionBar + Fragments

Question

I have a problem when I try to put fragments with CoordinatorLayout + AppBarLayout.

I try to load different fragments into my RelativeLayout content that is below of ActionBar with the attribute app:layout_behavior="@string/appbar_scrolling_view_behavior" but when I load a fragment with two buttons on the bottom of screen these are loaded out of screen.

The content where fragments are loaded are out of screen and the content always get out of bottom.

This the code of my main_activity.xml:

<?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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.activities.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        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"
            app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->

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

    <!-- Fragment are loaded here -->
    <RelativeLayout
        android:id="@+id/containerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" > 
    </RelativeLayout>

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

This is the screenshot with the content out of screen.

This is the screenshot of fragment where I have the problem:

This is the screenshot with the fragment loaded in the emulator. You can see how the bottom buttons doesn't appear. They are hidden by the navigation bar:

How can I prevent this issue?

EDIT

<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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.activities.HomeActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        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"
            app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->

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

    <!-- Main content -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

        </FrameLayout>

    </RelativeLayout>

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

EDIT 2: I tried put ToolBar into RelativeLayout, but it works partially. Now doesn't work animation over actionBar when scroll into recyclerView

<?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:id="@+id/coordinator"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.activities.HomeActivity">

    <!-- Main content -->
    <RelativeLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" > 

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:theme="@style/AppTheme.AppBarOverlay"
            android:layout_alignParentTop="true">

            <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"
                app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->

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

        <FrameLayout
            android:id="@+id/containerLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/appBarLayout">

        </FrameLayout>

    </RelativeLayout>

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

Answer 1

I finally figured out that what happens with CoordinatorLayout is that the view beneath the AppBarLayout is sized for height as if the Toolbar was already scrolled out of the way. Then, when the toolbar is in normal position, the view is simply pushed down. It does not get resized as the CoordinatorLayout scrolls everything up.

What this means is that any views attached to the bottom of that view will be scrolled out of the way and either not visible or partially visible.

So how do you fix this? You need to do two things:

1. Bring the AppBarLayout and Toolbar into your fragment. The fragment can set up the support ActionBar on the Toolbar and do everything that would normally be done in the activity. So now your activity layout could be as simple as this:

   <FrameLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/containerLayout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".views.activities.HomeActivity"/>
   

2. Attach the buttons to the bottom of the CoordinatorLayout. CoordinatorLayout is a subclass of FrameLayout so you can have layout_gravity="bottom" on a child view. So now your fragment XML might look like this:

   <?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:id="@+id/coordinator"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       tools:context=".views.activities.HomeActivity">
   
       <android.support.design.widget.AppBarLayout
           android:id="@+id/appBarLayout"
           android:layout_height="wrap_content"
           android:layout_width="match_parent"
           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"
               app:layout_scrollFlags="scroll|enterAlways" /> <!-- Indica como afecta a los hijos de AppBar -->
   
       </android.support.design.widget.AppBarLayout>
   
       <RelativeLayout
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           app:layout_behavior="@string/appbar_scrolling_view_behavior" > 
   
           <!-- 
             rest of your fragment layout goes here 
             it needs to have a scrolling component
             -->
   
           <!-- 
             you *might* need a spacer in order to see
             the bottom of your view over the top of
             the buttons
             -->
           <Space
               android:layout_width="match_parent"
               android:layout_height="48dp" />
           <!-- or you could put a bottom margin on your layout -->
   
       </RelativeLayout>
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="48dp"
           android:layout_gravity="bottom">
   
           <!-- your buttons go here -->
   
       </LinearLayout>
   
   </android.support.design.widget.CoordinatorLayout>