Unit 3

UI Components and Layouts

3.1 Control Flow

1. All resource files are combined together by AAP[Android Asset Packing Tool].
Resource files are like audio video images other asset related files. 2.Java files
converted into .class files by JVM.So, the out of the jvm will be .class files, that
are heavy weight to put into android. So, that one more level of process will be
taken place.
2. So, the .Class files are entered as input to DX tool. Basically, this is a tool which
will convert .class files to .dex files. That mean Dalvik executable file. Those files
are eligible to execute on DVM (Dalvik Virtual Machine)
3. After getting .dex files, packed them APK builder. Which is basically, Application
Packaging. So, this packed files kept into devices and that will be executed by
DVM.

Directory Structure
Before you run your app, you should be aware of a few directories and files in the
Android project −

Sr.No. Folder, File & Description

1 Java
 This contains the .java source files for your project. By default, it
includes an MainActivity.java source file having an activity class that
runs when your app is launched using the app icon.

res/drawable-hdpi
2
This is a directory for drawable objects that are designed for
high-density screens.

res/layout
3
This is a directory for files that define your app's user interface.

res/values
4 This is a directory for other various XML files that contain a
collection of resources, such as strings and colours definitions.

AndroidManifest.xml
5 This is the manifest file which describes the fundamental
characteristics of the app and defines each of its components.

Build.gradle

6 This is an auto generated file which contains compileSdkVersion,

buildToolsVersion, applicationId, minSdkVersion, targetSdkVersion,
versionCode and versionName

Following section will give a brief overview of the important application files.

The Main Activity File

The main activity code is a Java file MainActivity.java. This is the actual application
file which ultimately gets converted to a Dalvik executable and runs your application.
Following is the default code generated by the application wizard for Hello
World! application −

package com.example.helloworld;

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

public class MainActivity extends AppCompatActivity {

