Android UI Design Basics for Developers
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.