Android Question Multiple buttons evenly distributed

Sergio Haurat

Active Member
Licensed User
Longtime User
Using this example from @Erel

Static Code Modules

Basic4android v1.2 includes a new type of module which is the static code module. Adding a static code module is done by choosing Project - Add New Module - Code Module. Unlike Activities and Services, code modules are not related in any way with Android process life cycle. These are just...
www.b4x.com

I am trying to draw on the screen 32 buttons in 4 rows and 8 columns.
In the designer there is only one panel to contain the buttons.


This is the code: 
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private pnlButtons As B4XView
    Type btnObj (Text As String, Tag As Object)
End Sub

Private Sub B4XPage_Appear
    Dim intCnt As Int = 0
    Dim intSize As Int = ButtonSize
    For col = 0 To 3
        For row = 0 To 7
            Dim btnProp As btnObj
            btnProp.Initialize
            btnProp.Text = col.As (String) & "," & row.As (String)
            btnProp.Tag = intCnt
            pnlButtons.AddView(ButtonsCreator(btnProp), row * intSize, col * intSize, intSize, intSize)
            intCnt = intCnt + 1
        Next
    Next
End Sub

Private Sub B4XPage_Created (RootMain As B4XView)
    Root = RootMain
    Root.LoadLayout("MainPage")
End Sub

Private Sub ButtonsCreator(btnProp As btnObj) As Button
    Dim b As Button
    b.Initialize("btn")
    b.Text = btnProp.Text
    b.Tag = btnProp.Tag
    Return b
End Sub

Private Sub ButtonSize() As Int
    Dim intSize As Int = 0
    'This is where I should calculate the width and height of the button, according to the width and height of the device the size that suits each button
    intSize = 200
    Return intSize
End Sub

Private Sub btn_Click
    ToastMessageShow(Sender.As (Button).Tag,False)
End Sub
 
Last edited:
Sort by date Sort by votes

Sergio Haurat

Active Member
Licensed User
Longtime User
This is the best way?: 
Private Sub ButtonSize() As Int
    Dim intSize As Int = 0
    Dim intWidth As Int = (pnlButtons.Width / 8)
    Dim intHeight As Int = (pnlButtons.Height / 4)
    If intHeight > intWidth Then
        intSize = intWidth
    Else
        intSize = intHeight
    End If
    Return intSize
End Sub
 
Upvote 0

Sergio Haurat

Active Member
Licensed User
Longtime User
Final Code: 
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private pnlButtons As B4XView
    Type btnObj (Text As String, Tag As Object)
    Private intCols As Int = 6
    Private intRows As Int = 3
End Sub

Public Sub Initialize
    B4XPages.GetManager.LogEvents = True
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Appear
    Dim intCnt As Int = 0
    Dim intSize As Int = ButtonSize
    For row = 0 To intRows - 1
      For col = 0 To intCols - 1
            Dim btnProp As btnObj
            btnProp.Initialize
            btnProp.Text = col.As (String) & "," & row.As (String)
            btnProp.Tag = intCnt
            pnlButtons.AddView(ButtonsCreator(btnProp), col * intSize, row * intSize, intSize, intSize)
            intCnt = intCnt + 1
        Next
    Next
End Sub

Private Sub B4XPage_Created (RootMain As B4XView)
    Root = RootMain
    Root.LoadLayout("MainPage")
End Sub

Private Sub ButtonsCreator(btnProp As btnObj) As Button
    Dim b As Button
    b.Initialize("btn")
    b.Text = btnProp.Text
    b.Tag = btnProp.Tag
    Return b
End Sub

Private Sub ButtonSize() As Int
    Dim intSize As Int = 0
    Dim intWidth As Int = (pnlButtons.Width / intCols)
    Dim intHeight As Int = (pnlButtons.Height / intRows)
    If intHeight > intWidth Then
        intSize = intWidth
    Else
        intSize = intHeight
    End If
    Return intSize
End Sub

Private Sub btn_Click
    ToastMessageShow(Sender.As (Button).Tag,False)
End Sub
 
Upvote 0
M

Mahares

Expert
Licensed User
Longtime User
Sergio Haurat said:
Using this example from @Erel
Click to expand...
Why are you referring to and using a very old thread that is over 12 years old. Have you considered an xClv which can fit on one screen and has 8 columns and four rows of buttons in a panel set up in the designer. I think it will be a lot more up to date and more versatile and modern. Maybe something that looks like this.


Since you already chose your code as a solution, can you at least show a snapshot of what it looks like.
 
Upvote 0

josejad

Expert
Licensed User
Longtime User
Take a look to this, too

[B4X] [Visual Designer] Spreading Controls

Question: How can I build a layout with X controls spread horizontally or vertically? Answer: You can use the designer script for this. As the designer script engine (currently) doesn't support loops it requires copying a few lines, however it is quite simple. The code goes like this: n = 4...
www.b4x.com
 
Upvote 0

Sergio Haurat

Active Member
Licensed User
Longtime User
I had not seen since when the post was, 12 years old is a lot. I only saw the code. And it's not the first time this has happened to me either (take an example from an old post, to be honest)

@Mahares, can you share your code? I'm struggling with "my old code base" to set the font, borders, images and other properties.

By mistake I marked the post as solved.
 
Upvote 0

Sergio Haurat

Active Member
Licensed User
Longtime User
Although I've known B4A originally since 2014, I remember getting "angry" when the screen would rotate, the activity would lose the value of the objects and you had to save the values doing Chinese juggling with other components or something like that (bad decision to stay away for so long). . Thanks to all of you, help sort my knowledge with today.
 