 @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Here, R.layout.activity_main refers to the activity_main.xml file located in

the res/layout folder. The onCreate() method is one of many methods that are figured
when an activity is loaded.

The Manifest File

Whatever component you develop as a part of your application, you must declare all
its components in a manifest.xml which resides at the root of the application project
directory. This file works as an interface between Android OS and your application,
so if you do not declare your component in this file, then it will not be considered by
the OS.
Every app includes an Android Manifest file (AndroidManifest.xml).The manifest file
contains essential information about your app and presents this information to the
Android runtime system. Android must have this information before it can run any of
your app's code.
In this practical you will find and read the AndroidManifest.xml file for the Hello World
app.

For example, a default manifest file will look like as following file −
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tutorialspoint7.myapplication">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:supportsRtl="true"
android:theme="@style/AppTheme">

<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Here <application>...</application> tags enclosed the components related to the
application. Attribute android:icon will point to the application icon available
under res/drawable-hdpi. The application uses the image named ic_launcher.png
located in the drawable folders
The <activity> tag is used to specify an activity and android:name attribute specifies
the fully qualified class name of the Activity subclass and the android:label attributes
specifies a string to use as the label for the activity. You can specify multiple activities
using <activity> tags.
The action for the intent filter is named android.intent.action.MAIN to indicate that
this activity serves as the entry point for the application. The category for the
intent-filter is named android.intent.category.LAUNCHER to indicate that the
application can be launched from the device's launcher icon.
The @string refers to the strings.xml file explained below.
Hence, @string/app_name refers to the app_name string defined in the strings.xml
file, which is "HelloWorld". Similar way, other strings get populated in the application.
Following is the list of tags which you will use in your manifest file to specify different
Android application components −
● <activity>elements for activities
● <service> elements for services
● <receiver> elements for broadcast receivers
● <provider> elements for content providers
The Strings File
The strings.xml file is located in the res/values folder and it contains all the text that
your application uses. For example, the names of buttons, labels, default text, and
similar types of strings go into this file. This file is responsible for their textual
content. For example, a default strings file will look like as following file −
<resources>
<string name="app_name">HelloWorld</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
The Layout File
The activity_main.xml is a layout file available in res/layout directory, that is
referenced by your application when building its interface. You will modify this file
very frequently to change the layout of your application. For your "Hello World!"
application, this file will have following content related to default layout −
<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" >

<TextView
android:layout_width="wrap_content"
 android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
tools:context=".MainActivity" />

</RelativeLayout>

This is an example of simple RelativeLayout which we will study in a separate

chapter. The TextView is an Android control used to build the GUI and it have various
attributes like android:layout_width, android:layout_height etc which are being used
to set its width and height etc.. The @string refers to the strings.xml file located in
the res/values folder. Hence, @string/hello_world refers to the hello string defined in the
strings.xml file, which is "Hello World!".

3.2 Components of a screen

Activity
An activity is a class that represents a single screen. It is like a Frame in AWT.

Layout
It is a type of resource which gives definition on what is drawn on the screen or how
elements are placed on the device’s screen and stored as XML files in the /res/layout
resource directory for the application. It can also be a type of View class to organize
other controls.

Views and ViewGroups

A View is a widget and is shown on screen like buttons, labels etc. and is derived
from the base class android.view.View. A view is the UI element such as button, label,
text field etc. Anything that you see is a view.
Play VideoThey are grouped and ordered for the appearance and sequence into
an ViewGroup which is derived from android.view.ViewGroup.

Fundamental UI Design

Application components are the essential building blocks of an Android application.

These components are loosely coupled by the application manifest
file AndroidManifest.xml that describes each component of the application and how
they interact.
There are following four main components that can be used within an Android
application −

Sr.No Components & Description

Activities
1
They dictate the UI and handle the user interaction to the smart phone screen.

Services
2
They handle background processing associated with an application.

Broadcast Receivers
3
They handle communication between Android OS and applications.

Content Providers
4
They handle data and database management issues.

Activities
An activity represents a single screen with a user interface,in-short Activity performs
actions on the screen. For example, an email application might have one activity that
shows a list of new emails, another activity to compose an email, and another activity
for reading emails. If an application has more than one activity, then one of them
should be marked as the activity that is presented when the application is launched.
An activity is implemented as a subclass of Activity class as follows −
public class MainActivity extends Activity {
}
Services
A service is a component that runs in the background to perform long-running
operations. For example, a service might play music in the background while the
user is in a different application, or it might fetch data over the network without
blocking user interaction with an activity.
A service is implemented as a subclass of Service class as follows −
public class MyService extends Service {
}
Broadcast Receivers
Broadcast Receivers simply respond to broadcast messages from other applications
or from the system. For example, applications can also initiate broadcasts to let other
applications know that some data has been downloaded to the device and is
available for them to use, so this is broadcast receiver who will intercept this
communication and will initiate appropriate action.
A broadcast receiver is implemented as a subclass of BroadcastReceiver class and
each message is broadcaster as an Intent object.
public class MyReceiver extends BroadcastReceiver {
public void onReceive(context,intent){}
}
Content Providers
A content provider component supplies data from one application to others on
request. Such requests are handled by the methods of the ContentResolver class.
The data may be stored in the file system, the database or somewhere else entirely.
A content provider is implemented as a subclass of ContentProvider class and
must implement a standard set of APIs that enable other applications to perform
transactions.
public class MyContentProvider extends ContentProvider {
public void onCreate(){}
}

We will go through these tags in detail while covering application components in

individual chapters.

Additional Components
There are additional components which will be used in the construction of above
mentioned entities, their logic, and wiring between them. These components are −

S.No Components & Description

Fragments
1
Represents a portion of user interface in an Activity.

Views
2
UI elements that are drawn on-screen including buttons, lists forms etc.

Layouts
3
View hierarchies that control screen format and appearance of the views.

4 Intents
 Messages wiring components together.

Resources
5
External elements, such as strings, constants and drawable pictures.

Manifest
6
Configuration file for the application.

3.3 Android - UI Layouts

https://www.tutorialspoint.com/android/android_user_interface_lay
outs.htm
Android Layout Types
There are number of Layouts provided by Android which you will use in almost all the
Android applications to provide different view, look and feel.

Sr.No Layout & Description

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

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

3 Table Layout
TableLayout is a view that groups views into rows and columns.

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

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

Layout Attributes
Each layout has a set of attributes which define the visual properties of that layout.
There are few common attributes among all the layouts and their are other attributes
which are specific to that layout. Following are common attributes and will be applied
to all the layouts:

Sr.No Attribute & Description

1
android:id
This is the ID which uniquely identifies the view.

2
android:layout_width
This is the width of the layout.

3
android:layout_height
This is the height of the layout

4
android:layout_marginTop
This is the extra space on the top side of the layout.

5
android:layout_marginBottom
This is the extra space on the bottom side of the layout.

6
android:layout_marginLeft
This is the extra space on the left side of the layout.

7
android:layout_marginRight
This is the extra space on the right side of the layout.
 8
android:layout_gravity
This specifies how child Views are positioned.

9
android:layout_weight
This specifies how much of the extra space in the layout should be allocated to the
View.

10
android:layout_x
This specifies the x-coordinate of the layout.

11
android:layout_y
This specifies the y-coordinate of the layout.

12
android:layout_width
This is the width of the layout.

13
android:paddingLeft
This is the left padding filled for the layout.

14
android:paddingRight
This is the right padding filled for the layout.

15
android:paddingTop
This is the top padding filled for the layout.

16
android:paddingBottom
This is the bottom padding filled for the layout.

Here width and height are the dimension of the layout/view which can be specified in
terms of dp (Density-independent Pixels), sp ( Scale-independent Pixels), pt ( Points
which is 1/72 of an inch), px( Pixels), mm ( Millimeters) and finally in (inches).

What is the Difference Between “px”, “dip”,

“dp” and “sp” in Android?
An XML-defined dimension value. A dimension is denoted by a number followed by a
unit of measurement. For instance, 25px, 5in, 10dp and 10sp. When you use sp/dp,
your Android applications will be compatible with a wide range of screen densities
and resolutions.
● PX: is an abbreviation for Pixels, which specifies the actual pixels on the screen.
● SP: is an abbreviation for Scale independent pixels. It is the same as the dp unit,
but it is additionally scaled according to the user’s font size selection.
● DP: A virtual pixel unit used to communicate layout dimensions or location in a
density-independent manner while creating UI layout. The density-independent
pixel corresponds to one physical pixel on a 160 dpi screen, which is the
system’s baseline density for a “medium” density screen. At runtime, the system
handles any scaling of the dp units that is required based on the actual density of
the screen in use in a transparent manner.

You can specify width and height with exact measurements but more often, you will
use one of these constants to set the width or height −
● android:layout_width=wrap_content tells your view to size itself to the
dimensions required by its content.
● android:layout_width=fill_parent tells your view to become as big as its
parent view.

Margin v/s Padding

During the designing of user interfaces, sometimes there is confusion occurs
between padding and margin. They are used to provide extra space or a gap. Both
margin and padding targets the four sides of an element and can also work without
the border property, but they differ in many ways.
The main difference between the padding and margin is:
o Padding provides the space between the border and the content of an
element.
o Margin provides the space between the border and outer elements.

So, when we require the space between the elements, then it is better to use margin,
and when we need the space between the inner element and the parent box, then go
for padding.

We can see the following image to clear the difference between the margin and
padding. In this image, the margin indicates the area outside the border and the
padding indicates the area inside the border.
Margin
Margin is a way for a view to enforce some distance from others views. By specifying
margin for a view, we say that keep this much distance from this view. Android has 5
kinds of margins.

1. margin - keep distance on all the four sides

2. marginLeft - keep distance from left side of the view
3. marginRight - keep distance from right side of the view
4. marginTop - keep distance from top of the view
5. marginBottom - keep distance from bottom of the view

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

<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:background="@color/colorPrimaryDark"
android:orientation="vertical"
tools:context="ajitsingh.com.androiduiplayground.DemoActivity">

<TextView
android:background="@color/highlighted_text_material_dark"
android:id="@+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:layout_margin="40dp"
android:text="Text 1"
android:textColor="@color/accent_material_dark"/>

<LinearLayout
android:orientation="vertical"
android:background="@color/highlighted_text_material_dark"
 android:id="@+id/layout1"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@color/accent_material_dark"/>
</LinearLayout>

In the above example there is a LinearLayout(Parent of all views) which does not
have any margin specified. But the textView has a margin of 20dp, and according to
our earlier definition the text view is saying that keep 20dp distance from me in all
the sides. That is why the textView has the 20dp space in all the directions. Then
there is LinearLayout sibling of textView which says in left, right and bottom keep
10dp distance from me and hence there is space in all 3 sides.

Padding
Padding is a way to push the contents away from view’s inner boundary. When we
specify the padding of a view, we say the content to keep this much distance from
your inner boundary(left, right, top or bottom). Like margin, padding is also of 5
types.
 1. padding - keep distance from all the inner boundaries
2. paddingLeft - keep distance from the left inner boundary
3. paddingRight - keep distance from the right inner boundary
4. paddingTop - keep distance from the top inner boundary
5. paddingBottom - keep distance from the bottom inner boundary

Example

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

<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:background="@color/colorPrimaryDark"
android:orientation="vertical"
android:padding="20dp"
tools:context="ajitsingh.com.androiduiplayground.DemoActivity">

<TextView
android:background="@color/highlighted_text_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:paddingLeft="40dp"
android:text="paddingLeft"
android:layout_margin="10dp"
android:textColor="@color/accent_material_dark"/>

<TextView
android:background="@color/highlighted_text_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:paddingRight="40dp"
android:text="paddingRight"
android:layout_margin="10dp"
android:textColor="@color/accent_material_dark"/>

<TextView
android:background="@color/highlighted_text_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:paddingTop="20dp"
android:text="paddingTop"
 android:layout_margin="10dp"
android:textColor="@color/accent_material_dark"/>

<TextView
android:background="@color/highlighted_text_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:paddingBottom="20dp"
android:text="paddingBottom"
android:layout_margin="10dp"
android:textColor="@color/accent_material_dark"/>

<TextView
android:background="@color/high

lighted_text_material_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:padding="20dp"
android:text="padding"
android:layout_margin="10dp"
android:textColor="@color/accent_material_dark"/>
</LinearLayout>

Weight and Weight_sum in Android

Watch this link for the same-https://www.youtube.com/watch?v=HfKxGr0k8RU

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="4">

<EditText
android:layout_weight="2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Type Your Text Here" />

<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Text1" />

<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Text1" />

</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:orientation="vertical"
android:background="@color/black">
<Button
android:id="@+id/b"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1" />

<Button
android:id="@+id/b2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button2"
app:backgroundTint="#4CAF50" />
 <Button
android:id="@+id/b3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button3"
app:backgroundTint="#B51ACF" />
</LinearLayout>

1.Android Linear Layout

Linear Layout Tutorial In Android

Linear layout is a simple layout used in android for layout designing. In the Linear
layout all the elements are displayed in linear fashion means all the childs/elements
of a linear layout are displayed according to its orientation. The value for orientation
property can be either horizontal or vertical.

Types Of Linear Layout Orientation

There are two types of linear layout orientation:
1. Vertical
2. Horizontal
As the name specified these two orientations are used to arrange there child
one after the other, in a line, either vertically or horizontally. Let’s we describe
these in detail.
1.Vertical:
In this all the child are arranged vertically in a line one after the other. In below code
snippets we have specified orientation “vertical” so the childs/views of this layout are
displayed vertically.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"> <!-- Vertical Orientation set -->

<!-- Child Views(In this case 2 Button) are here -->

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button"
android:background="#358a32" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:id="@+id/button2"
android:background="#0058b6" />

</LinearLayout>

2. Horizontal:
In this all the child are arranged horizontally in a line one after the other. In below
code snippets we have specified orientation “horizontal” so the childs/views of this
layout are displayed horizontally.<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"> <!-- Horizontal Orientation set -->

<!-- Child Views(In this case 2 Button) are here -->

 <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button"
android:background="#358a32" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:id="@+id/button2"
android:background="#0058b6" />
</LinearLayout>

Main Attributes In Linear Layout:

Now let’s we discuss about the attributes that helps us to configure a linear layout
and its child controls. Some of the most important attributes you will use with linear
layout include:
1. orientation: The orientation attribute used to set the childs/views horizontally or
vertically. In Linear layout default orientation is vertical.
Example: Orientation vertical:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"> <!-- Vertical Orientation set -->

<!-- Put Child Views like Button here -->

</LinearLayout>
Example: Orientation Horizontal:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"> <!-- Horizontal Orientation set -->

<!-- Child Views are here -->

</LinearLayout>
2. gravity: The gravity attribute is an optional attribute which is used to control the
alignment of the layout like left, right, center, top, bottom etc.
Example: We have set gravity right for linear layout. So the buttons gets align from
right side in Horizontal orientation.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="horizontal">
<!--Button Child View Here--->
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"
android:id="@+id/button2"
android:background="#0e7d0d" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"
android:id="@+id/button"
android:background="#761212" />
</LinearLayout>

3. layout_weight: The layout weight attribute specify each child control’s relative
importance within the parent linear layout.
Example: weight property for button in linear layout. In the below example one
button is of weight 2 and other is of weight 1.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<!--Add Child View Here--->

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Weight 2"
android:background="#761212"
android:layout_margin="5dp"
android:id="@+id/button"
android:layout_weight="2" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#761212"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Weight 1" />
</LinearLayout>
In the layout image you can notice Button with weight 2 gets more size related the
other.

4. weightSum: weightSum is the sum up of all the child attributes weight. This
attribute is required if we define weight property of the childs.
Example: In the same above example of weight, we can define weightSum value 3.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="3"
android:orientation="horizontal">
<!--Add Child View Here--->

</LinearLayout>

Example of Linear Layout:

Now lets design 2 linear layout UI. First we have designed using weight attribute and
second without using it. So below layout output will clear the difference between
them:
2. Android Absolute Layout

An Absolute Layout lets you specify exact locations (x/y coordinates) of its children.
Absolute layouts are less flexible and harder to maintain than other types of layouts
without absolute positioning.

Absolute Layout
AbsoluteLayout Attributes
Following are the important attributes specific to AbsoluteLayout −

Sr.No Attribute & Description

android:id
1 This is the ID which uniquely identifies the layout.

android:layout_x
2 This specifies the x-coordinate of the view.

android:layout_y
3 This specifies the y-coordinate of the view.

Example of Absolute Layout in Android:

activity_main.xml (or) main.xml

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_x="110px"
android:layout_y="110px"
android:text="User Name"
android:layout_width="wrap_content"
 android:layout_height="wrap_content" />
<EditText
android:layout_x="250px"
android:layout_y="80px"
android:width="100px"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<TextView
android:layout_x="110px"
android:layout_y="200px"
android:text="Password"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:layout_x="250px"
android:layout_y="150px"
android:width="100px"
android:layout_width="200dp"
android:layout_height="wrap_content" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Log In"
android:layout_x="300px"
android:layout_y="300px"/>
</AbsoluteLayout>

2.Frame Layout

Frame Layout is designed to block out an area on the screen to display a single item.
Generally, FrameLayout should be used to hold a single child view, because it can
be difficult to organize child views in a way that's scalable to different screen sizes
without the children overlapping each other.
You can, however, add multiple children to a FrameLayout and control their position
within the FrameLayout by assigning gravity to each child, using the
android:layout_gravity attribute.
Following will be the content of res/layout/activity_main.xml file −
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView
android:src="@drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="250px"
android:layout_width="250px"/>

<TextView
android:text="Frame Demo"
android:textSize="30px"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>

4.Table Layout In Android

Link - https://openplanning.net/12641/android-tablelayout
In Android, Table Layout is used to arrange the group of views into rows and columns.
Table Layout containers do not display a border line for their columns, rows or cells. A
Table will have as many columns as the row with the most cells.

Row and Column in Table Layout Android

A table can also leave the cells empty but cells can’t span the columns as they can in
HTML(Hypertext markup language).

For building a row in a table we will use the <TableRow> element. Table row objects
are the child views of a table layout.

Attributes of TableLayout in Android:

1. id: id attribute is used to uniquely identify a Table Layout.
<TableLayout
android:id="@+id/simpleTableLayout"
android:layout_width="match_parent"
android:layout_height="match_parent/>
2. stretchColumns: Stretch column attribute is used in Table Layout to change the
default width of a column which is set equal to the width of the widest column but
we can also stretch the columns to take up available free space by using this
attribute. The value that assigned to this attribute can be a single column number or
a comma delimited list of column numbers (1, 2, 3…n).
If the value is 1 then the second column is stretched to take up any available space in
the row, because of the column numbers are started from 0.
If the value is 0,1 then both the first and second columns of table are stretched to
take up the available space in the row.
f the value is ‘*’ then all the columns are stretched to take up the available space.
<!-- The columns with indexes 0 and 2 will be stretched. -->
<TableLayout
 ...
android:stretchColumns="0, 2">

...

</TableLayout>

<!-- All columns will be stretched. -->

<TableLayout
...
android:stretchColumns="*">

...

</TableLayout>

3. shrinkColumns: Shrink column attribute is used to shrink or reduce the width of

the column‘s. We can specify either a single column or a comma delimited list of
column numbers for this attribute. The content in the specified columns word-wraps
to reduce their width.
If the value is 0 then the first column’s width shrinks or reduces by word wrapping its
content.
If the value is 0,1 then both first and second columns are shrinks or reduced by word
wrapping its content.
If the value is ‘*’ then the content of all columns is word wrapped to shrink their
widths.
Below is the example code of shrink column attribute of table layout with explanation
included in which we shrink the first column of layout.
4.View - android:collapseColumns

The android:collapseColumns property specifies the columns to be collapsed (collapsed),

meaning its width the column will be 0, the column will be hidden.

<!-- The columns with indexes 0 and 2 will be collapsed-->

<TableLayout
...
android:collapseColumns="0, 2">

...

</TableLayout>

<!-- All columns will be collapsed---->

<TableLayout
...
android:collapseColumns="*">

...

</TableLayout>

5.View - android:layout_column

The android:layout_column attribute is applied to a child View in a TableRow to specify its

column index. Possible values ​are 0, 1, 2,...
6- View - android:layout_span
The android:layout_span attribute applies to the child View to specify the number of
consecutive cells in a TableRow to be merged together.

Example --Create Login Screen Using Table Layout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<TableRow
android:paddingTop="10px"
android:gravity="center">

<TextView
android:id="@+id/status"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_span="2"
android:text="LOGIN"
android:textColor="#890000"
android:textSize="15sp"
android:textStyle="bold" />

</TableRow>

<TableRow android:layout_marginTop="20dip" >

<TextView
android:layout_width="wrap_content"
android:text="Username :"
android:textSize="20sp"
android:textColor="#000000"
android:layout_marginLeft="20dip">
</TextView>

<EditText
android:id="@+id/screenName"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
 android:layout_marginRight="20dip"
android:layout_weight="1" >

</EditText>

</TableRow>

<TableRow android:layout_marginTop="20dip" >

<TextView
android:text="Password :"
android:layout_width="wrap_content"
android:textSize="20sp"
android:textColor="#000000"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip">

</TextView>

<EditText
android:id="@+id/password"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_weight="1" >

</EditText>

</TableRow>

<TableRow
android:gravity="center"
android:layout_marginTop="20dip" >

<Button
android:text="Submit"
android:clickable="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/save"
android:layout_span="2" >

</Button>
</TableRow>

</TableLayout>

5.Relative Layout in Android

In android, RelativeLayout is a ViewGroup which is used to specify the position of

child View instances relative to each other (Child A to the left of Child B) or relative
to the parent (Aligned to the top of parent).
Following are the some of most useful layout properties available to views in
RelativeLayout.

Attribute Description

layout_alignParentTop If it specified “true”, the top edge of view will match the top edge
of the parent.

layout_alignParentBotto If it specified “true”, the bottom edge of view will match the bottom
m edge of parent.

layout_alignParentLeft If it specified “true”, the left edge of view will match the left edge
of parent.

layout_alignParentRight If it specified “true”, the right edge of view will match the right
edge of the parent.

layout_centerInParent If it specified “true”, the view will be aligned to the centre of

parent.

layout_centerHorizontal If it specified “true”, the view will be horizontally centre aligned

within its parent.

layout_centerVertical If it specified “true”, the view will be vertically centre aligned within
its parent.

layout_above It accepts another sibling view id and places the view above the
specified view id.
 layout_below It accepts another sibling view id and places the view below the
specified view id.

layout_toLeftOf It accepts another sibling view id and places the view left of the
specified view id.

layout_toRightOf It accepts another sibling view id and places the view right of the
specified view id.

layout_toStartOf It accepts another sibling view id and places the view to start of
the specified view id.

layout_toEndOf It accepts another sibling view id and places the view to the end
of the specified view id.

Android Relative Layout Example

activity_main.xml
<?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"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button2" />
<Button
 android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="Button3" />

<Button
android:id="@+id/btn4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Button4" />
<Button
android:id="@+id/btn5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/btn2"
android:layout_centerHorizontal="true"
android:text="Button5" />
<Button
android:id="@+id/btn6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/btn4"
android:layout_centerHorizontal="true"
android:text="Button6" />
<Button
android:id="@+id/btn7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/btn1"
android:layout_toRightOf="@+id/btn1"
android:layout_alignParentRight="true"
android:text="Button7" />
</RelativeLayout>
Output of Android RelativeLayout Example