Android Tutorial Navigation Side Menu

I was playing around with the ListView and found it a great use for a menu system.
Following along as much as possible with the design concepts defined on a Material.io design web site.

See the attached B4A project zip file to see how I approached it.
The example displays the side navigation menu as a permanent/status menu list. More appropriate for a tablet size layout.
The same code concepts can be applied to the B4XDrawer Left Panel loading of menu options.
The list of menu options uses the FontAwesome icons with the menu title.

Click the Settings menu option to see how I handle showing a list of options - date and time formats that can be set by the user.
Click on one of these options to see the option values slide in on a panel. When an option is selected, the panel slides away and the setting is updated.

If someone can come up with a better way to display and select the date and time formats, instead of my pre-built panels, that would be appreciated.

This is just something to give back to the community, who has helped me over the years.

Screenshot_2022.08.23_12.04.31.456.png
Screenshot_2022.08.23_12.04.48.505.png
 

Attachments

  • NavigationMenuOptimized.zip
    14 KB · Views: 778

biggiu

Member
Licensed User
Longtime User
I was playing around with the ListView and found it a great use for a menu system.
Following along as much as possible with the design concepts defined on a Material.io design web site.

See the attached B4A project zip file to see how I approached it.
The example displays the side navigation menu as a permanent/status menu list. More appropriate for a tablet size layout.
The same code concepts can be applied to the B4XDrawer Left Panel loading of menu options.
The list of menu options uses the FontAwesome icons with the menu title.

Click the Settings menu option to see how I handle showing a list of options - date and time formats that can be set by the user.
Click on one of these options to see the option values slide in on a panel. When an option is selected, the panel slides away and the setting is updated.

If someone can come up with a better way to display and select the date and time formats, instead of my pre-built panels, that would be appreciated.

This is just something to give back to the community, who has helped me over the years.

View attachment 132890View attachment 132891
Hello and congratulations on your work.
I have a curiosity to satisfy, if I may ask:
How do you manage FontAwesome icons?
I couldn't figure it out from the code.
Thank you and good day.
 

biggiu

Member
Licensed User
Longtime User
Hello and congratulations on your work.
I have a curiosity to satisfy, if I may ask:
How do you manage FontAwesome icons?
I couldn't figure it out from the code.
Thank you and good day.
 

mcqueccu

Well-Known Member
Licensed User
Longtime User
Those are the fonts Icons pointed with the Arrow A


1711531581406.png

To get the font code,
Right Click in the IDE, and Select ICON PICKER (As shown with Arrow B).
A font popup will appear (as shown below), click on any fonticon you like (It will copy its code)
Paste it

1711531703619.png
 

Attachments

  • 1711531436078.png
    1711531436078.png
    44.8 KB · Views: 114
  • 1711531689354.png
    1711531689354.png
    52.8 KB · Views: 107
Top