Button with two Images

General
1

Hi,
I need to create a button that shows 2 images.
Since it is possibile to set as button icon only one resource, there is any way to combine two images as a single resource on the fly ?
I could not use fonticon, I have only png images.

Regards

2

Hi Bob,

im not sure if this solves your problem, but you could try wrapping your images in a CssLayout that is themed like a Button.

[code]
CssLayout button = new CssLayout();
button.setPrimaryStyleName(“v-button”);
button.addLayoutClickListener(new LayoutClickListener() {

        @Override
        public void layoutClick(LayoutClickEvent event) {
            Notification.show("'Button' clicked!");
        }
    });
    button.setHeight(64, Unit.PIXELS);

    Label buttonCaption = new Label("Test");
    buttonCaption.setPrimaryStyleName("v-button-wrap");

    Image image1 = new Image();
    image1.setSource(new ThemeResource("img/linux.png"));
    image1.setPrimaryStyleName("v-icon");
    image1.setHeight(32, Unit.PIXELS);

    Image image2 = new Image();
    image2.setSource(new ThemeResource("img/windows.png"));
    image2.setPrimaryStyleName("v-icon");
    image2.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    image2.setHeight(32, Unit.PIXELS);

    Image image3 = new Image();
    image3.setSource(new ThemeResource("img/mac.png"));
    image3.setPrimaryStyleName("v-icon");
    image3.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
    image3.setHeight(32, Unit.PIXELS);

    button.addComponents(image1, image2, image3, buttonCaption);

[/code]result:



regards

Johannes

3

Hi Johannes,
your suggestion is very useful, I did not think to a clickable layout !
It works very well since I have to use such clickable layout inside a table cell
Thank you very much