0% found this document useful (0 votes)
33 views31 pages

MAD Chapter 3

The document provides an overview of UI components and layouts in Android development, emphasizing the importance of user interface design and the various pre-built UI components available. It details the Android application structure, including essential files like the manifest, activity, and layout files, as well as the role of application components such as Activities, Services, Broadcast Receivers, and Content Providers. Additionally, it explains the process of building APK files and the significance of intents and content providers in facilitating communication and data sharing between applications.

Uploaded by

justaniket30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
33 views31 pages

MAD Chapter 3

The document provides an overview of UI components and layouts in Android development, emphasizing the importance of user interface design and the various pre-built UI components available. It details the Android application structure, including essential files like the manifest, activity, and layout files, as well as the role of application components such as Activities, Services, Broadcast Receivers, and Content Providers. Additionally, it explains the process of building APK files and the significance of intents and content providers in facilitating communication and data sharing between applications.

Uploaded by

justaniket30
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

3.

UI Components and Layouts

Introduction to UI :
- Designing an user interface(UI) will be one of our most important tasks during android
development.
- Android app’s user interface (UI) is everything that the user can see and interact with.
- Android provides a variety of pre-built UI components such as structured layout objects
and UI controls that allows building the Graphical User Interface (GUI) for the app.
- Android also provides other UI modules for special interfaces such as dialogs,
notifications and menus.
- Input Controls are the interactive components in the app’s user interface. Android
provide wide variety of controls we can use in the I=UI, such as buttons, text fields,
seek bars, check box, zoom buttons, toggle buttons and many more.

Android Studio Screen/Window Elements:

1. Menu Bar: Menu Bar contains drop-down menus to perform different functions.
2. Tool Bar: Toolbar contains graphical view of some commonly usable buttons.
3. Navigation Bar: Navigation Bar shows selected file hierarchy which helps developer
to directly navigate to the parent directories of the file or switch between different files.
4. Tool Buttons Bar: Tool Buttons Bar allows to switch between different tools in
different 4 windows (Project Tool Preview, Console Windows).

5. Project Tool Window There are three project tool windows in the interface which
allows developer to use in different ways. Project Tool Window in the left side allows
developer to navigate through all the tools provided in the left side Tool Buttons such
as Project hierarchy view, Favourites , Structure view etc. Right side Project Tool
Window allows to navigate between the right Tool Burtons like Application Interface
Preview on different devices, Gradle functions etc. Bottom Project Tool Window allows
to navigate between the bottom Tool Buttons like Terminal, Run, Android etc.

6. Editor Window: Editor window open the selected file to allows developer to edit
them as per the requirements

7. Status Bar: The status bar displays informational messages about the project and the
activities of Android Studio. It also contain a button in the left corner which lists all the
tools menu button, Hovering over items or button in the status bar will provide a
description of that field.

Control Flow:
- Java Programming language can be used in development of Android Apps.
- Android IDE or tools check and compile the dependencies, code, resources, assets,
certificates, manifest file, data and generate an APK.
- APK file comprises all the content of the app. Each app runs on emulator or virtual
machine so that app can run inaccessible from other apps.
- Each android app only access to the components which it requires to do its work.

Application components are the vital parts of an Android application. All components
are associated with the manifest file AndroidManifest.xml that defines each
component of the application and way of interact.

There are following four main components that can be used within an Android
application –

1. Activities:
- They dictate the Ul and handle the user interaction to the smart phone screen.
- 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, arid another activity 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 launched.
- An activity is implemented as a subclass of Activity class as follows -
public class MainActivity extends Activity {
}

2. Services:
- They handle background processing associated with an application.
- 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 {


}

3. Broadcast Receivers:
- They handle communication between Android OS and applications.
- 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) { }
}
4. Content Providers:
- They handle data and database management issues.
- 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.
- eg. camera ---> gallery
- eg. Google form ---> Drive
public class MyContentProviderextends ContentProvider {
public void onCreate(){}
}
Q. State how the APK files are built?
Ans:
* The javac compiler compiles the java source file into the class file.
* The dx tool takes all the class files of your application and generates a single .dex
file which is a platform specific tool.
* Then Android Assets Packaging Tool (aapt) handles the packaging process and
finally creates an executable file with extension .apk .
* An APK file contains all of a program's code (such as .dex files), resources, assets,
certificates, and manifest file.
Q. State the uses of Intent in Android.
Ans:
* An Intent is a messaging object you can use to request an action from another app
component.
* Intents are used for facilitating communication between components like Activities,
Services and Broadcast Receivers.
Q. Explain significance of content provider.
Ans: Content Providers are used to share data between two applications. This can be
implemented in two ways:
1. When you want to implement the existing content provider in another application.
2. When you want to create a new content provider that can share its data with other
Applications.

