How do I create a responsive button?

[maxb]

This is good to know:

Creating a Circular Button

Buttons, by default, are rectangular but with just a few minor adjustments you can transform them into circles to completely change the look and feel of your app. Properties To achieve this effect, you’ll need to change the width, the height and, most importantly the borderRadius of your button. It’s worth pointing out that several other components such as the label and the TextInput also have a border radius property. [0_borderradius] Squares Start by setting the width and the height to the…

but I’m trying to make a square button that is not a fixed measure, so that on small screens it’s small and on big screens it’s big.

There is the aspect ratio variable but it’s not working, I set it to 1 but it doesn’t make it square.

[eoinparkinson]

@maxb you could get the width of the screen/container, then calculate a percentage of this (say 30% of 100px for handiness) which would be 30px. In the blocks, set the width and height to this value.

[maxb]

ok, but i can set that value directly in the designer, but it doens’t work

[eoinparkinson]

You don’t need the designer properties if you do this way. Mind you, aspect ratio should be working.

[maxb]

this is working for you?

[domhnallohanlon]

@maxb here’s an example that creates a square button, roughly 1/4 the width of the screen.

https://x.thunkable.com/projectPage/5f17fc80326e1c3fd1c94c41

I’ve also just updated one of my old tutorials (from 2017!) so that you can make sure the button doesn’t get too big or too small:

Using Constrain instead of If-Then-Else

Updated: July 2020 This article looks at how the constrain block can be used instead of using multiple IF/ELSE blocks. This is not a one-size-fits-all, and there are definitely times where if statements will be preferable, however, I have found lots of scenarios where this is useful. It is ideal for something like a font size or line width where you want to make sure that the values don’t become too small, or prevent negative values. If you have more suggestions of places to use this then let …

Hope that helps.

[maxb]

Yes thx, they both helped although, if I’m not wrong Iwas able to make the aspect ratio work in the design tab without using blocks, cause in theory if i set the width to 40% and aspet ratio to 1 it should automatically make a square, but it doesn’t in this case, I’m trying to undesrtadn if I should change other settings but don’t know.

Btw your slider app wasn’t showing the changes so I edited it but the slider is kinda broken, maybe needs some more tweaks

https://x.thunkable.com/copy/d1251987050a1d4516a73107aa1b4d8c

[domhnallohanlon]

@maxb

the slider is kinda broken

I noticed that too - It’s just on Web Preview but it works fine in Thunkable Live.

---

@maxb

if I’m not wrong Iwas able to make the aspect ratio work in the design tab without using blocks

I haven’t actually used that property before but I’d try it with a PX value rather than a % value first and see whether or not that works.

[maxb]

@domhnallohanlon

works fine in Thunkable Live

Oh, if only I could use the app…

Btw, I’m realizing that I will have to create blocks for every button if I use the block way, or create a “for every any button in list… do this” which is very not optimized in my opinion, it has to be doable by the design part, maybe a clickable box near the height and width with “same as width/height”

[actech]

Buttons must have a text @maxb ? If they don’t, there are several ways to create them. If text are necessary, then the loop for the clones