B4X Buttons grid example

PaulMeuris

Active Member
Licensed User
Check out the new version in message #3.

Did you ever wanted to put a lot of buttons on a screen and have them fill the screen?
No, not yet? Then here's how you can accomplish that.
What does it look like on different devices?
phone_android8_portrait.png
phone_android8_landscape.png

phone_android14_portrait.png
phone_android14_landscape.png

tablet_portrait.png
tablet_landscape.png

B4J_600_600.png
B4J_resized.png

The 100 buttons are placed on a panel (or pane) and that panel is used to put on a scrollview (or scrollpane).
If the screen is too small for the 100 buttons then you can scroll vertically to the one you want to click (or tap) on.
The layouts contain a scrollpane (or scrollview) and a pane (or panel).
The code contains tests for B4A and B4J code.
Here's the code:
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
#if B4J
    Private Pane1 As Pane
    Private ScrollPane1 As ScrollPane
#End If
#if B4A
    Private Panel1 As Panel
    Private ScrollView1 As ScrollView
#End If
End Sub
Public Sub Initialize
    B4XPages.GetManager.LogEvents = True
End Sub
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    B4XPages.SetTitle(Me,"Buttons grid")
#if B4J
    set_button_grid(99,50,50,5)
#End If
#if B4A
    Dim scale As Int = GetDeviceLayoutValues.Scale
    Dim tabletsize As Int = GetDeviceLayoutValues.ApproximateScreenSize
    If tabletsize >= 8 Then
        scale = 2
    End If
    set_button_grid(99,50dip*scale,50dip*scale,5dip)
    Panel1.RemoveView
    ScrollView1.Panel.AddView(Panel1,0dip,0dip,ScrollView1.Width,Panel1.Height)
    ScrollView1.Panel.Height = Panel1.Height
#End If
End Sub
Private Sub B4XPage_Resize (Width As Int, Height As Int)
#if B4J
    set_button_grid(99,50,50,5)
    ScrollPane1.InnerNode = Pane1
#End If
End Sub
Private Sub set_button_grid(cnt As Int, width As Int, height As Int, gap As Int)
#if B4J
    Pane1.RemoveAllNodes
#End If
#if B4A
    Panel1.RemoveAllViews
#End If
    Dim rowpos As Int = gap
    Dim colpos As Int = gap
    For i = 0 To cnt
        Dim btn As Button
        btn.Initialize("btn")
        btn.Text = "b" & i
        btn.Tag = btn.Text
#if B4J
        btn.prefWidth = width
        btn.PrefHeight = height
        Pane1.AddNode(btn,colpos,rowpos,width,height)
#End If
#if B4A
        btn.Width = width
        btn.Height = height
        Panel1.AddView(btn,colpos,rowpos,width,height)
#End If
        colpos = colpos + width + gap
        If colpos > (Root.Width - width) Then
            rowpos = rowpos + height + gap
            colpos = gap
        End If
    Next
#if B4J
    Pane1.PrefHeight = rowpos + height + gap
#End If
#if B4A
    Panel1.Height = rowpos + height + gap
#End If
End Sub
Private Sub btn_Click
    Dim btn As Button = Sender
    Log("btn " & btn.Tag & " clicked")
End Sub
And you can download the source code in the attachments.
Hope you find this piece of code useful and you can use other views like a label, a panel or an image in the grid...
 

Attachments

  • B4A_buttonsgrid.zip
    9.2 KB · Views: 115
  • B4J_buttonsgrid.zip
    2.9 KB · Views: 96
Last edited:

PaulMeuris

Active Member
Licensed User
In this version the buttons get a random background image.
1717989798286.png
1717990155129.png

In the source code the following highlighted lines are added:
B4X:
#if B4J
        CSSUtils.SetBackgroundImage(btn,File.DirAssets,get_random_background_image)
        btn.prefWidth = width
        btn.PrefHeight = height
        Pane1.AddNode(btn,colpos,rowpos,width,height)
#End If
#if B4A
        btn.SetBackgroundImage(LoadBitmap(File.DirAssets,get_random_background_image))
        btn.Width = width
        btn.Height = height
        Panel1.AddView(btn,colpos,rowpos,width,height)
#End If

Private Sub get_random_background_image As String
    Dim lst As List = Array As String ("add.png","back.png","calendar.png","category.png", _
                        "clear.png","closetab.png","code.png","columns.png","delete.png", _
                        "download.png","")
    Dim num As Int = Rnd(0,10)
    Dim fname As String = lst.Get(num)
    If fname = "" Then fname = lst.Get(0)
    Return fname
End Sub
The XUI Views library has also been added in the B4J version to be able to use the CSSUtils.SetBackgroundImage method.
You must at least specify 1 filename as the first name in the list.
You can find the bitmap files in the attached zip-files.
 

Attachments

  • B4A_buttonsgrid_v1.zip
    20.3 KB · Views: 101
  • B4J_buttonsgrid_v1.zip
    14 KB · Views: 94

PaulMeuris

Active Member
Licensed User
As i mentioned in the first message you can use other views like a label, a panel or an image in the grid.
In this version you can find examples with labels, panels and images.
Some screenshots:
Labels
B4A_labels.png
B4J_labels.png

Panels
B4A_panels.png
B4J_panels.png

Images
B4A_images.png
B4J_images.png

When you click or tap on an image thumbnail (small image) then a photo dialog will appear.
B4A_images_dialog.png
B4J_images_dialog.png

The small photo is enlarged a little bit but the full image is not included in the zip-files because of the size of the original photos.
For this to work you will have to write a subroutine to get the full size photo from a folder on the device or on the laptop/desktop.
Can you give an example how this could work in B4A and B4J ?
The source code includes some new functions and some regions.
You can test the grid if you uncomment one of the hightlighted lines.
B4X:
    For i = 0 To cnt
        ' set grid item to button, label, panel or imageview (uncomment to test)
'        Dim vw As Button = set_button_item(i,Width,Height,gap)
'        Dim vw As Label = set_label_item(i,Width,Height,gap)
        Dim vw As ImageView = set_image_item(i,Width,Height,gap)
#if B4A
'        Dim vw As Panel = set_panel_item(i,Width,Height,gap)
        Panel1.AddView(vw,colpos,rowpos,Width,Height)
#End If
#if B4J
'        Dim vw As Pane = set_panel_item(i,Width,Height,gap)
        Pane1.AddNode(vw,colpos,rowpos,Width,Height)
#End If
Look at the source code to see how to use a contrast color for instance.
The source code is in the attachments.
 

Attachments

  • B4A_buttonsgrid_v2.zip
    49.6 KB · Views: 86
  • B4J_buttonsgrid_v2.zip
    43.4 KB · Views: 86
Top