• Android Application Structure:

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.
2. res/drawable-hdpi:
- This is a directory for drawable objects that are designed for high-density screens.
- A Drawable folder contains resource type file (something that can be drawn).
Drawables may take a variety of file like Bitmap (PNG, JPEG), Nine Patch, Vector
(XML), Shape, Layers, States, Levels, and Scale.

3. res/layout:
This is a directory for files that define your app's user interface.
4. res/mipmap:
Mipmap folder contains the Image Asset file that can be used in Android Studio
application. You can generate the icon types like Launcher icons, Action bar and tab
icons, and Notification icons.
5. res/values:
This is a directory for other various XML files that contain a collection of resources,
such as strings and colours definitions.

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

7. Build.gradle:
This is an auto generated file which contains (compileSdkVersion,
buildToolsVersion, applicationld, minSdkVersion, targetSdkVersion, versionCode
and versionName)

• Important application files are:

1. 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.
- The Java folder contains the Java source code files. These files are used as a
controller for controlled UI (Layout file).
- It gets the data from the Layout file and after processing that data output will
be shown in the UI layout.
- It works on the backend of an Android application.

2. The Manifest File :

- Whatever component you develop as a part of your application, you must


declare all its components in a Androidmanifest.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.
- The manifest file is an important part of our app because it defines the
structure & metadata of our application, its components, and its requirements.
- This file includes nodes for each of the Activities, Services, Content Providers
and Broadcast Receiver that make the application and using Intent Filters and
Permissions, determines how they co-ordinate with each other and other
applications.
3. 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.
- Below is a sample strings.xml file:
<resources>
<string name=”app_name”>MIT Polytechnic</string>
</resources>

4. 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.
- Below is a sample activity_main.xml file:

<?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"
<Button
android:id="@+id/showInput"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="show"
android:backgroundTint="@color/colorPrimary"
android:textColor="@android:color/white"/>
</LinearLayout>

• Android UI Controls :
There are number of Ul controls provided by Android that allow you to build the graphical
user interface for your app.

1. TextView: This control is used to display text to the user.

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


capabilities.

3. 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.
4. Button: A push-button that can be pressed, or clicked, by the user to perform an action.

5. ImageButton: An ImageButton is an AbsoluteLayout which enables you to specify the


exact location of its children. This shows a button with an image (instead of text) that can be
pressed or clicked by the user.

6. 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.

7. ToggleButton: An on/off button with a light indicator.

8. RadioButton: The RadioButton has two states: either checked or unchecked.

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

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

11. Spinner: A drop-down list that allows users to select one value from a set.

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

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

• Create UI Controls :
- Input controls are the interactive components in your app's user interface. Android provides
a wide variety of controls you can use in your UI, such as buttons, text fields, seek bars,
check box, zoom buttons, toggle buttons, and many more.
- As explained in previous chapter, a view object may have a unique ID assigned to it which
will identify the View uniquely within the tree.
- The syntax for an ID, inside an XML tag is -

android:id="@+id/text_id"

- To create a UI Control/View/Widget you will have to define a view/widget in the layout file
and assign it a unique ID as follows -

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


<LinearLayoutxmlns:android="http://schemas.android .com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextViewandroid:id="@+id/text_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I am a TextView" />
</LinearLayout>
Then finally create an instance of the Control object and capture it from the layout, use the
following:

TextViewmyText = (TextView)
findViewById(R.id.text_id);

• Android Directory Structure:


The main objective of an android project is to build an .apk file from it. And for this when we
start with an android project then some directories creates by default and some needs few
customization to enhance android applications. So let's understand the directory structure in
android project to develop an android application.

1. /src: This is the most common folder in any android project. It contains our java source
code for android application. Under this folder we can see our java source files in which we
write logic for android applications.

2. /gen: In most IDE (such as Eclipse) this folder is created by IDE for configuration purpose.
Under this folder can we find two java files such as BuildConfig.java and R.java. Both files
are auto generated by IDE which helps android project to work smoothly.

3. /Android (version name): Under this folder we can see some android.jar file which relates
to android sdk platform. We should not modify this file for smooth functioning of our project.

4. /assets: By default this folder is empty, but we can store raw asset files such as music file,
data file etc in this folder. The files retain its original name and structure when compiled into
an .apk file.

5. /bin: This is a very important folder in our directory structure as it contains


AndroidManifest.xml file and serve as an output directory for our project which further build
an .apk file.

Note: AndroidManifest.xml is a very important file of any android application and works like
a control file as it stores the necessary information for any application to work smoothly such
as entry point of an application and its components.

6. /libs: This folder contains private libraries.

7. /res: This folder contains lots of required sub folders for the project. Let's understand these
folders one by one.

a. /drawable: Under this folder we store images (PNG, JPEG, GIF) for our project.
Generally, this folder comes with five types of sub folders which ensures rendering of images
on mobile devices according to its screen resolution. There are five sub folders with different
names such as: drawable-hdpi, drawable-Idpi, drawable-mdpi, drawable-xhdpi, drawable-
xxhdpi (where dpi refers to dot per inch). Normally Google prefers.PNG format for images.
b. /layout: Under this folder we store Ul layouts file for our, android project, which is written
in xml format. we can store as many activity file under this folder. In other words this folder
relates to our application Ul layouts.

C. /menu: For XML files that define application menus.

d. /values : In this folder we place predefined application /values values in the form of XML
files that define the variable names and their value that will be later referenced in our java
source code. In simple words, it holds all our constant values for our application in one place.
In this way we can customize our applications at one place as per our requirements. Within
this folder we can find three xml files such as:

i. dimens.xml: This XML file defines the dimension values such as font sizes and standard
heights for our UI.

ii. strings.xml: In this file we define text strings which is used in the application. for
example: if we wish to change the title of an application, then we can simply change in this
file instead of doing any hard coding in application.

iii. styles.xml: This XML file defines styles which is used in the application. Generally we
apply these styles to our Ul elements. With the help of style we can separate the look of our
application from the layout and functionality.

8./project.properties: This file contains project settings, such as the build target. We can edit
project properties in eUl screen components.

* Component of Screen/ Fundamental of UI Design-


A typical user interface of an android application consists of action bar and the application
content area.

- Main Action Bar


- View Control
- Content Area
- Split Action Barclipse (IDE)

a. Understanding Screen Components:

The basic unit of android application is the activity. A Ul is defined in an xml file. During
compilation, each element in the XML is compiled into equivalent Android GUI class with
attributes represented by methods.

b. View and ViewGroups:

An activity is consist of views. A view is just a widget that appears on the screen. It could be
button e.t.c. One or more views can be grouped together into one GroupView. Example of
ViewGroup includes layouts.
* Fundamental of UI Design -
Every item in a user interfaces is a subclass of the Android View class which is present inside
the package (android view). The android SDK provides a set of pre-built views that can be
used to construct the user interface.

Typical examples include items such as Button, ImageButton, checkbox, ProgressBar and
Textview classes.

1. Views:

- (The basic building block for user interface in Android is a View) which is created from the
View class and occupies a rectangular area on the screen and is responsible for drawing and
event handling.
- Views are the base class for all visual interface elements (commonly known as controls or
widgets).
- All User Interface (UT) controls, including the layout classes, are derived from View.
- A View is an object/widget that draws something on the screen by the help of user interact.
- (Examples of widgets are buttons, text boxes, labels etc.)

2. ViewGroup:

- The ViewGroup is a subclass of View and provides invisible container that hold other
Views or other ViewGroups and define their layout properties.)
- View groups are extensions of the View class that can contain multiple child Views.
- In order to Extend the ViewGroup class to create compound controls made up of
interconnected child views.
- A ViewGroup provides the layout in which we can order the appearance and sequence of
views.
- Examples of ViewGroup are FrameLayout, LinearLayout etc.)

3. Fragments:

- Fragments represents a portion of user interface in an Activity) Fragments, introduced in


Android 3.0 which uses API level 11 are used to encapsulate portions of our UI.
- This encapsulation makes (fragments particularly useful when optimizing our Ul layouts
for different screen sizes and creating reusable User Interface (UI) elements.)
- Each Fragment includes its own User Interface (UI) layout and receives the related input
events but is tightly bound to the activity into which each must be embedded.
- Fragments are similar to UI view controller in iPhone development.

4. Activities:

- Activities dictate the UI and handle the user interaction to the smart phone screen.
- Activities represent a single screen that user interact.
- Activities are the Android equivalent of Forms in traditional windows desktop
development.
- To display a Ul we assign a View (usually a layout or fragment) to an Activity.
• Types of Android Layout :
There are many types of Layout. Some of which an listed below:

1. Linear Layout
2. Absolute Layout
3. Table Layout
4. Frame Layout
5. Relative Layout

1. Linear Layout
Linear layout is further divided into horizontal and vertical layout. It means it can arrange
views in a single column or in a single row. Here is the code of linear layout(vertical) that
includes a text view.

Syntax:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
</LinearLayout>
* Linear Layout Attributes
Following are the important attributes specific to Linear Layout -

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

2. android:baseline Aligned
This must be a boolean value, either "true" or "false" and prevents the layout from aligning its
children's baselines.

3. android:baselineAlignedChildIndex
When a linear layout is part of another layout that is baseline aligned, it can specify which of
its children to baseline align.

4. android:divider
This is drawable to use as a vertical divider between buttons. You use a color value, in the
form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

5. android:gravity
This specifies how an object should position its content, on both the X and Y axes. Possible
values are top, bottom, left, right, center, center_vertical, center_horizontal etc.

6. android:orientation
This specifies the direction of arrangement and you will use "horizontal" for a row, "vertical"
for a column. The default is horizontal.

7.android:weightSum
Sum up of child weight

Following is the content of the modified main activity file


src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Following be will the content of res/layout/activity_main.xml file –

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


<LinearLayoutxmlns:android="http://schemas.android .com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button android:id="@+id/btnStartService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="start_service"/>
<Button android:id="@+id/btnPauseService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="pause_service"/>
<Button android:id="@+id/btnStopService"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:text="stop_service"/>
</LinearLayout>

Output:
Now let's change the orientation of Layout android:orientation="horizontal" and try to run
same application, it will give following screen-
2. Absolute Layout
- The Absolute Layout enables you to specify the exact location of its children.
- 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

- It can be declared like this.

Syntax
<AbsoluteLayout
android:layout_width="fill_parent"
android:layout height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/a
ndroid" >
<Button
android:layout_width="188dp"
android:layout_height="wrap_content"
android:text="Button"
android:layoutx="126px
android:layout_y="361px" />
</AbsoluteLayout>

* Absolute Layout Attributes


Following are the important attributes specific to Absolute Layout:
1. android:id
This is the ID which uniquely identifies the layout.

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

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

Following is the content of the modified main activity file


src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

package com.example.demo;
import android.os.Bundle;
import android.app.Activity:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Following Will be the content of res/layout/activity_main.xml file –

<AbsoluteLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="OK"
android:layout_x="50px"
android:layout_y="361px" />
<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Cancel"
android:layout_x="225px"
android:layout_y="361px" / />
</AbsoluteLayout>

Output:
3.Table Layout
- The Table Layout groups views into rows and columns It can be declared like this.
- Android Table Layout going to be arranged groups of views into rows and columns.
- You will use the <TableRow> element to build a row in the table.
- Each row has zero or more cells; each cell can hold one View object.
- Table Layout containers do not display border lines for their rows, columns, or cells.

Syntax:
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/a ndroid"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TableRow>
<TextView
android:text="User Name:"
android:width = "120dp"
/>
<EditText
android:id="@+id/txtUserName"
android:width="200dp" />
</TableRow>
</TableLayout>
• Table Layout Attributes :
Following are the important attributes specific to Table Layout -

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

2. android:collapse Columns
This specifies the zero-based index of the columns to collapse. The column indices must be
separated by a comma: 1, 2, 5.

3. android:shrink Columns
The zero-based index of the columns to shrink.The column indices must be separated by a
comma: 1, 2, 5.

4. android:stretchColumns
The zero-based index of the columns to stretch. The column indices must be separated by a
comma: 1, 2, 5.

Following is the content of the modified main activity file


src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState)
}
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:collapseColumns="1"
android:shrinkColumns="2"
android:stretchColumns="0,2">

Following will be the content of res/layout/activity_main.xml file –

<TableRow>
<TextView
android:text="Name"
android:layout_column="0"
android:padding="10dp"/>
<TextView
android:text="Age"
android:layout_column="1"
android:padding="10dp"/>
<TextView
android:text="City"
android:layout_column="2"
android:padding="10dp"/>
</TableRow>
<TableRow>
<TextView
android:text="John"
android:layout_column="0"
android:padding="10dp"/>
<TextView
android:text="25"
android:layout_column="1"
android:padding="10dp"/>
<TextView
android:text="Nwyk"
android:layout_column="2"
android:padding="10dp"/>
</TableRow>
<TableRow>
<TextView
android:text="Alice"
android:layout_column="0"
android:padding="10dp"/>
<TextView
android:text="30"
android:layout_column="1"
android:padding="10dp"/>
<TextView
android:text="UK"
android:layout_column="2"
android:padding="10dp"/>
</TableRow>

Output:
4. Relative Layout
- Android Relative Layout enables you to specify how child views are positioned relative to
each other.
- The position of each view can be specified as relative to sibling elements or relative to the
parent.

It can be declared like this.

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

• Relative Layout Attributes :


