B4X Buttons grid example

[PaulMeuris]

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?

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:

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...

 

[PaulMeuris]

In this version the buttons get a random background image.

In the source code the following highlighted lines are added:

#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.

 

[PaulMeuris]

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

Panels

Images

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

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.

    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.