Mobile Application Development

Unit – 3 UI Components and Layouts

• Control Flow:
- In control flow we studied that how we can execute the practical

- How we can create applications and what steps are required for creating application.

Steps to create Android Application:

1. Open the Android Studio

2. Select file → New → New Project

3. Select Empty Activity & Click ‘Next’

4. Give the Project Name & Click ‘Finish’

5. New Project is created with Given Name the ActivityMain.xml and MainActivity.java these 2 files
are generated

6. To write the program we have to open ActivityMain.xml file.

In this file we write xml code means design code and

in MainActivity.jave file we write the java code.

• Android Application are made up of different components that work together to create an
application. These components are called as building blocks of application.

Let’s see role of each components

1. Activities:
- An activity is like a screen in your app. For example, the login

page or the settings screen is an activity.

- It’s the part of the app that the user interacts with. It displays the

user interface (UI) and handles user actions.

- e.g. When you open Instagram, the home screen is an activity,

and when you go to your profile, it’s another activity.

2. Services:
- A service is a component that runs in the background to do

tasks without needing a user interface.

- It handles long-running tasks or tasks that need to continue

even if the user isn’t actively using the app.

- e.g. Playing music in the background (like Spotify),

Synchronizing data in the background (like email apps).

3. Broadcast Receivers:
- A broadcast receiver listens for messages or events from the

system or other apps and responds to them.

- It helps the app react to system-wide events like battery status

changes, incoming calls, or Wi-Fi connectivity changes.

- e.g. An app reacting when the phone is charging,

Sending a notification when a download is complete.

• 4. Content Provider:
- A content provider manages app data and allows it to be shared with other apps.
- It helps in accessing, sharing, and storing data like contacts, photos, or app databases.

- e.g. The Contacts app provides access to saved contact details for

apps like WhatsApp or Messages,

A photo app can allow other apps to access your images.

• Components of Android Directory Structure

- The Android directory structure is the organized folder system where all the files for your app are
stored during development.

- Each folder has specific purpose.

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

2. Java Folder:
- This folder will contain all the java source code (java) files which we'll create during the
application development.

- Whenever we create any new project/application, by default the class MainActivity.java will
create automatically.
3. res (Resources) Folder:
- It's an important folder that will contain all non-code resources, such as bitmap images,
UI strings, XML layouts

The res(Resources) will contain a different type of folders that are

i) 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.

ii) Layout Folder (res/layout)

- This folder will contain all XML layout files which we used to define the user interface of our
application.

iii) 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.

iv) 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.

4) Gradle Folder:
- Gradle folder is used to manages the build process of your project or application & dependencies.

- Gradle folder include the tool that builds your app. It contain configuration files.

- Gradle manages building process which are – Compiling your code, managing external libraries,
creating APK files for different Android version or devices.

- Gradle directory is used to compile your whole project at a time.

• Android UI Components:
Main components used in Android UI Design. These are like building blocks that help developers
create screens and interactions in apps:

1. Text Components
- TextView: Displays text (e.g., titles, labels).

- EditText: Input field where users can type text (e.g., for login forms).

2. Button Components
- Button: A clickable button for actions (e.g., submit, next).

- ImageButton: A button that shows an image instead of text.

- ToggleButton: A switch button to toggle between two states (e.g., ON/OFF).

3. Layout Containers
- LinearLayout: Arranges items in a straight line (vertically or horizontally).

- RelativeLayout: Places items relative to each other or the parent container.

- ConstraintLayout: A flexible layout to position items with constraints.

- FrameLayout: Stacks items on top of each other.

- GridLayout: Displays items in a grid-like table.

4. Lists and Grids

- ListView: Shows a scrollable list of items (e.g., a contact list).

- RecyclerView: An improved, customizable version of ListView.

- GridView: Displays items in a grid (e.g., photo gallery).

5. Image Components
- ImageView: Displays images in the app (e.g., profile picture, icons).

6. Input Components
- CheckBox: Lets users select one or more options.

- RadioButton: Lets users select one option from a group.

- Spinner: A dropdown menu to select one option.

- SeekBar: A slider for selecting a value (e.g., brightness).

- Switch: A modern toggle switch for ON/OFF options.

7. Progress Indicators
- ProgressBar: Shows loading or progress (e.g., download progress).

8. Navigation Components
- Toolbar: A top bar with the app title, menu, or navigation buttons.

- BottomNavigationView: A bar at the bottom to switch between screens.

- Navigation Drawer: A sliding menu from the side for app navigation.
 • Linear Layout
- LinearLayout in Android Studio is a layout that organizes UI elements (like buttons, text,
or images) in a straight line, either vertically (top to bottom) or horizontally (left to right).

Key Points:

1. Direction :- You can set the direction using the orientation attribute:

▪ vertical: Items are stacked on top of each other.

▪ horizontal: Items are placed side by side.

2. Equal Space :- You can control the size and spacing of each item by using weight.

This ensures that the space is divided equally or proportionally

between items.

3. Simple and Clean :- It’s perfect for creating straightforward layouts, like a list of buttons or
labels in a row or column.

Example:

If you want three buttons stacked vertically:

<LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"
 android:text="Button 3" />

</LinearLayout>

In this example:

This will arrange the buttons vertically in a straight line.

If you change orientation="horizontal", the buttons will appear side by side.

• When you want items to appear in a row or column.

• For simple layouts where no overlapping or complex positioning is needed.

