Different devices have different screen sizes. It’s really hard to create an app that looks the same across different devices. One way to tackle this situation is determine how much each component should take regardless of screen size. Say you have one image and one button. If you want the image to take 80% of the height and the button to take the remaining 20%, then calculate that using the device’s height and set accordingly.
App Inventor’s Screen has width and height which are the width and height of the actual device. We can use them to calculate the space our components should take in any device.
In the screenshot above, we have four main components – a label on top, a horizontal arrangement, a vertical arrangement, and another label on bottom. Each arrangement also has a label component. In design view, it looks like this-
We want the top label to take 10% of the height, each arrangement to take 40%, and the last 10% we want the bottom label to have. That is a total of 100%. We want all components to take full width.
As you can see in screenshot above, we used screen’s width for all of our components. Then we allocated the height for each component using screen’s height. Note that there is a label inside each arrangement component. In design view, we set both of their widths and heights to Fill parent to take the whole width and height of their respective arrangement.
You can download the source file for this project UniversalScreenSize.
Thats a Great Tip.ThankYou So much..Never thought of that before
how can we set text in Label or Textbox to wrap ?
if the text to long for the screen, how to make it wrap.
Choose text box’s width to fill parent or any defined value than automatic, then try again.
hi mr sajal my questions is it possible to make giant apps like instagram in app inventor an app that uses filters and all?
Instagram type apps requires a very good knowledge in server side programming for authentication/storage/security etc. You need a lot more than what AI offers at the moment.
Nice tip, thx
I have lots of image sprites in my app, the problem is that the pictures that i have drawed with paint looks very bad in tablet compared to my phone. The resolution is not so good. How can i make the pictures of the image sprites look the same in big tablet as on my phone? the pictures are .png should they be .jpg?
You can have a larger image and scale it down so it doesn’t look bad on a bigger device. Also use a vector software like Inkscape for creating images.
What to do when my image sprites are not in the same place when i use my app with phone compared to when i use it in tablet? For example i have drawn an map with photoshop and it is used as a canvas backround image. On the maps there are roads. I have image sprite “car” that moves on the roads of the map when i use my app with my phone. But when i use my app with tablet the car position is not in the road anymore so it is not in the right place. What to do?
You would not use this way even if you were using a commercial engine. You would separate the road image from the background image. Have separate images for background and the road. Place the background image first in AI2 and then your road(s) so that you know where exactly you placed the road and using its coordinates, you would position the vehicles.
How can I make the text font size resizable with screen size in app inventor?
Hello Mr. Sajaj,
Thank you so much for the wonderful tutorial. I have a question though. Supposing I want to insert three buttons each with square shapes (say 100 pixels by 100 pixels) into the vertical arrangement and the horizontal arrangement, how can I make the shape of the buttons be consistently square shaped on all mobile devices’ screens?
Sorry this question isn’t related to this article as such but is related to AI
Can AI be used to make a property search app that will filter results, show paginations of results and allow user to register and use paypal to pay for there listings?
Short answer – yes but it will be complex. Your main concern should be building the server side operations like making transactions, verification of users, etc. AI will only do the front-end which I would not recommend yet for the app you described as security is very important here.
Even though textboxes and labels, etc. are scalable by the method you describe, fonts are not. So (for example) a label containing text is just fine but the text overruns the textbox and makes readability fall to far less than a desirable level – the same applies to text in buttons. How to make text scalable??
First, you design for a predefined size without thinking of multiple devices. Say your initial design is done for a screen size of 1024×768. After that you follow the tutorial above. Then you check how much you resized your component. Get the difference and manipulate font size accordingly. Say you have a label with 400 width, after applying above tutorial suggestion, your label becomes 200. If you used 12 as the font size for the label, you should change it to 12/(400/200).
is it possible to make games like angry bird or temple run using AI2?
Short version: No. You can make simpler version of those games. No 3D capability yet. Hence, no temple run.
For the 3d, psuedo-3d is probably possible using canvas
This is unrelated, but I am creating a booking app, and need some help. How can i add a timer so when something is booked, it is unbooked after an hour automatically? Help please much appreciated.
Since your app may get closed when it’s on background and device time is not reliable, I would recommend you to use a tiny server side app as well. When a user books, update your server with the server time of booking. After an hour, you can automatically unbook it.
I am not connecting my booking app to a database of such yet, I just need a booking to expire automatically aftrer an hour. I am new to App Inventor, please help? 🙂
Since you are just playing with it, you can use Clock. After booking, save the time in TinyDB. When a user opens the app, check the time difference between now and the booking time in TinyDB. If more than an hour, expire. If booking doesn’t exist in TinyDB, that means booking was never made by the user. So no expiration.
Sorry I am a bit confused, If i have used inkscap for example to get my vectored graphics so it is scalable depending on device…I can’t seem to load it onto ai2? does it need to be changed from svg? and if so what is the best file type and size?
You should save as png or jpg so you can use.
Help me please! When i put 3-4 images on the screen and do .apk it shows them but when i put 40-60 on one screen after i do .apk it canot show the screen(((
Dear friend, thanks for your tutorial! really great! I have a question: I’m driving mad! because I have an app I’m preparing with AI but when I run it on my phone it still showing pixelation on the images. I’ve prepared images in one specific size and I’ve provided sames sizes to the image properties on the AI but still showing pixelation. Also I have prepared larger images too, with bigger resolution, but with same small size, keeps showing pixelation, I need really crisp images, what’s that happening:(? thanks for your time and help!
Scaling a small image up regardless of its resolution will not make it look crispy. Save the image as a maximum of 1024×1024 and then display. If you are making an app that uses too many images, save the images online and then download on the fly when needed within your app.
This is a great help.
My app layout looked well in a mobile but not on a tablet. This should solve the problem
I have a large image whose height exceeds the limits of the screen. I have set the screen to be scrollable, and also makes the width of the screen and the picture becomes full (fill parent). When I look at the phone, the picture looks smaller and not suitable for the screen. If I turn scalepicturetofit, the picture becomes disproportionate. How can I solve the problem? Thanks
You cannot display an image with predefined size on screens of different sizes and expect to behave the same. Can you fit a square image on a non-square space? What you can do is introduce letter/pillarboxing or have multiple copies of a single image with different sizes you would like to support, etc. Really depends on a specific app.
I have an APP already published but really only works on a phone size
It has 2 square images on layed over the other so also need to move same distance etc on any screen size
How do i get the images to stay square when changing screen sizes?
I can only find a way to do it be saying what size they should be
which then doesn’t change on tablets etc
also unrelated, how can you change the permissions needed as at the moment it wants everything, which are not needed
In that case, it’s always Screen’s width that you can use as the max side length meaning the smaller side length would be the max side length of your images. e.g. if your device is, 480×800; then your image width and height can be a maximum of 480.
I want to fetch out character from the textbox and display its ASCII value. Is it possible in AI 2 ?
Use a TinyDB to store the matching ascii values (http://ascii-table.com/). e.g. A is the key/tag and 65 is the value. You can use a list of list to do that as well. Then split to get a character text. After that, get the matching value from your tiny db/list.
Mr. Sajal… how to solve the problem RunTume Error for [ * empty- screen * ]. Is it possible in AI2? Thak’s before
I am sorry I don’t understand. Can you please share a screenshot of the error?
Hey sir, I have 2 problems. First Im doing a minigolf game and I want to have a obstacle so when the ball hits it, it bounce off but when it bounces on the side it just go right through but at the other site it bounce off
Code: When.Obstacle.collide with golfball set golfball heading to 0 – golfball heading.
Second problem: I wonder if there is a way I could make a sprite stuck on another sprite so if a sprite takes 70% off the screen and I want to put the second sprite on the edge off the first sprite so where ever or how big the first sprite is the other sprite is gonna be on the exact same position on the first sprite it doesnt matter if the screen is 500 x 300 or 200 x 50, or if the sprite is 400 x 100, 600 x 200 the second sprite is always going to be on the same position on the other sprite.
Hope you understand
Mr. Sajal Dutta, I building a game in app inventor with a store function. You get points in the game and you use those points to buy items out of the store. My store is built with a vertical arrangement and buttons. I also have an awards stage where the items purchased go. So say you purchase a dog in the store by pressing buttondog then i have an image sprite dog appear on my awards stage canvas. When that canvas appears you can place the dog anywhere you want. My problem and question is can i program it to allow the user to resize the dog on the awards canvas by pinching?
Not possible out of the box but look at this extension: http://ai2.appinventor.mit.edu/reference/other/extensionsMultitouch.html
Thanks, you’re a really great guy for taking the time to help out noobs like me and other pros like yourself. I looked at the blocks for:Parallax Design Elements for a 2D Platformer Game, blew my mind. I took that and swapped out some images and a little bit of the coding and made an atv game for my little cousins surprise party and people loved it. If they only knew you were the real mastermind behind it, lol. Anyway, thanks for the link and the help.
Well it didn’t work. I used the scale detector extension. I copied the blocks to best of my ability. They used a ball image which cannot be assigned a picture and has a radius block. I use image sprite so I can assign it a dog picture but image sprites do not have a radius block. So instead I did height and width in it’s place. It appears that’s not the way to go.
How about you do this way – when a user taps on the image, show a slider and use the slider’s value to resize the image? SOmething like-
What is a fill parent size of screen width
Like float number*screen width
What’s the float number for fill parent arrangement and speed possible.If possible, give me a common number
how to remove zoom butten from webview????
I really like the dear
nice read this post
I really like the dear
nice read this post
Sir pls guide on how to check the speed and performance of my AI App before publishing on Google Play Store?
i am creating one agricuturel app using mit app inventor. in the app i am creating product menu .when i click on product menu open all product images .when i want information of the perticuler product then i am click on product image. but this image is not clear its blur. for that information page i am taking horizontal arrangement in that horizontal arrangement i will take vertical scroll arrangement in that vertical scroll arrangement put the info of the product. & image size is 720 X 1280. why my image looks blur?please give me suggestion?
Can you help me please:
i am creating an app with mit app inventor and when i open it with my phone it will look small and not aligned !!!
My app simply contains six images of birds. Under each image is a button to play the sound of that bird.
Coule you please help me to make the app interface fit the screen of most phones.
(Build failed! Sorry, can’t package projects larger than 10Mb. Yours is 10.44MB)
can any one help me out with this kind of error?
I’m going crazy.
Try this thread: https://community.appinventor.mit.edu/t/is-it-possible-to-generate-a-file-larger-than-10mb/3879