One of the nice things about developing for the iPhone is that all iPhones have screens the same size and shape. This means you can lay out your screens safe in the knowledge that they’ll look right on every iPhone out there. Yes, you have the retina screen on the iPhone 4 to deal with, but all you need to do there is to provide double-sized images for those graphics you'd like to appear nice and clear.
Unfortunately, it’s not quite so simple on Android. There are loads of different screen sizes and shapes around, from tiny square ones to huge hi-res 16:9 format ones. What this means is that your app may display differently (or more importantly wrongly) on some phones.
Luckily AppFurnace can easily be set up to make your app automatically grow, shrink, and move widgets so that the whole screen is used properly. You as the designer are able to set up exactly how this works, so you’ll have full control over how it’ll look. The AppFurnace Preview tool will then show you how your app will look on a series of different phones so you tweak away until it always looks perfect.
First let's show you the problem.
Why do I need to worry about screen sizes?
Here's a common app layout that I made earlier using the Layout tool. There's a header at the top (actually just a Label widget), a toolbar at the bottom (another label) with a Button overlaid, and a content area in the middle. My content area is an image, but you might prefer to use a RichText widget or a VScrollArea.
- Try building a page like this yourself.
- Click the Preview button at the top of the screen you'll see how this looks on an iPhone 3G. Just the same. Easy.
If you select iPhone 4 (Retina) from the drop-down device selection you'll see a screen which looks just the same, but is twice the size.
Ok. Now let's see what it'll look like on some different Android phones.
- In the Preview window, click the Android button on the left (with the little robot).
- From the drop-down, select Nexus One. This phone has a tall thin screen of 480 x 800 pixels.
Note that the toolbar is no longer at the bottom of the screen - we have an ugly white space instead.
- Now choose Samsung Galaxy Mini from the drop-down menu. This device has a smaller and slightly squat screen.
Now we can't see the Start button at all! This is even worse, as the user can't actually press that button.
So as I hope is now clear, you really do need to worry about screen sizes when you want your app to run on an Android phone, as you may find your app at worst unusable and at best a little ugly on some phones.
So what do we do about this?
Fixing up that page
Before we get into details it's worth knowing a little bit about how AppFurnace displays your pages on the phone.
- When you design your pages using the Layout tool, you're always using the size and shape of an iPhone (320x480 pixels)
- When you preview your app, your pages will be stretched to the full width of the selected phone's screen. E.g. the page will be:
- Stretched to 400 pixels wide on Android phones like the Google Nexus One.
- Shrunk to 240 pixels wide on phones like the Samsung Galaxy Mini.
- Displayed at the original size on iPhones, or Android phones with 320 pixel wide screens.
This means that you only need to worry about the differences in height between screens.
In the example earlier, the problem was that the Nexus One screen is taller than the iPhones, so we ended up with a gap at the bottom. The Samsung Galaxy Mini screen was shorter, so the bottom of the page was chopped off and the start button couldn't be seen.
By marking up your widgets correctly, you can tell AppFurnace how they should be moved and re-sized to fit different screen shapes properly.
Making the toolbar always stay at the bottom
- Click on the toolbar widget (the label at the bottom of the screen).
- On the property box to the right, select the Size tab (the box with the arrows coming out of it)
You should notice that a dot will appear in the top-left hand side of each widget. If you select a different tab, the dots will disappear again. What these dots indicate is how that widget will be moved or resized if the app is run on a device with a different screen size.
A dot in the top left is called fixed top. In practice this means the widget will stay put whatever happens. This is the default. You should be able to see that fixed top is selected in the on other screen sizes panel.
- Select fixed bottom instead.
Fixed bottom means this widget should always be the same distance from the bottom of the screen. Right now the widget is right against the bottom of the screen - and so it'll stay there regardless of how tall or short the screen is.
Now let's sort out the Start Button.
- Click on the Start Button, and ensure you have the size tab visible in the property box.
- Select fixed bottom.
- Again you should see the dot move to the bottom left of the start button.
Let's check it out.
- Click the Preview button at the top of the screen.
- Ensure Android is highlighted, and then choose Samsung Galaxy Mini from the drop-down.
- You'll see that the toolbar is now in the place you'd expect.
- Now try Nexus One.
Ok that's looking better, but now we have a gap between the AppFurnace Logo in and the toolbar.
Let's fix that next!
- Close the preview
- Click the Image widget in the center, and ensure the size tab is selected.
- This time we're going to choose fixed top & bottom
- Note that you get two little dots overlaid on your widget, one at the top-left and one at the bottom-left.
Again, let's try this out:
- Click Preview
- Select Android Nexus One
You should notice that the image area is the right size now.
On the shorter Samsung Galaxy Mini it's all looking good too.
If you want to read a little bit more about the different on other screen sizes options, click the (i) button at the top right of the panel.
That's great, but my page doesn't look exactly like yours.
Ok, here are some general rules which can help you make pages that always work.
- You'll always need to have something which will need to stretch or shrink on each of your screens.
- It can be a widget, like a RichText, Twitter, or VScrollArea, or you can simply leave a gap between widgets.
- Be really careful that your screens work on the shorter screen of the Samsung Galaxy Mini device (or similar)
- If you want to have something always appear in the centre of the screen, try the proportional option. This doesn't change the size of the widgets, but instead keeps it at the same relative position. E.g. a widget 50% of the way down the screen will be 50% of the way down on all screens.
What about landscape apps?
At the time of writing landscape apps have some limitations.
- On small screen devices such as the Samsung Galaxy Mini, the app appears fine in the preview, but does not scale correctly on the actual phone.
- On wider screen devices such as the Nexus One, there will be a black bar that appears on the right-hand side of the app.
You can use this image (right-click and download as) to see the various shapes of screen currently supported by AppFurnace.