Mobile Android Development Chp.

3 Ali Karim Sir

Chapter 3. UI Components and Layouts

Syllabus:
3.1 Control Flow, Directory Structure.
3.2 Components of a screen, Fundamental UI Design
3.3 Linear Layout; Absolute Layout; Frame Layout; Table Layout; Relative Layout
-----
3a. Explain with relevant analogy the given Directory Structure.
3b. Describe the steps to use the given Android rich UI component.
3c. Describe the steps to use the given type of Layout.
3d. Develop the given basic Android application.

Q. Describe Control Flow.

Ans:
1. Click on Android Studio icon.
2. Click on Start a new Android Studio project.

3. In New Project write your Application Name

Ali Karim Classses Mumbra 9220990566 Page 1

Mobile Android Development Chp. 3 Ali Karim Sir

4. Select Minimum SDK

5. Select Bank Activity

6. Choose option of your file.

Ali Karim Classses Mumbra 9220990566 Page 2

Mobile Android Development Chp. 3 Ali Karim Sir

7. Finally Editor windows open with various features.

Q. Describe Directory Structure.

Ans:

Ali Karim Classses Mumbra 9220990566 Page 3

Mobile Android Development Chp. 3 Ali Karim Sir

OR

Ali Karim Classses Mumbra 9220990566 Page 4

Mobile Android Development Chp. 3 Ali Karim Sir

