User Interface in Android Introduction

Introduction to User Interface in Android:

                All user Interface elements of an Android application are composed of views and View Groups placed in an Android Activity.

 

Android Activity:

Activity in android is a single focused screen that contains Views and View Groups, in addition to some other app components for user interface.

 

View:
A View is a user interface element that draws something on the screen for the user to interact with. Such as buttons(Button) and text fields(EditText). The View is used as an object/Instance for example View view1

ViewGroup:
ViewGroup is a user interface element that contains View Groups as well as Views, ViewGroup defines the interface i.e. Look and feel of the interface that how elements are placed on the screen, in order to define the layout of the interface. For example Linear Layout or Relative Layout.

 

A complete user interface for each component of android is defined by the hierarchy of a Views and View Groups.

 

User Interface Hierarchy in Android
User Interface Hierarchy in Android

 

Identifying a view:

Views can be identified through a unique integer id assigned to it at the time of declaration. Which creates a reference of the view in resource file R. If a resource has already associated with an id and you need to reference an existing resource ID, you do not need the plus‐symbol like

You can simply write android:id=”@id/my_button”

But when you need to create a new id you need a plus-symbol so to give a new id you should write

android:id=”@+id/my_button”

 

Layouts:

                Layout defines the visual structure of interface to place elements accordingly it defines the user interface of an android activity.

You can define the layout by two ways

  1. Declare User Interface in your XML file which will create a static user interface for an activity. Android provides its own case sensitive XML vocabulary that corresponds to View and View Groups.
  2. Instantiate View Groups i.e. Layout elements in your code, if you want to dynamically create a layout.

 

Android framework is flexible enough to create the layout with both of these ways, but there is an advantage of declaring layout in XML. You can separate your code / functionality and the user interface. You can change the interface in XML without changing your source code.

 

XML Layouts:

                Your XML layout is placed in res/layout folder with the extension of .xml each activity has its own xml file which defines the layout of the activity.

How XML resource works:

  1. When the application is compiled each XML layout file is compiled into a view resource.
  2. Layout resource should be loaded from application code in Activity.onCreate() callback implementation.
  3. setContentView() is a method used to pass the reference of layout resource, in the form of R.layout.layout_file_name.
  4. Android framework calls onCreate() callback method in android Activity, when the Activity is launched.

For Example

If your layout file is saved as activity_main.xml then you will load your activity like

 

 

Loading a resource:

                In every Android application, there is a resource file name R.java which contains the reference of all the files of the android application, whenever you need to get something from the resource file you should know the type of the resource which you want to get from the file.

Syntax:

R . <resource type> . <resource name without extension>

 

Layout parameters:

                All the view groups have some common parameters i.e. height and width used to specify the height of the view group, each view group should define them.

There are some constant alternates to specify height and width

  1. wrap_content

It tells your view to size itself to the dimensions required by its content.

 

  1. fill_parent

(Renamed match_parent in API Level 8) it tells your view to become as big as its parent view group allows.

 

Commonly Used Layouts:

Linear Layout:

 Linear Layout is a layout that organizes its children into a single horizontal or vertical row. As according to its name, it places all its views linearly. It also creates a scrollbar if the length of the window exceeds the length of the screen.

 

Relative Layout:

Relative Layout enables you to specify the location of child objects relative to each other (child A to the left of child B) or to the parent (aligned to the top of the parent).

 

Grid Layout:

Grid Layout divides its view space into rows, columns, and cells, when we need all the views to be scattered on the screen without any order, Grid Layout allows us to create a custom designed layout.