BottomSheetDialog Fragment
Bottom Sheet is a sheet of material that slides up from the bottom edge of the screen. Bottom sheets are displayed only as a result of a user-initiated action, and can be swiped up to reveal additional content. A bottom sheet can be a temporary modal surface or a persistent structural element of an app.
There are two major types of bottom sheets:
1) Persistent bottom sheet :- Normally used to display additional information to that shown in the main view. These panels have the same elevation as the main content and remain visible even when not being actively used.
2) Modal bottom sheet :- Commonly used as an alternative to simple menus or dialog s. They have a higher elevation than the main content, darken the display, and it is necessary to hide them continue to interact with the rest of the application.
Now Start getting it hand on
In this story we will learn how to use the bottom sheets. To really understand the usage of bottom sheets we will create an app. The App will show the usage of both the forms of this component.
Step 1 ) Update build.gradle file
Before you can use Bottom Sheet in your projects you need to add the following compile line to your Gradle dependencies block in your build.gradle file and rebuilt the project .
dependencies {
…
compile ‘com.android.support:appcompat-v7:25.3.1’
compile ‘com.android.support:design:25.3.1’
}
Step 2) Update activity_main.xml
Open the layout file for the MainActivity.java i.e activity_main.xml and in this add four buttons and also create an external layout for the Bottom Sheet to show.
activity_main.xml
<?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"
android:fitsSystemWindows="true"
tools:context="com.shubham.bottomsheets.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<!-- Main Content -->
<include layout="@layout/content_main" />
<!-- Bottom Sheet Content -->
<include layout="@layout/content_bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.shubham.bottomsheets.MainActivity"
tools:showIn="@layout/activity_main">
<Button
android:id="@+id/expand_bottom_sheet_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text_expand_bottom_sheet" />
<Button
android:id="@+id/collapse_bottom_sheet_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/expand_bottom_sheet_button"
android:text="@string/text_collapse_bottom_sheet" />
<Button
android:id="@+id/hide_bottom_sheet_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/collapse_bottom_sheet_button"
android:text="@string/text_hide_bottom_sheet" />
<Button
android:id="@+id/show_bottom_sheet_dialog_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/hide_bottom_sheet_button"
android:text="@string/text_show_bottom_sheet_dialog" />
</RelativeLayout>content_bottom_sheet.xml .
Create a layout xml named content_bottom_sheet.xml and update the below code in that xml file. This code will create view for bottom sheet. Here you can see that in relative layout there are attributes declared app:layout_behavior=”@string/bottom_sheet_behavior to automatically respond to user gestures to expand or collapse the view.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottomSheetLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_orange_light"
android:padding="@dimen/activity_vertical_margin"
app:behavior_hideable="true"
app:behavior_peekHeight="?actionBarSize"
app:layout_behavior="@string/bottom_sheet_behavior">
<TextView
android:id="@+id/bottomSheetHeading"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text_expand_me"
android:textAppearance="@android:style/TextAppearance.Large" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/bottomSheetHeading"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:text="@string/text_welcome_message"
android:textAppearance="@android:style/TextAppearance.Large" />
</RelativeLayout>Step 3) Update MainActivity Class.
Basically there are five states of Bottom sheet as follows :-
-> STATE_COLLAPSED: this collapsed state is the default and shows just a portion of the layout along the bottom. The height can be controlled with the app:behavior_peekHeight attribute (defaults to 0)
-> STATE_DRAGGING: the intermediate state while the user is directly dragging the bottom sheet up or down
-> STATE_SETTLING: that brief time between when the View is released and settling into its final position
-> STATE_EXPANDED: the fully expanded state of the bottom sheet, where either the whole bottom sheet is visible (if its height is less than the containing CoordinatorLayout) or the entire CoordinatorLayout is filled
-> STATE_HIDDEN: disabled by default (and enabled with the app:behavior_hideable attribute), enabling this allows users to swipe down on the bottom sheet to completely hide the bottom sheet
Now in MainActivity.java and here we will see the how to handle bottom sheets and also see how it behaves in different states by checking the logcat.
package com.shubham.bottomsheets;
import android.os.Bundle;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
// BottomSheetBehavior variable
private BottomSheetBehavior mBottomSheetBehavior;
// TextView variable
private TextView mBottomSheetHeading;
// Button variables
private Button mExpandBottomSheetButton;
private Button mCollapseBottomSheetButton;
private Button mHideBottomSheetButton;
private Button mShowBottomSheetDialogButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initListeners();
}
/**
* method to initialize the views
*/
private void initViews() {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
mBottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.bottomSheetLayout));
mBottomSheetHeading = (TextView) findViewById(R.id.bottomSheetHeading);
mExpandBottomSheetButton = (Button) findViewById(R.id.expand_bottom_sheet_button);
mCollapseBottomSheetButton = (Button) findViewById(R.id.collapse_bottom_sheet_button);
mHideBottomSheetButton = (Button) findViewById(R.id.hide_bottom_sheet_button);
mShowBottomSheetDialogButton = (Button) findViewById(R.id.show_bottom_sheet_dialog_button);
}
/**
* method to initialize the listeners
*/
private void initListeners() {
// register the listener for button click
mExpandBottomSheetButton.setOnClickListener(this);
mCollapseBottomSheetButton.setOnClickListener(this);
mHideBottomSheetButton.setOnClickListener(this);
mShowBottomSheetDialogButton.setOnClickListener(this);
// Capturing the callbacks for bottom sheet
mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(View bottomSheet, int newState) {
if (newState == BottomSheetBehavior.STATE_EXPANDED) {
mBottomSheetHeading.setText(getString(R.string.text_collapse_me));
} else {
mBottomSheetHeading.setText(getString(R.string.text_expand_me));
}
// Check Logs to see how bottom sheets behaves
switch (newState) {
case BottomSheetBehavior.STATE_COLLAPSED:
Log.e("Bottom Sheet Behaviour", "STATE_COLLAPSED");
break;
case BottomSheetBehavior.STATE_DRAGGING:
Log.e("Bottom Sheet Behaviour", "STATE_DRAGGING");
break;
case BottomSheetBehavior.STATE_EXPANDED:
Log.e("Bottom Sheet Behaviour", "STATE_EXPANDED");
break;
case BottomSheetBehavior.STATE_HIDDEN:
Log.e("Bottom Sheet Behaviour", "STATE_HIDDEN");
break;
case BottomSheetBehavior.STATE_SETTLING:
Log.e("Bottom Sheet Behaviour", "STATE_SETTLING");
break;
}
}
@Override
public void onSlide(View bottomSheet, float slideOffset) {
}
});
}
/**
* onClick Listener to capture button click
*
* @param v
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.collapse_bottom_sheet_button:
// Collapsing the bottom sheet
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
break;
case R.id.expand_bottom_sheet_button:
// Expanding the bottom sheet
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
break;
case R.id.hide_bottom_sheet_button:
// Hiding the bottom sheet
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
break;
case R.id.show_bottom_sheet_dialog_button:
// Opening the Dialog Bottom Sheet
new com.shubham.bottomsheets.CustomBottomSheetDialogFragment().show(getSupportFragmentManager(), "Dialog");
break;
}
}
}Step 4) Create content_dialog_bottom_sheet.xml .
Create a layout xml named content_dialog_bottom_sheet.xml and update the below code in that xml file. This code will create view for bottom sheet dialog.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/bottomSheetLayout"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@android:color/holo_green_light"
android:padding="@dimen/activity_vertical_margin"
app:behavior_hideable="true"
app:behavior_peekHeight="?actionBarSize"
app:layout_behavior="@string/bottom_sheet_behavior">
<TextView
android:id="@+id/bottom_sheet_heading_textview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/text_dialog_bottom_sheet"
android:textAppearance="@android:style/TextAppearance.Large" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/bottom_sheet_heading_textview"
android:layout_centerHorizontal="true"
android:layout_marginTop="@dimen/activity_horizontal_margin"
android:text="@string/text_welcome_message"
android:textAppearance="@android:style/TextAppearance.Large" />
</RelativeLayout>Step 5) Create CustomBottomSheetDialogFragment Class.
Create a class named CustomBottomSheetDialogFragment and extend it by BottomSheetDialogFragment
package com.shubham.bottomsheets;
import android.os.Bundle;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class CustomBottomSheetDialogFragment extends BottomSheetDialogFragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.content_dialog_bottom_sheet, container, false);
return v;
}
}Step 6) Update onClick() Listener.
Now update the onClick() Listener with the below code . Here in case R.id.show_bottom_sheet_dialog_button: i created the object of CustomBottomSheetDialogFragment and called the funtion show . It will show the Bottom Sheet Dialog on the screen
/**
* onClick Listener to capture button click
*
* @param v
*/
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.collapse_bottom_sheet_button:
// Collapsing the bottom sheet
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
break;
case R.id.expand_bottom_sheet_button:
// Expanding the bottom sheet
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
break;
case R.id.hide_bottom_sheet_button:
// Hiding the bottom sheet
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
break;
case R.id.show_bottom_sheet_dialog_button:
// Opening the Dialog Bottom Sheet
new com.shubham.bottomsheets.CustomBottomSheetDialogFragment().show(getSupportFragmentManager(), "Dialog");
break;
}
}I have taken help from the be androidTutorialshub,They have great tutorials
you can follow the below link for more tutorials from androidTutorialshub
Thank you for reading
Happy Coding
