Develop Reference

Unable to close or drag BottomSheet/TopSheet when AppBarLayout pushes RecyclerView below the peek height

I am unable to close or drag the TopSheet/BottomSheet when the AppBarLayout is expanded. After analyzing it, I realized that it can be dragged if I pulled it from the tiny area shown in the screenshot. The dotted line just above the bottom refers to RecyclerView boundaries when the AppBarLayout is expanded, which might cause a non-draggable area, as shown in the screenshot below.
Screenshot:
Code:
hero_library.xml
<?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:background="#drawable/rounded_music_bottom_sheet"
tools:context=".ui.notifications.NotificationsFragment">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="#+id/main_parent"
android:layout_width="match_parent"
android:layout_height="0dp"
android:nestedScrollingEnabled="false"
app:layout_constraintBottom_toTopOf="#+id/tabLayout"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/green_500">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="#style/TextAppearance.App.CollapsingToolbar.Collapsed"
app:expandedTitleMargin="24dp"
app:expandedTitleTextAppearance="#style/TextAppearance.App.CollapsingToolbar.Expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/tool_bar">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="0dp"
app:layout_collapseMode="pin"
app:navigationIcon="#drawable/ic_up_arrow"
app:navigationIconTint="#color/white"
app:title="Heroes" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clipToPadding="false"
android:paddingTop="6dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
app:layout_constraintBottom_toTopOf="#+id/tabLayout"
app:layout_constraintTop_toBottomOf="#+id/appBarLayout"
tools:listitem="#layout/item_library" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="0dp"
android:layout_height="60dp"
android:background="#color/white_smoke"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/more_iv"
app:layout_constraintStart_toEndOf="#+id/sleep_iv"
app:tabIndicatorFullWidth="false"
app:tabIndicatorGravity="top"
app:tabSelectedTextColor="#color/black"
app:tabTextColor="#color/dark_grey">
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Heroes" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favourite" />
</com.google.android.material.tabs.TabLayout>
<ProgressBar
android:id="#+id/loading_pb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/holder"
android:layout_width="30dp"
android:layout_height="4dp"
android:layout_marginBottom="8dp"
android:background="#drawable/rounded_white"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/sleep_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginStart="24dp"
android:layout_marginTop="4dp"
android:background="?selectableItemBackground"
android:contentDescription="#string/app_name"
android:onClick="onSleepClick"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/tabLayout"
app:srcCompat="#drawable/ic_more_vertical" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/more_iv"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_marginTop="4dp"
android:layout_marginEnd="24dp"
android:background="?selectableItemBackground"
android:scaleType="center"
android:src="#drawable/ic_more_vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#+id/tabLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>
hero_player.xml
<FrameLayout
android:id="#+id/top_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="56dp"
app:layout_behavior=".utils.TopSheetBehavior"
app:layout_constraintBottom_toTopOf="#id/nav_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<fragment
android:id="#+id/nav_host_fragment_music"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/hero_navigation"
</FrameLayout>
For TopSheet I am using this: https://github.com/carlos-mg89/TopSheetBehavior

You need to change your layout heirachy
root layout need to be coordinator layout, and wrap your recycler in constrain layout and give app behaviour to contstraion layout
<androidx.coordinatorlayout.widget.CoordinatorLayout>
<com.google.android.material.appbar.AppBarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Is there any way to put recyclerview and linearlayout in swiperefreshlayout?

If I put only RecyclerView into SwipeRefreshLayout I have buttons above RecyclerView. And if I put all into SwipeRefresh I have buttons disappear
<android.support.v4.widget.SwipeRefreshLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/swipe_container"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/students_list"
android:layout_width="match_parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/buttonsLayout">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:id="#+id/buttonsLayout"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatButton
android:id="#+id/selectAllButton"
android:text="Выбрать всех"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Is there any way to fix this?

