Bottom Sheet Swipe Down Behavior
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>
Answer
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);
}
}
}