dcsimg
December 7, 2016
Hot Topics:

Understanding User Interface Layout and UI Components for Android Apps

  • January 20, 2016
  • By Vipul Patel
  • Send Email »
  • More Articles »

Introduction

One of the key elements of a user perception's of a app is the user interface. To architect their applications correctly, it is useful for developers to thoroughly understand the building blocks of user interfaces in Android applications and what considerations can make or break an application.

In this article, we will learn about how the user interface is composed on the Android platform.

All user interface elements are derived from the View or ViewGroup class. ViewGroup is a special view that contains other views. It is the base class for layouts and view containers and it defines the layout properties for its constituent views.

View represents a basic building block that occupies a rectangular section on a screen. It also handles drawing the interface and any associated event handling. All interactive elements are based on widgets and view is the parent for all widgets.  All views within a viewgroup can be visualized to be arranged in a tree.

There are four main type of operations that operate on Views:

  1. Setting properties: For example, text context inside an EditText
  2. Setting focus: Moves focus to/away from the view control
  3. Registering event handlers: This is needed for registering listeners for specific events that need to be triggered when a specific action happens
  4. Setting visibility: Showing or hiding a view control

Declaring Layout

A layout can be declared in code or in XML layout files. It is easier to do this in XML layout files and you can use Android Studio for this. The key advantage of using the XML layout route is that it allows you to keep the layout distinct from application code and makes for more maintainable code.

A simple layout file requires at least one Viewgroup element that contains one or more view elements.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent"
                    android:orientation="horizontal" >
   <TextView android:id="@+id/text"
             android:layout_width="200dp"
             android:layout_height="60dp"
             android:layout_marginTop="41dp"
             android:text="I am a TextView" />
   <Button android:id="@+id/button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginTop="300dp"
           android:text="I am a Button" />
</LinearLayout>

In the preceding example, the LinearLayout is a ViewGroup and TextView and Buttons are Views. You can see that both the Views are contained within the LinearLayout ViewGroup.

As part of loading the activity, the layout file in inflated by the Android platform.

To load the XML resources programmatically, the app needs to call the setContentView() method and pass in the reference to the layout resource from your Activity's onCreate().

Here is some sample code of how this will look:

public void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.my_layout);
}

You can see from the above call that it takes a reference to the layout file.

Defining a Custom View

In addition to using the built-in Android Views, developers can define their own custom views.

If you are building a custom view, you would need to implement the following methods:

  • Constructor
  • onFinishInflate(): This is called after a view and its children have been inflated from the layout XML file
  • onMeasure(): This method is called to determine the size requirements for the view tree
  • onLayout(): This method is called when the view needs to assign a size and position to all its children
  • onSizeChanged(): This method is called when the size of the view is changed
  • Understanding User Interface Layout and UI Components for Android Apps: This method is called when the view needs to render the content
  • OnKeyDown(), onKeyUp(), onTrackballEvent(), onTouchEvent(): These methods are called when the user interacts with the view
  • onFocusChanged(): This method is called when the view gains/loses focus
  • onWindowFocusChanged(): This method is called when the container window of the view gains/loses focus
  • onAttachedToWindows(), onDetachedFromWindows(), onWindowVisibilityChanged(): These methods are called when the view attaches/detaches from the windows or when the visibility of the window changes.

View Instance Creation

When creating an instance of the view, one needs to provide the following

  • ID: Though optional, the identifiers are useful to find specific views within the view tree.
  • Position: This is the location of the view control that is expressed as a pair of left and top coordinates. The unit is in pixels.
  • Size: This is expressed via width and height in pixels.
  • Padding: This is the offset for the content of the view by the specified amount of pixels.
  • Margins: This is supported only for ViewGroups
  • Layout: This can be an exact number, MATCH_PARENT(inherit from parent) or WRAP_CONTENT(just enough to contain the content)

Layout Types

The most common types of layouts are as follows:

  • LinearLayout: This layout structures its children into single horizontal or vertical rows.
  • RelativeLayout: This layout allows developers to specify the location of child objects relative to each other.
  • WebView: This layout is used for displaying web pages.
  • ListView: This layout displays a list of scrollable items, with the items being inserted to the list using an Adapter.
  • GridView: This layout displays items in a two dimensional grid format.

Summary

In this article, we learned about the basics for user interfaces on the Android platform. I hope you have found this information useful.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.


Tags: user interface, XML, Android, widgets, user interface design, Android app, android studio, viewgroup




Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date
Rocket Fuel