How to wrap Coordinator Layout in a LinearLayout?

stamppot picture stamppot · Jun 18, 2015 · Viewed 14.6k times · Source

I´m attempting to use the new Android Design Library´s CoordinatorLayout inside of another layout. The CoordinatorLayout contains a RecyclerView. What I´m attempting to do is to place a simple LinearLayout below the CoordinatorLayout. This layout should be placed below the CoordinatorLayout. This is XML I´m using:

<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:fitsSystemWindows="true"
    android:orientation="vertical">

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

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary" />

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/conversation_recyclerview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scrollbars="vertical"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="horizontal">

        <EditText
            android:layout_width="fill_parent"
            android:layout_height="match_parent" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/ic_send_white_36dp" />

    </LinearLayout>
</LinearLayout>

As you can see, I´m attempting to wrap the CoordinatorLayout inside another LinearLayout. However, on-screen the second part of the layout doesn´t even render.

Answer

Lamorak picture Lamorak · Jun 18, 2015

That is because the CoordinatorLayout has layout_height="match_parent". That means it takes the whole size of the screen and your LinearLayout is rendered but it is below the CoordinatorLayout and off-screen.

An easy way to fix this would be setting the weight of the CoordinatorLayout to fill the parent layout but leave space necesseary to display the footer LinearLayout. This would be

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

But this is not ideal way so I would suggest leaving the CoordinatorLayout as the root element and place your LinearLayout just bellow the RecyclerView where it belongs. Since your footer LinearLayout has fixed height this can be done easily

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent">

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

    <android.support.v7.widget.RecyclerView
        android:paddingBottom="150dp" />

    <LinearLayout
        android:layout_height="150dp"
        android:layout_gravity="bottom">
        <EditText />
        <ImageButton />
    </LinearLayout>

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