Android Question A grid on tablet or smartphone ?

[antonomase]

Hi experts,

I have to develop an application on both smartphones and tablets. The GUI is simple : just a grid with letters, numbers or images (smileys on my hardcopy are images) but in a different orientation and position if the device is a tablet (> 7'') or a smartphone.

The grid must cover the maximum surface on the screen, with the fonts in the maximum sizes. Each cell is clickable.

What is the best way to design such screens with B4A ? Can you send me tutorials or samples to adjust automaticaly orientation, position et size of the grid according the device type and dimensions ?

Thanks

 

[klaus]

Are the two grids always the same, same layout, same bigger cells?
Are the image sizes the same in similar cells.
If yes, I would do all this with canvases.
Drawing the grid on one canvas and the content in another one.
Click event in a Touch event and claculating which cell is concerned.

 

[antonomase]

Thank you for your answer.
I think my explanations were confuse so your answer is not why I expected : it's my fault
Each cells contains :
- one letter which doesn't change
- or one number (values : 0 to 9)
- in the middle a time counter
- images wich have the same size (except the two big on a tablet).

The lines between cells are not visible.
I try to explain in an other way :
On a tablet, I want to adjust each cell (Label or Imageview) with relative width of 10% / 10% / 10% / 10% / 20% / 10% / 10% / 10% / 10% and relative height of 18% / 18% / 18% / 18% / 10%. And after that, I want that the size of a letter or number in a Label is adjusted at the maximum size (idem with Imageview). The goal is to have this grid covering all the surface of the screen and the size of text and images at the maximum depending of the size and resolution of the device

I have designed two layouts for tablet with large screen and small screen. I'm looking for something more "automatic".

Thanks

 

[klaus]

You can define all this in the Designer Scripts.
Calculating the positions and dimensions of the different views.
For the text size you may have a look at the LabelUtils code snippets.
For the images have a look at LoadBitmapResize.

 

[antonomase]

Hi,

My project is in progress. I have tried LabelsUtils and AutoTextSizeLabel on an example with just 2 labels on the screen

On a tablet Samsung Tab A (1920x1200 scale 1.5 240dpi) it's OK in both portrait and landscape
On a phone LG (2392x1440 scale 4.0 640 dpi) it's OK in portrait but the letters are cut on landscape

On a phone Samsung (1920x1080 scale 2.625 420 dpi) it's OK in portrait but the letters are also cut on landscape (not in the same proportion).

My tests are in the joined zip with both methods setText (same result for both on phones in landscape mode)

Any idea ???

Many Thanks

 

[klaus]

The problem is the following:
When the layout is loaded, the text size is adjusted.
Then you change the height and width, but you don't readjust the text size.

This code works, adding LabelX.Text = "X":

Sub AdjustViews
    Dim lv As LayoutValues
    lv = GetDeviceLayoutValues
    If lv.Width > lv.Height Then
        Label1.Top = 0
        Label1.Left = 0
        Label1.WidthPercent = 0.3
        Label1.HeightPercent = 0.3
        Label1.Text = "A"
        Label2.Left = Label1.Width
        Label2.Top = Label1.Top
        Label2.WidthPercent = 0.3
        Label2.HeightPercent = 0.3
        Label2.Text = "B"
    Else
        Label1.Top = 0
        Label1.Left = 0
        Label1.WidthPercent = 0.3
        Label1.HeightPercent = 0.3
        Label1.Text = "A"
        Label2.Left = Label1.Left
        Label2.Top = Label1.Height
        Label2.WidthPercent = 0.3
        Label2.HeightPercent = 0.3
        Label2.Text = "B"
    End If
End Sub

Or you could modify the code in the class.
Add setText(mLbl.Text) in each routine where you change the width or the height, like:

Public Sub setWidthPercent (value As Float)
    mLbl.Width = value * GetDeviceWidth
    setText(mLbl.Text)
End Sub

 

[antonomase]

Thanks.
I do a method AdjustSizeText called by setText