I have a layout like the following:
(Toolbar,
Header View, Text View, RecyclerView)
I need the header to be collapsed when I scrolling recyclerview's items.
So that the view "Choose item" and recyclerview left on the screen.
I saw examples when toolbar is being collapsed, but I need toolbar to be present always.
Which layouts/behavior should I use to get this work?
You can achieve it by having this layout:
<android.support.design.widget.CoordinatorLayout
xmlns: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.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- HEADER -->
<RelativeLayout
...
app:layout_collapseMode="parallax">
.....
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<!-- IF YOU WANT TO KEEP "Choose Item" always on top of the RecyclerView, put this TextView here
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="choose item" />
-->
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
You pin your toolbar by having the app:layout_collapseMode="pin" property set. You make RecyclerView properly scrollable by setting app:layout_behavior="#string/appbar_scrolling_view_behavior" and that's pretty much it.
NB! Position of "Choose item" TextView depends on the particular behaviour you want to achieve:
you can include it as a first element of your RecyclerView's Adapter to scroll it away, once user start scrolling through the RecyclerView;
you can add it into AppBarLayout so it will always stick on top of the RecyclerView, whenever you scroll it or not;
You can read more here Android Design Support Library and here Design Support Library (III): Coordinator Layout
I hope, it helps!
The below code is working but not smooth scroll compare reqular recyclerview I thought.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<com.sliderbanner.views.BannerSlider
android:id="#+id/banner_slider1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:animateIndicators="true"
app:defaultIndicators="dash"
app:interval="5000"
app:loopSlides="true"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
<ImageView
android:id="#+id/image_github"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_gravity="right"
android:layout_marginRight="8dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fontFamily="sans-serif-bold"
android:gravity="center_vertical|left"
android:text="Banner Slider"
android:textColor="#android:color/black"
android:textSize="18sp" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
Related
I've a big doubt, how can I make this animation (see it below) in the Android?
What I've tried before?
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
tools:context=".MainActivity">
<!--THIS TOOLBAR NEEDS TO BE FIXED ON THE TOP-->
<!--TO DONT TO BE SCROLLED-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_fixed_top"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:toolbarId="#+id/toolbar"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
<!--CONTENT OF HEADER BELOW OF TOOLBAR-->
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Contacts"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Amount"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="675.353,45"/>
<!--CONTENT OF WHITE VIEW HERE-->
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--CONTENT OF WHITE VIEW HERE-->
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
But the layout breaks, because the second Toolbar, appears with a large text, and it gets over my Header at the moment it's scrolled, and even then, when I do the scroll effect on the page, it looks like I've been placed all within a ScrollView and not with an effect and delay as it appears in the image above.
NOTE: The scroll does not have the effect of "locking" the button
as it is in a time of the image shown, is that I re-animated the
animation to show and I'm not that good, so the scroll happens
naturally, but with delay in this piece that "lock"
I have an activity with a toolbar and a recyclerview. On top of the recyclerview I have a panel that I want to be scrollable (to move along with the scroll of the recyclerview).
I want this panel to scroll behind the toolbar, so when the scrolling happens, the toolbar stays in place and the panel slides behind it.
Kind of what they do here:
https://i.imgur.com/fQA6bPH.gif
But I cant find the right combination of options with CollapsingToolbarLayout to achieve this effect:
<android.support.design.widget.CoordinatorLayout 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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="none"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="none"
app:layout_collapseParallaxMultiplier="0.5">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
To simplify, I've changed the structure to this:
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
app:layout_collapseMode="pin"
android:minHeight="?android:attr/actionBarSize" />
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar"/>
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
It does exactly the same when we add an ImageView inside the CollapsingToolbarLayout like this with parallax flag of app:layout_collapseMode:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="pin" />
<ImageView
android:src="#drawable/cheese_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" //Here is the solution
android:minHeight="100dp" />
</android.support.design.widget.CollapsingToolbarLayout>
So you may want to add :
app:layout_collapseMode="parallax"
To your view (LinearLayout) or anything inside.
Read: https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout#creating-parallax-animations
I solved this problem by moving Toolbar outside of AppBarLayout. Then in code setup Toolbar as SupportActionBar.
<android.support.design.widget.CoordinatorLayout
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:gravity="center_horizontal"
android:orientation="vertical"
tools:context=".ui.profile.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/profile_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/topbar_gradient"
android:theme="#style/AppTheme.Dark">
<android.support.design.widget.CollapsingToolbarLayout
android:orientation="vertical"
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:layout_marginTop="?actionBarSize"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_collapseMode="pin">
...
</LinearLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
(...)
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize" />
</android.support.design.widget.CoordinatorLayout>
You need to change this to get desired effect:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/detail_collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
app:contentScrim="?colorPrimary"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
app:titleEnabled="false">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?actionBarSize"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.5">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/bar" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#drawable/topbar_gradient"
android:minHeight="?android:attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Your change was in CollapsingToolbar, by using these three attributes "scroll|enterAlwaysCollapsed|exitUntilCollapsed" together will change that effect.
Description :
app:layout_collapseMode="" is attribute used to collapse/pin child views of CollapsingToolbarLayout.
There are three attributes to this :
none : No effects at all.
pin : Pin that view at CollapsingToolbar when scrolled.
parallax : Hide view parallel with CollapsingToolbar hiding.
so if you're having Toolbar pinned to CollapsingToolbarLayout then add this property pin (which will pin it to Collapsing toolbar when scrolled) and parallax will animate it until collapsed.
Let's see
How does scrolling actually works using these 4 attributes in
app:layout_scrollFlags=""
scroll : The view will be scroll in direct relation to scroll
events.(Necessary, otherwise any other attribute won't work)
enterAlways : When entering (scrolling on screen) the view will
scroll on any downwards scroll event, regardless of whether the
scrolling view is also scrolling.
enterAlwaysCollapsed : An additional flag for 'enterAlways' which
modifies the returning view to only initially scroll back to it's
collapsed height.
exitUntilCollapsed : When exiting (scrolling off screen) the view
will be scrolled until it is 'collapsed'.
snap : Upon a scroll ending, if the view is only partially visible
then it will be snapped and scrolled to it's closest edge.
More details from here & demo here
Findout more from here : link
I have a detail activity that show the details of a game in my app. The layout is composed mainly by a CollapsingToolbarLayout with the game cover and a NestedScrollView containing the details. The layout is like this:
And scrolled like this:
The XML files for the layout are:
<android.support.design.widget.CoordinatorLayout 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:id="#+id/game_detail_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.GameDetailActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/toolbar_cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#string/game_cover"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/scrim" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_game_detail" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#drawable/ic_favorite_border_black_24dp" />
</android.support.design.widget.CoordinatorLayout>
And the content_game_detail is:
<android.support.v4.widget.NestedScrollView 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:id="#+id/game_detail_scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".activities.GameDetailActivity"
tools:showIn="#layout/activity_game_detail">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- There are 11 TextViews here for all the info -->
<android.support.v7.widget.RecyclerView
android:id="#+id/videos_recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/simple_margin"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/videos_lable" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
The problem is: when the summary is very long and there are videos to add items to the RecyclerView, the layout start a little scrolled below the expanded toolbar like this:
I need to scroll the view back down to see the top of the information. Testing, I narrowed down the problem to the RecyclerView. When I remove it, this problem doesn't happen. It seems that when the items are added to the RecyclerView, the layout scroll itself up to compensate, but I couldn't found why this happens (instead of just expand the view down) nor how to solve it. Does anyone have any idea?
My recyclerview's items are loaded dynamically. The bottom sheet UI is a small music player. I want to show the recyclerview above the music player UI. But currently, the music player UI is hiding the last elements of recyclerview. The music player's ui is hidden/shown dynamically. Can you please show me how the recyclerview's elements can all be shown without being obstructed by the bottomsheet UI(music player)?
Here is my layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="200dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:transitionName="#string/transition_album_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<FrameLayout
android:id="#+id/bottom_ui_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<include layout="#layout/music_player_ui" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Just set paddingBottom and clipToPadding="false" to the recyclerView
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="your_music_player_ui_height" />
Try setting the height of the RecyclerView to "0dip" and if using a ConstraintLayout, constrain the RecyclerView to the top and bottom of the parent view.
You can fix this issue by putting the recycler view inside the frame layout.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical" />
</FrameLayout>
I'm working on android application just for learning purposes an in the app I have a Relative layout who has another linear layout in it and a RecyclerView. The RecyclerView is there to show a list of friends for the particular user and the Linear layout is to give an option to the user to click on it and to be redirected to another activity where he can add new friends. This is the .xml file.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/addFriendLayout">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/add_new_friend"
android:gravity="center"
android:textSize="24sp"
android:textStyle="bold"
android:layout_margin="16dp"
android:textColor="#color/addNewFriendTextColor"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/friendsRecyclerView"
android:layout_below="#+id/addFriendLayout"/>
</RelativeLayout>
What I want to do?
-When the user scroll up I want that Linear layout to hide behind the toolbar and then when user scroll down to collapse and become visible.
This is one similar case like mine but I didn't understand how to do it.
Stack Overflow link
check this code.. I hope this may help you
<android.support.design.widget.CoordinatorLayout
xmlns: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:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="44dp"
app:expandedTitleMarginStart="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="20dp">
<!--your design here-->
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
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>