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

If you've been reading Android Adventures, at this point you understand how the Activity and the View fit together to create a simple application, but the Android UI is more complicated than most because of its need to cope with a range of very different screen sizes and orientations. In this chapter we look at the problem of layout and working with the UI framework. On the way we build a calculator app.

Android Adventures With Android Studio

Contents

  1. Getting Started With Android Studio
  2. The Activity And The UI
  3. Building The UI and a Calculator App
  4. Lifecycle and State
  5. Basic Controls And Events
  6. Spinners
  7. Pickers
  8. UI Graphics A Deep Dive
  9. Introducing Fragments
  10. Fragments and XML
  11. Fragment And Activity Working Together
  12. Managing Fragments
  13. Custom dialogs using DialogFragment
  14. Dialog Classes In DialogFragment
  15. A NumberPicker DialogFragment Project

Androidgears

The learning curve with any UI framework is more or less the same. First you have to find out what constitutes an application that you can run - in Android's case this is an Activity. Next you have to work out how UI components are represented, how you can create them and how to hook up the UI with the code. In Android's case this is a matter of a hierarchy of View objects and hooking up with the code is a matter of finding the objects representing each UI component and adding event handlers.

Once you have the basics you have to start exploring what components you have been provided with to build a UI. In general this vary from the extremely simple - the Button for example - to almost complete applications in themselves - the Listview for example. It would take a long time to master all of them but what most programmers do is make sure that they can use the basic components and then find out about the bigger more sophisticated components when needed. The good news is that once you know how one component, even the simplest, works then most of it generalized to bigger more complicated things.

We also have to worry about how to layout the UI - how to size and position and sets of components. Android is particularly sophisticated in this respect because being a mobile operating system it has to contend with a wide range of screen sizes and even orientation changes while an app is running. This is not a simple topics and we will have to consider it in more detail later but for the moment let's just take a look at the easier aspects of screen layout.

Exploring The Designer

As already explained there are three ways to create a UI. You can create all of the objects in code, you can create an XML file and have the system convert it to objects at run time or you can use the Designer to interactively create the XML file. 

If you are using Android Studio then using the designer is the simplest and most productive way to work so let's concentrate on this method of creating a UI. 

Start Android Studio and create a new simple blank activity project called UItest - this is going to be our UI playground for the rest of the chapter. 

If you now open the file activity_main.xml in the src/main/res/layout  then the designer will open and you will see the familiar rendering of the default layout. 

Now it is time to look at the Palette in more detail. 

The top three sections of the Palette hold the most important UI components. 

The Layouts are containers for other components that provide different layout rules. Layouts are something you use once per Activity so they probably shouldn't be at the top of the list.

The Widgets section contains the most frequenty used components - Buttons, TextViews, Checkboxes and so on. This is the set of components you need to learn to use first. 

The third section - Text Fields are a set of text input components which all work in more or less the same way.

 

Palette1

 

The Button

Where else should be start - the Button is almost the "Hello World" of UI construction. If you know how to work with a Button you are well on your way to understanding all of the possible components. 

The good news is that we have already met and used the Button in Chapter 2 and discovered how to work with it in code. However there is still a lot to find out. 

As already explained there are three ways to create a UI. You can create all of the objects in code, you can create an XML file and have the system convert it to objects at run time or you can use the Designer to interactively create the XML file. 

If you are using Android Studio then using the designer is the simplest and most productive way to work so let's concentrate on this method of creating a UI. 

Start Android Studio and create a new project called UItest - this is going to be our UI playground for the rest of the chapter.  To clear the design surface simply click the "Hello World" text and hit the delete key. 

Relative Positioning

Next click on the Button in the palette and notice the way the layout information changes as you move the button around the screen. As you move the Button around you will see various AlignParent messages and a measurement of the padding applied. 

 

align1

 

This is how components are positioned using the default relative layout - more of which later in this chapter. In this layout there are only a few possible positions for a component:

  • Top  - left, center and right
  • Center - left, center and right 
  • Bottom - left ,center and right

All components are positioned at one of these nine locations but to provide a finer positioning you can specify an offset in terms of a margin which you can see as the green arrows. If you play with the positioning in the designer you will quickly get the idea. 

Note: There is bug in the Designer which causes the positioning to be incorrect at some zoom levels. If you find that components jump to a new position when you drop them try changing the zoom.

As you might guess, there are properties which let you set the location and margins for each position manually. All layout properties start with layout:name where the name gives the positioning effected. For example, if you look in the Properties window you will see:

layout:alignParent  which could be top, left, bottom or right.

and

layout:centerInParent which could be horizontal, vertical or both

You can see that a combination of these plus layout:margin 

gives you all of the positioning possibilities we have seen in the Desgner.



Last Updated ( Saturday, 16 August 2014 )
 
 

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