What is the function of Bottom Sheets in Android and what are they used for?
Another item that exists in Android systems is Bottom Sheets, which has many applications, and in the following, we will deal with its various tasks.
|
10 minute(s) read
|
Published on: May 13, 2021
Updated on: Dec 14, 2021
|
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 of Material Design, are on Android. They have two different types, Persistent and Modal Bottom Sheet (modal Android), both of which are used to display information to users. 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 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 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 is displayed, and all the desired operations can be performed there.
this 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 to create and launch this project properly, we must add the Support Design library to the project. Like the following:
In this project that we are building, we are just launching a simple Bottom, so 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.
5- The codes that should be in the activity_main.xml section are as follows:
We see that CoordinatorLayout is a subset of the Design library in the code listed above. Design is also used to control the movement of materials. In other words, if we use this in Bottom, it will make opening and closing this layout like animations. If we open and close it like animations, it will increase users' satisfaction and variety.
6- Define and create a simple Bottom. Like the following:
In the code above, we add a LinearLayout to the two TextViews. Note that we must define LinearLayout as a Bottom. Like the following:
By inserting the above code and adding a layout, we will cause Android to consider it a Bottom. The value of this property can be defined as follows:
Then, hold down the Ctrl key on the keyboard and click on the value entered above. This will connect to the values.xml file 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 we have created is currently fixed and does not change by dragging down or up.
10- To adjust it so that it changes by dragging down or up, we must add the property listed below to the Bottom Sheet.
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- To not be hidden by dragging the bar to the Bottom and to be displayed in a smaller size, we must do the following.
15- The final and complete codes that should be in the activity_main.xml section are as follows:
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. 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.
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 tape size 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. The bottom Sheet is used to show information and details, and the 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. 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:
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.
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 inside it. In this section, we did not specify a height for the bar.
7- Create a new layout with the desired name, such as bottom_sheet.xml, and put the code below.
8- The complete and final codes that should be in the activity_main.xml section are as follows:
9- After applying the changes, if we run the project, we will see that the tape will open at 60dp first, and if we drag it upwards, its size will be larger.
10- In this section, we have to make changes and adjustments so that the button opens the page.
11- We complete the activity as follows:
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 set the Bottom-Sheet mode, we use the set State () method.
In the code above, we have selected STATE_EXPANDED, but we can make it open by touching the status bar button by selecting it.
12- We will implement the project.
13- After implementing 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 hidden changes by touching the bar button. Like the following:
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:
.jpg "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.")
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 the 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.
19- It should be noted that this method has two functions. One context changed and on Slide.
20- In this section, we use the first function to solve the problem.
21- The complete and final code that should be in the MainActivity.java section is as follows:
Modal
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:
5- Create a fragment to display it 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:
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:
11- Then, we have to write a Listener for the Expand button.
12- We will implement the project.
13- We will see that, like AlertDialog, this bar has elevation.
14- It is removed by pressing the back button or dragging it down.
15- We complete it as follows:
About our Android and iOS app development services