Android UI Components – Core components of screen

Introduction to Android UI Components

In this post, we will understand the core Android UI components. Before building an Application, we have to know about the core android UI components of the screen which create the User Interface in Android.

Activity is a means by which users can interact easily with an application. Activity by itself does not have a presence on the screen. Instead, it has to draw the screen using Views and ViewGroups.

Here, we will learn the details about creating user interfaces in Android, how users interact with them.

Views and ViewGroups

A view is a widget that shows on screen. Examples of views are buttons, labels, and text boxes.

A view comes from the base class android.view.View.

We can see one or more than one views are grouped together into a single View Group.

A ViewGroup provides the layout in which you can order the appearance and sequence of views.

Examples of ViewGroups are LinearLayout and FrameLayout. A ViewGroup comes from the base class android.view.ViewGroup.

Android supports the following ViewGroups:

• LinearLayout
• AbsoluteLayout
• TableLayout
• RelativeLayout
• FrameLayout
• ScrollView

Let’s see some of them in detail.

LinearLayout

The LinearLayout arranges views in a single column or a single row. Child views can be arranged either vertically or horizontally.

To see how LinearLayout works, consider the following elements typically contained in the main.xml file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

<TextView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="@string/hello_world" />

</LinearLayout>

In the main.xml file, observe that the root element is <LinearLayout> and it has a <TextView> element contained within it. The <LinearLayout> element controls the order in which the views contained within it appears.

Each View and ViewGroup has a set of common attributes:

RelativeLayout

The RelativeLayout enables you to specify how child views are positioned relative to each other. Consider the following main.xml file:

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent” ​​​​
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >

<TextView
   android:id=”@+id/lblComments”
   android:layout_width=”wrap_content” ​​​​​​​​
   android:layout_height=”wrap_content”
   android:text=”Comments”
   android:layout_alignParentTop=”true”
android:layout_alignParentLeft=”true” />

<EditText
   android:id=”@+id/txtComments”
   android:layout_width=”fill_parent”
   android:layout_height=”170px”
   android:textSize=”18sp”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” />

<Button
   android:id=”@+id/btnSave”
   android:layout_width=”125px”
   android:layout_height=”wrap_content”
   android:text=”Save”
   android:layout_below=”@+id/txtComments”
   android:layout_alignRight=”@+id/txtComments” />

<Button android:id=”@+id/btnCancel” ​​​​​​​​
   android:layout_width=”124px” ​​​​​​​​
   android:layout_height=”wrap_content” ​​​​​​​​
   android:text=”Cancel”
   android:layout_below=”@+id/txtComments”
   android:layout_alignLeft=”@+id/txtComments” />

</RelativeLayout>

Notice that each view embedded within the RelativeLayout has attributes that enable it to align with another view.

These attributes are as follows:

layout_alignParentTop

layout_alignParentLeft

layout_alignLeft

layout_alignRight

layout_below

layout_centerHorizontal

Framelayout

The FrameLayout is a placeholder on the screen that we can use to display a single view. Views that you add to a FrameLayout are always anchored to the top left of the layout.

Consider the following content in main.xml:

<RelativeLayout android:id=”@+id/RLayout”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/res/android” >

<TextView
android:id=”@+id/lblComments”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Thisismylovelydog,Ookii”
android:layout_alignParentTop=”true”
android:layout_alignParentLeft=”true” />

<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/ookii”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />

</FrameLayout>
</RelativeLayout>

Here, we have a FrameLayout within a RelativeLayout. Within the FrameLayout, we embed an ImageView.

ScrollView

A ScrollView is a special type of FrameLayout in which it enables users to scroll through a list of views that occupy more space than the physical display.

The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayout.

The following main.xml content shows a ScrollView containing a LinearLayout, which in turn contains some Button and EditText views:

<ScrollView
android:layout_width=”fill_parent”
android:layout_height=”fill_parent” ​​​​
xmlns:android=”http://schemas.android.com/apk/res/android” >

<LinearLayout
android:layout_width=”fill_parent” ​​​​​​​​
android:layout_height=”wrap_content” ​​​​​​​​
android:orientation=”vertical” >

<Button
android:id=”@+id/button1” ​​​​​​​​​​​​
android:layout_width=”fill_parent”
android:layout_height=”wrap_content” ​​​​​​​​​​​​
android:text=”Button 1” />

<Button
android:id=”@+id/button2” ​​​​​​​​​​​​
android:layout_width=”fill_parent” ​​​​​​​​​​​​
android:layout_height=”wrap_content”
android:text=”Button 2” />

<Button
android:id=”@+id/button3”
android:layout_width=”fill_parent” ​​​​​​​​​​​​
android:layout_height=”wrap_content”
android:text=”Button 3” />

<EditText
android:id=”@+id/txt” ​​​​​​​​​​​​
android:layout_width=”fill_parent”
android:layout_height=”300px” />

<Button
android:id=”@+id/button4”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”Button 4” />

<Button
android:id=”@+id/button5” ​​​​​​​​​​​​
android:layout_width=”fill_parent” ​​​​​​​​​​​​
android:layout_height=”wrap_content” ​​​​​​​​​​​​
android:text=”Button 5” />

</LinearLayout>
</ScrollView>