Question

Hi ?, I have a question in the android studio, I am using button sheet to display information, I want to display the button sheet depending on condition, display or hidden and, when collapse and expand the bottom sheet is repeated on background how to solve this problem?

Answer 1

See below for a layout file having a LinearLayout with two buttons in the main layout visible to the user, and then by a NestedScrollView which acts as the 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.thetechnocafe.gurleensethi.bottomsheets.BottomSheetActivity">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<Button
android:id="@+id/openBottomSheetButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Open Bottom Sheet" />

<Button
android:id="@+id/closeBottomSheetButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Close Bottom Sheet" />

</LinearLayout>

<android.support.v4.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="@android:color/holo_green_light"
android:clipToPadding="true"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="@string/bottom_sheet_behavior">

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

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/random_title"
android:textColor="@android:color/white"
android:textSize="24sp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="@string/lorem_ipsum"
android:textColor="@android:color/white" />
</LinearLayout>

</android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

In the above lines, the attribute app:behavior_hideable=”true” allows the bottom sheet to be completely hide-able even if you have set a peak height.

To make a layout behave as BottomSheet, you need to add the app:layout_behaviour=”@string/bottom_sheet_behaviour” to the layout

Even after adding this behaviour, sometimes the bottom sheet will not hide and will keep displaying. In this case, you will have to explicitly set the peek height of the bottom sheet. To do this just add the following line:

app:behavior_peekHeight="0dp"

This will set the peek height of the bottom sheet. Increase the value to observe how the bottom sheets comes up.

In order to control the bottom sheet from an activity you will have to get a reference of it. Here is how to get the reference:

public class BottomSheetActivity extends AppCompatActivity {

private BottomSheetBehavior mBottomSheetBehaviour;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom_sheet);

View nestedScrollView = (View) findViewById(R.id.nestedScrollView);
mBottomSheetBehaviour = BottomSheetBehavior.from(nestedScrollView);
}
}

Bottom sheets define 5 different states, you can listen to state changes by setting a callback function:

mBottomSheetBehaviour.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View bottomSheet, int newState) {
String state = "";

switch (newState) {
case BottomSheetBehavior.STATE_DRAGGING: {
state = "DRAGGING";
break;
}
case BottomSheetBehavior.STATE_SETTLING: {
state = "SETTLING";
break;
}
case BottomSheetBehavior.STATE_EXPANDED: {
state = "EXPANDED";
break;
}
case BottomSheetBehavior.STATE_COLLAPSED: {
state = "COLLAPSED";
break;
}
case BottomSheetBehavior.STATE_HIDDEN: {
state = "HIDDEN";
break;
}
}

Toast.makeText(BottomSheetActivity.this, "Bottom Sheet State Changed to: " + state, Toast.LENGTH_SHORT).show();
}

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

}
});

You will find a lot more information in the Android docs (Bottom Sheets in Material components and BottomSheetBehavior in Android Developers). All the best!