Scrollview not scrolling in Android bottomsheet

I tried the new BottomSheet in Android support. Inside the BottomSheet I have put a TextView and a ScrollView. The BottomSheetshowing just fine, the only problem I found is that the ScrollView in the BottomSheet is not scrolling. Every time I try to scroll, either the layout in main activity that scroll or the BottomSheet changing state from collapse to expand.

This is snippet of my Activity Class code:

private BottomSheetBehavior behavior;
View bottomSheet;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    setTextViewOnClickListener(this, findViewById(R.id.parentLayout));

    CoordinatorLayout coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);

    // The View with the BottomSheetBehavior
    bottomSheet = coordinatorLayout.findViewById(R.id.bottom_sheet);
    behavior = BottomSheetBehavior.from(bottomSheet);
    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            // React to state change

        }


        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events
        }
    });

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.tv1:
            setTextViewHeader("Header1");
            setTextViewContent("Long_Text_1");

            break;

        case R.id.tv2:
            setTextViewHeader("Header2");
            setTextViewContent("Long_Text_2");

            break;

        case R.id.tv3:
            setTextViewHeader("Header3");
            setTextViewContent("Long_Text_3");

            break;

        default:
            break;
    }

    behavior.setPeekHeight(100);
    behavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
    behavior.setHideable(true);

    bottomSheet.requestLayout();
}

This is my Layout 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.rapidgrowsolutions.android.MainActivity">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay" />


    </android.support.design.widget.AppBarLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv1"
            style="@style/LightRow"
            android:text="some_long_text_here" />

        <TextView
            android:id="@+id/tv2"
            style="@style/DarkRow"
            android:text="another_long_text_here" />

        <TextView
            android:id="@+id/tv3"
            style="@style/LightRow"
            android:text="another_long_text_here" />
    </LinearLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:behavior_hideable="true"
        android:fillViewport="true"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FF7733"
            android:orientation="vertical">


            <TextView
                android:id="@+id/tvID1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="HEADER"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="9"
                android:background="#ffb773"
                android:fillViewport="true">


                <TextView
                    android:id="@+id/tvID2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="#3377ff"
                    android:textAppearance="?android:attr/textAppearanceSmall" />
            </ScrollView>


        </android.support.v7.widget.LinearLayoutCompat>

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

Solution 1:

Hope you figured out this by now, but change View bottomSheet to NestedScrollView bottomSheet.

Solution 2:

I solved the issue by doing below things -

First: don't use ScrollView when you are using CoordinatorLayout instead user NestedScrollView its works much better with CoordinatorLayout.

Second: put a blank view with android:layout_height at the bottom, but inside you NestedScrollView eg -

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <ImageView
        android:background="@drawable/username"
        android:id="@+id/userImage_info_search"
        android:layout_gravity="center"
        android:layout_height="100dp"
        android:layout_margin="20dp"
        android:layout_width="100dp" />

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

    <View
        android:background="@android:color/black"
        android:layout_height="1dp"
        android:layout_width="match_parent"></View>
</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:padding="10dp"
    android:weightSum="3">

    <TextView
        style="@style/Bottomsheetstyle"
        android:id="@+id/txtNamelabel_info_search"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:text="Name" />

    <TextView
        style="@style/Bottomsheetstyle"
        android:id="@+id/txtName_info_search"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="2"
        android:layout_width="0dp"
        android:text="" />


</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <View
        android:background="@android:color/black"
        android:layout_height="1dp"
        android:layout_width="match_parent"></View>
</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:padding="10dp"
    android:weightSum="3">

    <TextView
        style="@style/Bottomsheetstyle"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:text="Number" />

    <LinearLayout
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:layout_width="0dp"
        android:orientation="horizontal">

        <TextView
            style="@style/Bottomsheetstyle"
            android:gravity="center_vertical"
            android:id="@+id/txtNumber_info_search"
            android:layout_gravity="center_vertical"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1.4"
            android:layout_width="0dp"
            android:text="+XX (XXX) XXX-XXXX" />

        <ImageView
            android:background="@drawable/call_save"
            android:id="@+id/call_info_search"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:layout_width="0dp" />

        <View
            android:layout_gravity="center"
            android:layout_height="5dp"
            android:layout_width="5dp"></View>

        <ImageView
            android:background="@drawable/comment_save"
            android:id="@+id/sms_info_search"
            android:layout_height="wrap_content"
            android:layout_weight="0.3"
            android:layout_width="0dp" />


    </LinearLayout>


</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <View
        android:background="@android:color/black"
        android:layout_height="1dp"
        android:layout_width="match_parent"></View>
</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    android:padding="10dp"
    android:weightSum="3">

    <TextView
        style="@style/Bottomsheetstyle"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:text="Email" />

    <TextView
        style="@style/Bottomsheetstyle"
        android:id="@+id/txtEmail_info_search"
        android:layout_gravity="center"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="2"
        android:layout_width="0dp"
        android:text="" />


</LinearLayout>

<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

    <View
        android:background="@android:color/black"
        android:layout_height="1dp"
        android:layout_width="match_parent"></View>
</LinearLayout>

<View
    android:background="@android:color/transparent"
    android:layout_height="@dimen/somedp"
    android:layout_width="match_parent" />

Solution 3:

Addition to the answer of "jobbert":

If you always return "false" it could happen that the bottomsheet is not working at all. This happend to me, when I also use a viewpager inside the bottom-sheets coordinatorlayout. To actually fix it, one needs to check whether the touch was inside the nestedscrollview or not. This can be calculated easily and leads to the most general solution:

 override fun onInterceptTouchEvent(parent: CoordinatorLayout, child: V, event: MotionEvent): Boolean {

    val nested = child.findViewById<NestedScrollView>(R.id.nested) //NestedScrollView
    var x = event.x
    var y = event.y

    val position = IntArray(2)
    nested.getLocationOnScreen(position)

    var nestedX = position[0]
    var nestedY = position[1]


    var boundLeft = nestedX
    var boundRight = nestedX + nested.width
    var boundTop = nestedY
    var boundBottom = nestedY + nested.height


    if ((x > boundLeft && x < boundRight && y > boundTop && y < boundBottom) || event.action == MotionEvent.ACTION_CANCEL) {
        //Touched inside of the scrollview-> pass the touch event to the scrollview
        return false
    }



    //touched outside, use the parents computation to make the bottomsheet work
    return super.onInterceptTouchEvent(parent, child, event)

}

Scrollview not scrolling in Android bottomsheet

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts