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 |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_RED |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PINK |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_DEEP-PURPLE |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_INDIGO |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_LIGHT-BLUE |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_CYAN |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_TEAL |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIGHT-GREEN |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_LIME |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_YELLOW |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_AMBER |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_DEEP-ORANGE |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_BROWN |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
COLOR_BLUE-GREY |
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.