Buttons/Cells do not fit in table arrangement

[demetris christofi]

Hello,

Here is my issue:
I created a table arrangement of 12 columns and 12 rows.
Width of table is fill parent and parent element is the screen.
After this, i am trying to create 12 buttons in order to to fill  the first row of the table(trying to create a crossword).
Fro each button i select width to fill parent so that they will use the space of one cell only.

The problem is when i added 10-11 buttons. Then, my screen doesn't seem to fit more buttons.
Also, i can only see 9 buttons in the designer mode and i can't see where to place the next buttons.
For example, the 9th button is half hidden, and i can't place the 10th button next to it.

I use Greek letters for each button and i am wondering if this is the issue.
Also, i suspect that for each letter, the width allocation is different, no matter what the cell size should be.

I am attaching the screen of the designer mode where you can see 8 and a half letters.
When testing in the phone or in a tablet, i can see 10 and a half buttons/letters.
What i expect to have is 12 letters of course(since my table has 12 columns).

I am also attaching the options of all buttons.

Thanks for helping!

[Italo]

Try setting in your screen properties, Sizing RESPONSIVE and then go on top of the designer viewer and check "Check to see Preview on Tablet size."

If you don't want it to be responsive, use it only in the design stage and once you finish placing your buttons, change it back to Sizing FIXED.

[demetris christofi]

I already tried to set screen sizing to Responsive and this is partially solving my issue.
With responsive i can see all the buttons/letters in tablet/phone(not in designer mode) screens, but the problem remains. Now, the 12 buttons are filling 60-90% of the screen's width(around 60 in tablet and around 90 in phone).
This a lot of unused space..

Attaching tablet screenshot(magenta colored area supposed to be the table arrangement of 12 columns)

[SteveJG]

A 12 x 12 table is large.  Consider, on a standard phone, the width is 320 pixels, that is 26 pixels per button.  Try setting the width of the buttons to less than 26 pixels.  

Also, set, while on the Designer, Screen1 to Landscape mode .. viewing in landscape should allow you to see all the buttons for the top rows.

Unfortunately, to make this work, you will have to experiment with Automatic, FillParent and Fixed Pixels ...   Posting an aia might inspire someone to look at your code and provide specific recommendations.

An alternative to using buttons is to use virtual buttons on a Canvas ... perhaps see 

Animal Canvas – a children’s educational App Inventor 2 game tutorial

for a technique to use virtual buttons on a Canvas that might work for your crossword puzzle.

Regards,

Steve

[Italo]

You don't need to have it perfectly on the designer screen since that's not how it's going to look when the apk is compiled.

It's just an aid in the designing stage.

Another thing you can do is set the components that are already finished to visible off. And changed it to on when you are finished.

This is a normal issue when working with the AI2 designer and you need to get used to working with an "approximation" of what you are going to get in the real device. It will never look exactly as the finished app.