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.

If I tap the first item on the list "One" the bottom sheet appears.
If I tap outside the bottom sheet, the bottom sheet disappears.
If I tap the second item on the list "Two" the bottom sheet again appears.
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>

i suppose you BottomSheet java object is a custom implementation with your own custom methods, you are going to show that code too, becuz apparently in the code you show youre not chaging the bottomSheet text anywhere — marcos E., Dec 19 '16 at 16:16
I do not need to change the text in the bottom sheet - ie that is static text. I do not have a BottomSheet.java file --- do I need to? If i compile the app as is and run it, it is doing exactly what I want it to do ... except of course the issue described above. — Ibrahim Fawaz, Dec 19 '16 at 16:20

score 4 · Accepted Answer · answered Dec 19 '16 at 17:11

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

}

except in my case instead of getSupportFragmentManager it was fragmentManager used!. But thanks fr the link - it did solve my issue! — Ibrahim Fawaz, Dec 19 '16 at 17:46

Bottom Sheet Swipe Down Behavior

1 Answers1