android - Putting content below AppBarLayout in a CoordinatorLayout

Question

I'm very new to Android and I intended to post this to the Android Developers - Google Groups but they seem to say that newbies need to post to Stack Overflow. So I'm here.

I downloaded the most recent version of Android Studio 1.4.1 yesterday, and I followed the instructions on Building Your First App. I did everything up to Starting Another Activity. It seems these instructions are a bit old i.e. for a previous version of the SDK, because they do not reference CoordinatorLayout and AppBarLayout though they appear in the code if you follow the steps. Obviously, I did make minor changes in the code to get this app to work, but not completely.

My Problem: If you look at the images at the bottom of Starting Another Activity you will see that both of them have the title My First App. In my modifications of the code, I could not get this title on both the images/screens. (I should mention that I want to use the more recent version of AppBarLayout and CoordinatorLayout)

Let's focus on the first screen, the activity_my.xml is

<?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=".MyActivity">

<include layout="@layout/content_my" />

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab"
    android:layout_width="wrap_content"     
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end" 
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

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

As mentioned at the bottom of Building a Simple User Interface the content_my.xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal" >

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"/>
</LinearLayout>

Is there anyway, I can add the AppBarLayout to the activity_my.xml. I have tried something like:

<?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=".MyActivity">

<android.support.design.widget.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="wrap_content"
        android:background="?attr/colorPrimary" 
        app:popupTheme="@style/AppTheme.PopupOverlay" />

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


<include layout="@layout/content_my" />

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end" 
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

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

The problem with this is that the content in content_my.xml goes behind the Toolbar of AppBarLayout rather than below it. Any ideas how to fix this issue?

Answer 1

Layouts in a CoordinatorLayout need to define a layout_behavior. Change your content to this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal" 
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>

<EditText android:id="@+id/edit_message"
    android:layout_weight="1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"/>
</LinearLayout>