Android Adventures - Building The UI
Android Adventures - Building The UI
Written by Mike James   
Tuesday, 17 February 2015
Article Index
Android Adventures - Building The UI
Positioning multiple components
Simple Button Example
Calculator App
Going Further

 

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 apart from the tendency to snap to the top and left edges.  

 

 

buttonexample1a

 

If you find it difficult get a rough position and then enter the exact margins then always remember that you can move to the properties window and enter them directly:

buttonexamplepro

 

The big problem with this approach is that if you select the component and move it even a little the chances are it will snap to the edge and you will have to enter the property values again.   

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:

 

buttonexample2a

 

To achieve the baseline alignment you have to use close to 100% zoom. Use the zoom tools at the top right of the Designer.

zoom

 

In many cases if you can't get the alignment you want then increasing the zoom to maximum is often the way to achieve what you are trying to do. In this case you can move the Text widget to near the correct location and it will snap to the baseline alignment:

 

buttonexample3a

 

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 could 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 in the property window. 

in practice zooming in and out is usually the easiest option. 

Orientation And Resolution

One of the biggest challenges in creating apps for Android is allowing for the range of screen sizes and orientations. Android Studio lets you see your layout in a range of devices, orientations and resolutions. This makes it so much easier. 

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

landscape

 

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

 

allscreens2

 

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, use Create Landscape Variation, 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:

 

land1a

 

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.

 

allscreenslandb

 

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.

This is just our first look at a particular aspect of app development that makes Android more complicated than developing for a fixed screen size - it turns out not to be so difficult as it might first appear. 



Last Updated ( Sunday, 26 July 2015 )
 
 

   
Copyright © 2015 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.