I am developing an app with codename one
Now I have a form.
1)I set the layout to grid layout. grid is 2 X 3 (2 rows and 3 cols)
2)I add 6 buttons and these buttons occupy the 6 cells. Each button has an image and text associated with it.
3)I have styled the buttons in such a way, that they do not have borders.So now, the buttons don’t really have the look and feel of a button. They just look like images with some text below them.
4)Now these images don’t occupy the entire screen. So if I have an android with a very big screen, I see 3 images in the first row, a very big gap and then 3 images in the 2nd row.
5)I would expect that, if i accidently click anywhere between the first row and the second row (in the gap between the two rows of buttons/images) nothing should happen.
6)However, the thing is , the grid occupies the entire screen. SO even if i click in the gap within the two rows of buttons/images, individual cells are so huge that the whenever I click within the gap; I am actually still clicking inside a cell of the grid. Now this cell captures the event and transfers it to the button in that cell and some action happens.
7)I dont want that to happen.I want the action to happen ONLY WHEN the user puts his finger on the image.
How do i do this? The solution should work without issues on cellphones with small/big/medium size screens.
You have two options depending on what you want to achieve:
Place the GridLayout Container within a NORTH section of a border layout container. This will align the images to the top. You can play with a hierarchy/type of layouts easily (which is why the GUI builder is really cool).
Place each button within a flow layout container which will keep it in its preferred size. You can set the flow layout to center align etc.