• LinearLayout is easy to use and great for basic screen designs.

• Absolute Layout
• An AbsoluteLayout in Android Studio is a type of layout that lets you place UI elements (like
buttons, text, or images) at specific x and y positions on the screen, measured in pixels.

Key Points:

1. Position-Based Layout:- You define the exact location of each element by specifying

android:layout_x and android:layout_ycoordinates.

2. Fixed Design:- The layout does not adjust automatically for different screen sizes or

resolutions, so it can look different on various devices.

3. Outdated:- AbsoluteLayout is not commonly used anymore because it is not flexible for

modern devices with varying screen sizes.

Example:

If you want to place a button at specific coordinates:

<AbsoluteLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click Me"
 android:layout_x="100dp"

android:layout_y="200dp" />

</AbsoluteLayout>

In this example:

• The button will appear at the (100dp, 200dp) position on the screen.

• It’s not responsive, meaning it doesn’t work well with devices of different screen sizes or
orientations.

• Developers now use more flexible layouts like ConstraintLayout or RelativeLayout.

• It is mostly avoided in modern app development. Use it only for very simple or temporary
designs where exact positioning is required and screen size doesn't matter.

• Frame Layout

A FrameLayout in Android Studio is a simple layout that is used to stack items on top of each other.
It places all its child views (like buttons, text, or images) in the top-left corner of the screen by
default, but you can move or overlap them by adjusting their properties.

Key Points:

1. Single Frame:- Think of it like a container or frame that holds one or multiple views

stacked together.

- If multiple items are added, they overlap each other by default.

2. Good for Overlays:- It’s ideal for layouts where you need overlapping views, like a

background image with text on top or a button placed over an image.

3. Simple Structure:- It’s easy to use when you don’t need a complex layout structure.

Example:

Here’s a FrameLayout that overlaps an image and text:

<FrameLayout

android:layout_width="match_parent"

android:layout_height="match_parent">
 <ImageView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:src="@drawable/background_image" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello World"

android:layout_gravity="center" />

</FrameLayout>

In this example:

• The ImageView is added first, so it becomes the background.

• The TextView is added second, and it appears on top of the image, centered using
layout_gravity.

• When you need simple overlapping views you can use Frame layout.

• For items that don’t require complex alignment, like showing text on an image or displaying a
loading spinner over a background, that time you use frame layout.

• It’s Lightweight and straightforward.

• It’s Perfect for overlays and basic designs.

• Not ideal for complex layouts because it doesn’t allow flexible positioning like other layouts
(e.g., ConstraintLayout).

• FrameLayout is best for simple stacking and overlay designs!

Table Layout
• A TableLayout in Android Studio is a type of layout that organizes UI elements (like text,
buttons, or images) into rows and columns, just like a table.
Key Points:

• Rows and Columns:- A TableLayout is divided into rows, and each row can have one or more
columns.

• Rows are created using TableRow, and each TableRow holds the elements for that row.

• Equal Row Height:- Rows can adjust their height automatically to fit the content.

• Flexible Columns:- Columns automatically size themselves based on their content, unless
specified otherwise.

Example:

Here’s how to create a simple table with two rows and three columns:

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content">

<TableRow>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 1, Column 1" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 1, Column 2" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 1, Column 3" />

</TableRow>

TableRow>

<TextView
android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 2, Column 1" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 2, Column 2" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Row 2, Column 3" />

</TableRow>

</TableLayout>

In this example:

• Each TableRow creates a new row.

• Each row has three TextViews, creating three columns.

• When you need to display data in a structured, table-like format that time you use Table
Layout.

• For designs where rows and columns make sense, like forms or schedules you use Table
Layout.

• Easy to display data in rows and columns.

• Automatically adjusts row and column sizes to fit content.

• Not suitable for complex designs.

• May not handle dynamic content (e.g., many rows) as efficiently as other layouts like
RecyclerView.

TableLayout is great for creating simple, table-like designs or forms.

• Relative Layout
- A RelativeLayout in Android Studio is a layout that arranges UI elements (like buttons,
text, or images) relative to each other or to the parent container. It allows you to create
more flexible and dynamic designs compared to simpler layouts like LinearLayout.
Key Points:

1. Positioning Relative to Parent:- You can align elements relative to the parent container, like
aligning them to the top, bottom, left, or right.

2. Positioning Relative to Other Elements:- You can place one element relative to another, such
as putting a button below or to the right of a text field.

3. Flexible Layout:- It adjusts well to different screen sizes and orientations, making it better for
responsive design.

Example:

Here’s how you might use RelativeLayout:

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="match_parent">

<!-- First element: a TextView -->

<TextView

android:id="@+id/label"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Hello, World!"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true" />

<!-- Second element: a Button positioned below the TextView -->

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Click Me"

android:layout_below="@id/label"

android:layout_centerHorizontal="true" />

</RelativeLayout>

In this example

• The TextView is positioned at the top center of the screen (aligned to the parent).

• The Button is placed below the TextView, and it’s also centered horizontally.
• It’s Flexible and allows precise positioning.

• It Adapts well to different screen sizes and orientations.

• It Simplifies UI design compared to manual positioning.

• For complex layouts with many elements, it can become difficult to manage.

• ConstraintLayout is preferred for more advanced and efficient designs.

• When you need to position elements dynamically relative to each other or the parent.

• It’s a good choice for moderately complex layouts.

• RelativeLayout is versatile and great for responsive UI designs.