Bottom Sheet Swipe Down Behavior

Question

I have successfully created a ListView within a Fragment. From the list I have also managed to successfully load a bottom sheet.

1. If I tap the first item on the list "One" the bottom sheet appears.

2. If I tap outside the bottom sheet, the bottom sheet disappears.

3. If I tap the second item on the list "Two" the bottom sheet again appears.

4. If I do as 1) again and then swipe down the bottom sheet and try to do 3), the screen stays grayed out as if the bottom sheet is still shown but not visible ... ???

How do I correct this?

Below is my code.

SecondFragment.java:

/**
 * A simple {@link Fragment} subclass.
 */
public class SecondFragment extends Fragment {
    public SecondFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment_second, container, false);

        String[] faList = { 
                "One",
                "Two",
        };

        ListView listView = (ListView) view.findViewById(R.id.listFa);

        ArrayAdapter<String> listviewAdapter = new ArrayAdapter<String>(
                getActivity(),
                android.R.layout.simple_list_item_1,
                faList
        );

        listView.setAdapter(listviewAdapter);

        // Inflate the layout for this fragment
        // return view;


        final BottomSheetDialog bottomsheet = new BottomSheetDialog(this.getContext());
        View bottomSheetView = inflater.inflate(R.layout.bottom_sheet, null);
        bottomsheet.setContentView(bottomSheetView);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {

                bottomsheet.show();
            }
        });
        return view;
    }
}

fragment_second.xml:

<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"
    tools:context="com.ifavaz.talker.SecondFragment">

    <!-- TODO: Update blank fragment layout -->
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listFa" />
</FrameLayout>

bottom_sheet.xml:

<FrameLayout 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:gravity="right"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="30dp">

                <FrameLayout
                    android:layout_width="280dp"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="text is my text is my text text is my text is my text text is my text is my text text is my text is my text "
                        android:textSize="18sp"
                        android:textAlignment="textStart"
                        android:paddingRight="30dp" />
                </FrameLayout>

            </LinearLayout>

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

                android:orientation="horizontal"
                android:layout_marginTop="30dp">

                <FrameLayout
                    android:layout_width="280dp"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="text is my text is my text text is my text is my text text is my text is my text text is my text is my text "
                        android:textSize="18sp"
                        android:paddingRight="30dp" />
                </FrameLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="30dp">

                <FrameLayout
                    android:layout_width="280dp"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="text is my text is my text text is my text is my text text is my text is my text text is my text is my text "
                        android:textSize="18sp"
                        android:textAlignment="textStart"
                        android:paddingRight="30dp" />
                </FrameLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="horizontal"
                android:layout_marginTop="30dp">

                <FrameLayout
                    android:layout_width="280dp"
                    android:layout_height="wrap_content">

                    <TextView
                        android:id="@+id/textView2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="text is my text is my text text is my text is my text text is my text is my text text is my text is my text "
                        android:textSize="18sp"
                        android:textAlignment="textStart"
                        android:paddingRight="30dp" />
                </FrameLayout>
            </LinearLayout>
        </LinearLayout>
    </ScrollView>
</FrameLayout>

Answer 1

I got it to work from this post, you will need as the root layout inside your fragment / activity a CoordinatorLayout with the behaviour --> "android.support.design.widget.BottomSheetBehavior" , the way it works is extending BottomSheetDialogFragment and showing it from your activity / fragment like this

    TutsPlusBottomSheetDialogFragment fragment = new TutsPlusBottomSheetDialogFragment();
    fragment.show(getSupportFragmentManager(),bottomSheetDialogFragment.getTag());

The implementation of this custom DialogFragment is:

    public class TutsPlusBottomSheetDialogFragment extends BottomSheetDialogFragment {

        private BottomSheetBehavior.BottomSheetCallback mBottomSheetBehaviorCallback = new BottomSheetBehavior.BottomSheetCallback() {

        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                dismiss();
            }

        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
        }
    };

    @Override
    public void setupDialog(Dialog dialog, int style) {
        super.setupDialog(dialog, style);
        View contentView = View.inflate(getContext(), R.layout.bottom_sheet, null);
        dialog.setContentView(contentView);

        CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) ((View) contentView.getParent()).getLayoutParams();
        CoordinatorLayout.Behavior behavior = params.getBehavior();

        if( behavior != null && behavior instanceof BottomSheetBehavior ) {
            ((BottomSheetBehavior) behavior).setBottomSheetCallback(mBottomSheetBehaviorCallback);
        }
    }

}