Material Design with Vaadin

The Vaadin 8 framework uses the excellent Valo theme, which can be used out-of-the-box or as the base for a custom theme. The (old school) themes for Vaadin 7 (reindeer, runo and chameleon) are still usable with the vaadin-compability-themes.jar.

During the last couple of weeks (June 2017) some interesting add-ons in the vaadin directory appeared to support Google’s material design language. Material design relies on “flat” card areas and a minimalistic (but professional) layout approach using shadows and animations to show what information is most important. As I am writing this post you can enhance your vaadin projects with

  • Material a theme that implements the material design language (based on the Valo theme)
  • Material Icons an add-on to use all material icons (by Google)
  • Material Design Stepper a component add-on to create a step-by-step process with material design

Material

To use the material theme add-on just include the add-on in your project configuration pom.xml file


  com.github.appreciated
  material
  0.9.1



  vaadin-addons
  http://maven.vaadin.com/vaadin-addons

and use the @Theme annotation with the material theme in the UI class of your application.

@Theme("material")
public class MyApplicationUI extends UI {
...
}

If you want to create a custom theme based on material create the standard theme structure with a styles.scss file. This file should look like this (“demo” is the name of the custom theme):

$mat-background-color: #fafafa;  // #303030 for a dark theme
$v-focus-color: #00BCD4;

@import "../material/material.scss";
@import "addons.scss";

.demo {
  @include material;
  @include addons;

}

When creating your own theme based on material you can adjust colors and fonts with lots of variables. An overview of these variables is documented at https://github.com/appreciated/material/wiki/Variables .

vaadin buttons in material design
vaadin buttons in material design

Feel free to customize everything to your own needs and take a look at Google’s guide to colors for material design at https://material.io/guidelines/style/color.html#color-color-palette   and   https://material.io/color .

Material Icons

Google offers a set of icons for their material design language at https://material.io/icons/.You can use these icons with the fitting add-on


   org.vaadin.alump
   materialicons
   3.0.1

To create a button with a material design icon use code like

Button button = new Button(MaterialIcons.SENTIMENT_SATISFIED);
some material icons
some material icons

Material Design Stepper

To create a stepper component for workflows and “wizards” you can use the material design stepper add-on.


   org.vaadin.addons
   md-stepper
   2.1

It can be used to create horizontal and vertical steppers with just a few lines of code:

Step step1 = new Step(true, "Caption", "Description", new Label("Content"));
Step step2 = new StepBuilder()
                 .withDefaultActions(true)
                 .withCaption("Caption")
                 .withDescription("Description")
                 .withContent(new Label("Content"))
                 .build();
HorizontalStepper stepper = new HorizontalStepper(Arrays.asList(step1, step2), false);
stepper.setSizeFull();
stepper.start();

 

a stepper component with material design
a stepper component with 4 steps – we are currently using step 1

 

By using these add-ons you are able to create good looking Vaadin application with the popular material design. Please try out all mentioned add-ons and support the developers for contributing their code to the community.

By Meik Kaufmann

I am a certified oracle enterprise architect and like to share my knowledge and experience that I gain in the projects I am working on.

Leave a Reply

Your email address will not be published. Required fields are marked *