gaps in between button images on homepage

[Karthik Marupeddi]

Hi All,

I am facing few issues when developing homepage for IOS application. In the below screen shot you will see that their are gaps between the buttons in homepage I trying to get rid of them. One approach I have taken is to add background image to the container of the buttons. That too does not work. Any inputs will be greatly appreciated.

First Image is without the background image in the container, second is with background image. And below that is my code.

Thank you,

MK

package com.telos.hyd;

import com.codename1.ui.*;

import com.codename1.ui.layouts.BorderLayout;

import com.codename1.ui.layouts.BoxLayout;

import com.codename1.ui.layouts.GridLayout;

import com.codename1.ui.util.Resources;

import java.io.IOException;

/**

 * Created by karthikmarupeddi on 9/27/14.

 */

public class HomePage {

    Form logInForm;

    Resources theme;

   public HomePage(Form form)

    {

        this.logInForm = form;

        try {

        this.theme = Resources.openLayered("/theme");

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

   public void createPage()

    {

        Form homePageForm = new Form();

        homePageForm.setScrollable(false);

        homePageForm.setLayout(new BorderLayout());

        //container

        Container bannerContainer = new Container(new BoxLayout(BoxLayout.Y_AXIS));

        bannerContainer.setName("bannerContainer");

        Container buttonsContainer = new Container();

        buttonsContainer.setUIID("Label");

        buttonsContainer.getStyle().setBgColor(-1);

        //Banner

        Label banner = new Label();

        banner.setGap(0);

        banner.setIcon(theme.getImage("Banner_Telos.png"));

        bannerContainer.addComponent(banner);

        homePageForm.addComponent(BorderLayout.NORTH, bannerContainer);

        //Middle container

        GridLayout gridLayout = new GridLayout(3,2);

        buttonsContainer.setLayout(gridLayout);

        buttonsContainer.getStyle().setBgImage(theme.getImage("backgroundHomePage.png"));

        com.codename1.ui.Button searchButton = new Button();

        searchButton.setGap(0);

        searchButton.setIcon(theme.getImage("search.png"));

        searchButton.setUIID("Label");

        searchButton.getStyle().setAlignment(Component.CENTER);

        searchButton.getSelectedStyle().setBgTransparency(255);

        searchButton.getUnselectedStyle().setBgTransparency(0);

        com.codename1.ui.Button reportButton = new Button();

        reportButton.setIcon(theme.getImage("report.png"));

        reportButton.setUIID("Label");

        reportButton.getStyle().setAlignment(Component.CENTER);

        reportButton.getSelectedStyle().setBgTransparency(255);

        reportButton.getUnselectedStyle().setBgTransparency(0);

        reportButton.getStyle().setMargin(0,0,0,0);

        reportButton.getStyle().setPadding(0,0,0,0);

        com.codename1.ui.Button graphButton = new Button();

        graphButton.setIcon(theme.getImage("graph.png"));

        graphButton.setUIID("Label");

        graphButton.getStyle().setAlignment(Component.CENTER);

        graphButton.getSelectedStyle().setBgTransparency(255);

        graphButton.getUnselectedStyle().setBgTransparency(0);

        com.codename1.ui.Button contactButton = new Button();

        contactButton.setIcon(theme.getImage("contact.png"));

        contactButton.setUIID("Label");

        contactButton.getStyle().setAlignment(Component.CENTER);

        contactButton.getSelectedStyle().setBgTransparency(255);

        contactButton.getUnselectedStyle().setBgTransparency(0);

        com.codename1.ui.Button locateButton = new Button();

        locateButton.setIcon(theme.getImage("locate.png"));

        locateButton.setUIID("Label");

        locateButton.getStyle().setAlignment(Component.CENTER);

        locateButton.getSelectedStyle().setBgTransparency(255);

        locateButton.getUnselectedStyle().setBgTransparency(0);

        com.codename1.ui.Button helpButton = new Button();

        helpButton.setIcon(theme.getImage("help.png"));

        helpButton.setUIID("Label");

        helpButton.getStyle().setAlignment(Component.CENTER);

        helpButton.getSelectedStyle().setBgTransparency(255);

        helpButton.getUnselectedStyle().setBgTransparency(0);

        buttonsContainer.addComponent(searchButton);

        buttonsContainer.addComponent(reportButton);

        buttonsContainer.addComponent(graphButton);

        buttonsContainer.addComponent(contactButton);

        buttonsContainer.addComponent(locateButton);

        buttonsContainer.addComponent(helpButton);

        buttonsContainer.getStyle().setMargin(0,0,0,0);

        buttonsContainer.getStyle().setPadding(0,0,0,0);

        homePageForm.addComponent(BorderLayout.CENTER, buttonsContainer);

        homePageForm.show();

    }

}

[Chen Fishbein]

Hi,

Try to set margins, paddings 0 for all styles on your buttons 

getUnselectedStyle().setMargin(0,0,0,0);

getUnselectedStyle().setPadding(0,0,0,0);

getSelectedStyle().setMargin(0,0,0,0);

getSelectedStyle().setPadding(0,0,0,0);

getPressedStyle().setMargin(0,0,0,0);

getPressedStyle().setPadding(0,0,0,0);

but it would be much easier to define a custom style in the theme and apply that style to your buttons

[Karthik Marupeddi]

I have made padding and margin to zero's to the theme for button and label. It still looks the same.

[Shai Almog]

You need to set the border of the button to empty (or null if using code).
Then you need to set the unselected bgTransparency to 255 to make it opaque.

[Karthik Marupeddi]

Hi,

I have set the button borders to null and also set bgTransparency to 255, even then two black appear at the top of top button and also at bottom of bottom buttons.

Below is my code and screenshot.

package com.telos.hyd;

import com.codename1.ui.*;

import com.codename1.ui.layouts.BorderLayout;

import com.codename1.ui.layouts.BoxLayout;

import com.codename1.ui.layouts.FlowLayout;

        searchButton.getUnselectedStyle().setBgTransparency(255);

        searchButton.getStyle().setBorder(null);

        searchButton.getSelectedStyle().setBorder(null);

        searchButton.getUnselectedStyle().setBorder(null);

        com.codename1.ui.Button reportButton = new Button();

        reportButton.setIcon(theme.getImage("report.png"));

        reportButton.setUIID("Label");

        reportButton.getStyle().setAlignment(Component.CENTER);

        reportButton.getSelectedStyle().setBgTransparency(255);

        reportButton.getUnselectedStyle().setBgTransparency(255);

        reportButton.getStyle().setBorder(null);

        reportButton.getSelectedStyle().setBorder(null);

        reportButton.getUnselectedStyle().setBorder(null);

        com.codename1.ui.Button graphButton = new Button();

        graphButton.setIcon(theme.getImage("graph.png"));

        graphButton.setUIID("Label");

        graphButton.getStyle().setAlignment(Component.TOP);

        graphButton.getSelectedStyle().setBgTransparency(255);

        graphButton.getUnselectedStyle().setBgTransparency(255);

        graphButton.getStyle().setBorder(null);

        graphButton.getSelectedStyle().setBorder(null);

        graphButton.getUnselectedStyle().setBorder(null);

        com.codename1.ui.Button contactButton = new Button();

        contactButton.setIcon(theme.getImage("contact.png"));

        contactButton.setUIID("Label");

        contactButton.getStyle().setAlignment(Component.CENTER);

        contactButton.getSelectedStyle().setBgTransparency(255);

        contactButton.getUnselectedStyle().setBgTransparency(255);

        contactButton.getStyle().setBorder(null);

        contactButton.getSelectedStyle().setBorder(null);

        contactButton.getUnselectedStyle().setBorder(null);

        com.codename1.ui.Button locateButton = new Button();

        locateButton.setIcon(theme.getImage("locate.png"));

        locateButton.setUIID("Label");

        locateButton.getStyle().setAlignment(Component.CENTER);

        locateButton.getSelectedStyle().setBgTransparency(255);

        locateButton.getUnselectedStyle().setBgTransparency(255);

        locateButton.getStyle().setBorder(null);

        locateButton.getSelectedStyle().setBorder(null);

        locateButton.getUnselectedStyle().setBorder(null);

        com.codename1.ui.Button helpButton = new Button();

        helpButton.setIcon(theme.getImage("help.png"));

        helpButton.setUIID("Label");

        helpButton.getStyle().setAlignment(Component.CENTER);

        helpButton.getSelectedStyle().setBgTransparency(255);

        helpButton.getUnselectedStyle().setBgTransparency(255);

        helpButton.getStyle().setBorder(null);

        helpButton.getSelectedStyle().setBorder(null);

        helpButton.getUnselectedStyle().setBorder(null);

        buttonsContainer.addComponent(searchButton);

        buttonsContainer.addComponent(reportButton);

        buttonsContainer.addComponent(graphButton);

        buttonsContainer.addComponent(contactButton);

        buttonsContainer.addComponent(locateButton);

        buttonsContainer.addComponent(helpButton);

        homePageForm.addComponent(BorderLayout.CENTER, buttonsContainer);

        homePageForm.show();

    }

}

[Shai Almog]

That's triggered because you set the UIID of buttonsContainer to Label which has padding/margin by default.

If you leave it as the default Container UIID it should remove those lines (margin/padding).