ABMaterial makes use of 'Themes' to set properties like backcolors, text colors, Zdepths, etc... to ABMComponents. Good practice is using a module (like ABMChared' in this demo) to create all the themes you'll need a lot in all your pages. You can set in each page the themes specifically needed for that page.

Creating a theme is done using the Theme.AddxxxxxxTheme("Name") methods. The name you give the theme can then be used later in the ThemeName parameter of the ABMComponent. Next you use the Theme.xxxxxx("name") methods to set properties like backcolors, zdepths, alignments etc...

In this demo app, this is the code of the themes that are used accross the app.

Sub BuildTheme(themeName As String)
	MyTheme.Initialize(themeName)
	
	// the page theme
	MyTheme.Page.BackColor = ABM.COLOR_BLUEGREY
	MyTheme.Page.BackColorIntensity = ABM.INTENSITY_LIGHTEN4
	
	// the navbar theme
	MyTheme.AddNavigationBarTheme("nav1theme")
	MyTheme.NavigationBar("nav1theme").TopBarBackColor = ABM.COLOR_LIGHTBLUE
	
	// another navbar theme
	MyTheme.AddNavigationBarTheme("nav2theme")
	MyTheme.NavigationBar("nav2theme").TopBarBackColor = ABM.COLOR_RED
	
	// the footer theme
	MyTheme.AddContainerTheme("footertheme")
	MyTheme.Container("footertheme").BackColor = ABM.COLOR_LIGHTBLUE
	MyTheme.Container("footertheme").BackColorIntensity = ABM.INTENSITY_DARKEN3
	
	// footer label theme
	MyTheme.AddLabelTheme("whitefc")
	MyTheme.Label("whitefc").ForeColor = ABM.COLOR_WHITE
		
	// a label header theme
	MyTheme.AddLabelTheme("lightblue")
	MyTheme.Label("lightblue").ForeColor = ABM.COLOR_LIGHTBLUE	
	MyTheme.Label("lightblue").ForeColorIntensity = ABM.INTENSITY_DARKEN2
	
	// a table theme
	MyTheme.AddTableTheme("params")
	MyTheme.Table("params").ZDepth = ABM.ZDEPTH_2
	MyTheme.Table("params").AddCellTheme("header")
	MyTheme.Table("params").Cell("header").BackColor = ABM.COLOR_BLUEGREY
	MyTheme.Table("params").Cell("header").BackColorIntensity = ABM.INTENSITY_DARKEN2
	MyTheme.Table("params").Cell("header").ForeColor = ABM.COLOR_WHITE
	MyTheme.Table("params").AddCellTheme("name")
	MyTheme.Table("params").Cell("name").BackColor = ABM.COLOR_BLUEGREY
	MyTheme.Table("params").Cell("name").BackColorIntensity = ABM.INTENSITY_LIGHTEN2
	MyTheme.Table("params").Cell("name").VerticalAlign = ABM.TABLECELL_VERTICALALIGN_TOP
	MyTheme.Table("params").AddCellTheme("description")
	MyTheme.Table("params").Cell("description").BackColor = ABM.COLOR_WHITE	
	MyTheme.Table("params").Cell("description").VerticalAlign = ABM.TABLECELL_VERTICALALIGN_TOP	
	
	// a toast theme
	MyTheme.AddToastTheme("toast")
	MyTheme.Toast("toast").Rounded = True
	MyTheme.Toast("toast").ActionForeColor = ABM.COLOR_ORANGE
	
	// another toast theme
	MyTheme.AddToastTheme("toastred")
	MyTheme.Toast("toastred").Rounded = True
	MyTheme.Toast("toastred").ActionForeColor = ABM.COLOR_BLACK
	MyTheme.Toast("toastred").BackColor = ABM.COLOR_RED
	
End Sub

And this is the code specific for the CompButtonPage

public Sub BuildTheme()
	// start with the base theme defined in ABMShared
	theme.Initialize("pagetheme")
	theme.AddABMTheme(ABMShared.MyTheme)
	
	// add additional themes specific for this page
	
	// toast theme
	theme.AddToastTheme("toastgreen")
	theme.Toast("toastgreen").BackColor = ABM.COLOR_GREEN
	theme.Toast("toastgreen").BackColorIntensity = ABM.INTENSITY_DARKEN2
	
	// bluegray button
	theme.AddButtonTheme("bluegrey")
	theme.Button("bluegrey").BackColor = ABM.COLOR_BLUEGREY
	theme.Button("bluegrey").BackColorIntensity = ABM.INTENSITY_DARKEN1
	
	// darkred button
	theme.AddButtonTheme("darkred")
	theme.Button("darkred").BackColor = ABM.COLOR_RED
	theme.Button("darkred").BackColorIntensity = ABM.INTENSITY_DARKEN1
	
	// transparent button
	theme.AddButtonTheme("transparent")
	theme.Button("transparent").BackColor = ABM.COLOR_TRANSPARENT	
	
	// darkgreen button
	theme.AddButtonTheme("darkgreen")
	theme.Button("darkgreen").BackColor = ABM.COLOR_GREEN
	theme.Button("darkgreen").BackColorIntensity = ABM.INTENSITY_DARKEN1	
	
	// modal sheet
	theme.AddContainerTheme("modalcontent")
	theme.Container("modalcontent").BackColor = ABM.COLOR_WHITE	
End Sub
Colors

This is the color palette that can be used within ABMaterial. Use the ABM.COLOR_XXXX and ABM.INTENSITY_XXXX constants!

COLOR_RED
INTENSITY_LIGHTEN-5

COLOR_RED
INTENSITY_LIGHTEN-4

COLOR_RED
INTENSITY_LIGHTEN-3

COLOR_RED
INTENSITY_LIGHTEN-2

COLOR_RED
INTENSITY_LIGHTEN-1

COLOR_RED
INTENSITY_

COLOR_RED
INTENSITY_DARKEN-1

COLOR_RED
INTENSITY_DARKEN-2

COLOR_RED
INTENSITY_DARKEN-3

COLOR_RED
INTENSITY_DARKEN-4

COLOR_RED
INTENSITY_ACCENT-1

COLOR_RED
INTENSITY_ACCENT-2

COLOR_RED
INTENSITY_ACCENT-3

COLOR_RED
INTENSITY_ACCENT-4

COLOR_PINK
INTENSITY_LIGHTEN-5

COLOR_PINK
INTENSITY_LIGHTEN-4

COLOR_PINK
INTENSITY_LIGHTEN-3

COLOR_PINK
INTENSITY_LIGHTEN-2

COLOR_PINK
INTENSITY_LIGHTEN-1

COLOR_PINK
INTENSITY_

COLOR_PINK
INTENSITY_DARKEN-1

COLOR_PINK
INTENSITY_DARKEN-2

COLOR_PINK
INTENSITY_DARKEN-3

COLOR_PINK
INTENSITY_DARKEN-4

COLOR_PINK
INTENSITY_ACCENT-1

COLOR_PINK
INTENSITY_ACCENT-2

COLOR_PINK
INTENSITY_ACCENT-3

COLOR_PINK
INTENSITY_ACCENT-4

COLOR_PURPLE
INTENSITY_LIGHTEN-5

COLOR_PURPLE
INTENSITY_LIGHTEN-4

COLOR_PURPLE
INTENSITY_LIGHTEN-3

COLOR_PURPLE
INTENSITY_LIGHTEN-2

COLOR_PURPLE
INTENSITY_LIGHTEN-1

COLOR_PURPLE
INTENSITY_

COLOR_PURPLE
INTENSITY_DARKEN-1

COLOR_PURPLE
INTENSITY_DARKEN-2

COLOR_PURPLE
INTENSITY_DARKEN-3

COLOR_PURPLE
INTENSITY_DARKEN-4

COLOR_PURPLE
INTENSITY_ACCENT-1

COLOR_PURPLE
INTENSITY_ACCENT-2

COLOR_PURPLE
INTENSITY_ACCENT-3

COLOR_PURPLE
INTENSITY_ACCENT-4

COLOR_DEEP-PURPLE
INTENSITY_LIGHTEN-5

COLOR_DEEP-PURPLE
INTENSITY_LIGHTEN-4

COLOR_DEEP-PURPLE
INTENSITY_LIGHTEN-3

COLOR_DEEP-PURPLE
INTENSITY_LIGHTEN-2

COLOR_DEEP-PURPLE
INTENSITY_LIGHTEN-1

COLOR_DEEP-PURPLE
INTENSITY_

COLOR_DEEP-PURPLE
INTENSITY_DARKEN-1

COLOR_DEEP-PURPLE
INTENSITY_DARKEN-2

COLOR_DEEP-PURPLE
INTENSITY_DARKEN-3

COLOR_DEEP-PURPLE
INTENSITY_DARKEN-4

COLOR_DEEP-PURPLE
INTENSITY_ACCENT-1

COLOR_DEEP-PURPLE
INTENSITY_ACCENT-2

COLOR_DEEP-PURPLE
INTENSITY_ACCENT-3

COLOR_DEEP-PURPLE
INTENSITY_ACCENT-4

COLOR_INDIGO
INTENSITY_LIGHTEN-5

COLOR_INDIGO
INTENSITY_LIGHTEN-4

COLOR_INDIGO
INTENSITY_LIGHTEN-3

COLOR_INDIGO
INTENSITY_LIGHTEN-2

COLOR_INDIGO
INTENSITY_LIGHTEN-1

COLOR_INDIGO
INTENSITY_

COLOR_INDIGO
INTENSITY_DARKEN-1

COLOR_INDIGO
INTENSITY_DARKEN-2

COLOR_INDIGO
INTENSITY_DARKEN-3

COLOR_INDIGO
INTENSITY_DARKEN-4

COLOR_INDIGO
INTENSITY_ACCENT-1

COLOR_INDIGO
INTENSITY_ACCENT-2

COLOR_INDIGO
INTENSITY_ACCENT-3

COLOR_INDIGO
INTENSITY_ACCENT-4

COLOR_BLUE
INTENSITY_LIGHTEN-5

COLOR_BLUE
INTENSITY_LIGHTEN-4

COLOR_BLUE
INTENSITY_LIGHTEN-3

COLOR_BLUE
INTENSITY_LIGHTEN-2

COLOR_BLUE
INTENSITY_LIGHTEN-1

COLOR_BLUE
INTENSITY_

COLOR_BLUE
INTENSITY_DARKEN-1

COLOR_BLUE
INTENSITY_DARKEN-2

COLOR_BLUE
INTENSITY_DARKEN-3

COLOR_BLUE
INTENSITY_DARKEN-4

COLOR_BLUE
INTENSITY_ACCENT-1

COLOR_BLUE
INTENSITY_ACCENT-2

COLOR_BLUE
INTENSITY_ACCENT-3

COLOR_BLUE
INTENSITY_ACCENT-4

COLOR_LIGHT-BLUE
INTENSITY_LIGHTEN-5

COLOR_LIGHT-BLUE
INTENSITY_LIGHTEN-4

COLOR_LIGHT-BLUE
INTENSITY_LIGHTEN-3

COLOR_LIGHT-BLUE
INTENSITY_LIGHTEN-2

COLOR_LIGHT-BLUE
INTENSITY_LIGHTEN-1

COLOR_LIGHT-BLUE
INTENSITY_

COLOR_LIGHT-BLUE
INTENSITY_DARKEN-1

COLOR_LIGHT-BLUE
INTENSITY_DARKEN-2

COLOR_LIGHT-BLUE
INTENSITY_DARKEN-3

COLOR_LIGHT-BLUE
INTENSITY_DARKEN-4

COLOR_LIGHT-BLUE
INTENSITY_ACCENT-1

COLOR_LIGHT-BLUE
INTENSITY_ACCENT-2

COLOR_LIGHT-BLUE
INTENSITY_ACCENT-3

COLOR_LIGHT-BLUE
INTENSITY_ACCENT-4

COLOR_CYAN
INTENSITY_LIGHTEN-5

COLOR_CYAN
INTENSITY_LIGHTEN-4

COLOR_CYAN
INTENSITY_LIGHTEN-3

COLOR_CYAN
INTENSITY_LIGHTEN-2

COLOR_CYAN
INTENSITY_LIGHTEN-1

COLOR_CYAN
INTENSITY_

COLOR_CYAN
INTENSITY_DARKEN-1

COLOR_CYAN
INTENSITY_DARKEN-2

COLOR_CYAN
INTENSITY_DARKEN-3

COLOR_CYAN
INTENSITY_DARKEN-4

COLOR_CYAN
INTENSITY_ACCENT-1

COLOR_CYAN
INTENSITY_ACCENT-2

COLOR_CYAN
INTENSITY_ACCENT-3

COLOR_CYAN
INTENSITY_ACCENT-4

COLOR_TEAL
INTENSITY_LIGHTEN-5

COLOR_TEAL
INTENSITY_LIGHTEN-4

COLOR_TEAL
INTENSITY_LIGHTEN-3

COLOR_TEAL
INTENSITY_LIGHTEN-2

COLOR_TEAL
INTENSITY_LIGHTEN-1

COLOR_TEAL
INTENSITY_

COLOR_TEAL
INTENSITY_DARKEN-1

COLOR_TEAL
INTENSITY_DARKEN-2

COLOR_TEAL
INTENSITY_DARKEN-3

COLOR_TEAL
INTENSITY_DARKEN-4

COLOR_TEAL
INTENSITY_ACCENT-1

COLOR_TEAL
INTENSITY_ACCENT-2

COLOR_TEAL
INTENSITY_ACCENT-3

COLOR_TEAL
INTENSITY_ACCENT-4

COLOR_GREEN
INTENSITY_LIGHTEN-5

COLOR_GREEN
INTENSITY_LIGHTEN-4

COLOR_GREEN
INTENSITY_LIGHTEN-3

COLOR_GREEN
INTENSITY_LIGHTEN-2

COLOR_GREEN
INTENSITY_LIGHTEN-1

COLOR_GREEN
INTENSITY_

COLOR_GREEN
INTENSITY_DARKEN-1

COLOR_GREEN
INTENSITY_DARKEN-2

COLOR_GREEN
INTENSITY_DARKEN-3

COLOR_GREEN
INTENSITY_DARKEN-4

COLOR_GREEN
INTENSITY_ACCENT-1

COLOR_GREEN
INTENSITY_ACCENT-2

COLOR_GREEN
INTENSITY_ACCENT-3

COLOR_GREEN
INTENSITY_ACCENT-4

COLOR_LIGHT-GREEN
INTENSITY_LIGHTEN-5

COLOR_LIGHT-GREEN
INTENSITY_LIGHTEN-4

COLOR_LIGHT-GREEN
INTENSITY_LIGHTEN-3

COLOR_LIGHT-GREEN
INTENSITY_LIGHTEN-2

COLOR_LIGHT-GREEN
INTENSITY_LIGHTEN-1

COLOR_LIGHT-GREEN
INTENSITY_

COLOR_LIGHT-GREEN
INTENSITY_DARKEN-1

COLOR_LIGHT-GREEN
INTENSITY_DARKEN-2

COLOR_LIGHT-GREEN
INTENSITY_DARKEN-3

COLOR_LIGHT-GREEN
INTENSITY_DARKEN-4

COLOR_LIGHT-GREEN
INTENSITY_ACCENT-1

COLOR_LIGHT-GREEN
INTENSITY_ACCENT-2

COLOR_LIGHT-GREEN
INTENSITY_ACCENT-3

COLOR_LIGHT-GREEN
INTENSITY_ACCENT-4

COLOR_LIME
INTENSITY_LIGHTEN-5

COLOR_LIME
INTENSITY_LIGHTEN-4

COLOR_LIME
INTENSITY_LIGHTEN-3

COLOR_LIME
INTENSITY_LIGHTEN-2

COLOR_LIME
INTENSITY_LIGHTEN-1

COLOR_LIME
INTENSITY_

COLOR_LIME
INTENSITY_DARKEN-1

COLOR_LIME
INTENSITY_DARKEN-2

COLOR_LIME
INTENSITY_DARKEN-3

COLOR_LIME
INTENSITY_DARKEN-4

COLOR_LIME
INTENSITY_ACCENT-1

COLOR_LIME
INTENSITY_ACCENT-2

COLOR_LIME
INTENSITY_ACCENT-3

COLOR_LIME
INTENSITY_ACCENT-4

COLOR_YELLOW
INTENSITY_LIGHTEN-5

COLOR_YELLOW
INTENSITY_LIGHTEN-4

COLOR_YELLOW
INTENSITY_LIGHTEN-3

COLOR_YELLOW
INTENSITY_LIGHTEN-2

COLOR_YELLOW
INTENSITY_LIGHTEN-1

COLOR_YELLOW
INTENSITY_

COLOR_YELLOW
INTENSITY_DARKEN-1

COLOR_YELLOW
INTENSITY_DARKEN-2

COLOR_YELLOW
INTENSITY_DARKEN-3

COLOR_YELLOW
INTENSITY_DARKEN-4

COLOR_YELLOW
INTENSITY_ACCENT-1

COLOR_YELLOW
INTENSITY_ACCENT-2

COLOR_YELLOW
INTENSITY_ACCENT-3

COLOR_YELLOW
INTENSITY_ACCENT-4

COLOR_AMBER
INTENSITY_LIGHTEN-5

COLOR_AMBER
INTENSITY_LIGHTEN-4

COLOR_AMBER
INTENSITY_LIGHTEN-3

COLOR_AMBER
INTENSITY_LIGHTEN-2

COLOR_AMBER
INTENSITY_LIGHTEN-1

COLOR_AMBER
INTENSITY_

COLOR_AMBER
INTENSITY_DARKEN-1

COLOR_AMBER
INTENSITY_DARKEN-2

COLOR_AMBER
INTENSITY_DARKEN-3

COLOR_AMBER
INTENSITY_DARKEN-4

COLOR_AMBER
INTENSITY_ACCENT-1

COLOR_AMBER
INTENSITY_ACCENT-2

COLOR_AMBER
INTENSITY_ACCENT-3

COLOR_AMBER
INTENSITY_ACCENT-4

COLOR_ORANGE
INTENSITY_LIGHTEN-5

COLOR_ORANGE
INTENSITY_LIGHTEN-4

COLOR_ORANGE
INTENSITY_LIGHTEN-3

COLOR_ORANGE
INTENSITY_LIGHTEN-2

COLOR_ORANGE
INTENSITY_LIGHTEN-1

COLOR_ORANGE
INTENSITY_

COLOR_ORANGE
INTENSITY_DARKEN-1

COLOR_ORANGE
INTENSITY_DARKEN-2

COLOR_ORANGE
INTENSITY_DARKEN-3

COLOR_ORANGE
INTENSITY_DARKEN-4

COLOR_ORANGE
INTENSITY_ACCENT-1

COLOR_ORANGE
INTENSITY_ACCENT-2

COLOR_ORANGE
INTENSITY_ACCENT-3

COLOR_ORANGE
INTENSITY_ACCENT-4

COLOR_DEEP-ORANGE
INTENSITY_LIGHTEN-5

COLOR_DEEP-ORANGE
INTENSITY_LIGHTEN-4

COLOR_DEEP-ORANGE
INTENSITY_LIGHTEN-3

COLOR_DEEP-ORANGE
INTENSITY_LIGHTEN-2

COLOR_DEEP-ORANGE
INTENSITY_LIGHTEN-1

COLOR_DEEP-ORANGE
INTENSITY_

COLOR_DEEP-ORANGE
INTENSITY_DARKEN-1

COLOR_DEEP-ORANGE
INTENSITY_DARKEN-2

COLOR_DEEP-ORANGE
INTENSITY_DARKEN-3

COLOR_DEEP-ORANGE
INTENSITY_DARKEN-4

COLOR_DEEP-ORANGE
INTENSITY_ACCENT-1

COLOR_DEEP-ORANGE
INTENSITY_ACCENT-2

COLOR_DEEP-ORANGE
INTENSITY_ACCENT-3

COLOR_DEEP-ORANGE
INTENSITY_ACCENT-4

COLOR_BROWN
INTENSITY_LIGHTEN-5

COLOR_BROWN
INTENSITY_LIGHTEN-4

COLOR_BROWN
INTENSITY_LIGHTEN-3

COLOR_BROWN
INTENSITY_LIGHTEN-2

COLOR_BROWN
INTENSITY_LIGHTEN-1

COLOR_BROWN
INTENSITY_

COLOR_BROWN
INTENSITY_DARKEN-1

COLOR_BROWN
INTENSITY_DARKEN-2

COLOR_BROWN
INTENSITY_DARKEN-3

COLOR_BROWN
INTENSITY_DARKEN-4

COLOR_GREY
INTENSITY_LIGHTEN-5

COLOR_GREY
INTENSITY_LIGHTEN-4

COLOR_GREY
INTENSITY_LIGHTEN-3

COLOR_GREY
INTENSITY_LIGHTEN-2

COLOR_GREY
INTENSITY_LIGHTEN-1

COLOR_GREY
INTENSITY_

COLOR_GREY
INTENSITY_DARKEN-1

COLOR_GREY
INTENSITY_DARKEN-2

COLOR_GREY
INTENSITY_DARKEN-3

COLOR_GREY
INTENSITY_DARKEN-4

COLOR_BLUE-GREY
INTENSITY_LIGHTEN-5

COLOR_BLUE-GREY
INTENSITY_LIGHTEN-4

COLOR_BLUE-GREY
INTENSITY_LIGHTEN-3

COLOR_BLUE-GREY
INTENSITY_LIGHTEN-2

COLOR_BLUE-GREY
INTENSITY_LIGHTEN-1

COLOR_BLUE-GREY
INTENSITY_

COLOR_BLUE-GREY
INTENSITY_DARKEN-1

COLOR_BLUE-GREY
INTENSITY_DARKEN-2

COLOR_BLUE-GREY
INTENSITY_DARKEN-3

COLOR_BLUE-GREY
INTENSITY_DARKEN-4

COLOR_BLACK
 

COLOR_WHITE
 

COLOR_TRANSPARENT
 

The ZDEPTH_ constans can be used to set the ZDepth of a component.

ZDEPTH_REMOVE

ZDEPTH_1

ZDEPTH_2

ZDEPTH_3

ZDEPTH_4

ZDEPTH_5

Now is a good time to start reading the Grids chapter and find out how layouts are designed in Googles Material Design. Click the Grids section in the menu.