A Bottom Sheet is a layout that slides up from the bottom side of the screen. This layout slides up on user triggered action. There are two options to implement this functionality, the first one creates main container view with a BottomSheetBehavior in your layout file and second creates a fragment which extends BottomSheetDialogFragment.
To use, either you have to import Design Support Library with minimum version 23.2 in app.gradle file. Using following steps you can implement this functionalities in you project.
Step-1- Create an XML file main_layout.xml which has a button on that click will slides up Bottom Sheet.
<?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"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<Button
android:id="@+id/button_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 1"
android:padding="16dp"
android:layout_margin="8dp"
android:textColor="@android:color/white"
android:background="@android:color/holo_green_dark"/>
</LinearLayout>
</ScrollView>
<android.support.v4.widget.NestedScrollView
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="350dp"
android:clipToPadding="true"
android:background="@android:color/holo_orange_light"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/msg_string"
android:padding="16dp"
android:textSize="16sp"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Step-2- Show Bottom Sheet on button triggered action. Put snippet code of line inside onCreate() method.
private BottomSheetBehavior mBottomSheetBehavior;
View bottomSheet = findViewById(R.id.bottom_sheet );
Button button1 = (Button) findViewById(R.id.button_1);
button1.setOnClickListener(this);
mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
// put this below line of code
@Override
public void onClick(View v) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED)
}
Using a Bottom Sheet Fragment :- As we have mentioned above that we can also display Bottom sheet fragment. To do this, first you need to create a class which extends BottomSheetDialogFragment.
public class BottomSheetFragment 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.fragment_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);
}
}
}
Finally, We call show() on an instance of your fragment to display it in bottom sheet.
BottomSheetDialogFragment bottomSheetDialogFragment = new BottomSheetFragment(); bottomSheetDialogFragment.show(getSupportFragmentManager(), bottomSheetDialogFragment.getTag());
0 Comment(s)