Android Question Resize 12 buttons in a panel based on the Panel size

aaronk

Well-Known Member
Licensed User
Longtime User
Hi,

I am trying to re-size a panel that has 12 buttons in it but when re-sizing the panel I want it to resize the buttons.

Each of the buttons are square in size and are the same size, like shown in the image below.

How can I make it so that the buttons resize based on the panel size ?

So if the panel gets bigger (or smaller) the buttons then get bigger (or smaller) but keeping the spacing between the buttons the same.

upload_2015-6-27_20-53-42.png


However, if the panel that is holding the buttons is wider then the height like shown below, I want to make the buttons smaller but cantering the buttons since the button needs to remain square in size.

upload_2015-6-27_21-3-16.png


Anyone know how I can do this ?
(I have been trying all day and can't seem to work it out.)
 

MaFu

Well-Known Member
Licensed User
Longtime User
Assume we have created a layout named "1" with twelve buttons "Button1" to "Button12".

B4X:
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private Button1 As Button
    Private Button2 As Button
    Private Button3 As Button
    Private Button4 As Button
    Private Button5 As Button
    Private Button6 As Button
    Private Button7 As Button
    Private Button8 As Button
    Private Button9 As Button
    Private Button10 As Button
    Private Button11 As Button
    Private Button12 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("1")

    PlaceButton(Activity, Button1, 0, 0, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button2, 0, 1, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button3, 0, 2, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button4, 1, 0, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button5, 1, 1, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button6, 1, 2, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button7, 2, 0, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button8, 2, 1, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button9, 2, 2, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button10, 3, 0, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button11, 3, 1, 4, 3, 20dip, 60dip)
    PlaceButton(Activity, Button12, 3, 2, 4, 3, 20dip, 60dip)
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause(UserClosed As Boolean)
End Sub

Sub PlaceButton(parent As Panel, btn As Button, row As Int, col As Int, numRows As Int, numCols As Int, distBetween As Int, distOutside As Int)
    Dim width, height, size, startX, startY As Int
    width = (parent.Width - distBetween * (numCols - 1) - distOutside * 2) / numCols
    height = (parent.Height - distBetween * (numRows - 1) - distOutside * 2) / numRows
    size = Min(width, height)
    startX = parent.Width / 2 - (size * numCols + distBetween * (numCols - 1)) / 2
    startY = parent.Height / 2 - (size * numRows + distBetween * (numRows - 1)) / 2
    btn.Width = size
    btn.Height = size
    btn.Left = startX + size * col + distBetween * col
    btn.Top = startY + size * row + distBetween * row
End Sub
 
Upvote 0

aaronk

Well-Known Member
Licensed User
Longtime User
Thanks heaps.. It has helped me out a lot and never would of thought of doing it that way, so thank you very much for your help.
 
Upvote 0
Top