How to create a Bottom Sheet with icons


(oaltair) #1

The Bottom Sheet component is a container that is attached to the bottom of the screen and displays information additional to that shown on the main screen. This information can be an alternative menu that the user can use or simply some dialogue information. It is a modal window and therefore requires a user action to disappear.

Fig. 1 Bottom Sheet example

  1. Sheet
  2. Contents
  3. Main Screen

Creating a Bottom Sheet
In the component palette, click on the category User interface and drag the Bottom Sheet component into the design viewer.

Fig. 2 Bottom Sheet component

Bottom Sheet is a non-visible component so it is located at the bottom of the viewer and its properties are available in the properties panel on the right side.

You can build a Bottom Sheet in two ways:

  1. Register a component that will be the bottom sheet. To do this drag to the screen the component that will be shown in the Bottom Sheet. In this example we use a Label component.

In the blocks window, click on the Bottom Sheet component and select the Register Component As Dialog procedure block and build something like this:

Fig. 3 Registering a component in the Bottom Sheet

The registered component, in this case Label1, will be displayed on the Bottom Sheet.

  1. Register a layout that can contain several components. To do this, create the layout you want, using components from the Layout category and others. In this example we use a Vertical Arrangement component, inside which we place four Label components with the texts Share, Edit name, Delete collection and Get link.

In the blocks window, click on the Bottom Sheet component and select the Register Layout As Dialog procedure block and build something like this:

Fig. 4 Registering a layout in the Bottom Sheet

The layout you just registered will be the Bottom Sheet and should look similar to figure 1.

Showing Bottom Sheet

To show the Bottom Sheet (component or layout) you must use the Show Dialog procedure of the Bottom Sheet component, placed inside a component event. In this example we use the event Click of a button. Add a button component and build something like the following:

Fig. 5a Registering a component and displaying the Bottom Sheet

Fig. 5b Registering a layout and displaying the Bottom Sheet

NOTE: Use only one of the two options

Checking the status (open / closed) of the bottom sheet

You can know if the bottom sheet was opened or closed and build the corresponding event handler. In this case we use a Notifier component to show an alert when one of the two events (Open / Close) of the bottom sheet happens. Add a Notifier component and build something like this:

Fig. 6 Bottom_Sheet Opened Event

Fig. 7 Bottom_Sheet Closed Event

Hiding the Bottom Sheet

You can programmatically hide the Bottom Sheet. To do this, use the Hide Dialog procedure of the Bottom Sheet component, placed inside a component event. In this example we use the Click event of a button. Add another button and build something like this:

Fig. 8 Hide the Bottom Sheet

If you want to create a Bottom Sheet like the one shown in Fig. 1, do the following:

  1. Build the following layout:

Fig. 9 Layout

  1. Vertical Arrangement (1)
  2. Horizontal Arrangement (4)
  3. Label (9)

Note: You can name the labels like this: lblIconShare and lblShare and so on. For icon labels (such as lblIconShare) you must set the Font Typeface property to Material Icons

  1. Register layout

Fig. 10 Registering the layout

Note: You can create the createBottomSheet procedure.

  1. Initializes the screen.

Fig. 11 Initializing the screen

  1. Call the Show Dialog procedure from some event

Fig. 12 Showing the Bottom Sheet

  1. Builds the event handler for each menu option.

Fig. 13 Example of Event handler for the selected item

  1. Places the event handler in the event Click of the labels

Fig. 14 Event handler in the event Click of the labels

Happy Koding!



(Marlon Rodríguez) #2

What this component does, you can do with Animation Util. But unlike the customization component, you have to have the Visible component to appear with the Sheet component. It will be necessary to add a block that makes it visible when it is executed, and then it hides in the lower part.


(KaFa) #3

Really nice Guide! Keep up the good work :clap:


(alejandro elizondo) #4

Excelente explicación!!!