Arrangement Of Views With A Scrollable Layout And A Filter Panel

I'm struggling with arranging the views of my activity. I want to reach a simple effect: filter container with some text views and radios, which would be able to show/hide actions

Solution 1:

I think you could do this by using a CoordinatorLayout and you would have:

1. CoordinatorLayout as a root of your layout.
2. AppBarLayout as the first child of the Coordinator Layout.
3. Add a CollapsingToolbar with a toolbar and/or a layout/custom view to represent the top part of your layout. CollapsingToolbarLayout will allow you to define scrolling behaviours to the toolbar and/or your layout that will be triggered when the bottom part of your content starts scrolling.
4. Add a Recyclerview to show the grid on the bottom part of your mock up and specify the layout behaviour so that it can properly scroll the stuff inside the app bar layout.

Here is an example of how your layout would look like:

<android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar_layout"android:layout_width="match_parent"android:layout_height="280dp"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:id="@+id/collapsingToolbar"android:layout_height="280dp"app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"app:contentScrim="?attr/colorPrimary"><CustomViewHeaderandroid:id="@+id/custom_view_header"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"app:layout_scrollFlags="scroll"android:fitsSystemWindows="true"/><android.support.v7.widget.Toolbarandroid:layout_height="?attr/actionBarSize"android:layout_width="match_parent"android:id="@+id/toolbar"app:navigationIcon="@drawable/ic_arrow_back"app:layout_collapseParallaxMultiplier="0.7"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><android.support.v7.widget.RecyclerViewandroid:id="@+id/grid"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"
        /></android.support.design.widget.CoordinatorLayout>

You could learn more about it here: https://antonioleiva.com/collapsing-toolbar-layout/