As you can see above, when I scroll from 'Foliage Plants', the CollapsibleToolbar collapses as expected but when I drag from any product image, the page scrolls beneath AppBarLayout. Why is this happening and how to fix this? Ive tried setting VerticalRecyclerView.setNestedScrolling to false but that didn't work.
My home page layout is structured as follows
Structure of fragment located inside ViewPager
Layout of homepage
<?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:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_productdetail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_home_categoryfooter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="?attr/actionBarSize"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="1.0"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/search_background_list"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ProgressBar
android:id="#+id/progressbar_home_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<TextView
android:id="#+id/textview_home_status"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/search_background_list"
android:gravity="center"
android:text="No Results Found"
android:visibility="invisible"/>
<experttag.nurserylive.util.ui.widget.CustomViewPager
android:id="#+id/viewpager_home"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<fragment
android:id="#+id/fragment_search"
android:name="experttag.nurserylive.fragment.SearchFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Layout of the fragment inside ViewPager is as follows
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_productoverview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/windowBackground"/>
Layout of item inside #id/recyclerview_productoverview
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.constraint.ConstraintLayout
android:id="#+id/layout_section_header"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#ccc"
android:paddingBottom="10dp"
android:paddingTop="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<experttag.nurserylive.util.ui.widget.WhitneySemiBoldTextView
android:id="#+id/textview_item_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="0dp"
android:layout_marginEnd="16dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginStart="16dp"
android:layout_marginTop="0dp"
android:text="TOP FEATURED"
android:textColor="#000"
android:textSize="16sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/imageview_item_viewall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:tint="#000"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#drawable/ic_arrow_forward_black_24dp"/>
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview_item_section"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/layout_section_header"/>
</android.support.constraint.ConstraintLayout>
setNestedScrollingEnabled(false) on inner Horizontal RecyclerView solved this problem for me.
Related
I have a parent fragment with CollapsingToolbarLayout with some layouts.
then inside there is a tabLayout with two child fragments having recycer-View both are not scrolling together.
when user scroll-up and scroll-down inside child recycler-View parent fragment tabLayout and textView (move up and down)/hide and show.
How to solve this issue.
Parent Fragment with CollapsingToolbarLayout
<?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">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/edit"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="20dp"
android:background="#drawable/white_speed_search_bar_rounded_rectangle"
android:text="Search"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/edit">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_scrollFlags="scroll|enterAlways">
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<TextView
android:id="#+id/tv"
android:layout_width="wrap_content"
android:layout_height="16dp"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/app_bar">
</androidx.viewpager2.widget.ViewPager2>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Child Fragment 1&2
<LinearLayout
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:orientation="vertical"
>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
I have a problem and I need your help. I have created a RecyclerView and it was okay. Now I want to have a toolbar at the top with a black background and red text. The RecyclerView, which is basically a list of items, should start under the toolbar. I inserted a toolbar but unfortunately it is not displayed at all, altough in the blueprint of Android Studio it can be seen. However, on the normal layout screen you can't see it and also on the editor you can't see it. Here I have some screenshots:
Here is the XML layout file:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyDrinks">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="432dp"
android:layout_height="135dp"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp"
android:text="Test Toolbar" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:scrollbars="vertical"
android:background="#android:color/white"
></androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
Does anyone know what the problem might be? So basically the toolbar is not displayed at all and secondly the recyclerview list starts at the very top which I do not want. I'd appreciate every feedback.
The Recyclerview is overlapped with the Toolbar. Add this to the RecyclerView
android:layout_below="#+id/toolbar_mainActivity"
You XML should be like this:
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="432dp"
android:layout_height="135dp"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp"
android:text="Test Toolbar" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="4dp"
android:scrollbars="vertical"
android:layout_below="#+id/toolbar_mainActivity"
android:background="#android:color/white"
></androidx.recyclerview.widget.RecyclerView>
you can use LinearLayout or RelativeLayout
LinearLayout means you can align views one by one (vertically or horizontally).
RelativeLayout means based on relation of views from its parents and other views.
LinearLayout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center"
android:text="Test Toolbar"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:padding="4dp"
android:scrollbars="vertical" />
</LinearLayout>
or RelativeLayout:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center"
android:text="Test Toolbar"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp" />
</androidx.appcompat.widget.Toolbar>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/toolbar_mainActivity"
android:background="#android:color/white"
android:padding="4dp"
android:scrollbars="vertical" />
</RelativeLayout>
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_mainActivity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/black"
android:clipToPadding="true"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/holo_red_dark"
tools:ignore="MissingConstraints">
<TextView
android:id="#+id/textView_ToolBar_ActivityTest"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="8dp"
android:gravity="center"
android:text="Test Toolbar"
android:textColor="#android:color/holo_red_dark"
android:textSize="24sp" />
</androidx.appcompat.widget.Toolbar>
<ImageButton
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar_mainActivity"
android:padding="4dp"
android:scrollbars="vertical"
app:layout_constraintTop_toBottomOf="#id/toolbar_mainActivity" />
</androidx.constraintlayout.widget.ConstraintLayout>
Could I help you?
My Problem: The Content of the included RelativeLayout/RecyclerView does not stop before the buttons displayed at the bottom of the screen (see Fig. 1). Therefore the last Elements inside the RecyclerView are overlapped by the buttons after scrolling (see Fig. 2).
My current source code:
<?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:fitsSystemWindows="true"
tools:context="com.example.julian.brainy.ProjectListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:theme="#style/MyActionBarTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
app:expandedTitleGravity="bottom"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<ImageView
android:id="#+id/bgImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:contentDescription="#null"
android:minHeight="100dp"
android:scaleType="fitXY"
android:src="#drawable/bg5"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
<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/MyActionBarTheme.PopupOverlay"
app:titleTextColor="#color/brainyPrimary" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
layout="#layout/content_project_list" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_marginBottom="60dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:stateListAnimator="#null"
android:layout_marginTop="5dp"
android:background="#color/brainyPrimary"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:stateListAnimator="#null"
android:layout_alignParentEnd="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite" />
</android.support.design.widget.CoordinatorLayout>
and the included XML:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/projectOverviewCreateProject"
android:background="#android:color/transparent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".ProjectListActivity"
tools:showIn="#layout/activity_project_list">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/projectOverviewCreateProject"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clipToPadding="false"
android:scrollbars="vertical" />
</RelativeLayout>
I tried to use a ConstraintLayout, but it broke the AppBar.
Update: Now the included Layout exceeds the top of the AppBarLayout.
Source code changed:
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/content_project_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="5dp"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<Button
android:id="#+id/projectOverviewCreateProject"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimary"
android:stateListAnimator="#null"
android:text="#string/btn_create_project"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toTopOf="#id/btndirectlearning"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="5dp"
tools:layout_editor_absoluteY="459dp" />
<Button
android:id="#+id/btndirectlearning"
style="#style/Widget.AppCompat.Button.Colored"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#color/brainyPrimaryExperimental"
android:stateListAnimator="#null"
android:text="#string/btn_start_timer_project_list"
android:textColor="#color/brainyWhite"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintWidth_default="spread"
tools:layout_editor_absoluteX="222dp" />
</android.support.constraint.ConstraintLayout>
Put the and the two Buttons in a ConstraintLayout. Then, give the buttons the right rules so they will stay at the bottom of the layout, and modify the tag to look like this:
<include
android:layout_height="0dp"
android:layout_width="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="#id/projectOverviewCreateProject"
layout="#layout/content_project_list" />
EDIT:
to solve the issue related to the RecyclerView overlapping the appBar, just add this to your ConstraintLayout:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
I have a Recyclerview and two other views(ImageView and TextView) above Recyclerview.
I want that initially Recyclerview should stay below ImageView and TextView but when the user scrolls the Recyclerview it should come over the other views.
XML:
<?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"
android:background="#color/colorBlack">
<ImageView
android:id="#+id/ivProfile"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/tvName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/dimen_vertical_half_margin"
android:fontFamily="#font/roboto_medium"
android:gravity="center"
android:textColor="#color/colorWhite"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ivProfile"
tools:text="Prithvi Bhola" />
<TextView
android:id="#+id/tvEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:textColor="#color/colorWhite"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvName"
tools:text="prithvi.leo08#gmail.com" />
<TextView
android:id="#+id/tvLiked"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/dimen_horizontal_margin"
android:layout_marginTop="#dimen/dimen_vertical_margin"
android:fontFamily="#font/roboto_medium"
android:text="#string/liked"
android:textAllCaps="true"
android:textColor="#color/colorWhite"
android:textSize="12sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEmail" />
<ImageView
android:id="#+id/ivStaggered"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="#dimen/dimen_horizontal_margin"
android:layout_marginStart="#dimen/dimen_horizontal_margin"
android:layout_marginTop="#dimen/dimen_vertical_margin"
android:src="#drawable/ic_view_compact_black_24dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvEmail" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rvLikedPalettes"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="#dimen/dimen_vertical_margin"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvLiked" />
<TextView
android:id="#+id/tvEmptyList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="#font/roboto_regular"
android:text="#string/empty_liked_palette"
android:textColor="#color/colorWhite"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvLiked" />
</android.support.constraint.ConstraintLayout>
You can achieve it via collapsing toolbar layout.
below is sample code.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/appbar"
android:padding="10dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="300dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
app:expandedTitleMarginStart="49dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
</YOUR HEADER LAYOUT HERE/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_flexible_space"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/dp350"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="#dimen/dp350"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:title="#string/app_name"
android:visibility="gone"
app:layout_collapseMode="none"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:clipToPadding="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
In your hierarchy, make sure your RecyclerView is placed above the ImageView and Textview. Then you can just add the following properties on your recyclerview in the xml :
android:clipToPadding="false"
android:paddingTop="xxxdp"
The property clipToPadding to false is the key !
If you need a dynamic paddingTop, you can programmatically get the bottom of the view which must be right above the Recyclerview and set it as the paddingTop on your RecyclerView.
Note : Your recyclerview background must be transparent and you have to set à non-transparent background on each of your recyclerview's and it will work.
Here is a quick example with FrameLayout but you can use a ConstraintLayout if you prefer.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher_foreground"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY TEXT"
/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="200dp"
/>
</FrameLayout>
Edit : Here is the same example with ConstraintLayout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<TextView
android:id="#+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MY TEXT"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/imageView"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingTop="200dp"/>
</android.support.constraint.ConstraintLayout>
I don't know why do you think that fragment in viewpager can't hold collapsing toolbar. Because it can be done with all answers given above. As none of them mentioned the java code for it let me add one for you.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true">
//your code here
</android.support.design.widget.CollapsingToolbarLayout>
In the java code of your fragment call your collapsing toolbar like this.
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_one, container, false);
CollapsingToolbarLayout collapsingToolbarLayout=(CollapsingToolbarLayout)rootView.findViewById(R.id.collapse_toolbar);
return rootView;
}
And you will have your desired behaviour.
EDIT
Adding a demo gif for preview.
I'm trying to keep a button fixed at bottom when user's scrolling a RecyclerView. This is what I tried:
<?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=".AddProduct">
<android.support.design.widget.AppBarLayout
android:id="#+id/product_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/tv_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:text="teste"
android:textColor="#161616"
android:textSize="22sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
</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.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="138dp"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
And then I used AppBarLayout.OnOffsetChangedListener to adjust button margin according by user scrolling.
It worked, but if user scroll a little fast, it can't adjust the margin very well and the button don't appear to be fixed. It's not reliable.
So, how is the best way to do this?
Maybe you can use a ConstraintLayout instead of your RelativeLayout as below:
<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
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/rv_test"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="#+id/btn_product_add_product"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
<Button
android:id="#+id/btn_product_add_product"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#color/colorPrimary"
android:text="Test button"
android:textColor="#color/textColorPrimary" />
</android.support.constraint.ConstraintLayout>