Scrollview not scrolling in Android bottomsheet

AndroidAndroid LayoutBottom Sheet

Android Problem Overview

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>

Android Solutions

Solution 1 - Android

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

Solution 2 - Android

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 - Android

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)
  
}

Solution 4 - Android

Use below custom bottom sheet behaviour

public class CustomBottomSheetBehaviour<V extends View> extends BottomSheetBehavior {
    public CustomBottomSheetBehaviour() {
        super();
    }

    public CustomBottomSheetBehaviour(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onInterceptTouchEvent(CoordinatorLayout parent, View child, MotionEvent event) {
        return false;
    }
}

Solution 5 - Android

@Aghil C M answer worked, but translated it to Kotlin as auto translate didn't do the trick.

class CustomBottomSheetBehaviour<V : View> : BottomSheetBehavior<V> {
    constructor() : super()

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

    override fun onInterceptTouchEvent(parent: CoordinatorLayout?, child: V, event: MotionEvent?): Boolean {
        return false
    }
}

Solution 6 - Android

this worked for me try using first scrollView and then linear or relative layout and use also use nested scroll view above it

<RelativeLayout
    android:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="250dp"
    app:behavior_hideable="true"
    app:elevation="4dp"
    android:background="@color/colorPrimaryDark"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    android:clipToPadding="true">


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


            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="16dp"
                android:text="oh hello this is dummy data"
                android:textColor="#FFFFFF"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher" />
            <ImageView
                android:id="@+id/"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher" />
            <ImageView
                android:id="@+id/"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher" />
            <ImageView
                android:id="@+id/"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher" />

            <ImageView
                android:id="@+id/"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srcCompat="@mipmap/ic_launcher" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>
Categories
Recommended Android Solutions
Recommended Android Layout Solutions
Recommended Bottom Sheet Solutions

Previous Solution:

How to use an Area in ASP.NET Core

asp.net Mvc-Routingasp.net Coreasp.net Core-Mvcasp.net Mvc-Areas

Next Solution:

Cannot start Emulator in android studio 2.0

Android

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionasiansagaView Question on Stackoverflow
Solution 1 - AndroidChris NguyenView Answer on Stackoverflow
Solution 2 - AndroidVaiVirusView Answer on Stackoverflow
Solution 3 - Android8K Creative CommonsView Answer on Stackoverflow
Solution 4 - AndroidAghil C MView Answer on Stackoverflow
Solution 5 - AndroidjobbertView Answer on Stackoverflow
Solution 6 - AndroidHarshit MaheshwariView Answer on Stackoverflow