Mobile Application Development Polytechnic, M.

S University

UNIT 4: Designing Android User Interfaces

Android widgets
Android provides a variety of UI widgets (User Interface widgets) that you can use to build
the graphical user interface of your Android applications. Here are some commonly used
Android UI widgets:

1. TextView:
- Displays text to the user.
- Example XML tag: `<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!" />`

2. EditText:
- Allows the user to enter and edit text.
- Example XML tag: `<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content" />`

3. Button:
- Represents a clickable button.
- Example XML tag: `<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click me!" />`

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

4. ImageView:
- Displays an image.
- Example XML tag: `<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />`

5. CheckBox:
- Allows the user to select one or more options from a set.
- Example XML tag: `<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Check me" />`

6. RadioButton:
- Represents a radio button, allowing the user to select one option from a set.
- Example XML tag: `<RadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select me" />`

7. ToggleButton:
- Represents a two-state button.
- Example XML tag: `<ToggleButton
android:id="@+id/toggleButton"
android:layout_width="wrap_content"

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

android:layout_height="wrap_content"
android:text="Toggle me" />`

8. Spinner:
- Displays a dropdown list of items.
- Example XML tag: `<Spinner
android:id="@+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />`

9. DatePicker:
- It allows you to select date by day, month and year.
- Example XML tag <DatePicker
android:id="@+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

10. TimePicker:
- It allows you to select time by hour and minute. You cannot select time by seconds.
- Example XML tag: <TimePicker
android:id="@+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

11. ProgressBar:
- Shows the progress of a task.
- Example XML tag: `<ProgressBar android:id="@+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleHorizontal" />`

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

Android Layouts
In Android development, layouts are used to define the structure and arrangement of user
interface elements within an activity or fragment. Layouts are created using XML files and can
be defined statically in XML resource files or dynamically in code using Java or Kotlin. Here
are some commonly used Android layouts:

1. LinearLayout:

Arranges its children elements either horizontally or vertically.

Example:

Common Attributes:
1. android:layout_width and android:layout_height:

Defines the width and height of the LinearLayout. Common values include
"match_parent" and "wrap_content".

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

2. android:orientation:

Specifies the orientation of the LinearLayout. It can be set to "vertical" or "horizontal".

Output:

3. android:layout_weight:

Distributes the remaining space in the layout based on a weight value. It is used to give
proportionate sizes to child views.

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

Output

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

4. android:gravity:

Sets the gravity of the content of the LinearLayout (e.g., centering content)’

It specifies how an object should position its content on its X and Y axes.

Possible values are – let, right, center_vertical, fill, center, bottom, end, etc.

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

5. android:layout_gravity:

Sets the gravity of the LinearLayout itself within its parent.

Sets the gravity of the View or Layout relative to its parent.

Possible values are –left, right, center_vertical, fill, center, bottom, end, etc.

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

Output:

2. RelativeLayout:

In Android, RelativeLayout is a layout manager that allows you to position child views relative
to each other or to the parent layout. This layout is powerful and flexible, making it a good
choice when you want to create complex UIs.

There are so many properties that are supported by relative layout. some of the most used
properties are listed below

layout_alignParentTop

layout_alignParentBottom

layout_alignParentRight

layout_alignParentLeft

layout_centerHorozontal

layout_centerVertical

layout_above

layout_below

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

Example :

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

3. FrameLayout:

FrameLayout is a type of layout container in Android that allows child views to be stacked on
top of each other. However, each child view occupies the whole area of the layout. The last
child added to the FrameLayout will be drawn on top of the others.

Android Framelayout is a ViewGroup subclass that is used to specify the position of multiple
views placed on top of each other to represent a single view screen. Generally, we can say
FrameLayout simply blocks a particular area on the screen to display a single view. Here, all
the child views or elements are added in stack format means the most recently added child
will be shown on the top of the screen. But, we can add multiple children’s views and control
their positions only by using gravity attributes in FrameLayout.

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

2. TableLayout:

In Android development, a TableLayout is a layout container that organizes its children into
rows and columns, creating a grid-like structure. Each row can contain multiple cells
(columns), and each cell can contain a single UI element (such as a TextView, Button, etc.).

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.

TableLayout Attributes

1android:id

This is the ID which uniquely identifies the layout.

2android:collapseColumns

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

3android:shrinkColumns

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

4android:stretchColumns

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

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

Example:

<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1,2,3">

<!-- Row 1 -->

<TableRow>

<TextView
android:layout_column="1"
android:text="Column 1" />
<TextView
android:layout_column="2"
android:text="Column 2" />
<TextView
android:layout_column="3"
android:text="Column 3" />
</TableRow>

<!-- Row 2 -->

<TableRow>
<Button
android:layout_column="1"
android:text="Button 1" />
<Button
android:layout_column="2"
android:text="Button 2" />
<Button
android:layout_column="3"
android:text="Button 3" />
</TableRow>
<!-- Add more rows and cells as needed -->
</TableLayout>

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

5. WebView:

In Android development, a WebView is a UI component that allows you to display web

content within your app. It is essentially a browser embedded within your application,
allowing you to show web pages or load HTML content.

The loadUrl() and loadData() methods of Android WebView class are used to load and display
web page.

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

Ensure you have the necessary permissions in your AndroidManifest.xml file to access the
internet if you are loading content from the web:

Measurement Units in Android

In Android development, various measurement units are used to define dimensions for UI
elements and layouts. The primary units include:

1. Pixels (px):

 Pixels are the smallest unit of display and are device-specific.

 The actual size of a pixel can vary between different devices based on their screen
density (dpi - dots per inch).
 For example: `10px`, `20px`, etc.

2. Density-independent Pixels (dp or dip):

 Density-independent pixels are a virtual unit that maintains a consistent size across
different screen densities.
 Use dp for specifying sizes in a way that ensures your UI looks relatively consistent
across different devices.
 For example: `10dp`, `20dp`, etc.

3. Scale-independent Pixels (sp):

 Scale-independent pixels are similar to dp but are specifically used for text size.
 They take into account the user's font size preference in the device's settings.
 Use sp when specifying text sizes to ensure better accessibility.
 For example: `14sp`, `18sp`, etc.

4. Inches (in):

 Inches are a physical unit of measurement.

 For example: `1in`, `0.5in`, etc. (not commonly used for specifying dimensions in Android
layouts).

Rohan Soni (Lecturer – Computer Engineering)

Mobile Application Development Polytechnic, M.S University

5. Millimeters (mm):

 Millimeters are another physical unit of measurement.

 For example: `10mm`, `25mm`, etc. (not commonly used for specifying dimensions in
Android layouts).

6. Points (pt):

 Points are another unit commonly used for specifying text sizes.
 They are similar to pixels but are based on the physical size of the screen.
 For example: `12pt`, `16pt`, etc.

Comparisons of Units

Rohan Soni (Lecturer – Computer Engineering)