Unit 3:

UI Components and it’s Layout

[8-10 marks]

Alfiya Mulla
Lecturer, Computer Engg.
A.I. ARKP, Panvel
Unit Outcomes
1. To learn Control Flow and Directory Structure in Android
2. To study Components of a Android Screen
3. To understand Fundamentals of UI design
4. To learn various Layouts in Android(Linear, Absolute, Frame, Table, Relative, etc)
Important Questions
1. Develop a simple calculator using table layout. (sample, 6M)
2. List Eight alignment attributes of relative layout. (sample, 2m)
3. Draw the hierarchical directory structure of android application. (sample, 2m)
4. Explain any four UI Components of Android application. (sample, 4m)
5. List any four folders from directory structure of Android project and elaborate in one line. (S22, 2m)
6. Explain with example, code to create GUI using absolute layout (Assume suitable data) (S22, 4m)
7. Enlist the elements of UI. (w22, 2m)
8. Explain the fundamentals of Ul design in detail. (W22, 4m)
9. Develop a simple calculator using relative layout. (W22, 6M)
10. Write a program to display following output using suitable layout (sample, 4m)
Expected Questions
• 2 marks.
1. List layouts in android UI design.
2. List different attributes of linear layout.
3. List different attributes of Absolute layout.
4. List different attributes of Frame layout.
5. List different attributes of Table layout.
6. List Components of an Android Application.

• 4 marks.
1. What is use of AndroidManifest.xml file in any android application?
2. Explain directory structure in android application in detail.
3. Explain following files. I. Main activity file II. Manifest file III. String file IV. Layout file
4. Explain Components of an Android Application.
5. List and Explain the Resource files.
Introduction
• Designing an User Interface(UI), will be one of our most important task during
Android development.
• A layout defines the structure for a user interface in the app, such as an activity.
• All elements in the layout are built using a hierarchy of View and ViewGroup
objects.
Control Flow
• Step1: Click on Android Studio icon
• Step2: Select File -> New -> New Project
• Step3: Give the project name and click “Next”.
• Step4: Select your SDK to and click next Target Android Devices.
• Step5: To add the project on mobile select the proper activity, here we select the
empty activity and click Next.
• Step6: Give the activity name and click Finish.
Android Studio IDE Elements / Components
 Android Studio IDE Elements / Components
1. Toolbar: Carry out a wide range of actions, including running your app and
launching Android tools.
2. Navigation bar: Navigate through your project and open files for editing. It
provides a more compact view of the structure visible in the Project window.
3. Editor window: Create and modify code. Depending on the current file type, the
editor can change. For example, when viewing a layout file, the editor displays the
Layout Editor.
4. Tool window bar: Use the buttons on the outside of the IDE window to expand or
collapse individual tool windows.
5. Tool windows: Access specific tasks like project management, search, version
control, and more. You can expand them and collapse them.
6. Status bar: Display the status of your project and the IDE itself, as well as any
warnings or messages.
Directory Structure

• https://developer.android.com/studio/projects
 Java Folder

• This folder will contain all the java source code (.java) files which we’ll create during the application
development, including JUnit test code.
• Whenever we create any new project/application, by default the class file MainActivity.java will create
automatically under the package name “com.tutlane.helloworld” like as shown below.
 res (Resources) Folder

• It’s an important folder that will contain all non-code resources, such as bitmap images, UI strings, XML layouts.
• Drawable Folder (res/drawable): It will contain the different types of images as per the requirement of
application. It’s a best practice to add all the images in a drawable folder other than app/launcher icons for the
application development.
Layout Folder (res/layout)

• This folder will contain all XML layout files which we used to define the user interface of our
application. Following is the structure of the layout folder in the android application.
Mipmap Folder (res/mipmap)

• This folder will contain app / launcher icons that are used to show on the home screen. It
will contain different density type of icons such as hdpi, mdpi, xhdpi, xxhdpi, xxxhdpi, to
use different icons based on the size of the device.
• Following is the structure of the mipmap folder in the android application.
Values Folder (res/values)

• This folder will contain various XML files, such as strings, colors, style
definitions and a static array of strings or integers. Following is the structure
of the values folder in android application.
Manifests Folder

• This folder will contain a manifest file (AndroidManifest.xml) for our android
application. This manifest file will contain information about our application such as
android version, access permissions, metadata, etc. of our application and its components.
The manifest file will act as an intermediate between android OS and our application.
Gradle Scripts

• In android, Gradle means automated build system and by using this we can define a build
configuration that applies to all modules in our application.
• In Gradle build.gradle (Project), and build.gradle (Module) files are useful to build configurations
that apply to all our app modules or specific to one app module.
Android Layout File (activity_main.xml)

• The UI of our application will be designed in this file and it will

contain Design and Text modes. It will exists in the layouts folder and the structure
of activity_main.xml file in Design mode
Android Main Activity File (MainActivity.java)

• The main activity file in the android application is MainActivity.java and it will exist in
the java folder. The MainActivity.java file will contain the java code to handle all the
activities related to our app.
 Android Manifest File (AndroidManifest.xml)

