How Android User Interfaces are Built? What’s in Android’s 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.

image

 

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() {...

 

Hope you enjoyed reading! Drop your opinions as comments!

Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...
 
Posts RSSComments RSSBack to top
© 2013 Updated Tech News Results and Reviews