Gray out or set dimmed a disabled widget


Is there a way to reflect the state setEnabled(true/false) on a Widget ?

I mean is there a way to gray out the widget when disabled ?

Thank you.


Hi @cgorand,

You can surely change the rendering of your widget depending on its state. You will need to use what is called a stylesheet [1]. The notion is very similar to CSS.

You have a specific implementation of [2] called [3] that allows you to apply a different style depending on the widget state, combined it with or [4] and you have everything you need.

Hope it’ll help.



Hi @cgorand,

In addition of what @gaetan.harel told you you can find a really similar example here On the last section of code “”, you can find an example with a dynamic style when the state is Active, it can be changed for the state Disabled.



Thank you for answers, I know style sheet. My question is “Is there a way to gray out” an Image without having to use another image ?
Ex :

Or in other word, is there a way to apply a filter on an Image (depending on Selected Style) ?

Thank you.

If your image is only using one color, you can use an alpha image colorized at runtime.

In the [prefix].images.list, you can set the type to be Alpha:


The button.png should be a grayscale version of your image.

I’ve extracted this image from your example,

Then when you instantiate the image background, you can specify:

  • That it does not fill the rectangle (new SimpleImageBackground(image, GraphicsContext.HCENTER | GraphicsContext.VCENTER, false))
  • The color wanted: setBackgroundColor(Color)

This will result in your

public class StylesheetPopulator {
    private static final int BLUE_BACKGROUND = 0x306D93; // extracted from example
    private static final int DISABLED_BACKGROUND = Colors.BLACK;
    // Set the style of my text button with an image background
    ej.microui.display.Image image = ej.microui.display.Image.createImage(Images.BUTTON);
    style.setBackground(new SimpleImageBackground(image, GraphicsContext.HCENTER | GraphicsContext.VCENTER, false));
    style.setDimension(new FixedDimension(image.getWidth(), image.getHeight()));
    style.setAlignment(GraphicsContext.HCENTER | GraphicsContext.VCENTER);
    style.setTextManager(new SimpleTextManager());
    Selector loginButtonSelector = new ClassSelector("MySelector");
    stylesheet.addRule(loginButtonSelector, style);
    // Change the background image of my button when it is disabled
    stylesheet.addRule(new AndCombinator(loginButtonSelector, new StateSelector(State.Disabled)), style);

This will make a slight change on your image as you’re using two colors (blue and black) on your current image result

Thank you.

Nice trick !!! :wink: