Color Scheme

Default Colors

Material Design comes designed with a built-in, baseline theme that can be used as-is, straight out of the proverbial box. Material Design - Color Theme Creation

Leveraging Material Design, the VenueNext Android SDK also comes with a built-in, baseline color scheme that can be used out of the box. The VenueNext Android SDK defaults to the following colors:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="vnColorPrimary">#1774C1</color>
  <color name="vnColorPrimaryDark">#004990k</color>
  <color name="vnColorAccent">#8E73A3</color>
  <color name="vnColorAccentDark">#604774</color>

  <color name="vnColorSurface">#FFFFFF</color>

  <color name="vnColorOnPrimary">#FFFFFF</color>
  <color name="vnColorOnPrimaryVariant">#A6FFFFFF</color>
  <color name="vnColorOnAccent">#FFFFFF</color>
  <color name="vnColorOnAccentVariant">#A6000000</color>
  <color name="vnColorOnSurface">#000000</color>
  <color name="vnColorOnSurfaceVariant">#A6000000</color>
</resources>

Customizing Your App Colors

Any of the VenueNext Android SDK colors can be overridden by your app level colors.xml file, which is generated automatically when creating a new Android project.

For example, if you want to change the surface color, which is white (#FFFFFF) by default, a color named vnColorSurface should be added to your app level colors.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Other color values here -->
    <color name="vnColorSurface">#[your-desired-hex-value]</color>
</resources>

All instances of vnColorSurface will now be displayed as the color of your choice. This is the pattern for overriding all VenueNext Android SDK colors.

Colors Explained

Colors

vnColorPrimary

This is the primary branding color of the app. This is used mostly on long-lived components that manifest throughout the app, such as the AppBar and the NavBar.

vnColorPrimaryDark

This is a variation of the primary color. By default, this is the color of the status bar.

vnColorAccent

A secondary color provides more ways to accent and distinguish your product. Material Design - Color Theme Creation

The accent color is a secondary color to be used within the app. The accent color is applied mainly to interactive elements such as buttons, and other elements such as progress bars.

vnColorAccentDark

This is a variation of the accent color. For buttons with gradients, this is the color that the accent will fade into. If this is not overridden, it defaults to vnColorAccent.

vnColorSurface

This is a foreground color for elements sitting on top of the background. This is the color of cells, cards, and most screens.

‘On’ Colors

The elements in an app use colors from specific categories in your color palette, such as a primary color. Whenever other screen elements, such as text or icons, appear in front of surfaces using those colors, those elements should use colors specifically designed to appear clearly and legibly against the colors behind them.

This category of colors is called “on” colors, referring to the fact that they color elements that are sometimes placed “on” top of key surfaces that use a primary color, secondary color, surface color, background color, or error color. These are labelled using the original category name (such as primary color) with the prefix “on”.

Material Design - Color Theme Creation

These colors are used mostly on typography and iconography.

vnColorOnPrimary

This is the color that is used for main or title typography and iconography that sits on top of the primary color.

vnColorOnPrimaryVariant

This is an optional color that can be used for descriptive or body typography and iconography that sits on top of the primary color. If not overridden, this color defaults to vnColorOnPrimary.

vnColorOnAccent

This is the color that is used for main or title typography and iconography that sits on top of the accent color.

vnColorOnAccentVariant

This is an optional color that can be used for descriptive or body typography and iconography that sits on top of the accent color. If not overridden, this color defaults to vnColorOnAccent.

vnColorOnSurface

This is the color that is used for main or title typography and iconography that sits on top of the primary color.

vnColorOnSurfaceVariant

This is an optional color that can be used for descriptive or body typography and iconography that sits on top of the surface color. If not overridden, this color defaults to vnColorOnSurface.

Updated: