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" />
Related
I'm looking for a way to make the LinearLayout containing two buttons be steady compared to the recyclerview. In particular i'm trying to place it like this but with one more button .
Here is my xml code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.a.TSport">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:layout_editor_absoluteX="-26dp"
tools:layout_editor_absoluteY="338dp">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<androidx.appcompat.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" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.078" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Button" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="56dp"
android:layout_height="62dp"
android:layout_gravity="right"
android:layout_marginLeft="200dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.929"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.942"
app:srcCompat="#drawable/ic_add_black_24dp" />
</LinearLayout>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
The problem comes when i have two buttons and i add some items : for each added item the linearlayout containing two buttons moves down until it disappear.
first, remove LinearLaypit and use ConstraintLayout.
it's easy
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_margin="16dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/floatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_margin="16dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_launcher_background" />
</androidx.constraintlayout.widget.ConstraintLayout>
but only LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
android:weightSum="10">
<com.google.android.material.appbar.AppBarLayout
android:layout_weight="0.75"
android:layout_height="0dp"
android:layout_width="match_parent" >
<androidx.appcompat.widget.Toolbar
android:background="?attr/colorPrimary"
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:layout_weight="8.25"
android:background="#android:color/transparent"
android:id="#+id/recyclerView"
android:layout_height="0dp"
android:layout_width="match_parent"
android:padding="4dp"
android:scrollbars="vertical" />
<LinearLayout
android:layout_weight="1"
android:layout_height="0dp"
android:layout_width="match_parent"
android:weightSum="10"
android:orientation="horizontal">
<Button
android:id="#+id/button"
android:layout_gravity="left"
android:layout_weight="3"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:text="Button" />
<View
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="10dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:clickable="true"
android:id="#+id/floatingActionButton"
android:layout_gravity="right"
android:layout_height="62dp"
android:layout_width="0dp"
android:layout_weight="2"/>
</LinearLayout>
</LinearLayout>
If you want to place both buttons at bottom than you have to make 2 changes
First you need to add android:layout_weight="1" and second replace android:layout_height="wrap_content" with android:layout_height="0dp" for your RecyclerView. This will give full size to your recyclerview until bottom views are visible.
You complete recyclerview should look like this:
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/transparent"
android:padding="4dp"
android:scrollbars="vertical"
/>
NOTE: Here from RecyclerView I have removed constraint, because its parent is LinearLayout, so need to use constraint here.
OPTIONAL: Also I notice that you have used ConstraintLayout and it has only 1 child LinearLayout and also LinearLayout has not any constraint given, So if ConstraintLayout has not required you should remove it and only use LinearLayout as parent.
I want to implement an app bar with a Recyclerview like the one in Gmail and Play store as below:
I tried using AppBarLayout inside a CoordinatorLayout but the App Bar is above the Recyclerview
However, I want it to be like an overlay so if it is transparent or have some margin, the recyclerview content show beneath like this:
I tried putting the app bar in a Relative layout with the recyclerview, but it does not hide when I scroll down (always fixed on the top even when using scroll flags).
This is my XML code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".fragment.MainFragment"
android:background="#color/lightBackground">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="#+id/bottom_navigation"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/tab_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="#dimen/main_action_bar_size"
android:background="#color/white">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_scrollFlags="scroll|enterAlways|snap">
<FrameLayout
android:id="#+id/appBarDrawer"
android:layout_width="#dimen/main_action_bar_size"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_menu" />
</FrameLayout>
<FrameLayout
android:id="#+id/appBarSearch"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="#+id/appBarDrawer"
app:layout_constraintRight_toLeftOf="#+id/appBarVoiceSearch"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:maxLines="2"
android:text="#string/search"
android:textColor="#color/lightGrayFont"
android:textSize="15sp" />
</FrameLayout>
<FrameLayout
android:id="#+id/appBarVoiceSearch"
android:layout_width="#dimen/main_action_bar_size"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toLeftOf="#+id/appBarMore"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_mic_none" />
</FrameLayout>
<FrameLayout
android:id="#+id/appBarMore"
android:layout_width="#dimen/main_action_bar_size"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_more" />
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.AppBarLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:menu="#menu/menu_bottom_navigation"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
I also what it to snap when it hides or shows without affecting the recyclerview scroll like the one in Play Store (seems to be in a deferent layer).
If you look, it's actually a cardview being used as the app bar layout. Something like this should get you what you're looking for:
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
android:layout_margin="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
</android.support.v7.widget.CardView>
(sorry i don't remember android x libraries off the top of my head, for reference here is the link to find them https://developer.android.com/jetpack/androidx/migrate/artifact-mappings)
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
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"
The ActionBar overlaps the TextView. Why? The constraints are correct imho. It works fine with RelativeLayout. I mainly use two ConstraintLayout to add some padding which should not affect the ActionBar.
Code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffffff"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="20dp"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
android:layout_marginTop="10dp"
android:paddingRight="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/xxxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xxxxxxx"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#000000"
app:layout_constraintTop_toTopOf="#+id/constraintLayout2"
app:layout_constraintStart_toStartOf="#+id/constraintLayout2"/>
change your 2nd ConstraintLayout height to wrap_content or if you want full height then give bottom constraint and height to 0dp like below
<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.appcompat.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#ffffff"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/constraintLayout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintTop_toBottomOf="#+id/my_toolbar"
app:layout_constraintBottom_toBottomOf="parent">
<TextView
android:id="#+id/xxxx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="xxxxxxx"
android:textAppearance="?android:textAppearanceMedium"
android:textColor="#000000"
app:layout_constraintStart_toStartOf="#+id/constraintLayout2"
app:layout_constraintTop_toTopOf="#+id/constraintLayout2" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>