Skip to content Skip to sidebar Skip to footer
Home / Android / Android Appbarlayout / Android Collapsingtoolbarlayout / Android Coordinatorlayout / Bottom Sheet

Scrolling Is Not Working With Coordinatorlayout + Parallax Image + Bottomsheetlayout

Post a Comment
Introduction I have an activity, which implements a common pattern with parallax header image and scrolling content using CoordinatorLayout, AppBarLayout and CollapsingToolbarLayou

Solution 1:

I'm copying paste the XML that I'm using. It's working on Samsung Galaxy S3, Huawei Mate 8 and Moto by the way and I have not tried on emulator (I removed all business stuff and just put dummy widgets).

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:id="@+id/coordinatorlayout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"><android.support.design.widget.AppBarLayoutandroid:id="@+id/appbarlayout"android:layout_width="match_parent"android:layout_height="256dp"android:theme="@style/AppTheme.AppBarOverlay"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_scrollFlags="scroll|exitUntilCollapsed"android:fitsSystemWindows="true"app:contentScrim="?attr/colorPrimary"app:expandedTitleMarginStart="48dp"app:expandedTitleMarginEnd="64dp"><ImageViewandroid:id="@+id/backdrop"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:fitsSystemWindows="true"app:layout_collapseMode="parallax"/><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:popupTheme="@style/AppTheme.PopupOverlay"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingBottom="16dp"><android.support.v7.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_margin="16dp"><LinearLayoutstyle="@style/Widget.CardContent"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo." /></LinearLayout></android.support.v7.widget.CardView><android.support.v7.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginBottom="16dp"android:layout_marginLeft="16dp"android:layout_marginRight="16dp"><LinearLayoutstyle="@style/Widget.CardContent"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="TITLE"android:textAppearance="@style/TextAppearance.AppCompat.Title" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 1" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 2" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 3" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 4" /><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 5" /></LinearLayout></android.support.v7.widget.CardView></LinearLayout></android.support.v4.widget.NestedScrollView><android.support.v4.widget.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"app:behavior_peekHeight="100dp"android:fitsSystemWindows="true"app:layout_behavior="android.support.design.widget.BottomSheetBehavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:paddingBottom="16dp"android:background="@android:color/white"android:padding="15dp"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="BOOTOMSHEET TITLE"android:textAppearance="@style/TextAppearance.AppCompat.Title" /><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="Button1"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 2"android:layout_margin="10dp"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 3"android:layout_margin="10dp"/><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:text="text 4"android:layout_margin="10dp"/><FrameLayoutandroid:layout_width="match_parent"android:layout_height="320dp"android:background="@color/colorAccent"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center"android:text="Your remaining content here"android:textColor="@android:color/white" /></FrameLayout></LinearLayout></android.support.v4.widget.NestedScrollView>

Solution 2:

I think you should use NestedScrollView with the BottomSheetBehavior,replace blow as the bootemSheet!

<android.support.v4.widget.NestedScrollViewandroid:id="@+id/bottomSheet"android:layout_width="match_parent"android:layout_height="400dp"android:background="@android:color/holo_blue_bright"android:orientation="vertical"app:behavior_peekHeight="?attr/actionBarSize"app:layout_behavior="android.support.design.widget.BottomSheetBehavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:gravity="center_vertical"android:paddingLeft="16dp"android:paddingRight="16dp"android:text="BottomSheetLayout"android:textColor="@android:color/white"/><ScrollViewandroid:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:layout_width="match_parent"android:layout_height="400dp"android:background="@android:color/holo_green_dark"android:padding="16dp"android:text="@string/large_text"android:textColor="@android:color/white"/></ScrollView></LinearLayout></android.support.v4.widget.NestedScrollView>

NestedScrollView can know how to nested with the toolbar,not the LinearLayout!

wish to help!!

Solution 3:

It seems like a bug in BottomSheetBehavior code probably, cause if you try to debug the code of CoordinatorLayout you will see that when you touch your parallax View it will be determined as a layout with BottomSheetBehavior instead of HeaderBehavior.

So the quick fix that I've found is to set OnTouchListener that always returns true to your parallax view:

ViewparallaxView= findViewById(R.id.parallax_view);
parallaxView.setOnTouchListener(newView.OnTouchListener() {
    @OverridepublicbooleanonTouch(View v, MotionEvent event) {
        returntrue;
    }
});

Of course, don't forget to set android:id="@+id/parallax_view" to your view with parallax collapse mode.

Hope it helps!

Solution 4:

try this 

 <LinearLayout
        android:id="@+id/bottomSheet"
        android:layout_width="match_parent"
        android:layout_height="400dp">

change height 400dp to wrap_content

hope works for you

Solution 5:

The issue can be solved by moving the NestedScrollView (or fragment containing a NestedScrollView in my case) outside the CoordinatorLayout in a FrameLayout and placing a dummy view where the NestedScrollView was, like this:

<FrameLayout><CoordinatorLayout><AppBarLayout>
            ...
        </AppBarLayout><Viewandroid:id="@+id/bottomSheet"app:layout_behavior="android.support.design.widget.BottomSheetBehavior" /></CoordinatorLayout><NestedScrollViewandroid:id="@+id/bottomSheetContent">
        ...
    </NestedScrollView></FrameLayout>

Finally, add a BottomSheetCallback to the dummy view that translates the actual content view while sliding:

@Override
public void onSlide(@NonNull View bottomSheet, float slideOffset) {
    bottomSheetContent.setTranslationY((1f - slideOffset) * bottomSheetContent.getHeight());
}

Apparently, this is the only way to prevent a CoordinatorLayout from reacting to (and intercepting) any touch events. #JustGoogleThings

Post a Comment for "Scrolling Is Not Working With Coordinatorlayout + Parallax Image + Bottomsheetlayout"