Hiding AppBarLayout on RecyclerView Scroll using MaterialDesignComponents - android

I'm trying to collapse the AppBarLayout when I scroll up the RecyclerView. I'm trying this using Material Design Components.
So here's my code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.MaterialToolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:id="#+id/toolbar"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.google.android.material.textview.MaterialTextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18sp"
android:text="#string/app_name"/>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/component_recycler_view"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="24dp"
android:layout_gravity="bottom|end"
android:contentDescription="#string/extended_fab_content_desc"
android:text="#string/extended_fab_label"
app:icon="#drawable/ic_plus_24dp"
app:layout_anchor="#id/component_recycler_view"
app:layout_anchorGravity="bottom|right|end"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginEnd="24dp"
android:layout_marginBottom="24dp"
app:layout_constraintBottom_toBottomOf="#id/component_recycler_view"/>
</androidx.constraintlayout.widget.ConstraintLayout>
When I scroll up on the recyclerview, it does scroll up but the appbarlayout does not hide itself. Moreover the topmost item of the RecyclerView is partially hidden behind the AppBarLayout.

You can use CoordinatorLayout to achieve a CollapsingToolbarLayout, something like this:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#id/appbar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="bottom"
app:expandedTitleMarginEnd="16dp"
app:expandedTitleMarginStart="16dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="#string/choose_hero">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop" />
<androidx.appcompat.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" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I am using this type of layout and my app bar is collapsing/expanding without hiding any recyclerView items.

Related

AppBar scrolling behavior doesn't work properly

Screencast to understand the problem - mp4
This screenshot video explains exactly what's happened. The scrolling behavior is not totally correct, because the scroll should to stop at the end of the last graphical element in the global view.
Here you are the layout used:
<androidx.constraintlayout.widget.ConstraintLayout 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">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="1dp"
android:theme="#style/ActionBarThemeOverlay"
app:elevation="#dimen/toolbar_elevation">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextColor="#color/theme_primary"
app:contentScrim="#android:color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:scrimAnimationDuration="400">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/images_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar_actionbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:subtitleTextAppearance="#style/DarkActionBar.SubtitleText"
app:titleTextAppearance="#style/DarkActionBar.TitleText" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/child_form_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.azeoo.ui.widget.DefaultShimmerPageView
android:id="#+id/default_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.myapp.ui.widget.BottomBarButtonsView
android:id="#+id/bottom_bar_buttons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:visibility="gone"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Add margin to title in collapsed Collapsing Toolbar Layout

I am trying to add a margin to where my Title in the collapsed state starts.
I have a Button which overlays where the title is starting:
I have tried using a style with left margin in app:collapsedTitleTextAppearance but that is not working either. Following is my .xml file. ( Note, the back button is a text view and not an action bar.) The title is being added programmatically.
<style name ="collapsingToolbarTextCollapsed">
<item name="android:layout_marginLeft">42dp</item>
<item name="android:paddingLeft">42dp</item>
<item name="paddingStart">42dp</item>
</style>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<TextView
android:id="#+id/profile_main_expanded_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:elevation="7dp"
android:background="#drawable/back_button"
android:foreground="#drawable/back_button" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/collapsingToolbarTextCollapsed"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="profile picture"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="#drawable/placeholder_user"
app:layout_collapseMode="parallax"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="4dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
I did the following to rectify the situation :
Remove android:fitsSystemWindows="true" from app bar layout and collapsing toolbar layout
Add paddingLeft to the Toolbar
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<TextView
android:id="#+id/profile_main_expanded_back_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:elevation="7dp"
android:background="#drawable/back_button"
android:foreground="#drawable/back_button" />
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="left"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="profile picture"
android:scaleType="centerCrop"
android:src="#drawable/placeholder_user"
app:layout_collapseMode="parallax"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:paddingLeft="42dp"
android:layout_marginBottom="4dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
You are not following a proper pattern. Coordinator Layout always has first child AppBarLayout and second child Any of ScrollView/NestedScrollView/RecyclerView with behaviour.
Don't use a separate view for back button, you can enable back button of toolbar using the below code
toolbar = (Toolbar) findViewById(R.id.htab_toolbar);
setSupportActionBar(toolbar);
//this line shows back button
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
and remove your text, which you using to show back button like below.
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/collapsingToolbarTextCollapsed"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/profile_avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="profile picture"
android:fitsSystemWindows="true"
android:scaleType="fitXY"
android:src="#drawable/placeholder_user"
app:layout_collapseMode="parallax"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="4dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>

How to scroll a Recyclerview which is inside multi-level nested fragment and Viewpager?