Following are the important attributes specific to Relative Layout -

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

2. android:gravity
This specifies how an object should position its content, on both the X and Y axes. Possible
values are top, bottom, left, right, center, center_vertical, center_horizontal etc.

3. android:ignoreGravity
This indicates what view should not be affected by gravity.

Using Relative Layout, you can align two elements by right border, or make one below another,
centered in the screen, centered left, and so on. By default, all child views are drawn at the top-
left of the layout, so You must define the position of each view using the Various layout
properties available from Relative Layout.
Layout Params and few of the important attributes are given below -

1. android:layout_above
Positions the bottom edge of this view above the given anchor view ID and must be a reference
to another resource, in the form "@[+][package:]type:name"

2. android:layout_alignBottom
Makes the bottom edge of this view match the bottom edge of the given anchor view ID and
must be a reference to another resource, in the form "@[+][package:]type:name".

3. android:layout_alignLeft
Makes the left edge of this view match the left edge of the given anchor view ID and must be
a reference to another resource, in the form "@[+][package:]type:name".
4. android:layout_alignParentBottom
If true, makes the bottom edge of this view match the bottom edge of the parent. Must be a
boolean value, either "true" or "false".

5. android:layout_alignParentEnd
If true, makes the end edge of this view match the end edge of the parent. Must be a boolean
value, either "true" or "false".

6. android:layout_alignParentLeft
If true, makes the left edge of this view match the left edge of the parent. Must be a boolean
value, either "true" or "false".

7. android:layout_alignParentRight
If true, makes the right edge of this view match the right edge of the parent. Must be a boolean
value, either "true" or "false".

8. android:layout_alignParentStart
If true, makes the start edge of this view match the start edge of the parent. Must be a boolean
value, either "true" or "false".

9. android:layout_alignParentTop
If true, makes the top edge of this view match the top edge of the parent. Must be a boolean
value, either "true" or "false".

10. android:layout_alignRight
Makes the right edge of this view match the right edge of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".

11. android:layout_alignStart
Makes the start edge of this view match the start edge of the given anchor view ID and must
be a reference to another resource, in the form "@[+][package:]type:name".
12. android:layout_alignTop
Makes the top edge of this view match the top edge of the given anchor view ID and must be
a reference to another resource, ". in the form "@[+][package:]type:name".

13. android:layout_below
Positions the top edge of this view below the given anchor view ID and must be a reference to
another resource, in the form "@[+] [package:]type:name".

14. android:layout_centerHorizontal
If true, centers this child horizontally within its parent. Must be a boolean value, either "true"
of "false".

15. android:layout_centerinParent
If true, centers this child horizontally and vertically within its parent. Must be a boolean value,
either "true" or "false".

16. android:layout_centerVertical
If true, centers this child vertically within its parent. Must be a boolean value, either "true" or
"false".

17. android:layout_toEndOf
Positions the start edge of this view to the end of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".

18. android:layout_toLeftOf
Positions the right edge of this view to the left of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".

19. android:layout_toRightOf
Positions the left edge of this view to the right of the given anchor view ID and must be a
reference to another resource, in the form "@[+][package:]type:name".
20. android:layout_toStartOf
Positions the end edge of this view to the start of the given anchor view ID and must be a
reference to another resource, "@[+][package:]type:name".

Following is the content of the modified main activity file


src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

package com.example.demo;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Following will be the res/layout/activity_main.xml file -content of

<RelativeLayoutxmlns:android="http://schemas.andro id.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp" >
<EditText
android:id="@+id/name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="@string/reminder" />
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/name">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2" />
</LinearLayout>
</RelativeLayout>

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

- It can be declared like this.

syntax
<?xml version="1.0" encoding="utf-8"?>
<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" >
<Image View
android:src="@drawable/droid"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>

• Frame Layout Attributes :

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

2. android:foreground
This defines the drawable to draw over the content and possible values may be a color value,
in the form of "#rgb", "#argb", "#rrggbb", or "#aarrggbb".

3. android:foreground Gravity
Defines the gravity to apply to the foreground drawable. The gravity defaults to fill. Possible
values are top, bottom, left, right, center, center_vertical, center_horizontal etc.

4. android:measure AllChildren
Determines whether to measure all children or just those in the VISIBLE or INVISIBLE state
when measuring. Defaults to false.

Following is the content of the modified main activity file


src/com.example.demo/MainActivity.java. This file can include each of the fundamental
lifecycle methods.

package com.example.demo;
import android.os.Bundle;
import android.app.Activity:
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Following will be the res/layout/activity_main.xml file -content of

<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>
Output:

------ END ------

You might also like