In Android app development, user interface (UI) is everything. Even if your Android app is packed with slick, unique functionality, if it’s wrapped in a clumsy and unprofessional-looking UI, no one will want to use it. Chances are they won’t even bother to scratch your app’s badly-designed surface.
So, how do you ensure your Android UI design doesn’t let you down? Eclipse and the Android Development Tools (or the snappier ‘ADT’) come with plenty of functionality for designing, creating and fine-tuning that all-important UI, and mastering the Android UI is key to producing an app that people will want to use. ADT users can either design their UI using an intuitive graphical layout editor, or delve into defining XML layout resources.
In this Android UI tutorial, we’ll take a closer look at the functionality of Eclipse’s powerful “what you see is what you get” editor, before providing an introduction to XML layout resources.
Android UI Design Using Graphical Layout Editor
The Eclipse graphical layout editor is a powerful time-saver, allowing UI elements to be managed without implementing your entire design in XML first. However, at some point you will probably need to add functionality, or make tweaks that can be performed only in XML. Thankfully, while you’re visually constructing your Android UI design, the graphical layout editor is busy creating a corresponding XML resource file. This means you can take advantage of the intuitive graphical layout editor, and then switch seamlessly to an XML alternative as required.
To access the graphical layout editor:
- Ensure the ‘Java’ perspective is open.
- In the Package Explorer, open the ‘res’ folder followed by the layout folder.
-
Open the main.xml folder. Select the ‘Graphical Layout’ tab.
From the main graphical editor screen you can access some useful tools: Canvas, Palette and Outline. You can also click on the configuration drop-down menu to see, at a glance, how your Android UI renders on different versions of the SDK.
Android UI Tool: Canvas
First, we’ll look at ‘Canvas’ which renders your UI according to the parameters of the currently selected device (more on that later!)
There are several key tasks that can be performed from the canvas:
- Dragging and dropping widgets — the left-hand menu (or ‘Palette’ area) lists a selection of widgets. Drag a widget from the palette and drop it onto the canvas, and Eclipse adds and renders this widget automatically — all without writing a single line of XML!
Tip: Additional coding may be required to make some UI elements function correctly, for example making buttons clickable.
- Move elements around the canvas — drag and drop to rearrange your existing UI components. Again, no XML necessary!
Android UI Tool: Palette
To the left-hand side of the graphical layout editor is the ‘Palette.’ This contains the different categories of views that come with the Android SDK. Select a heading to view the available widgets for each category, which are automatically rendered according to the selected device. These widgets can be dragged from the palette and dropped onto the canvas — again, they will render automatically.
Android UI Tool: Outline
Alternatively, the palette widgets can be dragged onto the ‘Outline’ view where the different UI elements are displayed as a list. This format is useful if you need to change the order of your graphical elements — simply drag and drop in the outline view, and the canvas will update automatically. To make it even clearer which items you are rearranging, any item that’s selected in the outline view will also be highlighted in the canvas output.
Tip: Right-clicking on an item in the graphical layout editor will open a context-sensitive menu with some useful additional functions.
Choosing Your Android UI Configuration
Now you have your basic UI, but not everyone is running Android on the same device. How does your UI translate across the spectrum of Android devices? If you’ve designed for mobile, does your app look just as good on an Android tablet?
In this increasingly fragmented world of Android development, one of the major challenges is testing your app across the different device parameters. The canvas makes this easy — finding out how your UI translates to different devices is simply a matter of a few mouse-clicks. Open the configuration drop-down menu at the top of the main.xml area, to view all the available devices.
In the ever-changing world of mobile development, it’s possible this list won’t include the device(s) you’re looking for. If this is the case, select the ‘Custom’ option to bring up a more detailed list of device configurations. Scroll to the bottom of the list and select ‘Custom,’ followed by ‘New’ to enter your own parameters for the canvas output.
Enter your device parameters in the following format:
- x dpi — the physical pixels of the screen in the X dimension
- y dip — the physical pixels of the screen in the Y dimension
You can also choose from a list of available qualifiers:
Once you’ve selected a device (or used the custom controls to create your own parameters) Eclipse will render your UI as it will appear on that device.
Declaring Android UI Layout with XML
As already mentioned, the graphical layout tool writes a corresponding XML layout resource file while you’re visually creating your UI. You can dip into the XML and edit it directly at any point during the development process.
To access the XML file:
- Ensure the ‘Java’ perspective is open.
- In the Package Explorer tab, open ‘res’ then ‘layout.’
- Open the ‘main.xml’ folder and open the ‘main.xml’ file.
In the main.xml file, you can create your UI components by entering XML code. Here is an example of a very simple XML layout resource:
Your XML resource file should begin with the following :
<?xml version="1.0" encoding="utf-8"?>It will then be followed by the root element of the layout, usually a container view such as a layout (in this example, it’s LinearLayout.)
This example contains some additional elements:
- TextView — a text editor. The actual text is specified using the following:
android:text = "your text" - CheckBox — two checkboxes
Again, the text displayed alongside the checkboxes is specified with:
android:text = "button text"Tip:The integer ID associated with view objects is essential for identifying the particular view within the tree. In the layout XML, this ID is usually assigned as a string, in the id attribute. The basic ID syntax is:
android:id="@+id/element-name"For example, the UI element name could be “textbox” (or “textbox1” if your UI contains more than one textbox.)
But how does this XML translate to the mobile device? Launch the Android emulator and take a look!
Conclusion
The ADT plugin’s graphical WYSIWYG editor has been greatly improved in recent releases of ADT, so there’s never been a better time to try it out! In this Android UI tutorial, we provided an intro to the graphical layout editor, before exploring its powerful functionality in greater depth. We also briefly covered getting started with defining your layout in XML — but there’s still much more to cover. Interested in learning more? The official Android docs are a great source of additional information on using XML in Android.
