Android User Interfaces

User Interfaces (UI) in Android can be built within two ways, by defining XML-Code or by writing Java-Code. Defining the GUI structure in XML is highly preferable, because as one knows from the Model-Viewer-Control principle that the UI should always be separated from the program-logic. Additionally adapting a program from one screen-resolution to another is a lot easier.

Defining a UI in XML is very similar to creating a common HTML-document, where you have i.e. such a simple file:

<html>

<head>

<title>Page

Title</title>

</head>

<body>

The content

of the body element.

</body>

</html>

Just the same as in Android's XML-Layouts. Everything is well structured and can be expressed by tree-structures:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World"/> </LinearLayout>

Hierarchy of Screen Elements

The basic functional unit of an Android application is the activity-an object of the class android .app .Activity. An activity can do many things, but by itself it does not have a presence on the screen. To give your activity a screen presence and design its UI, you work with views and viewgroups - basic units of user interface expression on the Android platform.

Views

A view is an object extending the base class android, view .View. It's a data structure whose properties store the layout and content for a specific rectangular area of the screen. A View object handles measuring, its layout, drawing, focus changes, scrolling, and key/gestures for the screen area it represents.

The View class serves as a base class for all widgets - a set of fully implemented subclasses that draw interactive screen elements. Widgets handle their own measuring and drawing, so you can use them to build your UI more quickly. The list of widgets available includes i.e. TextView, EditText, Button, RadioButton, Checkbox, ScrollView, ...

Viewgroups

A viewgroup is an object of class android.view.Viewgroup. As its name indicates, a viewgroup is a special type of view object whose function is to contain and manage a subordinate set of views and other viewgroups, Viewgroups let you add structure to your UI and build up complex screen elements that can be addressed as a single entity.

The Viewgroup class serves as a base class for layouts - a set of fully implemented subclasses that provide common types of screen layout. The layouts give you a way to build a structure for a set of views.

A Tree-Structured UI

On the Android platform, you define an Activity's UI using a tree of view and viewgroup nodes, as shown in the diagram below. The tree can be as simple or complex as you need to make it, and you can build it up using Android's set of predefined widgets and layouts or custom view types that you create yourself.

Picture 4 Android UI - Tree structure

To attach the tree to the screen for rendering, your Activity calls its setContentView() method and passes a reference to the root node object. Once the Android system has the reference to the root node object, it can work directly with the node to invalidate, measure, and draw the tree. When your Activity becomes active and receives focus, the system notifies your activity and requests the root node to measure and draw the tree. The root node then requests that its child nodes draw themselves - in turn, each viewgroup node in the tree is responsible for drawing its direct children.

As mentioned previously, each view group has the responsibility of measuring its available space, laying out its children, and calling draw() on each child to let it render itself. The children may request a size and location in the parent, but the parent object has the final decision on where how big each child can be.

Comparing Android UI Elements to Swing UI Elements

As some developers who are reading this have probably coded UIs with Swing before here are some similarities between Android and Swing.

• Activities in Android refers almost to a (J)Frame in Swing.

• Views in Android refers to (J)Components in Swing.

• TextViews in Android refers to a (J)Labels in Swing.

• EditTexts in Android refers to a (J)TextFields in Swing.

• Buttons in Android refers to a (J)Buttons in Swing.

Setting listeners to a View is nearly the same in Android than in Swing.

// Android myView.setOnClickListener(new OnClickListener(){ ... // Swing myButton.addActionListener(new ActionListener() {...

0 0

Post a comment