Android Adventures - Building The UI
Written by Mike James   
Monday, 03 June 2013
Article Index
Android Adventures - Building The UI
Positioning multiple components
Simple Button Example
Calculator App


A Simple Button Example

As a simple demonstration let's first place a Button on the Designer. Align it with the parent at the top left-hand corner  - this should be easy. 




Next place a Large Text widget on the Designer. In this case the alignment we want is for the text to be on the same line as the text in the Button. This is a baseline alignment but if you have the Designer zoomed so that you can see the full area of the screen the chances are all you will be able to do is align to the top or bottom of the Button:




To achieve the baseline alignment you have to use close to 100% zoom. In this case you can move the Text widget to near the correct location and it will snap to the baseline alignment:



You can see the change in the zoom factor from the size of the Title bar and message. It isn't easy to design the UI layout when you can't see the entire screen area. 

So what should you do? 

You cold buy a bigger monitor so that you can work interactively at 100% zoom all the time. 

You could undock the design window that that it has the full area of the screen to work with. 

Finally you could use the fact that you know what you are doing to set the layout:alignComponent baseline:baseline to the Button object. 

Orientation And Resolution

We can test our layout in landscape mode by simply selecting the landscape option:



You can also see what your UI looks like on the complete range of supported screen sizes by selecting Preview All Screen Sizes:




For simple layouts this is probably enough but Android has more up its sleeve to help you work with different sized screens. In particular you can make use of "fragments" and you can create a separate layout for each screen orientation and resolution. 

For example if you create landscape a new layout file called activity_main.xml i.e. exactly the same as the portrait layout file you have already created but in the folder layout-land. You can now edit your landscape layout and it will be used automatically when the user rotates the device into landscape mode. 

What happens is that when your app starts the system picks the best available layout file for the screen according to what has been stored in the resource folders i.e. layout for portrait and layout-land for landscape.. When the device is rotated the system restarts your  app and loads the best layout. If you only have a portrait layout then it is used for all orientations but if you have a landscape layout file then it will be used for landscape mode. 

For example: if we add a landscape layout to the button and text layout given above then initially the portrait layout is used as the template for the landscape layout. But we might want to place the text under the button in landscape mode:




Now if you run the app using the simulator you will initially see the portrait screen. If you rotate the simulator to landscape mode - use Ctrl-F11 - then, depending on the speed of your machine you will see a pause where the portrait layout is visible and then it will change to the landscape layout. If it doesn't seem to work give it time because it can be very slow - remember it needs a complete app restart. 

If you also view the app on a range of devices you can rotate to landscape and see your custom landscape layout.




In general the best plan is to create a complete portrait layout and generate a landscape layout as late as possible in the development so you don't have to repeat UI tweaks. 

Also notice that the auto-switching of layouts causes a potential problem. When the layout is switched your app is restarted and this means that it can lose its current state - it is as if your app has just been started by the user. We need to look into the app lifecycle and how to preserve state to solve this problem - see later. 

You can also use the same approach to supporting different screen resolutions. The idea is the same - multiple layout xml files are provided one for each resolution and the system automatically picks which one to use. This is slightly more complicated than dealing with orientation because you might well have to provide different resolution images to make the layout look good - more on this after we have looked at resources and resource management. 

Last Updated ( Thursday, 20 November 2014 )

Copyright © 2014 All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.