+ src: This folder contains the java source files for the project. In this example. there is one file.
Androidl’rojeciAciivity.java. The AndroidProjectActivity.java file is the source file for (he
activity. We write the code for this application in this .java file, The Java file is listed under (he
package name i.e. com.pkg.example for the project.

+ gen: This folder contains the R.java file, which is generate d by the compiler that references all
the resources found in this project. We cannot modify this file. All the resources in this project are
automatically compiled into this class hence we can transfer to them using the class.

+ Android libraries: This thing contains one file. android.jar, which contains all the class libraries
needed for an Android application.

+ assets: Folder contains all the resources used by this application, such as HTML,. text files.
databases, etc.,

+ bIn: This folder contains the files built by the AUT during the compilation. It generates the .apk file
(Android Package). An .apk file is the application binary of an Android application. It contains (he
entire things needed to run an Android application.

+ res: This folder contains all the resources files such as pictures, XML files for defining layouts used
in this application. It also contains some other subfolders: drawable<resolution>, layout. and values.
It can also support devices with different screen resolutions and densities.

+ AndroidManifest.xml: This is the manifest file for this Android project. ¡t contains information
about the Android application such as minimum Android version, permission to access Android
device capabilities such as internet access permission .ability to use phone permission, etc. Here we
specify the permissions and other features like intent-filters, receivers. etc required by application.

Ali Karim Classses Mumbra 9220990566 Page 5

Mobile Android Development Chp. 3 Ali Karim Sir

+ main.xml: The main.xml file defines the user interface for activity.

+ Layout: Contains XML layout files. Layout files are XML files which define how various Android
objects (such as textboxes. Buttons. etc) are organized on the screen.

+ Values: XML tiles which store various string values (titles. labels. etc).

Q. Describe the components of a screen

Ans:
An Activity displays the user interface of our application, which may contain widgets like buttons,
image buttons , text boxes, labels. etc. Typically, you define your UI using an XML file (for example.
the activity_main.xmn file located in the res then inside a folder called layout), which may look like
this:
actisity_main.xml
<?xml version—”1 .0” encoding—”utf-8”?>
<LinearLayout xmlns : android=”htep: //schemas . android. com/apk/ res android”
android: orientation=”vertical”
android: layout_widt h=”fill parent”
android: layout_height=”fill_parent” >
<TextView
android: layout_wìdth=”fill_pa rent”
android: layout_height—”wrap_content”
android: text=”@string/hello” />
</LinearLayout>

During this runtime. we can load the XML UI in the onCreate () event handler in our Activity
class, using the setConteritView () method of thc Activity class:

@Override
public void onCreate(Bundle savedlnstanceState) {
super.onCreate (savedlnstanceState);
setContentView(R.layout.main);
}
During compilation time, each element in the XML file is compiled into its equivalent Android GUI
class, with an attribute represented by methods. The Android system then creates the user
interface(UI) of the Activity when it is loaded.

Q. Describe FUNDAMENTAL UI DESIGN.

Ans:
Every item in a user interface 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 he used to
construct a user interface. Typical examples include items such as the Button, ImageButton,
CheckBox, ProgressBar and TextView classes.

 Views : Views are the base class for all visual interface elements (commonly known as
controls
or widgets). All user interface UI 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.

Ali Karim Classses Mumbra 9220990566 Page 6

Mobile Android Development Chp. 3 Ali Karim Sir

Examples of widgets are buttons, text boxes ,labels etc.

 View Groups : 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. The ViewGroup class is also extended to provide the Layout
Managers that help us to control layout within our Activities. AViewGroup provides the layout
in which we can order the appearance and sequence of views. Examples of View groups are
FrameLayout, LinearLayout, etc.

 Fragments : Fragments, introduced in Android 3.0 which uses API level 11, are used to
encapsulate portions of your UI. This encapsulation makes Fragments particularly useful
when optimizing your UI layouts for different screen sizes and creating reusable user interface
(UI) elements. Each Fragment includes its own user interface (UI) layout arid receives the
related input events but is tightly bound to the Activity into which each must be embedded.
Fragments are similar to UI View Controllers in iPhone development.

 Activities : Activities, represent a single screen that user interact .Activities are the Android
equivalent of Forms in traditional Windows desktop development. To display a UI, we assign
a View (usually a layout or Fragment) to an Activity.

Q. Describe Layout Manager.

Ans:
Layout Manager: In case of java application there are many layouts found:
 Flow Layout
 Grid Layout
 Card Layout
 Border layout
 Box Layout
 Null Layout

i. Flow Layout: This is default layout of applet where we found components arc placed in left
to right and sizes arc fixed.

ii. Border Layout: This is default layout of frame where components are added in north. south.
west and center direction.

Ali Karim Classses Mumbra 9220990566 Page 7

Mobile Android Development Chp. 3 Ali Karim Sir

Now this default position is border layout.center. If we are adding any component in this
layout. It occupies the total center position.
iii. Grid Layout: This layout divides the frame into row and column.

iv. Card Layout: This layout clicks the first panel so that second panel is visible and goes on.

v. Box Layout: This layout is mostly found in case of swing and in this layout panel are added
in vertical manner to a box and then box is added to frame so that the total content is now
Visible.

Ali Karim Classses Mumbra 9220990566 Page 8

Mobile Android Development Chp. 3 Ali Karim Sir

Q. Describe Linear Layout.

Ans:

+ Linear layouts are one of the simplest and common types of layouts used by Android
developers to keep controls within their user interfaces. The linear layout works as much as
its name implies, it organizes the controls either a vertical or horizontal pattern. When the
layout’s orientation is set to vertical, all child controls within organized in a single column;
and when the layout’s orientation is set to horizontal, all child controls within in a single row.

+ Linear layouts can be defined within XML layout resources or programmatically in the
application’s Java code.

+ This linear layout’s orientation is set lo be vertical, causing each of ihe view controls to display
in a single column from top to bottom. Each TextView control has its text attribute set to a
color, with the same color set as the background for the control: each control is stretched to the
width of the screen by setting the controls’ layout_width attribute to fill_parent.

+ Child views can be arranged either horizontally or vertically.

+ We have seen that android mobile screen size are different from device to device, sorne mobile
sizes are same. Suppose we are developing one application which contains a text field and
button, when the application changes from one mobile to the other mobile then the problem is
regarding the layout of the component. It happens because the size of screen varies.

Now we are having two options,

a) fill_parent
b) wrap_content
a) fill_parent- The component wants to display as big as its parent and fill in the remaining
spaces.

fill_parent _width
Change the “layout width” to “fill parent”, now, the button’s width will fill in the remaining
spaces, just as big as it’s parent “RelativeLayouL”, but button’s height is still big enough to enclose its
content only.

With vertical Orientation:

We have to create a linear layout in which orientation is vertical. Then inside the linear layout we
have to place three buttons and three labels. First button name is one, second button name is two
and third button is three. Again first label name is one with yellow background, second label name is
two with red background, and third label name is three with green background respectively.

Ali Karim Classses Mumbra 9220990566 Page 9

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 10

Mobile Android Development Chp. 3 Ali Karim Sir

Example 2: With horizontal orientation

We have to create a linear layout in which orientation is horizontal. Then inside the linear
layout we have to place four labels. First label name is red with red background, second label name
is green with green background, third label name is yellow with yellow background, and third label
name is light yellow with light yellow background respectively.

Ali Karim Classses Mumbra 9220990566 Page 11

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 12

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 13

Mobile Android Development Chp. 3 Ali Karim Sir

OUTPUT
We should note that in the child LinearLayout elements, we used android:layout_height
”wrap_content” instead of fill parent. 1f we use fill parent the first name TextView and EditView
would have taken all of the available space on the screen, and the Last Name would not be
displayed. Here is what this XML displays:

