Google+

Android4Beginners.com

Apps development for Android step by step

Lesson 0.5 Previewing app layout on various devices and screen sizes (without having them)

The previous lesson was finished after we managed to open activity_main.xml file with a layout of our first app. You should see preview of app interface on the screen: app name, Hello word text and system menu at the bottom. This is not working app in which you could click (we would run app in the next lesson), but preview of the app layout.

There are many different Android devices with various screen sizes and resolutions, you could say. Moreover you could hold device in different way so the screen is oriented vertical or horizontal. And yes – you’re right. So let’s see how the app would look like in various configurations.

First click the icon “Go to next state” – third from the left below tab with file name. It changes layout from Portrait to Landscape and vice versa. Now click Nexus 4 icon (second from the left) and choose for instance Nexus 10 from the list to see how your app would look on larger screen. You could check many predefined devices and change screen orientations.

You could easily check your layout on various screen sizes, resolutions and orientations (Android Studio)

You could easily check your layout on various screen sizes, resolutions and orientations (Android Studio)

There are two more useful options in the list: Preview All Screen Sizes opens at once all major screens. And if any ready to use screens doesn’t fit your needs, you could use Add Device Definition. This option opens Android Virtual Device Manager. In the second tab (Device Definitions) you could add your own device, but you probably wouldn’t have to do it as all standard devices are already available.

Layout preview on a few devices at once? No problem... just choose Preview All Screen Sizes (Android Studio)

Layout preview on a few devices at once? No problem… just choose Preview All Screen Sizes (Android Studio)

Now look at two tabs at the bottom of the file window: Design (active) and Text. Switch to Text. You would see a window with a code and Preview window. If the Preview isn’t visible, click Preview tab on the right screen edge. Now you see your app in a phone layout. You have the same options to change devices and orientation as well as preview on all. There are also useful zoom features (Zoom to fit, Zoom to actual size, Zoom in and Zoom out).

You could switch to Text mode to see a code. Preview is also available in that mode (Android Studio)

You could switch to Text mode to see a code. Preview is also available in that mode (Android Studio)

What’s the difference between design and text mode? Design mode allows you drag by mouse components from Pallette. And in Text mode you just write code on your own.

Now you know what to expect on different screens. It’s time to check how your app is not only looking, but also working.

Previous:
Next: