Duplicate Buttons

Questions about Thunkable
1

Hi there, I think i have seen it - but i cannot find it anywhere…
I am creating an app which includes 25 Buttons - Arranged in rows and columns 5x5 Grid

Now my questions are three

  1. Can i automate the creation of the buttons in any way And place it according to 5x5 Grid
    2.If/When i try this manually - i have difficulties in getting the buttons Square. ( I can do it for one device - but then it fails in another - with different screen size.

Apprectate any answers
Thank you

2

Hi, to begin with, I suggest that you get acquainted with the “Any Components” blocks from the help, with which you can do this https://docs.thunkable.com/any-component-blocks

2 Likes
3

stefansladdeneng1,

A few suggestions:

  1. As actech suggested, the any component blocks are going to be the key. You can either clone buttons or create them from scratch.
  2. The Any Button Click will be important.
  3. If it is ALWAYS going to be 5x5, I would suggest creating buttons at design time. You have greater flexibility and it is MUCH easier to debug your code.
  4. I would recommend creating a matrix of rows and columns to control the size and positions. I would GUESS that one “master” rows and 5 child columns would work, but you may need to do a column then a row.
  5. Try using the “Relative Width” height property and use something like 20% for all of your buttons. That will resize them based on the size of the screen on the particular device and keep them all the same size.
  6. if all of the buttons need to be square AND be resized I would recommend using the absolute size for height and width. Then in the screen start event, use the calculated width of the “master” row (or column) to resize each of the buttons so they take up 80% of the screen width or height (depending on the orientation of the screen). For instance. if the master row has a calculated width of 500, that would mean you would loop through all of the buttons in the ALL BUTTONS colletion of the master row and set the height and width properties to (500 * 0.80)/5.
  7. Check out some of the row/column alignment settings like space around and space between. They may help your align your grid. Or they may make it worse…LOL. But worth exploring.

Happy Thunking!

1 Like
4

Play around and analyse this in ‘Live’. Preview is not great for this.

I am using a single row which wraps. I set the width and height of the element before cloning. If you don’t need dynamic scaling like I have shown here then the blocks are very simple.

I have found that the ‘relative %’ gives errors across devices and applications. Instead I have used the ‘get screen width’ and divided this precise unit by the number of elements I want in my row before wrapping.

I have used a column donor as my element but you can use any element you like (in your case; a donor button)

I hope this gives you some insight as to what actech is recommending.

2 Likes