• Generally, our application will contain multiple activities and we need to define all those activities in
the AndroidManifest.xml file. In our manifest file, we need to mention the main activity for our app
using the MAIN action and LAUNCHER category attributes in intent filters (<intent-filter>). In case
if we didn’t mention MAIN action or LAUNCHER category for the main activity, our app icon will not
appear in the home screen’s list of apps.
Fundamentals of UI Design
• View
• ViewGroup
• Fragments
• Activities
View
• 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 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.
• Examples of widgets are buttons, text boxes,
labels etc
ViewGroup
▪ A ViewGroup act as a base class for layouts and layouts
parameters that hold other Views or ViewGroups and to
define the layout properties. They are Generally Called
layouts.
• 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 FrmaeLayout, LineourLayout etc.
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 your UI.
• This encapsulation makes fragments particularly useful when
optimizing our UI 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.
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 UI we assign a View (Usually a layout or Fragment) to an
Activity
UI Layouts
• Layout basically refers to the arrangement of elements on a page these elements
are likely to be images, texts or styles. These are a part of Android Jetpack. They
define the structure of android user interface in the app, like in an activity.

• LinearLayout: assigns all children in single direction, vertically or horizontally.

• RelativeLayout: assigns all children in relative positions.
• FrameLayout: placeholder used to display a single view.
• GridView: displays items in 2d scrollable grid.
• ListView: displays a list of scrollable items.
• TableLayout: assigns all children into rows and columns.
• AbsoluteLayout (deprecated): assigns all children in exact locations.
• ConstraintLayout: displays all widgets in constrained manner.
LinearLayout

• We use this layout to place the elements in a linear manner. A Linear manner
means one element per line. This layout creates various kinds of forms on
Android. In this, arrangement of the elements is in a top to bottom manner.
• This can have two orientations:
•
a. Vertical Orientation – It is shown above where the widgets such as TextViews,
and all in a vertical manner.
b. Horizontal Orientation – It is shown above where the widgets such as
TextViews, and all in a horizontal manner.
Linear Layout: eg.
Attributes Constructors
Attributes Description LinearLayout(Context context)
Id Unique identifier of layout
LinearLayout(Context context, AttributeSetattrs)
Orientation Vertical or Horizontal
Layout_Weight Assigns importance value at LinearLayout(Context context, AttributeSetattrs,
each component intstyleAttribute)
Gravity Shows object position in x-y
plan as center, right, bottom, LinearLayout(Context context, AttributeSetattrs,
left intstyleAttribute, intstyleRes)
Weight_sum Defines maximum weighted
sum
Divider Drawable to use as a vertical
divider between buttons.
Example for Linear Layout (vertical)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout <Button
xmlns:android="http://schemas.android.com/ android:layout_width="wrap_content"
apk/res/android" android:layout_height="wrap_content"
android:text="Button 2"
xmlns:app="http://schemas.android.com/apk android:textSize="24sp"
/res-auto" android:textColor="@color/black"/>

xmlns:tools="http://schemas.android.com/too <Button
ls" android:layout_width="wrap_content"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_height="match_parent" android:text="Button 3"
tools:context=".MainActivity" android:textSize="24sp"
android:orientation="vertical" android:textColor="@color/black"/>
>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:textSize="24sp"
android:textColor="@color/black"/>
Example for Linear Layout (horizontal)
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation=“horizontal">

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:textSize="24sp"
android:textColor="@color/black"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:textSize="24sp"
android:textColor="@color/black"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:textSize="24sp"
android:textColor="@color/black"/>

</LinearLayout>
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.
AbsoluteLayout Attributes
 Example for Absolute Layout

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

<AbsoluteLayout android:id="@+id/button2"
xmlns:android="http://schemas.android.com/apk/res/ android:layout_width="wrap_content"
android" android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res- android:layout_weight="1"
auto" android:layout_x="179dp"
xmlns:tools="http://schemas.android.com/tools" android:layout_y="180dp"
android:layout_width="match_parent" android:text="Button2"
android:layout_height="match_parent" android:textSize="24sp" />
tools:context=".MainActivity">
<Button
<Button android:id="@+id/button3"
android:id="@+id/button" android:layout_width="wrap_content"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_height="wrap_content" android:layout_weight="1"
android:layout_weight="1" android:layout_x="269dp"
android:layout_x="63dp" android:layout_y="91dp"
android:layout_y="89dp" android:text="Button3"
android:text="Button1" android:textSize="24sp" />
android:textSize="24sp" /> </AbsoluteLayout>
FrameLayout

• 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.
Attributes of Frame Layout:
1. android:id
• This is the unique id which identifies the layout in the
R.java file.

2. android:foreground
• Foreground defines the drawable to draw over the content
and this may be a color value. Possible color values can be
in the form of “#rgb”, “#argb”, “#rrggbb”, or “#aarrggbb”.
This all are different color code model used.

