Android - UI Design Tutorial

In this chapter we will look at the different UI components of android screen. This chapter also covers the tips to make a better UI design and also explains how to design a UI.

UI screen components

A typical user interface of an android application consists of action bar and the application content area.
  1. Main Action Bar
  2. View Control
  3. Content Area
  4. Split Action Bar
These components have also been shown in the image below −
Anroid UI Tutorial

Understanding Screen Components

The basic unit of android application is the activity. A UI is defined in an xml file. During compilation, each element in the XML is compiled into equivalent Android GUI class with attributes represented by methods.

View and ViewGroups

An activity is consist of views. A view is just a widget that appears on the screen. It could be button e.t.c. One or more views can be grouped together into one GroupView. Example of ViewGroup includes layouts.

Types of layout

There are many types of layout. Some of which are listed below:
  • Linear Layout
  • Absolute Layout
  • Table Layout
  • Frame Layout
  • Relative Layout

Linear Layout

Linear layout is further divided into horizontal and vertical layout. It means it can arrange views in a single column or in a single row. Here is the code of linear layout(vertical) that includes a text view.
<?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=”vertical” >
   
   <TextView
      android:layout_width=”fill_parent”
      android:layout_height=”wrap_content”
      android:text=”@string/hello” />
</LinearLayout>

AbsoluteLayout

The AbsoluteLayout enables you to specify the exact location of its children. It can be declared like this.
<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

The TableLayout groups views into rows and columns. It can be declared like this.
<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
      android:text=”User Name:”
      android:width =”120dp”
      />
      
      <EditText
      android:id=”@+id/txtUserName”
      android:width=”200dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

The RelativeLayout enables you to specify how child views are positioned relative to each other.It can be declared like this.
<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

The FrameLayout is a placeholder on screen that you can use to display a single view. It can be declared like this.
<?xml version=”1.0 encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>
Apart form these attributes, there are other attributes that are common in all views and ViewGroups. They are listed below −
Sr.NoView & description
1layout_width
Specifies the width of the View or ViewGroup
2layout_height
Specifies the height of the View or ViewGroup
3layout_marginTop
Specifies extra space on the top side of the View or ViewGroup
4layout_marginBottom
Specifies extra space on the bottom side of the View or ViewGroup
5layout_marginLeft
Specifies extra space on the left side of the View or ViewGroup
6layout_marginRight
Specifies extra space on the right side of the View or ViewGroup
7layout_gravity
Specifies how child Views are positioned
8layout_weight
Specifies how much of the extra space in the layout should be allocated to the View

Units of Measurement

When you are specifying the size of an element on an Android UI, you should remember the following units of measurement.
Sr.NoUnit & description
1dp
Density-independent pixel. 1 dp is equivalent to one pixel on a 160 dpi screen.
2sp
Scale-independent pixel. This is similar to dp and is recommended for specifying font sizes
3pt
Point. A point is defined to be 1/72 of an inch, based on the physical screen size.
4px
Pixel. Corresponds to actual pixels on the screen

Screen Densities

Sr.NoDensity & DPI
1Low density (ldpi)
120 dpi
2Medium density (mdpi)
160 dpi
3High density (hdpi)
240 dpi
4Extra High density (xhdpi)
320 dpi

Optimizing layouts

Here are some of the guidelines for creating efficient layouts.
  • Avoid unnecessary nesting
  • Avoid using too many Views
  • Avoid deep nesting

Comments

Popular posts from this blog

Android - TextureView Tutorial

Android - JetPlayer Tutorial

Android - Notifications