Side Menu

Overview
The SideMenu component is a navigation drawer that slides on the side of the current view. By default, slide from the left, but the side can be replaced. The sideMenu is customized through containers and specifications that allow you to set the SideMenu object or through the SideMenuContainer class.
The sideMenu, as an important part of the user interface, have their own standards. Therefore it is recommended to review the Material Design for more information and to enjoy the component better. To learn how to design notifications and their interactions, read what MaterialDesing talks about Menus.
Creating SideMenu
First, you create the SideMenuContainerobject and inside the initUI() you instantiate the objects corresponding to the items, through the SideMenuContainer.Item and there you pass the characteristics you want, such as caption, icon, presenter.
After that, you instantiate your SideMenuContainerobject and point to the SideMenuContainer.item that you created earlier.
And then just customize the header of your Side Menu through topMenu.header.
Finally just pass the other information you want on your sideMenuContainer object, such as font color, bar size and so on.

Content Needed to Create a SideMenu
sideMenuContainer
sideMenuContainer.Item
Capition
Image or IconType
Presenter
TopMenu.Header
Icon _Menu.
Optional SideMenu Settings and Content
Inside the sideMenuContainer.Item you can still have:
Caption
Image or IconType (advise using MaterialIcon)
Color
Boolean showTitle
Presenter
And you can even specify directly in the sideMenuContainer.topMenu:
.drawSeparators = boolean - To place or not the lines separating the items
.itemHeightFactor = int - To say the item's size.
Usage
SideMenuSample
public void initUI(){
		SideMenuContainer.Item home = new SideMenuContainer.Item("Home", MaterialIcons._HOME, 0x4A90E2, ()-> {return new Home();});
		SideMenuContainer.Item sample = new SideMenuContainer.Item("Home", MaterialIcons._THUMB_UP, 0x4A90E2, ()-> {return new Sample();});
		SideMenuContainer sideMenu = new SideMenuContainer(null, home, sample);
		
		sideMenu.topMenu.header = new Container(){
			public void initUI(){
				setBackColor(0xaa443b);
				
				Label title = new Label("SideMenu", CENTER, Color.WHITE, false);
				title.setFont(Font.getFont("Lato Bold", false, this.getFont().size+5));
				title.setForeColor(Color.WHITE);
				add(title, LEFT+45, BOTTOM-45, PARENTSIZE+40, DP+56);
			}
		};
		
		sideMenu.setBarFont(Font.getFont(Font.getDefaultFontSize()+2));
		sideMenu.setBackColor(0x4A90E2);
		sideMenu.setForeColor(Color.WHITE);
		sideMenu.setItemForeColor(Color.BLACK);
		sideMenu.topMenu.drawSeparators = false;
		sideMenu.topMenu.itemHeightFactor = 3;
		
		Icon icon = new Icon(MaterialIcons._MENU);
		icon.setBackColor(Color.WHITE);
		add(icon, CENTER, TOP);
		add(sideMenu, LEFT, TOP, PARENTSIZE, PARENTSIZE);
	}
References
To see the complete example, just click here​
​

Scroll Container

Slider

Last modified 3yr ago