SwipeRefreshLayout accepts only one child, so maybe you can have a ConstraintLayout inside the SwipeRefreshLayout, and the RecyclerView with the Buttons inside the ConstraintLayout.
PS: I suggest a ConstraintLayout to avoid nested layouts.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/students_list"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/selectAllButton"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.v7.widget.AppCompatButton
android:id="#+id/selectAllButton"
android:text="Выбрать всех"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.SwipeRefreshLayout>

NestedScrollView set fixed screen size

Here we go :) I got a NestedScrollView with CollapsedToolbar. In this NSV I have a LinearLayout with two RecyclerViews. Problem is next, I can't set for that two Recyclers fix size and I don't need NSV scrolling => I need NSV height = [screen size] - [collapsed toolbar height]. Thats why my recyclers shows all items but I need half of screen height size.
<AppBarLayout ... />
<android.support.v4.widget.NestedScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_asks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scrollbars="none"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="#dimen/small_margin"
android:layout_above="#+id/divider"
android:background="#color/red"/>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_bids"
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="vertical"
android:scrollbars="none"
app:layout_constraintTop_toBottomOf="#+id/divider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
android:layout_below="#+id/divider"
android:layout_marginTop="#dimen/small_margin"
android:background="#color/cyan"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
How can I fix this?

Never use scrollable in scrollable.
1. Create 1 recycler view with different types of view.
2. Add on it layout_behavior.

OUTPUT
Try this
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scrollbars="none"
android:fillViewport="true"
app:layout_constraintBottom_toTopOf="#+id/guideline"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_asks"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scrollbars="none"
android:layout_weight="1"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
app:layout_constraintBottom_toTopOf="#+id/divider"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginBottom="#dimen/small_margin"
android:layout_above="#+id/divider"
android:background="#color/colorPrimary"/>
<View
android:id="#+id/divider"
android:layout_width="match_parent"
android:layout_height="1dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_bids"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:scrollbars="none"
android:layout_weight="1"
app:layout_constraintTop_toBottomOf="#+id/divider"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layoutManager="android.support.v7.widget.LinearLayoutManager"
android:layout_below="#+id/divider"
android:layout_marginTop="#dimen/small_margin"
android:background="#color/colorAccent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

I the only way I found is to make it programatically like code below:
private void setContainerSize() {
LinearLayout contentContainer = getViewDataBinding().container;
Point point = SystemUtils.getScreenSize(this);
float px = SystemUtils.convertDpToPixel(getResources().getDimension(R.dimen.toolbar_size), this);
assert point != null;
ViewGroup.LayoutParams layoutParams = contentContainer.getLayoutParams();
layoutParams.height = (int)(point.getHeight() - px);
contentContainer.setLayoutParams(layoutParams);
contentContainer.requestLayout();
}

Fixed button at bottom with RecyclerView and CollapsingToolbar

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>

Add constraints to <include> inside ConstraintLayout

Please take a look at my xml:
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<RelativeLayout
android:id="#+id/layout_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<include
layout="#layout/page"
android:layout_width="match_parent"
android:layout_height="0dp"/>
</android.support.constraint.ConstraintLayout>
I'm not able to add constraint to the <include>. The app namespace doesn't work (it works for the RelativeLayout) and auto fill doesn't show the constraint attributes. I want the included layout's height to be the remaining space in the ConstraintLayout, but how do I do it without constraints! Please help.

Try this
<android.support.constraint.ConstraintLayout
android:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<RelativeLayout
android:id="#+id/layout_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<include
layout="#layout/page"
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_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

<include layout="#layout/layout_no_friends_avalable"
android:id="#+id/inc_no_friend"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#+id/toolbar_main"
/>
When adding constraints in <include> tag we must use android:layout_width and android:layout_height both attributes.

try this:
<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:id="#+id/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?attr/actionBarSize">
<RelativeLayout
android:id="#+id/layout_info"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#color/colorPrimaryDark"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
/>
<include
layout="#layout/page"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>