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>
Put the progress bar inside the CoordinatorLayout with android:layout_gravity="center" .
Positioning ViewsRelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID). So you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on.
Below that, the layout_height=0 and layout_weight=1 attributes on the RelativeLayout cause it to take up all the remaining space. You can then center the button in the RelativeLayout . You can play with padding on the button to get it to the size you want.
CoordinatorLayout is a super-powered FrameLayout . CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout. As a container for a specific interaction with one or more child views.
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 love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With