Wednesday, July 6, 2016

Introduction to UI Layout and Controls

Designing User Interface (UI) is one of the most important tasks in the development cycle, as it is the only part visible to user so we must try to make simple and easy to understand UI.


  • The basic building block for UI is a View object (Created from View class) 
  • A View is an object that draws something on the screen that the user can interact with.
  • A ViewGroup is an object that holds other View or and ViewGroup objects in order to define the layout of the user interface.
  • ViewGroup is derived from View and Layout is derived from ViewGroup, difference between ViewGroup and Layout is that ViewGroup is invisible and abstract class but Layout is visible and concrete form of ViewGroup.


Hierarchy of View, Viewgroup, Layout,UI Controls, Learn Android, 2TechUp


Different types of Layout / ViewGroup

Linear Layout

LinearLayout is a view group that aligns all children in a single direction, vertically or horizontally.

Relative Layout

RelativeLayout is a view group that displays child views in relative positions.

TableLayout

It is a view that groups views into rows and columns. 

Absolute Layout

AbsoluteLayout enables you to specify the exact location of its children.

Frame Layout

The FrameLayout is a placeholder on screen that you can use to display a single view.

List View

ListView is a view group that displays a list of scrollable items.

Grid View

GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid.


Different types of View / UI Controls

TextView

This control is used to display text to the user.

EditText

EditText is a predefined subclass of TextView that includes rich editing capabilities.

AutoCompleteTextView

The AutoCompleteTextView is a view that is similar to EditText, except that it shows a list of completion suggestions automatically while the user is typing.

Button

A push-button that can be pressed, or clicked, by the user to perform an action.

ImageButton

AbsoluteLayout enables you to specify the exact location of its children.

CheckBox

An on/off switch that can be toggled by the user. You should use check box when presenting users with a group of selectable options that are not mutually exclusive.

ToggleButton

An on/off button with a light indicator.

RadioButton

The RadioButton has two states: either checked or unchecked.

RadioGroup

A RadioGroup is used to group together one or more RadioButtons.

ProgressBar

The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are performing a task in the background.

TimePicker

The TimePicker view enables users to select a time of the day, in either 24-hour mode or AM/PM mode.

DatePicker

The DatePicker view enables users to select a date of the day.

View Identification

We assign a unique ID to View object, which is used to identify a particular view.
In Android Studio you can change ID of a view by double clicking on the view.

Working with UI Controls

You can create a new UI Control either by dragging Components from Palette or using XML Code.


<?xml version="1.0" encoding="utf-8"?>

  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

  

   <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="This is TextView "

        android:id="@+id/TextView1 "/>
</RelativeLayout>

Now finally create an instance of the Control object and capture it from the layout, use the following code

TextView showMsg2 = (TextView) findViewById(R.id.TextView1);