Hi all
I have searched and followed videos on how to use material icon with buttons but I do not see any font typeface option within the button properties.
Is there a video that demonstrates this for thunkable x?
I am trying to accomplish below
Thanks
Hey @sysads,
There is no Material icon font in Thunkable X, but as a workaround you can download the .png from the material website and add it directly to your app.
Thanks but how do you add png to buttons. tried it but can’t add image as sub of button
In the “Designer” display, you will notice that each button description has an “Image” field (along with the Height, Width, Text Color, etc.). Just specify in there the name of the file that contains the image that you want your button to display. You will have to be careful with the proportions, as that image will completely fill the button, i…e. it will stretch it if need be. I found that processing the image with a “paint” utility of some sort will help.
Ah wait you are referring to app.thunkable and not x.thunkable?
Is x.thunkable different from app.thunkable in this respect?
Oh yes from what I discovered since yesterday. With app.thunkable, it has a lot more features than x.thunkable
Oh, rats… I just finished updating my (rather massive) app and was looking forward into porting it to iOS; I am making use of virtually all the features. That means I may have to forget about x.thunkable if I want to retain the same look and feel… We may be in the same boat.
I am also trying out app.thunkable to see how it works. But I do not see admob in app.thunkable. Is it available?
Yes, it is under the “Experimental” tab. I have a version of my app using it. You have AdMob Banner, and AdMob Interstitial available.
Ah OK seen it.
I am stuck between thunkable x and thunkable classic.
It looks like there is no way around this
I will try to get familiar with the limitations of “x”. I have been googling trying to see if anyone has listed a summary of differences, but so far, no success in finding anything specific. One would be under the impression that “x” ought to duplicate what the “classic” does…
No luck, meet a brick wall with button not having text alignment for thunkable X hence can’t continue with project. Well will have to wait for more updates and return back to this.
I finally got around to check the features of “x”–I am not sure how to deal with those missing horizontal and vertical arrangements yet–but I have tried the “button” after bringing a “jpg” image in the “Files”, and specifying that file as “Background Picture” for the button, and it seems to work.
Then, I converted the jpg to png, and loaded it up the same way. The screen display shows it properly. I haven’t tested how it would look on the android device, however; but as far as I can see, all seems to be working.
Hi could you share screenshot of how it looks. Would love to know how you did it and settings used
Sure.
Here it is.
Button1 is selected, and I have the file “Barber45_YK.png” (which is a white center surrounded by black and yellow barber stripes at 45 degree angle, hence the name) imported in the “Files” section on the left, and referenced as the “Background Picture” in the button specifics on the right. In the center, the screen display layout shows the button with the expected looks.
Pretty straight forward, actually.
Interesting but will that give me something like this. Button with text on left aligned and image right aligned?
If you make a file that has an image that look like this, yes.
Screen capture the button you want if it exists, or make the image up using a drawing program and save it as a file, then import. I mean, you would get the caption “Quiz” and the video game console control icon as part of your image; then you do not need caption at all.
The restriction is that you are stuck with the caption as it appears, can’t change font, font size, font colour, placement, etc. unless you have several files and have the app change the file button association.
Or you make the button caption read "Quiz " (with plenty of trailing blank spaces) to force position; with the image being only of the icon–this may require quite a bit of trial and error to reach optimal positioning.
Or you can have several buttons pre-defined, each with a different file, and play around with the visible property.
Alternatively, you could make TWO adjacent buttons, one with the Quiz caption, and one with the icon. Then you position them such that they seem to be one continuous button, by making the buttons bigger than the arrangement that contains them, so that they will have a clipped edge with no gap(!). Trust me, it works (at least in the classic thunkable), I use that clipping trick in my unit calculator app, so that I am not constrained by the overly generous margins of the button and can show a caption that reaches the apparent edge. Of course, then you have to process the two different buttons click in the same way on the blocks side.
