UNIT-3

Mobile Application Development

M.A. Zahed Javeed

Lect. In computer
Government Polytechnic Jintur
Objectives
• After learning this unit the students can able to:
❖ Explain relevant analogy the given directory structure to operate the specified IDE
❖ Describe the steps to use given Android rich UI components
❖ Describe steps to use given types of layout
❖ Develop given basic android application
Anatomy of android
Anatomy of android studio
Sr.No. Folder, File & Description
Java
This contains the .java source files for your project. By default, it includes an MainActivity.java source
1 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
This is an auto generated file which contains compileSdkVersion, buildToolsVersion, applicationId,
6 minSdkVersion, targetSdkVersion, versionCode and versionName
 Layouts in Android
• The basic building block for user interface is a View object which is created from the View class
and occupies a rectangular area on the screen and is responsible for drawing and event handling.
View is the base class for widgets, which are used to create interactive UI components like
buttons, text fields, etc.
• The ViewGroup is a subclass of View and provides invisible container that hold other Views or
other ViewGroups and define their layout properties.
• A layout defines the structure for a user interface in your app, such as in an activity.
• All elements in layout are built using hierarchy of view and viewGroup objects.
Layout Types
❑ Linear Layout (arrenge views horizontally/vertically)
❑ Table Layout (like calculator application in mobile)
❑ Grid Layout (like gallery in mobile)
❑ Constraint Layout (Connecting the view using constraints)
❑ Absolute Layout (Arrange view on selected positions)
❑ Tab Layout (like WhatsApp)
❑ Relative Layout
❑ Frame Layout
 Layout in Android
• Android Linear Layout is a view group that aligns all children (views) in either
vertically or horizontally (id, orientation, gravity, divider, weight etc)
Attribute Description

This is the ID which uniquely identifies the layout.

id

This is drawable to use as a vertical divider between buttons. You

use a color value, in the form of "#rgb", "#argb", "#rrggbb", or
divider
"#aarrggbb".

This specifies how an object should position its content, on both

the X and Y axes. Possible values are top, bottom, left, right,
gravity center, center_vertical, center_horizontal etc.

This specifies the direction of arrangement and you will use

orientation "horizontal" for a row, "vertical" for a column. The default is
horizontal.
Sum up of child weight
weightSum
 Layout in Android
• 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.
• 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.
Attribute Description
Id This is the ID which uniquely identifies the layout.

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.
ignoreGravity This indicates what view should not be affected by gravity.

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"
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".
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".
layout_alignParentB If true, makes the bottom edge of this view match the bottom edge of the parent. Must be a
ottom boolean value, either "true" or "false".
layout_alignParentE If true, makes the end edge of this view match the end edge of the parent. Must be a boolean
nd value, either "true" or "false".
 Layout in Android
• 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. (id, Layout_X, Layout_Y)

Attribute Description

Id This is the ID which uniquely identifies the layout.

layout_x This specifies the x-coordinate of the view.
layout_y This specifies the y-coordinate of the view.
 Layout in Android
• Android TableLayout 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.
• TableLayout containers do not display border lines for their rows, columns, or cells.

Attribute Description

id This is the ID which uniquely identifies the layout.

collapsecolumns This specifies the zero-based index of the columns to collapse. The
column indices must be separated by a comma: 1, 2, 5.
shrinkcolumns The zero-based index of the columns to shrink. The column indices
must be separated by a comma: 1, 2, 5.
stretchcolumns The zero-based index of the columns to stretch. The column
indices must be separated by a comma: 1, 2, 5.
 Layout in Android
• Frame Layout is designed to block out an area on the screen to display a single item.
Generally, Frame Layout 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.
Attribute Description
id This is the ID which uniquely identifies the layout.
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".
foregroundGra Defines the gravity to apply to the foreground drawable. The gravity
vity defaults to fill. Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
measureAllchil Determines whether to measure all children or just those in the
dren VISIBLE or INVISIBLE state when measuring. Defaults to false.
Layout Attributes
SR.No 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.
Layout Attributes
SR.No Description
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.
Thank You…!!!