How to put RelativeLayout inside CoordinatorLayout

I'm trying to recreate the search box as it is in Airbnb Android app. So I'm using CoorinatorLayout with Toolbar and RecyclerView.

But when I insert something inside the Coordinator besides those two things, it doesn't show up. Here is my code:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/slidingLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/red"
        app:layout_scrollFlags="scroll|enterAlways" />

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="50dp"
    android:layout_marginRight="50dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/rounded_background"
    android:orientation="horizontal"
    android:padding="6dp"
    app:layout_scrollFlags="scroll|enterAlways">

    <EditText
        android:id="@+id/search"
        android:layout_width="0dp"
        android:layout_height="fill_parent"
        android:layout_weight="6"
        android:background="@null"
        android:fontFamily="sans-serif-light"
        android:hint="Unesite grad"
        android:paddingLeft="16dp"
        android:paddingStart="16dp" />

    <ImageView
        android:id="@+id/cancelSearch"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_weight="1"
        android:padding="10dp"
        android:src="@drawable/ic_cancel" />
</LinearLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_below="@id/appbar"
    android:background="#ffffff"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

But actually if this even worked, I would have the trouble of putting the search box above the RecyclerView.

I have tried to put everything inside the RelativeLayout but that didn't work.

Here is also the picture of what I'm trying to make

EDIT:

Here is the code with RelativeLayout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent">

       <android.support.design.widget.AppBarLayout
           android:id="@+id/appbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           android:background="#00000000">

           <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:background="@color/red"
               app:layout_scrollFlags="scroll|enterAlways"/>
   </android.support.design.widget.AppBarLayout>

   <RelativeLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">
       <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_marginLeft="50dp"
          android:layout_marginRight="50dp"
          android:layout_marginTop="20dp"
          android:background="@drawable/rounded_background"
          android:orientation="horizontal"
          android:padding="6dp"
          app:layout_scrollFlags="scroll|enterAlways">

          <EditText
              android:id="@+id/search"
              android:layout_width="0dp"
              android:layout_height="fill_parent"
              android:layout_weight="6"
              android:background="@null"
              android:fontFamily="sans-serif-light"
              android:hint="Unesite grad"
              android:paddingLeft="16dp"
              android:paddingStart="16dp" />

          <ImageView
              android:id="@+id/cancelSearch"
              android:layout_width="0dp"
              android:layout_height="40dp"
              android:layout_weight="1"
              android:padding="10dp"
              android:src="@drawable/ic_cancel" />
      </LinearLayout>
      <android.support.v7.widget.RecyclerView
           android:id="@+id/recyclerView"
           android:layout_width="match_parent"
           android:layout_height="fill_parent"
           android:layout_below="@id/appbar"
           android:background="#ffffff"
           app:layout_behavior="@string/appbar_scrolling_view_behavior" />
   </RelativeLayout>

Answers


I was trying to do something a little similar, but with an ad banner at the bottom of the screen. My solution was to wrap the RelativeLayout outside the CoordinatorLayout as so:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <android.support.design.widget.CoordinatorLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_above="@+id/ad_view">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

      <android.support.v7.widget.Toolbar
          android:id="@+id/toolbar"
          android:layout_width="match_parent"
          android:layout_height="?attr/actionBarSize"
          android:background="?attr/colorPrimary"
          app:layout_scrollFlags="scroll|enterAlways"
          app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

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

  <com.google.android.gms.ads.AdView
      android:id="@+id/ad_view"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerHorizontal="true"
      android:layout_alignParentBottom="true"
      android:layout_gravity="center|bottom"
      app:adSize="SMART_BANNER"
      app:adUnitId="@string/admob_id" />

</RelativeLayout>

The toolbar properly hides when scrolling inside the RecyclerView and everything seems to be working just fine. I would imagine if you followed a similar principle you should be good-to-go.


If you want remove status bar white colour, you must remove the next line

<item name="android:statusBarColor">@android:color/transparent</item>`

in v21/styles.xml

Thanks for example.


<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/slidingLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/red"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp"
            android:layout_marginTop="20dp"
            android:background="@drawable/rounded_background"
            android:orientation="horizontal"
            android:padding="6dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <EditText
                android:id="@+id/search"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="6"
                android:background="@null"
                android:fontFamily="sans-serif-light"
                android:hint="Unesite grad"
                android:paddingLeft="16dp"
                android:paddingStart="16dp"/>

            <ImageView
                android:id="@+id/cancelSearch"
                android:layout_width="0dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:padding="10dp"
                android:src="@drawable/ic_cancel" />
        </LinearLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/appbar"
        android:background="#ffffff"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Check if this works for you.


Need Your Help

How do I put an array in a textarea, putting each element on its own line?

javascript arrays textarea

How do I output array elements in a textarea, placing each element on its own line?

Service Invoked Too Many Times (Google Apps Script)

google-apps-script google-sheets custom-function

I want to use Google Apps Script to make custom functions for a spreadsheet. I've made an extremely simple function: