What is the function of Bottom Sheets in Android and what are they used for?

so that they can be opened from the bottom of the page to the top of the page and show the required information to users, and Bottom Sheets , including components Material Design are on Android. They have two different types, one Persistent Bottom Sheet and Modal Bottom Sheet (modal bottom sheets android), both of which are used to display information to users, and the way to access them is by dragging them from the bottom of the page and then the item information We see the needs and details. It should be noted that these can be used in applications such as Google Maps and Google Drive. Google Drive and Google Maps are examples of their use in applications.

what is a bottom sheet?
If we pin a place on the map in Google Maps, a Bottom Sheet will be created that has more information and details about it and they will provide details to the users. If we press the MORE INFO button or drag the page upwards, the whole screen will be displayed and the information and details related to it will be displayed on a larger screen.

This component in the Google Drive application can also be used to create folders or upload files. In this case, we drag the page from the bottom to the top and the whole screen of the Bottom Sheet is displayed and all the desired operations can be performed there.

bottom sheets android example
1- We create a new project in Android Studio and choose its name as desired. The name chosen for this project in this tutorial is SimpleBottomSheet.

2- Then you need to create an Empty Activity.

3- It is worth mentioning that in order to be able to create and launch this project properly, we must add the Support Design library to the project. Like the following:

dependencies {
implementation fileTree (dir: 'libs', include: ['* .jar'])
implementation 'com. android. support: appcompat-v7:27.1.1'
implementation 'com. android. support:design:27.1.1'
}

In this project that we are building, we are just launching a simple Bottom Sheet, which is why we only have to work with the activity layout and not with Java.

4- Select and create a Root Layout of the CoordinatorLayout type to display the Bottom Sheet.

5- The codes that should be in the activity_main.xml section are as follows:

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 = ". MainActivity">

In the code listed above, we see that CoordinatorLayout is a subset of the Design library. Design is also used to control the movement of materials. In other words, if we use this in Bottom Sheets, it will make opening and closing this layout like animations. If we open and close it like animations, it will increase users' satisfaction and give them a variety.

6- Define and create a simple Bottom Sheet. Like the following:

xmlns: tools = "http://schemas.android.com/tools"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
xmlns: app = "http://schemas.android.com/apk/res-auto"
tools: context = ". MainActivity">

android: layout_width = "match_parent"
android: layout_height = "200dp"
android: orientation = "vertical"
android: background = "# 009688"
android: padding = "8dp"
app: layout_behavior = "android. support.design. widget. BottomSheetBehavior">

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: textColor = "# ffffff"
android: textSize = "20sp"
android: textStyle = "bold"
android: text = "Bottom Sheet Title" />

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: textColor = "# ffffff"
android: textSize = "16sp"
android: text = "Lorem ipsum dolor sit amet, te sed vide delicata,
per ex salutandi intellegat temporibus, ei insolens molestiae vis.
Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
gubergren id eum, nullam labores an nam. Sed et tota quae referendum,
enim elit democritum quo et.
Lorem ipsum dolor sit amet, te sed vide delicata,
per ex salutandi intellegat temporibus, ei insolens molestiae vis.
Eum ei possim aperiam, fuisset suscipit vim ut. Voluptua repudiare
gubergren id eum, nullam labores an nam. Sed et tota quae referendum,
enim elit dem ocritum quo et. "/>

In the code above, we add a LinearLayout to the layout that has two TextViews. Note that we must define LinearLayout as a Bottom Sheet. Like the following:

app: layout_behavior = "android. support.design. widget. BottomSheetBehavior"

By inserting the above code and adding a layout to it, we will cause Android to consider it as a Bottom Sheet. The value of this property can be defined as follows:

app: layout_behavior = "@ string / bottom_sheet_behavior"

Then, hold down the Ctrl key on the keyboard and click on the value entered above. This will connect to the values.xml file that is linked to the design library.

7- We run the project. After running the program, we will see that a bar with a background color of 200dp will appear at the bottom of the screen.

8- It should be noted that the content of this bar has two TextViews.

9- This bar that we have created is currently fixed and does not change by dragging down or up.

10- In order to be able to adjust it so that it changes by dragging down or up, we must add the property listed below to the Bottom Sheet .

app: behavior_peekHeight = "60dp"

11- Then, we have to run the project again.

12- After executing the project and applying changes to them, we will see that the tape first has a size of 60dp, and if we pull it up, its size will increase to 200dp.

13- If we drag the page down again, its size will be reduced to 60dp.

Note:
If we set the value 0 to behavior_peekHeight, the bar is completely hidden.

14- In order not to be hidden by dragging the bar to the bottom and to be displayed in a smaller size, we must do the following.

app: behavior_hideable = "true"

15- The final and complete codes that should be in the activity_main.xml section are as follows:

android: layout_width = "match_parent"
android: layout_height = "200dp"
android: orientation = "vertical"
android: background = "# 009688"
android: padding = "8dp"
app: behavior_peekHeight = "60dp"
app: behavior_hideable = "true"
app: layout_behavior = "@ string / bottom_sheet_behavior">

In the previous part, the bar layout is LinearLayout and we put a long text inside the second TextView. But after the run, we will see that part of the long text is displayed and the rest of the Bottom Sheet is hidden. That is, it displays 200dp and the user cannot use the scrolling feature to go down and see the rest of the text and writing. We have to solve this problem. To solve this problem, we need to replace NestarScrollView with LinearLayout.

android: layout_width = "match_parent"
android: layout_height = "200dp"
android: background = "# 009688"
android: padding = "8dp"
app: behavior_peekHeight = "60dp"
app: behavior_hideable = "true"
app: layout_behavior = "@ string / bottom_sheet_behavior">

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: orientation = "vertical">

16- After applying these changes, we will run the project.

17- After running the project, we will see that the scrolling feature has been added to it and the user can easily scroll it and see the rest of the text and writing.

18- Of course, it should be noted that the size of the tape does not change and is 200dp, only the ability to scroll is added to it.

Persistent Bottom Sheet
The Persistent Bottom Sheet is used when we want to display content. In other words, the Persistent Bottom Sheet is used to communicate between the Bottom Sheet. Bottom Sheet is used to show information and details and Persistent Bottom Sheet is used to show the contents.

For example, we can say that the user selects a place on the map in Google Map and by dragging the bar upwards he can see the information and details about it, and if he presses the MORE INFO button, he can even see the contents related to it. Slowly

1- We create a new project in Android Studio and choose its name as desired. The name chosen in this tutorial is PersistentBottomSheet.

2- In this project, we create an Empty Activity.

3- We also add the design library to this section.

4- In this project, unlike the previous project, we want it to be opened and closed by clicking on the Bottom Sheet button.

5- The codes that should be in the activity_main.xml section are as follows:

android: layout_width = "match_parent"
android: layout_height = "match_parent">

android: id = "@ + id / btn_expand"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_centerInParent = "true"
android: text = "Expand" />

In the code above, because the CoordinatorLayout does not have the power and ability to manage the layout, we put the button in RelativeLayout.

6- Add a Bottom Sheet to the layout.

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: orientation = "vertical"
android: id = "@ + id / bottom sheet"
android: background = "# 94aab4"
android: padding = "8dp"
app: behavior_hideable = "true"
app: behavior_peekHeight = "60dp"
app: layout_behavior = "@ string / bottom_sheet_behavior">

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: textColor = "# 000000"
android: textSize = "20sp"
android: text = "Location: Austria "
android: paddingbottom = "10dp"
android: paddingtop = "10dp" />

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: textColor = "# 452f2f"
android: textSize = "16sp"
android: text = " Austria initially emerged as a margraviate around 976 and developed into a duchy and archduchy. In the 16th century, Austria started serving as the heart of the Habsburg Monarchy and the junior branch of the House of Habsburg – one of the most influential royal dynasties in history. As an archduchy, it was a major component and administrative center of the Holy Roman Empire. Early in the 19th century, Austria established its own empire, which became a great power and the leading force of the German Confederation, but pursued its own course independently of the other German states following its defeat in the Austro-Prussian War in 1866. In 1867, in compromise with Hungary, the Austria-Hungary Dual Monarchy was established. "/>

In the code above, we used wrap_content to specify the size and height of the bar, which causes the bar to be so high that the content is there. In other words, it can be said that the height of this bar will be equal to the content that is inside it. In this section, we did not specify a height for the bar.

7- Create a new layout with the desired name, for example bottom_sheet.xml, and put the code inserted below it.

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 = "wrap_content"
android: orientation = "vertical"
android: id = "@ + id / bottom sheet"
android: background = "# 94aab4"
android: padding = "8dp"
app: behavior_hideable = "true"
app: behavior_peekHeight = "60dp"
app: layout_behavior = "@ string / bottom_sheet_behavior">

8- The complete and final codes that should be in the activity_main.xml section are as follows:

xmlns: tools = "http://schemas.android.com/tools"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
tools: context = ". MainActivity">

android: layout_width = "match_parent"
android: layout_height = "match_parent">

android: id = "@ + id / btn_expand"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_centerInParent = "true"
android: text = "Expand" />

9- After applying the changes, if we run the project, we will see that the tape will open at 60dp first, and if we then drag it upwards, its size will be larger.

10- In this section, we have to make changes and adjustments so that this opening of the page is done by the button.

11- We complete the activity as follows:

import android. support.design. widget. BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os. Bundle;
import android. view. View;
import android. widget. Button;
import Android.Widget. LinearLayout;

public class MainActivity extends AppCompatActivity {

Button banshee;
LinearLayout sheet Layout;
BottomSheetBehavior bottom Sheet;

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

banshee = findViewById (R.id.btn_expand);
sheet Layout = findViewById (R.id. bottom sheet);
bottom Sheet = BottomSheetBehavior. From (sheet Layout);

btnPhoto.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View view) {

bottomSheet.setState (BottomSheetBehavior.STATE_EXPANDED);

}
});

}
}

In the code above, we define a Button and LinearLayout that belong to Bottom Sheet. Then we create an example of the BottomSheetBehavior method with the desired name bottom Sheet.

Then we create a Listener for the button. To be able to set the Bottom Sheet mode, we use the set State () method.

In the code above, we have selected STATE_EXPANDED, but by selecting it, we can make it open by touching the status bar button.

12- We will implement the project.

13- After the implementation of the project, we will see that the operation is done correctly and the settings that we have provided have been successful.

14- Then, we have to make changes that are hidden by touching the bar button. Like the following:

btnPhoto.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View view) {

if (bottomSheet.setState () == BottomSheetBehavior.STATE_COLLAPSED) {

bottomSheet.setState (BottomSheetBehavior.STATE_EXPANDED);

}
else if (bottom Sheet. getState () == BottomSheetBehavior.STATE_EXPANDED) {

bottomSheet.setState (BottomSheetBehavior.STATE_COLLAPSED);

}

}
});

In the code above, using the if else and the getState () method, we set a condition that will check that if the bar is collapsed, its status will change to Expanded by touching the button.

15- Use the setText () method and modify the condition, as follows:

btnPhoto.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View view) {

if (bottomSheet.setState () == BottomSheetBehavior.STATE_COLLAPSED) {

bottomSheet.setState (BottomSheetBehavior.STATE_EXPANDED);
btnSheet.setText ("Collapse");

}
else if (bottomSheet.setState () == BottomSheetBehavior.STATE_EXPANDED) {

bottomSheet.setState (BottomSheetBehavior.STATE_COLLAPSED);
btnSheet.setText ("Expand");

}

}
});

16- If we run the project after making all the changes, we will see that everything is successful.

17- There is only one problem and that is that if we move the bar down or up using the button, the text of the button will also change, but if we move it up or down by hand, there is no change in text will not be done and we have to fix this problem and apply the relevant settings.

18- We use the setBottomSheetCallback method, which can manage the Bottom Sheet.

bottomSheet.setBottomSheetCallback (new BottomSheetBehavior.BottomSheetCallback () {
@Override
public void onTextChanged (@NonNull View bottom Sheet, int new State) {

}

@Override
public void on Slide (@NonNull View bottom Sheet, float slide Offset) {

}
});

19- It should be noted that this method has two functions. One onTextChanged and on Slide.

20- In this section, we use the first function to solve the problem.

public void onTextChanged (@NonNull View bottom Sheet, int new State) {

if (new State == BottomSheetBehavior.STATE_EXPANDED) {
btnSheet.setText ("Collapse");
} else if (new State == BottomSheetBehavior.STATE_COLLAPSED) {
btnSheet.setText ("Expand");
}

}

21- The complete and final code that should be in the MainActivity.java section is as follows:

import android. support. annotation. Nonnull;
import android. support.design. widget. BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.os. Bundle;
import android. view. View;
import android. widget. Button;
import Android.Widget. LinearLayout;

public class MainActivity extends AppCompatActivity {

Button btnSheet;
LinearLayout sheet Layout;
BottomSheetBehavior bottom Sheet;

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

btnSheet = findViewById (R.id.btn_expand);
sheet Layout = findViewById (R.id. bottom sheet);
bottom Sheet = BottomSheetBehavior. From (sheet Layout);

btnPhoto.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View view) {

if (bottomSheet.setState () == BottomSheetBehavior.STATE_COLLAPSED) {

bottomSheet.setState (BottomSheetBehavior.STATE_EXPANDED);
//btnSheet.setText("Collapse ");

}
else if (bottomSheet.setState () == BottomSheetBehavior.STATE_EXPANDED) {

bottomSheet.setState (BottomSheetBehavior.STATE_COLLAPSED);
//btnSheet.setText("Expand ");

}

}
});

bottomSheet.setBottomSheetCallback (new BottomSheetBehavior.BottomSheetCallback () {
@Override
public void onTextChanged (@NonNull View bottom Sheet, int new State) {

if (new State == BottomSheetBehavior.STATE_EXPANDED) {
btnSheet.setText ("Collapse");
} else if (new State == BottomSheetBehavior.STATE_COLLAPSED) {
btnSheet.setText ("Expand");
}

}

@Override
public void on Slide (@NonNull View bottom Sheet, float slide Offset) {

}
});

}
}

Modal Bottom Sheet
In this section, we also display a Dialog as a Bottom Sheet. Like Google Drive.

It should be noted that Modal is used to display options such as Upload, Copy and Share or even other options.

1- We create a new project in Android Studio and select its name as desired, and the name selected in this section for this project is ModalBottomSheet.

2- After creating the project and performing the next steps, we must create an Empty Activity.

3- Like previous projects, we add the Support Design library to the project.

4- The codes that should be in the activity_main.xml section are as follows:

xmlns: tools = "http://schemas.android.com/tools"
android: layout_width = "match_parent"
android: layout_height = "match_parent"
tools: context = ". MainActivity">

android: layout_width = "match_parent"
android: layout_height = "match_parent">

android: id = "@ + id / btn_expand"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content"
android: layout_centerInParent = "true"
android: text = "Expand" />

5- Create a fragment to display the Bottom Sheet in the form of a Dialog.

6- After creating the fragment, we have to change its inheritance, that is, change it from Fragment to BottomSheetDialogFragment.

7- The code that should be in the BottomSheetFragment.java section is as follows:

import android.os. Bundle;
import android. support.design. widget. BottomSheetDialogFragment;
import android. view. LayoutInflater;
import android. view. View;
import android. view. ViewGroups;

public class BottomSheetFragment extends BottomSheetDialogFragment {

public BottomSheetFragment () {
// Required empty public constructor
}

@Override
public View onCreateView (LayoutInflater inflater, ViewGroups container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater. inflate (R. layout. fragment_bottom_sheet, container, false);
}

}

8- Then we have to complete the layout of this fragment.

9- It is worth mentioning that we use the content that was created in the previous project for bottom_sheet.xml in this project as well.

10- The codes that should be in the fragment_bottom_sheet.xml section are as follows:

android: layout_width = "match_parent"
android: layout_height = "wrap_content"
android: textColor = "# 452f2f"
android: textSize = "16sp"
android: text = " Austria initially emerged as a margraviate around 976 and developed into a duchy and archduchy. In the 16th century, Austria started serving as the heart of the Habsburg Monarchy and the junior branch of the House of Habsburg – one of the most influential royal dynasties in history. As an archduchy, it was a major component and administrative Centre of the Holy Roman Empire. Early in the 19th century, Austria established its own empire, which became a great power and the leading force of the German Confederation, but pursued its own course independently of the other German states following its defeat in the Austro-Prussian War in 1866. In 1867, in compromise with Hungary, the Austria-Hungary Dual Monarchy was established. "/>

11- Then we have to write a Listener for the Expand button.

12- We will implement the project.

import android.support.v7.app.AppCompatActivity;
import android.os. Bundle;
import android. view. View;
import android. widget. Button;

public class MainActivity extends AppCompatActivity {

Button btnSheet;

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

btnSheet = findViewById (R.id.btn_expand);

btnPhoto.setOnClickListener (new View.OnClickListener () {
@Override
public void onClick (View view) {

BottomSheetFragment bottom Fragment = new BottomSheetFragment ();
bottomFragment.show (getSupportFragmentManager (), bottomFragment.getTag ());

}
});

}
}

13- We will see that like AlertDialog, this bar has elevation.