Ali Karim Classses Mumbra 9220990566 Page 14

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 15

Mobile Android Development Chp. 3 Ali Karim Sir

Q. Describe Absolute Layout.

Ans:
AbsoluteLayout is based on the simple idea of placing each control at an absolute position. We
specify for the exact x and y coordinates on the screen for every control. So this recommended for
most UI development (in fact AbsoluteLayout is currently deprecated) since absolutely positioning of
every element on the screen makes an inflexible UI that is much more difficult to maintain. Consider
what happens if a control needs to be added to the user interface UI., you would have to change the
position of every single element that is shifted by the new control. This allows child views to be
positioned at specific X and Y coordinates within the containing layout view.

Example 4:
We have to create an absolute layout in which layout width is fill_parent and layout height is fill
parent. Inside the absolute layout, we have to create one button named as Back, two textviews
named as First Name and ‘Last Name', and two EditTexts.

Ali Karim Classses Mumbra 9220990566 Page 16

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 17

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 18

Mobile Android Development Chp. 3 Ali Karim Sir

Q. Describe Frame Layout.

Ans:
The purpose of the FrameLayout is to allocate an area of screen . Frame layout is used for displaying
a single view. If more than child views are added, they will, by default, appear on top of each other,
positioned in the top left hand comer of the layout area. Alternate positioning of individual child
views can be achieved by setting gravity values on every child. For example. setting a center_vertical
gravity on a child will cause it to he positioned in the vertical center of the containing FrameL.ayout
view.
FrameLayout is designed to display a single itcm at once. We can have multiple elements within a
FrameLayout but each clement will be positioned based on the top left of the screen. Elements
which overlap will be displayed overlapping.

Example 6:
We have to create a frame layout in which width is wrap content and height is wrap content. Inside
the frame layout, we have to create an image view. We place an image inside the drawable folder.
An image view have one attribute called src, means the source of image we have to display in
Imageview.

Ali Karim Classses Mumbra 9220990566 Page 19

Mobile Android Development Chp. 3 Ali Karim Sir

Q. Describe Relative Layout.

Ans:
This is probably the most powerful and flexible of the layout managers. which allows child views
to be positioned relative both to each other and the containing layout view through the specification
of alignments and margins on child views. For instance, child View X may be configured to be
positioned in the vertical and horizontal center of the containing RelativeLayout view. View Y, or
on the other hand, might also be configured to be centered horizontally within the layout view, but
positioned 30 pixels on top of the top edge of View X, thereby making the vertical position relative
to that of View X.
The RelativeLayou.t manager can be of particular use when designing a user interface that must
work on a variety of screen sizes and orientations. RelativeLayout lays out elements based on their
relationships with each other, and with the parent container. This is possibly the most complicated
layout.. and we require several properties to actually get the Layout we want.

Ali Karim Classses Mumbra 9220990566 Page 20

Mobile Android Development Chp. 3 Ali Karim Sir

These properties allow you to layout elements relative to other elements on screen. The value for
each element is the id of the element we are using to layout the new element. Every element that is
used in this way must have an ID defined using android:id=’@+id/viewname’ where viewname is
replaced with the desired id. You use “@id/viewname” to refer to an element by its id.

Ali Karim Classses Mumbra 9220990566 Page 21

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 22

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 23

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 24

Mobile Android Development Chp. 3 Ali Karim Sir

Q. Describe Table Layout.

Ans:
Arranges child views into a grid format of columns and rows. Each row within a table is represented
by a TableRow object child, which contains a view object for each cell. TableLayout organizes
content into columns and rows. The rows are defined in the layout XLVL code, and the columns
are determined automatically by Android, which is done by creating at least one column for each
element. So, for example, if we have a row with two elements and a row with five elements then we
would have a layout with two rows and five columns.
We can specify that an element should occupy more than one column using android:layout_span. so
if we have a row with two elements and each element has android:layout_span=”2” then we will
have at least six columns in our table.
By default, Android places each element in the first unused column in the row. We can, however,
indicate the column an element should occupy using android:layout_column.

Example 9:
We have to create a table layout in which layout width is fil1parent and layout hieght is fillparent.
Inside the table layout. we have to create three table rows and a button. First and second table
rows contain one textview and one edit text. Third table row contains one check box and one radio
button.

Ali Karim Classses Mumbra 9220990566 Page 25

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 26

Mobile Android Development Chp. 3 Ali Karim Sir

Ali Karim Classses Mumbra 9220990566 Page 27