The key element when writing an Android app is to design the User Interface (UI) because almost all interactions with Android devices take place through the user interface. Therefore we need to first learn about the UI, in particular, the Android’s View class before we can build Android Apps.

In Android, View class is the superclass of all UI components in Android. Most commonly used View subclasses include TextViews, EditTexts and Buttons. Simply put, every item on the user interface is a subclass of the Android’s View class.

A View object occupies a rectangular area on the screen and is responsible for the drawing and event handlingDrawing involves taking care of what is drawn within a view such as color and size. Events handling involves responding to events that occur within the view such as touch events or click events.

UI Components
These are specialized subclasses of View Class that act as controls or used to display, text, images, or video content on your phone. Android provides a set of standard views such as Button, CheckBox, ProgressBar and TextView, Radio Button, EditText, ImageViewButton and ImageView as illustrated below.

views-in-android1

You can add views either from code or through XML layout files.  Most coders and that includes me use the layout option as you will do less coding.

XML stands for Extensible Markup Language. XML is a markup language much like HTML used to describe data. Xml itself is well readable both by human and machine. In Android we use xml for designing our layouts because xml is lightweight language so it doesn’t make our layout heavy.

Views may have an integer id associated with them. These ids are typically assigned in the layout XML files, and are used to find specific views within the view tree. For instance, you can define a button in the layout file and assign it a unique id and then use this id to identify it in the source code as shown on the below code excerpts.

1
2
3
4
5
<Button
android:id = "@+id/simpleButton"
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
/>
1
 Button simpleButton =( Button ) findViewById ( R .id.simpleButton );

ViewGroup and Layouts Files
A ViewGroup is a container to hold and arrange smaller views. These smaller views are referred to as children while the view holding them is known as the parent or the root element.  An example of a ViewGroup is a RadioGroup which contain multiple RadioButton objects. In this case, the RadioGroup is the parent while the contained RadioButtons are the children.

ViewGroup is off-course a subclass of the View class and is the base class for Layouts.

Layouts
Layouts are invisible containers that hold other UI components and define their layout properties. Layouts define how the GUI components are arranged with a view.

While designing the UI it is important to ensure correct presentation due to the wide range of display sizes for the different Android devices.This achieved through Android Layout described below.

 Linear Layout – Positions child views in a single row or column depending on the orientation selected. TLinear Layout dependes on the parent’s orientation which can  be either be vertical or horizontal. A weight value can be set on each child to specify how much of the layout space that child should occupy relative to other children.

linearlayout

TableLayout – Arranges child views into a grid format of rows and columns. Each row within a table is represented by a TableRow object child, which, in turn, contains a view object for each cell.

TableLayout001-620x507
Table Layout
Relative
Relative Layout

RelativeLayout – Is the most powerful and flexible of the layouts, it allows child views to be positioned relative both to each other and the containing layout view through the specification of alignments and margins on child views. The RelativeLayout is useful when designing a user interface that must work on a variety of screen sizes and orientations.

AbsoluteLayout – Allows child views to be positioned at specific X and Y coordinates within the containing layout view. Use of this layout is discouraged since it lacks the flexibility to respond to changes in screen size and orientation.

Absolute

GridLayout – The GridLayout is a relatively new layout manager that was introduced as part of Android 4.0. A GridLayout instance is divided by invisible lines that form a grid containing rows and columns of cells. Child views are then placed in cells and may be configured to cover multiple cells both horizontally and vertically allowing a wide range of layout options to be quickly and easily implemented. Gaps between components in a GridLayout may be implemented by placing a special type of view called a Space view into adjacent cells, or by setting margin parameters.

download
Grid Layout

FrameLayout – FrameLayout is designed to display a single view. If multiple child views are added they will, by default, appear on top of each like a photos stack. Alternate positioning of individual child views can be achieved by setting gravity values on each child using the  android:layout_gravity attribute. For example, setting a center_vertical gravity on a child will cause it to be positioned in the vertical center of the containing FrameLayout view – see View 3 below. Frame Layout also has the foreground attribute to highlight a view when clicked.

Frame Layout
Frame Layout
List View
List View

List View – is a view which groups several items and display them in vertical scrollable list.

The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database.

The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that’s placed into the list.

The ListView and GridView are subclasses of AdapterView and they can be populated by binding them to an Adapter, which retrieves data from an external source and creates a View that represents each data entry.

Layout XML Files
A layout XML file is an XML file which is stored in your Android project’s app/res/layout directory.  It is a convention to name the layout files after which layout they represent. For instance, a layout file for an activity is normally given a name that starts with activity_. A layout file for an activity called MainActivity would thus be named activity_main.xml

A layout XML file always contain a root element. This root element typically refers to a ViewGroup instance. Here is a layout XML file example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   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"
   tools:context="com.androidshowtime.myfirstapp.MainActivity">

    <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       />

</RelativeLayout>

Line one represents the XML Declaration i.e. the version and encoding used.The xml declaration is not required, however, if used it must be the first line in the document and no other content or white space can precede it.

The RelativeLayout tag provides a Layout Container that will hold our user interface elements – in this case TextView – the RelativeLlayout is the parent. The xmlns name tag should be always be an attribute of the parent view.

 xmlns:android references the XML platform (XMLNS means eXtended Mark-up Language Naming Schema) and defines a location on the Internet where the XML tags for use with Android ( also used in this XML document are publicly defined in one central location.

The second parameter xmlns:tools defines where on the Internet the XML tools used in this XML document are defined publicly.

tools:context tag tells us where these tools will be utilized, in this case in our MainActivity Java class, referenced via .MainActivity setting value held in quotes within that parameter.

The other parameters in the Layout XML file are all from the Android platform and define parameters that pertain to the Android OS, for instance, android:layout_width and android:layout_height are both set to the match_parent value, which tells the Relative Layout container to expand to fill the entire display screen.

Width and Height – when you declare a layout using a layout xml file you have to set values for the 2 attributes layout_width and layout_height for every ViewGrop and View element.

Using a layout file in an activity
Once you have created a layout file you can use it as the content view for a subclass. Content View is the desing of an activity. To display the layout defined in the layout file in the activity you can call the activity’s  setContentView() method from inside the activity’s onCreate() method (java code). Here is an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
package com.androidshowtime.myfirstapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//content view is the design of an activity
setContentView(R.layout.activity_main);
}
}

That is a lot of info in one post, please take time to understand the View class and leave your comments below.

1 Comment »

Leave a Reply