I am trying to hide a toolbar when i scroll up the recyclerview . This recycler view is inside a Fragment (named Fragment 2) . This fragment gets re-used in a Viewpager with 3 Tabs(re-using the same fragment) which is in a Fragment(named Fragment 1) . Now this Fragment 1 is loaded in a Framelayout which is hosted in an Activity
EDIT 1: Even the recycler view is not scrolling in this case. The last items never show up. I cannot scroll to the end of the last items
I tried using coordinator layouts and Nested scroll view but nothing gave the results.
Activity Main
<?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"
android:background="?attr/MainBG"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".iccrankings.ICCRankingNew">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="?attr/cardBGC">
<Spinner
android:id="#+id/spinner_icc_categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:dropDownWidth="match_parent"
android:overlapAnchor="false"
android:spinnerMode="dropdown"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</Spinner>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:id="#+id/main_container_of_ranks_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.design.widget.CoordinatorLayout>
</android.support.design.widget.CoordinatorLayout>
Fragment 1
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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=".iccrankings.fragments.RankViewPagerContainerFragment">
<android.support.design.widget.TabLayout
android:id="#+id/tabs_all_matches"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:tabBackground="#drawable/tab_color_selector"
app:tabTextColor="#color/colorAccent">
<android.support.design.widget.TabItem
android:id="#+id/tabItem1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/odi_tab" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test_tab" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/t20_tab" />
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/categoryDataContainerPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabs_all_matches" />
</android.support.constraint.ConstraintLayout>
Fragment 2
<?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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true"
tools:context=".iccrankings.fragments.IccHumanFragment">
<android.support.v7.widget.RecyclerView
android:id="#+id/icc_human_recycler"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
I am attaching an image which illustrates the nested views and desired results which describes the composition of the views and the desired results.
Thanks in advance
You need to add your activities toolbar inside CollapsingToolbarLayout and set required flags for scrolling behavior.
See this page for more details :
https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout
You should use CollapsingToolbarLayout right in your AppBarLayout.
It should look like this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
app:contentScrim="#android:color/transparent"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="?attr/cardBGC">
<Spinner
android:id="#+id/spinner_icc_categories"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:dropDownWidth="match_parent"
android:overlapAnchor="false"
android:spinnerMode="dropdown"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</Spinner>
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
you can achieve that without Collapsing Toolbar, for example you can make your toolbar hide if you scroll down with some code like below:
<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:background="#ddd"
tools:context=".ControllerAdding.ControllerPickerActivity"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#df1b39"
app:contentInsetStart="0dp"
app:titleTextColor="#color/pureWhite"
style="#style/RobotoBoldTextAppearance"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/textView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Products List"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
be sure to add app:layout_scrollFlags="scroll|enterAlways" in your Toolbar because if you don't and then you add a RecyclerView here, that Recycler won't be Scrollable.
this is a tested code that i used for my own app, so if you see some styling or ... its because of that.

using floating action button in CoordinatorLayout with behavior_overlapTop

I'm trying to add a floating action button in a CoordinatorLayout with a NestedScrollView which has 56dp of app:behavior_overlapTop.
my fab's layout_anchor is set on Appbar and it hides fine when CollapsingToolbarLayout collapsed, But because of overlapTop set on NestedScrollView, it is in a bad position.. see image below:
Here is my XML:
<com.google.android.material.appbar.AppBarLayout
android:paddingTop="#dimen/status_margin_top"
android:id="#+id/app_bar"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--app:contentScrim="#color/red"-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_marginTop="#dimen/behind_status_margin_top"
android:clipToPadding="false"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="right|bottom"
app:expandedTitleMargin="16dp"
app:expandedTitleMarginBottom="112dp"
app:collapsedTitleGravity="center_vertical|right"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
app:layout_constraintDimensionRatio="H,11:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#drawable/appbar_gradient"
android:id="#+id/profile_pic"
app:srcCompat="#drawable/profile_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
app:contentInsetRight="56dp"
android:id="#+id/toolbar"
app:titleMarginTop="#dimen/status_margin_top"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_marginTop="#dimen/status_margin_top"
app:layout_collapseMode="pin"
android:layout_gravity="right"
app:srcCompat="#drawable/back"
android:scaleType="center"
android:layout_width="56dp"
android:layout_height="56dp" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="56dp">
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/light_white">
<!-- Content-->
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="#id/nestedscrollview"
app:srcCompat="#drawable/camera"
app:elevation="24dp"
app:fabSize="normal"
android:layout_marginStart="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
try to trigger Appbar Collapse event using this and hide() fab when it Collapsed!

Display a loading view in the center of a recyclerview

I have a layout that uses a coordinator layout as the root that has a collapsible toolbar and a header view. Underneath I have a recyclerview where I display a list of items.
I have having a problem displaying the loadingView in the center of the recyclerview. I have been trying to use the constraint layout without success. So if the header is collapsed or expanded it should alway display in the center of the recyclerview and not the actual screen.
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/search_result_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="left"
app:contentScrim="#color/toolbar_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<include
android:id="#+id/header"
layout="#layout/list_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3" />
<cToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v7.widget.RecyclerView
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomOverlayLoadingView
android:id="#+id/loadingView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/contentView"
app:layout_constraintTop_toTopOf="#id/contentView"
android:visibility="gone"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>
</android.support.design.widget.CoordinatorLayout>
Update:
This is the image I get when I update with your answer. As you can see the image displays directly under the header. However, I would like it to be displayed in the center of the recyclerview.
Try this one...:)
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/search_result_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleGravity="left"
app:contentScrim="#color/toolbar_color"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<include
android:id="#+id/header"
layout="#layout/list_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3" />
<cToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/appBarLayout">
<android.support.v7.widget.RecyclerView
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<CustomOverlayLoadingView
android:id="#+id/loadingView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone"
tools:visibility="visible" />
</RelativeLayout>
</RelativeLayout>
Setting the proper constraints for the RecyclerView should help here. This is how the ConstraintLayout for the main content should look like:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/contentView"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<CustomOverlayLoadingView
android:id="#+id/loadingView"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="#id/contentView"
app:layout_constraintEnd_toEndOf="#id/contentView"
app:layout_constraintStart_toStartOf="#id/contentView"
app:layout_constraintTop_toTopOf="#id/contentView"
android:visibility="gone"
tools:visibility="visible" />
</android.support.constraint.ConstraintLayout>

Categories

Resources