I added collapsing toolbar in my app but now it only collapses when a user scrolls the image view inside the CollapsingToolbarLayout. How can collapse the toolbar when a user scrolls from anywhere within the view?
this 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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.ProfileActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.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">
<ImageView
android:id="#+id/profile_image"
android:layout_width="match_parent"
android:layout_height="400dp"
android:scaleType="centerCrop"
android:src="#drawable/default_avatar"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/profile_contents"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom"
android:layout_gravity="bottom"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</android.support.design.widget.CoordinatorLayout>
These are the contents of profile_contents.xml for now because I am going to add more items in future.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="#+id/profile_displayName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="loading name..."
android:textColor="#color/black"
android:textSize="24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/profile_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="loading status..."
android:textColor="#color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_displayName" />
<Button
android:id="#+id/profile_send_req_btn"
android:layout_width="182dp"
android:layout_height="38dp"
android:layout_marginTop="44dp"
android:background="#drawable/profile_button_bg"
android:padding="10dp"
android:text="#string/send_friend_request"
android:textAllCaps="false"
android:textColor="#color/white"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/profile_status" />
</android.support.constraint.ConstraintLayout>
Put your included layout inside NestedScrollView view, since the ConstraintLayout is not a scrollable view.
Like this:
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:layout_anchor="#+id/app_bar"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/profile_contents"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</androidx.core.widget.NestedScrollView>
Don't forget to put the app:layout_behavior in the NestedScrollView
Add this in the profile_contents layout's root view
app:layout_behavior="#string/appbar_scrolling_view_behavior"
We need to define an association between the AppBarLayout and the View that will be scrolled. Add an app:layout_behavior to a RecyclerView or any other View capable of nested scrolling such as NestedScrollView. The support library contains a special string resource #string/appbar_scrolling_view_behavior that maps to AppBarLayout.ScrollingViewBehavior, which is used to notify the AppBarLayout when scroll events occur on this particular view. The behavior must be established on the view that triggers the event.
The above text is from here https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout
Related
I am trying to create an app with two toolbars on top and a specific collapsing/expanding behaviour on scrolling. See the mockup to get a deeper understanding of what I'm trying to achieve:
I already found this StackOverflow question that is trying to achieve for about the same, and the response is hinting towards using a CollapsingToolbarLayout and just using another <Toolbar /> instead of the usual <ImageView />, but I tried around and could not get any close to the desired result.
My current xml layout:
<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:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="01/01/1999"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/placeholder"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the corresponding activity code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
I am using a NoActionBar theme. If I run this configuration, there is just one Toolbar displayed, nothing can be seen from the second Toolbar or the CollapsingToolbarLayout.
Huge thanks to anyone who is trying to help.
You could wrap the CoordinatorLayout into a another ViewGroup and add the main Toolbar into this new root layout instead. This will avoid the confusion of the app:layout_collapseMode="pin" to the main toolbar.
So now the entire layout hierarchy would be:
<ConstraintLayout>
<AppBarLayout>
<Toolbar> <<<<<<<<<<<<<<<<<<< main toolbar
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<Toolbar> <<<<<<<<<<<<<<<<<<< second toolbar
<NestedScrollView>
<TextView>
Then to fix the collapsing behavior like you want you need to change the scrolling flags of the CollapsingToolbarLayout to "scroll|enterAlways" instead of "scroll|exitUntilCollapsed". This will make the toolBar always enter off the top screen.
And build the layout of the second Toolbar with a normal ViewGroup inside of it; here I'm using ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<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">
<com.google.android.material.appbar.AppBarLayout xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:visibility="visible">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/white"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Title"
app:titleTextColor="#color/black" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appbar_layout">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F2ECF6"
android:paddingHorizontal="32dp"
app:layout_collapseMode="parallax">
<ImageButton
android:id="#+id/left_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_back_ios_24"
app:tint="#color/black" />
<ImageButton
android:id="#+id/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_forward_ios_24"
app:tint="#color/black" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="01/01/1999"
android:textColor="#color/black"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right_arrow"
app:layout_constraintStart_toEndOf="#+id/left_arrow"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/placeholder"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I've seen answers from this thread, but I'm wondering if it's possible to do this in XML by adding a button component.
Earlier I had a button wrapped within a CardView, which will float as the users scrolling the RecyclerView, so I had a lot of code associated with this button. But now I need to make this button stay at the bottom of the screen instead of floating. I've tried to add another level of LinearLayout or even change the CoordinatorLayout to LinearLayout, but none of these worked.
Here's my original XML:
<androidx.coordinatorlayout.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/ui_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.pages.MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
app:popupTheme="#style/AppTheme.PopupOverlay">
<include layout="#layout/common_toolbar_with_buttons" />
</androidx.appcompat.widget.Toolbar>
<android.common.view.indicator.LoadingIndicatorBar
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="visible" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/ui_attribute_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="#dimen/item_input_attribute_list"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<androidx.cardview.widget.CardView
android:id="#+id/ui_button_next_container"
android:layout_width="match_parent"
android:layout_height="#dimen/button_height_normal"
android:layout_gravity="center_horizontal|bottom"
android:layout_margin="24dp"
android:layout_marginBottom="8dp"
app:cardBackgroundColor="#color/colorAccent_Light"
app:cardElevation="12dp"
app:cardPreventCornerOverlap="true"
app:layout_dodgeInsetEdges="bottom">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/pointed_gradient" />
<android.common.view.tint.TintFancyButton
android:id="#+id/ui_button_next"
style="#style/TransparentButtonStyle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/msg_save_current_input"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold"
app:fb_borderColor="#2fffffff"
app:fb_borderWidth="2dp"
app:fb_defaultColor="#color/transparent"
app:fb_focusColor="#color/colorAccent_Light"
app:fb_textColor="#FFF" />
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Take a constraint layout outside of your recycler view and button and then make the button app:layout_constraintTop_toBottomOf="#id/recyclerview" in xml. Or you can also use linear layout in place of constraint layout, and set android:orientation="vertical".
This is the code.
<androidx.coordinatorlayout.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/ui_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="20dp"
>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/Textsize25"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
>
</androidx.appcompat.widget.Toolbar>
<android.common.view.indicator.LoadingIndicatorBar
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="visible" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/ui_attribute_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:paddingBottom="25dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/ui_button_next_container"
app:layout_constraintVertical_bias="0.05"/>
<androidx.cardview.widget.CardView
android:id="#+id/ui_button_next_container"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center_horizontal|bottom"
android:layout_margin="24dp"
android:layout_marginBottom="8dp"
app:cardElevation="12dp"
app:cardPreventCornerOverlap="true"
app:layout_dodgeInsetEdges="bottom"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="1">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button
android:id="#+id/ui_button_next"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/msg_save_current_input"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold"
/>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
I would recommend using a constraint layout to position all of your views.
In order to get the RecyclerView to fill the space between the top View and Button View. You'll need to use a match constraint for the RecyclerView height. To make the RecyclerView match the constraint height set the layout_height to 0dp.
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/ui_attribute_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:paddingBottom="25dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toTopOf="#+id/ui_button_next_container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.05" />
I am trying to achieve this effect (like medium android app toolbar), I want to hide a custom view, unfortunately I am not able to do. This is my layout.
https://i.ibb.co/KNp1zfV/2019-05-27-14-23-47.gif
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/filtersContainerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/left_rectangle_edge_view_size"
android:background="#drawable/custom_rectangle_ripple_background"
android:paddingBottom="#dimen/default_padding_extra_small"
android:orientation="vertical"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/resultMessageTextView"
style="#style/DefaultTextStyle.Black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/separator_gray"
android:drawableEnd="#drawable/ic_pencil_edit"
android:drawablePadding="#dimen/default_margin_small"
android:paddingStart="#dimen/default_margin_medium"
android:paddingTop="#dimen/default_padding"
android:paddingEnd="#dimen/default_padding_large"
android:paddingBottom="#dimen/default_padding"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Searching for family medicine near Montevideo" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/filtersHeaderTextView"
style="#style/DefaultTextStyle.Black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin_medium"
android:layout_marginTop="#dimen/default_margin_extra_small"
android:text="#string/filters"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/resultMessageTextView" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/expandCollapseFilterOptionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?actionBarItemBackground"
android:padding="#dimen/default_margin_small"
app:layout_constraintBottom_toBottomOf="#+id/filtersHeaderTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/filtersHeaderTextView"
android:layout_marginEnd="#dimen/default_margin"
app:srcCompat="#drawable/ic_add"
app:tint="#color/colorPrimaryDark" />
<LinearLayout
android:id="#+id/filtersButtonsLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/default_margin_small"
android:orientation="horizontal"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/filtersHeaderTextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintEnd_toStartOf="#+id/expandCollapseFilterOptionsImageView"
app:layout_constraintTop_toTopOf="#+id/filtersHeaderTextView"
tools:visibility="visible">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/applyFilterButton"
style="#style/SmallTextStyle.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="#dimen/default_padding_small"
android:text="#string/apply"
android:textColor="#drawable/text_selector_primary_dark" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/clearFiltersButton"
style="#style/SmallTextStyle.Bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/default_margin_small"
android:padding="#dimen/default_padding_small"
android:text="#string/clear"
android:textColor="#drawable/text_selector_primary_dark" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/topSeparatorView"
android:layout_width="match_parent"
android:layout_height="#dimen/separator_height"
android:layout_marginStart="#dimen/left_rectangle_edge_view_size"
android:background="#color/separator_gray"
app:layout_scrollFlags="snap" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/resultContainerScrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:overScrollMode="never"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/providersResultRecyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/providers_result_margin_start"
android:overScrollMode="never" />
</LinearLayout>
</androidx.core.widget.NestedScrollView>
This thread on medium might serve exactly what you need, and here's another one if you want to dig deeper in the custom behaviors
Now to the answer:
1. main.xml
<?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"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
<!-- call the content xml file-->
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
1. content_main.xml
<android.support.v4.widget.NestedScrollView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/textview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="hello world"/>
<!-- your content goes here-->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
3. Important note
content_main.xml use : android.support.v4.widget.NestedScrollView instead of ScrollView.
use app:layout_behavior="#string/appbar_scrolling_view_behavior" inside android.support.v4.widget.NestedScrollView like below.
if and only if you migrated to AndroidX make sure to change the design support library, if you still using android.support keep everything as it is.
UPDATE
Try the following changes:
1. add this to your ToolBar
app:layout_scrollFlags="scroll|enterAlways"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
2. add this to your NestedScrollLayout
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
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.
I faced a problem with CoordinatorLayout and AppBarLayot. I have windowTranslucentStatus = true in my style resource, and android:fitsSystemWindows="true" in top layout (CoordinatorLayout) of an Activity. But there is a problem: when I scroll donw, Toolbar goes up(that's OK), and Toolbar title stays visible through StatusBar.
Start state
End state. Here you can see text below StatusBar
Xml:
<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/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.wldev.lawbite.enquerie.ChooseRecepientActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
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="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="#string/activity_chose_recipient_title"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="0dp"
app:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:alpha="0.9"
android:contentDescription="#string/search_icon_cd"
android:padding="14dp"
android:src="#drawable/ic_search"
android:tint="#color/black" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginTop="16dp"
android:background="#null"
android:hint="#string/find_by_name_hint"
android:textColor="#color/black"
android:textColorHint="#color/gray_50_transparent"
android:textSize="14sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="2dp"
android:visibility="visible"
app:dataSource="#{recipients}"
app:layoutManager="LinearLayoutManager"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
One more thing
If I wrap some layout around CoordinatorLayout all will be OK and Toolbar will hide properly.
Add this to your AppBarLayout
android:fitsSystemWindows="true
And, it will work.