Upvote 0

Sergio Haurat

Active Member
Licensed User
Longtime User
Yes, I know, but my problem was a long time ago, before B4XPage's existed.
LucaMs said:
There is a small problem in your source code: it will create and add new buttons every time the page appears (B4XPage_Appear!).
Click to expand...

The variables (IntCols and IntRows) should actually be a user option, ie you can decide how many buttons to show.

For example
5x3
8x4

Last version of my code: 
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private pnlButtons As B4XView
    Type btnObj (Text As String, Tag As Object, Picture As Bitmap, Padding As Int, Font As B4XFont)
    Private intCols As Int = 8
    Private intRows As Int = 4
End Sub

Public Sub Initialize
    B4XPages.GetManager.LogEvents = True
    
End Sub

'This event will be called once, before the page becomes visible.
Private Sub B4XPage_Appear

End Sub

Private Sub B4XPage_Created (RootMain As B4XView)
    Root = RootMain
    Root.LoadLayout("MainPage")
    B4XPages.SetTitle(Me, Main.loc.Localize("app_name"))
    ButtonShow
End Sub

Private Sub ButtonsCreator(btnProp As btnObj) As Button
    Dim b As Button
    b.Initialize("btn")
    b.Text = btnProp.Text
    b.TextSize = btnProp.Font.Size
    b.Tag = btnProp.Tag
    b.SingleLine =False
    b.Padding = Array As Int (btnProp.Padding, btnProp.Padding, btnProp.Padding, btnProp.Padding)
    If btnProp.Picture.IsInitialized Then
        b.SetBackgroundImage(btnProp.Picture)
    End If
    Return b
End Sub

Private Sub ButtonShow()
    Dim intSize As Int = ButtonSize(200, 40)
    pnlButtons.SetLayoutAnimated(0, (Root.Width - (intSize * intCols)) / 2, (Root.Height - (intSize * intRows)) / 2, (intSize * intCols), (intSize * intRows))
    Dim intCnt As Int = 0
    For row = 0 To intRows - 1
        For col = 0 To intCols - 1
            Dim btnProp As btnObj
            btnProp.Initialize
            btnProp.Text = row.As (String) & "," & col.As (String)
            btnProp.Tag = intCnt
            btnProp.Padding = 2
            btnProp.Picture = LoadBitmap(File.DirAssets, "logo.png").Resize(intSize, intSize, True)
            pnlButtons.AddView(ButtonsCreator(btnProp), col * intSize, row * intSize, intSize, intSize)
            intCnt = intCnt + 1
        Next
    Next
End Sub

Private Sub ButtonSize(SafeAreaW As Int, SafeAreaH As Int) As Int
    Dim intSize As Int = 0
    Dim intWidth As Int = (Root.Width / intCols) - (SafeAreaW / intCols)
    Dim intHeight As Int = (Root.Height / intRows) - (SafeAreaH / intRows)
    If intHeight > intWidth Then
        intSize = intWidth
    Else
        intSize = intHeight
    End If
    Return intSize
End Sub

Private Sub btn_Click
    ToastMessageShow("Acción: " & Sender.As (Button).Tag, False)
End Sub

Private Sub btn_LongClick
    ToastMessageShow("Configuración: " & Sender.As (Button).Tag, False)
End Sub
 
Upvote 0
M

Mahares

Expert
Licensed User
Longtime User
One way that might be simpler than the way you are trying to do it is to create a layout with one panel and inside it 8 evenly spaced buttons horizontally using the designer as outlined to you by Jose in, post #5. Then clone that panel 3 times to obtain the look you want. I still prefer the xClv way, but this cloning is in line with what you are trying to achieve. Here is a teaser:











45
 
Upvote 0

TILogistic

Expert
Licensed User
Longtime User
?


Loop for designer script

My project design includes 50 buttons. For appropriate arrangement to support any type of device, Buttons are distributed in equal column and rows means 25 buttons are placed in 5 columns and 5 rows. I am using code as below. However, instead of writing 50 code lines, I am looking for loop...
www.b4x.com

[custom view] GridManager

A simple custom view which creates a grid of panes. You can set the number of columns and rows. The panes are resized automatically when the GridManager is resized, make sure to use anchors in your layouts. In this example the same layout is loaded in each of the panes. You can of course load...
www.b4x.com

Grid Class - PreoptimizedCLV

Grid using Erel sample code based on PreoptimizedCLV -> https://www.b4x.com/android/forum/threads/grid-class-preoptimizedclv.116309/#post-726808 Example applied on F1, Work very nice: The idea of this class is to be able to load in a 3 column Grid (customizable) a long list of url images...
www.b4x.com

[B4X][custom view] GridManager

Hi, This is a modified custom view of the class library -> GridManager [B4J]. It should be compatible with b4j, b4a and b4i. Note this is for simple grids if you need something more complex then -> GridClassPreoptimizedCLV This thread should be move to -> Additional libraries, classes and...
www.b4x.com
 
Upvote 0
You must log in or register to reply here.

Similar Threads

  • Question
Android Question [SOLVED]Visual Designer..arranging multiple buttons.. not arranging in the correct position??
Replies
18
Views
2K
eric19740521
R
  • Question
Android Question get all buttons in a panel(solved)
Replies
2
Views
1K
ronell
R
F
  • Question
Android Question array of buttons
Replies
3
Views
3K
Emme Developer
  • Article
B4A Library ABFlicB4A library for Flic buttons
2 3
Replies
50
Views
9K
DonManfred
  • Question
Android Question Capturing Top Toolbar buttons
Replies
2
Views
899
mmieher
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…