3. android:foregroundGravity
• This defines the gravity to apply to the foreground
drawable. Default value of gravity is fill. We can set values
in the form of “top”, ”center_vertical” , ”fill_vertical”,
”center_horizontal”, ”fill_horizontal”, ”center”, ”fill”,
”clip_vertical”, ”clip_horizontal”, ”bottom”, ”left” or
”right” .
Attributes of Frame Layout:

4. android:visibility
This determine whether to make the view visible, invisible or gone. visible – the view is present and
also visible, invisible – The view is present but not visible, gone – The view is neither present nor
visible
 Example for Frame Layout
<?xml version="1.0" encoding="utf-8"?> <Button
<FrameLayout android:id="@+id/button3"
xmlns:android="http://schemas.android.com/apk/res/ android:layout_width="wrap_content"
android" android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res- android:layout_gravity="center_vertical"
auto" android:text="Button3"
xmlns:tools="http://schemas.android.com/tools" android:textSize="24sp" />
android:layout_width="match_parent"
android:layout_height="match_parent" <Button
tools:context=".MainActivity"> android:id="@+id/button4"
android:layout_width="wrap_content"
<Button android:layout_height="wrap_content"
android:id="@+id/button" android:layout_gravity="center"
android:layout_width="wrap_content" android:text="Button4"
android:layout_height="wrap_content" android:textSize="24sp" />
android:layout_gravity="center_horizontal"
android:text="Button1" <Button
android:textSize="24sp" /> android:id="@+id/button5"
android:layout_width="wrap_content"
<Button android:layout_height="wrap_content"
android:id="@+id/button2" android:layout_gravity="bottom|center"
android:layout_width="wrap_content" android:text="Button4"
android:layout_height="wrap_content" android:textSize="24sp" />
android:layout_gravity="bottom" </FrameLayout>
android:text="Button2"
android:textSize="24sp" />
Table Layout
• 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.
 Example for Absolute Layout
<?xml version="1.0" encoding="utf-8"?>
<TableLayout <TableRow> TableRow>
xmlns:android=http://schemas.android.com/apk/r <TextView android:text="1 " <TextView android:text="3"
es/android android:textSize="20dp" android:textSize="20dp"
xmlns:app="http://schemas.android.com/apk/res- android:textColor="@color/black"/> android:textColor="@color/black"/>
auto" <TextView android:text="Majid" <TextView android:text="Nausheen"
xmlns:tools="http://schemas.android.com/tools" android:textSize="20dp" android:textSize="20dp"
android:layout_width="match_parent" android:textColor="@color/black"/> android:textColor="@color/black"/>
android:layout_height="match_parent" <TextView android:text="2005690099" <TextView android:text="2005690102"
android:paddingLeft="20dp" android:textSize="20dp" android:textSize="20dp"
android:paddingTop="25dp" android:textColor="@color/black"/> android:textColor="@color/black"/>
tools:context=".MainActivity"> </TableRow> </TableRow>

<TableRow <TableRow>
android:layout_height="wrap_content" <TextView android:text="2 " <TableRow>
android:layout_width="match_parent"> android:textSize="20dp" <TextView android:text="4 "
android:textColor="@color/black"/> android:textSize="20dp"
<TextView <TextView android:text="Rehan" android:textColor="@color/black"/>
android:layout_width="120dp" android:textSize="20dp" <TextView android:text="Adyan"
android:text="Sr.no" android:textColor="@color/black"/> android:textSize="20dp"
android:textColor="@color/black" <TextView android:text="2005690100" android:textColor="@color/black"/>
android:textSize="22dp" /> android:textSize="20dp" <TextView android:text="2005690103"
android:textColor="@color/black"/> android:textSize="20dp"
<TextView </TableRow> android:textColor="@color/black"/>
android:layout_width="120dp" </TableRow>
android:text="Name " <TableRow>
android:textColor="@color/black" <TextView android:text="1 " <TableRow>
android:textSize="22dp" android:textSize="20dp" <TextView android:text="5"
android:textColor="@color/black"/> android:textSize="20dp"
<TextView <TextView android:text="Hasan" android:textColor="@color/black"/>
android:layout_width="120dp" android:textSize="20dp" <TextView android:text="Naif"
android:text="Enrollment" android:textColor="@color/black"/> android:textSize="20dp"
android:textColor="@color/black" <TextView android:text="2005690101" android:textColor="@color/black"/>
android:textSize="22dp" android:textSize="20dp" <TextView android:text="2005690104"
/> android:textColor="@color/black"/> android:textSize="20dp"
</TableRow> </TableRow> android:textColor="@color/black"/>
</TableRow>

</TableLayout>
Relative Layout
• RelativeLayout is a view group that displays child
views in relative positions. The position of each
view can be specified as relative to sibling
elements (such as to the left-of or below another
view) or in positions relative to the parent Relative
Layout area (such as aligned to the bottom, left or
center).

• A RelativeLayout is a very powerful utility for

designing a user interface because it can eliminate
nested view groups a keep your layout hierarchy
flat, which improves performance.

• If you find yourself using several

nested LinearLayout groups, you may be able to Fig.: Relative Layout design
replace them with a single RelativeLayout.