I’m in the process of designing my first real app. Instead of using text on my buttons, I want to use pictures. I have three rows with two buttons each in the first two rows and one in the bottom row. I’ve taken out the button text and set the button radius to 0, so all of the buttons are square. I’ve got all of pictures I’m using set up with identical dimentions and I’ve set the buttons to have a background image. Each image is square.
For each of the buttons, I’ve set the width to 45% and the height to fill container. I haven’t selected a background picture resize mode, although I’ve played around with it to no avail.
When I run preview from the design screen, it seems to look fine. The entire picture is shown for each button. But when I try a live test, all I get a are horizontally oriented buttons that only show a portion of the picture.
I’ve tried to redesign the way the buttons act in the blocks by adding a block for "when screen loads, set button height to = button width, but that only gave me a larger horizontal button. So I really don’t know where to go from here. Any assistance would be very much appreciated.
Thank you!
You’ve described this well but it would help to have a project link or a screenshot.
I’ve found height set to “fill container” can be glitchy. Try switching to relative, 100% (which is basically fill container anyway) and see if the behavior changes?
3 Likes
That worked! Thank you very much!!!
Now I have another issue. Some of the pictures are bleeding over the button edges and being cut off on the right and left sides. Any suggestions about how to deal with that issue?
2 Likes
Glad that worked! I think that’s where you want to adjust resize mode - you probably want contain or cover, depending on whether you want the button to be full of image, or the full image to be in the button.
How do you want to use the picture? Do you need Thunkable to put text over the picture or make curved borders or anything complex? Another option is to create all the styling of the button in some image editor, and then make the border and text in the actual Thunkable button invisible.
For example, my WDC entry for a few weeks ago:
(This is not a very good example of what /can/ be accomplished, because UI’s not my strength, but it does show how you don’t have to be limited to what thunkable will draw.)
I changed it to contain and that worked. Thank you. I’m not putting any text labels on the pictures. I’ve done that in photoshop, so each image is a self-contained button.
1 Like