Clash Royale CLAN TAG#URR8PPP

How to reduce the size of the AppBarLayout when scrolling in RecyclerView?

I have proposed the design of the main screen of my application with an AppBarLayout of 300dp that will contain the common Toolbar to the entire application and two sections with a set of actions.

The other area of the screen will be reserved for a list implemented through a view of the type RecyclerView. My goal is to ensure that when the user scrolls down in the list the AppBar will be reduced by 100dp (the last section will disappear smoothly) and also the user image of the application will be hidden and the action menu will appear centered.

Next I expose the state of beginning of the main screen:

The root element of the screen is a CoordinatorLayout that will contain an AppBarLayout and a RecyclerView with the layout_behavior attribute set to @string/appbar_scrolling_view_behavior

<android.support.design.widget.CoordinatorLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".ui.fragment.home.HomeFragment">

<!-- App Bar Layout -->
<android.support.design.widget.AppBarLayout
android:id="@+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">


<!-- Include Toolbar -->
<include
android:id="@+id/include"
layout="@layout/app_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp" />


<!-- User Actions Bar -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
style="@style/CommonSection">

<!-- User Profile Image -->
<ImageView
android:id="@+id/userProfileImage"
android:layout_marginStart="10dp"
android:layout_width="70dp"
android:layout_height="70dp"/>


<!-- Actions -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_weight="1"
android:padding="5dp"
android:gravity="center">


<!-- Results -->
<include layout="@layout/results_menu_item_layout" />
<!-- Alerts -->
<include layout="@layout/alerts_menu_item_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"/>
<!-- Children -->
<include layout="@layout/children_menu_item_layout" />

</LinearLayout>


</LinearLayout>


<!-- Children -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
style="@style/CommonSection">

<HorizontalScrollView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal">

<!-- First Child Image -->
<ImageView
android:id="@+id/firstChildImage"
android:layout_marginStart="15dp"
android:layout_width="70dp"
android:layout_height="70dp"/>


<!-- Second Child Image -->
<ImageView
android:id="@+id/secondChildImage"
android:layout_marginStart="15dp"
android:layout_width="70dp"
android:layout_height="70dp"/>


<!-- Third Child Image -->
<ImageView
android:id="@+id/thirdChildImage"
android:layout_marginStart="15dp"
android:layout_width="70dp"
android:layout_height="70dp"/>

</LinearLayout>

</HorizontalScrollView>


<ImageButton
android:id="@+id/addChildBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="5dp"
android:paddingEnd="5dp"
android:background="@android:color/transparent"
android:src="@drawable/plus_circle_solid_white"/>

</LinearLayout>


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


<!-- Alerts List -->
<android.support.v7.widget.RecyclerView
android:id="@+id/alertsList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/cyanBrilliant"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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


I want to get the following result, but I'm not sure how to properly configure the scroll flag:

Could someone help me achieve this result? Thank you.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.