Material Component Supported

Material-UI-Swing supported the following components:

• Button
  • Contained button
  • Outline button
  • Text button
• Text Field
• Selection controls
  • CheckBox
  • RadioButton
  • Toggle
    • Switches
    • Toggle button
• Sliders
• Progress indicators
• Dialogs
• Divider
• Menus
• Lists
• Data tables
• Tree

Button

Material-ui-swing support all material buttons style (except the animation on click), by default the material used the following styles:

• Normal Button: Outline button
• Default Button: Contained button
• Button with an icon: Contained button

In addition, the mouse hover effect on the component is enabled by default, but if you want to modify the personal style of the component, you can use three different way:

• MaterialButtonUI class;
• UIManager directly;
• MaterialTheming.

MaterialButtonUI class

Implement Contained button with MaterialButtonUI

The class MaterialButtonUI have all propriety protected and you can manage the behavior with inside the method installUI.

For example, with the following code, you can have the same effect of the Contained button.

public class ContainedButtonUI extends MaterialButtonUI {

    //The propriety order inside the method installUI is important
    //because some propriety should be override
    @Override
    public void installUI(JComponent c) {
        super.mouseHoverEnabled = false;
        super.installUI(c);
        super.mouseHoverEnabled = true;
        super.colorMouseHoverNormalButton = MaterialColors.PURPLE_500;
        super.background = MaterialColors.PURPLE_700;
        c.setBackground(super.background);

        if(super.mouseHoverEnabled){
            c.addMouseListener(
                    MaterialUIMovement.getMovement(c, this.colorMouseHoverNormalButton)
            );
        }
        //If you want use this style also for Default button
       // super.defaultBackground = MaterialColors.PURPLE_700;
        //super.colorMouseHoverDefaultButton = MaterialColors.PURPLE_500;
        super.borderEnabled = false;
    }

Using UIManager directly

Swing L&F used a UIManager to configure all L&F propriety, material-ui-swing doesn't support all native constant at this time but we will want to improve the library to use the major native constant used inside this Swing API.

   UIManager.put("Button[border].enable", false);
   UIManager.put("Button[border].toAll", false); 
   // Othes UIManager proprieties

You can found all proprieties supported inside the material-ui-swing here.

Using MaterialTheming System

We speak more about MaterialTheming system in the next chapter "Introducing to MaterialTheming System", but the library implements a personal theming system to configure the UIManager without use directly the UIManager. You can configure UIManager with the following propriety to have the "Material button contained style".

You can create a personal theme with the following steps and inside it you can set the personal setting to have the "Contained material button" style.

1. Create a new class and this class should extend the AbstractMaterialTheming
2. Implement your change inside the methods installColors().
3. Override the get method to disable the border in buttons.
4. Change the theme inside the L&F.

Explain previous passage with the code:

import mdlaf.themes.AbstractMaterialTheme;

public class CustomMaterialTheme extends AbstractMaterialTheme {

    @Override
    protected void installColor() {

    }

    @Override
    public String getName() {
        return "CustomMaterialTheme";
    }
}

import mdlaf.themes.AbstractMaterialTheme;
import mdlaf.utils.MaterialColors;

public class CustomMaterialTheme extends AbstractMaterialTheme {

    @Override
    protected void installColor() {
        this.backgroundPrimary = MaterialColors.COSMO_STRONG_GRAY;
        this.highlightBackgroundPrimary = MaterialColors.COSMO_ORANGE;
        this.textColor = MaterialColors.COSMO_BLACK;
        //TODO You should be implement all propriety.
        //Please use the JavaDoc to find all propriety.
    }

    @Override
    public String getName() {
        return "CustomMaterialTheme";
    }
}

You can find all propriety implemented inside the MaterialTheme here.

You can also extend an existed theme and change only some proprieties.

import mdlaf.themes.AbstractMaterialTheme;
import mdlaf.utils.MaterialColors;

public class CustomMaterialTheme extends AbstractMaterialTheme {

    @Override
    protected void installColor() {
        this.backgroundPrimary = MaterialColors.COSMO_STRONG_GRAY;
        this.highlightBackgroundPrimary = MaterialColors.COSMO_ORANGE;
        this.textColor = MaterialColors.COSMO_BLACK;
        //TODO You should be implement all propriety.
        //Please use the JavaDoc to find all propriety.

    }

    //Implement Contained button style
    //In most cases, the boolean values don't have proprieties but only a method
    @Override
    public boolean getButtonBorderEnable() {
        return false;
    }

    @Override
    public boolean getButtonBorderEnableToAll() {
        return false;
    }

    @Override
    public String getName() {
        return "CustomMaterialTheme";
    }
}

In most cases, the boolean values don't have proprieties but only a method

In this case, to change the propriety you should override the methods called getButtonBorderEnableToAll and getButtonBorderEnable.

Setting MaterialLookAndFeel with the your custom theme

UIManager.setLookAndFeel(new MaterialLookAndFeel(new CustomMaterialTheme()));

Also, you can change the look and feel with the following code

MaterialLookAndFeel.changeTheme(new CustomMaterialTheme());

This list of examples explains the method of support from the library to change the style at the default style.

For the rest of the session, we will post the actual component effect with the actual UIManager propriety.

Text Field

For the following components, we will report only the style and the reference at the look and feel proprieties.

Selection controls