ANDROID USER INTERFACE ELEMENTS &

LAYOUTS

Prof. Nilesh B. Ghavate

Assistant Professor
CSE IEP Department
 Lesson Plan

Subject/Course Mobile App Development

Lesson Title Android U.I. Elements & Layouts

Lesson Objectives
Introduction of Material Design
Type’s of Layouts
UI Widget’s with Properties & Menus
 Introduction of Material Design

▪ Material Design Components (MDC Android) help developers create apps with a modern,
clean, and consistent look.
▪ Developed by Google, it ensures apps are visually appealing, smoothly animated, and easy
to use.
▪ Used widely to give Android apps a polished and professional appearance.
▪ Provides ready-made UI elements (buttons, cards, toolbars, etc.) for faster and uniform design.
Material Design Principles include:

• Colors and Theming (Choosing the right colors and styles for your app)

• Typography (Selecting appropriate fonts)

• Material Design Components (Using pre-built elements like buttons, cards, etc.)

• Shaping Material Design Components (Customizing the look of these components to

match your app’s design)
1. Colors and Theming
2. Typography (Choosing the Right Font)

• Typography plays a key role in defining the look, feel, and readability of an Android app.

• In Android, the Roboto font is the default and most popular choice — it’s modern,
versatile, and highly legible.

• Developers may also select other fonts to enhance brand identity or create a unique
visual style.
Font Selection and Usage in Android

•Roboto meets the design needs of most apps with multiple weight variants:

➤ Light ➤ Regular ➤ Medium ➤ Bold

•For additional customization, developers can choose fonts from Google Fonts, which offer:

•A wide variety of modern, web-safe fonts

•Consistent styling across devices
•Complete variants for flexibility in design
Guidelines for Font Selection

▪ Choose fonts that are clear, professional, and readable on all screen sizes.
▪ Maintain consistency — limit your app to one or two font families.
▪ Ensure fonts include multiple weights for hierarchy (titles, subtitles, body text, buttons).
▪ Test fonts for contrast and legibility in both Light and Dark modes.
▪ Match typography with your app’s theme and personality (formal, playful, minimal, etc.).
UI & UX
❖ User Interface (UI) ❖ User Experience (UX)

▪ It is defined in an XML File. ▪ How the app feels to the user.

▪ Visual design of the app. ▪ Easy navigation & logical flow.
▪ Layouts: LinearLayout, ▪ Responsiveness & feedback.
ConstraintLayout, etc. ▪ Accessibility & Consistency.
▪ Widgets: Button, TextView, EditText. ▪ Improves user satisfication.
▪ Colors, Fonts, Icons, Themes.
▪ Animation & Transitions.

❖ Relationship Between UI & UX

UI = LOOKS , UX = FEEL
GOOD UI + GOOD UX =SUCCESSFUL APPuccessful
App
LAYOUTS

• Layouts define how UI elements are arranged on the screen.

• They control position, size & alignment of components.
[Link] Layout

• Arrange views in a single direction

❑ Vertical : single column of views
❑ Horizantal : single row of views
• It Supports weight attribute to control relative size of views.
• It is best for simple layouts with few elements.
• Avoid excessive nesting to prevent performance issues.
EXAMPLE: <View
android:layout_width="0dp"
<LinearLayout android:layout_height="match_parent"
android:layout_weight="1"
xmlns:android="[Link] android:background="#81C784"/>
es/android"
android:layout_width="match_parent" <View
android:layout_height="match_parent" android:layout_width="0dp"
android:orientation="horizontal" android:layout_height="match_parent"
android:padding="16dp" android:layout_weight="1"
android:background="#A5D6A7"/>
android:background="@android:color/white">
<View </LinearLayout>
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#A5D6A7"/>
OUTPUT:

LINEAR LAYOUT
2. ABSOLUTE LAYOUT

• Positions views using exact X and Y coordinates on the screen.

• Provides full control over where each view appears.
• Not recommended for different screen sizes (poor responsiveness.)
• Best for simple , fixed layouts with few elements.
• EXAMPLE:
<View android:layout_width="120dp"
android:layout_height="100dp"
android:layout_x="80dp"
<?xml version="1.0" encoding="utf-8"?> android:layout_y="100dp"
<AbsoluteLayout android:background="#2196F3" />
xmlns:android="[Link] <TextView
pk/res/android" android:layout_width="wrap_content"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_height="match_parent"> android:layout_x="150dp"
<View android:layout_width="100dp" android:layout_y="50dp"
android:layout_height="80dp" android:text="Absolute Text"
android:layout_x="20dp" android:textColor="#FFFFFF"
android:layout_y="30dp" android:textSize="18sp"
android:background="#FF5722" /> android:background="#4CAF50"
android:padding="8dp"/>
</AbsoluteLayout>
OUTPUT:

ABSOLUTE LAYOUT
3. FRAME LAYOUT

• A simple layout designed to hold one child

view.
• Multiple views can be stacked on top of each
other.
• Commonly used for overlays, fragments, and
image views.
• Ideal for simple UI components where
layering is required.
4. RELATIVE LAYOUT
• It Arranges child views relative to each other or
the parent.
• It Views can be positioned above, below, to the
left, or right of other views.
• It Useful for flexible and dynamic UI designs.
• It Allows precise control over view placement
without nesting multiple layouts.
[Link] LAYOUT

• It is Flexible layout for Android UI design.

• Positions views using constraints, not nested
layouts.
• It Reduces view hierarchy, improving
performance.
• It Supports complex and responsive designs.
• It is most recommended layout for modern
applications.
DYNAMIC IMPLEMENTATION OF LAYOUT

• UI created or modified programmatically at runtime.

• Flexible; can change based on user input, data, or events.
• Requires more code and logic to implement.
• Can be slightly heavier if many views are added dynamically.
• Dynamic content like lists, forms, or user-driven UI.
EXAMPLE: <TextView android:id="@+id/tv_left"
<?xml version="1.0" encoding="utf-8"?> android:layout_width="80dp" android:layout_height="80dp"
android:layout_toStartOf="@id/tv_dynamic_center"
<RelativeLayout android:layout_centerVertical="true"
xmlns:android="[Link] android:layout_marginEnd="10dp"
/res/android" android:background="#9CCC65" android:text="LEFT"
xmlns:tools="[Link] android:textColor="#FFFFFF" android:textSize="16sp"
android:textStyle="bold" android:gravity="center" />
android:layout_width="match_parent"
android:layout_height="match_parent" <TextView android:id="@+id/tv_right"
android:padding="16dp" android:layout_width="80dp" android:layout_height="80dp"
android:layout_toEndOf="@id/tv_dynamic_center"
android:background="@android:color/white" android:layout_centerVertical="true"
tools:context=".MainActivity"> android:layout_marginStart="10dp"
android:background="#9CCC65" android:text="RIGHT"
<TextView android:id="@+id/tv_dynamic_center" android:textColor="#FFFFFF" android:textSize="16sp"
android:layout_width="120dp" android:textStyle="bold" android:gravity="center" />
android:layout_height="80dp"
<TextView android:layout_width="wrap_content"
android:layout_centerInParent="true" android:layout_height="wrap_content"
android:background="#66BB6A" android:layout_below="@id/tv_dynamic_center"
android:text="DYNAMIC" android:layout_centerHorizontal="true"
android:textColor="#FFFFFF" android:layout_marginTop="60dp" android:text="Relative Layout
Example" android:textColor="#388E3C" android:textSize="22sp"
android:textSize="18sp" android:textStyle="bold" android:textStyle="bold" />
android:gravity="center" /> </RelativeLayout>
OUTPUT:
UI WIDGETES WITH PROPERTIES

ANDROID UI WIDGETS
 UI Widgets & Properties in Android
UI Widget Purpose Key Properties
text, textSize, textColor, gravity,
TextView Displays text
fontFamily
EditText User input hint, inputType, textColor, maxLength
Button Triggers actions text, background, onClick, enabled
ImageView Displays images src, scaleType, contentDescription
checked, text,
CheckBox Select/deselect options
onCheckedChangeListener
RadioButton Single choice selection checked, text, onClick
checked, textOn, textOff,
Switch Toggle ON/OFF
onCheckedChangeListener
entries, onItemSelectedListener,
Spinner Dropdown selection
prompt
max, progress, indeterminate,
ProgressBar Shows loading/progress
visibility
max, progress,
SeekBar Sliding selection
onSeekBarChangeListener
 Android Events & Methods

• Events are actions triggered by user interactions or system changes in an app.

• Methods are functions that handle these events, like clicks, touches, or text changes.
• Common events include Click, Touch, Long Click, Key, Focus, Text Change, Item
Selection, and Lifecycle events.
• Handling events properly ensures a responsive and interactive Android app UI.
Event Type Description Key Methods
Triggered when a user taps a
Click Events setOnClickListener()
view (e.g., Button)
onTouch(), MotionEvent
Touch Events Triggered on touch interactions
(ACTION_DOWN, ACTION_UP)
Long Click Events Triggered on long press setOnLongClickListener()
Triggered when hardware keys
Key Events onKeyDown(), onKeyUp()
are pressed
Triggered when a view gains or onFocusChange(),
Focus Events
loses focus setOnFocusChangeListener()
Triggered when text in EditText
Text Change Events addTextChangedListener()
changes
Triggered for ListView, Spinner, setOnItemSelectedListener(),
Item Selection Events
or RecyclerView item selection setOnItemClickListener()
Triggered during onCreate(), onStart(),
Lifecycle Events Activity/Fragment lifecycle onResume(), onPause(), onStop(),
changes onDestroy()
Dialog Boxes in Android

• Dialog boxes are small windows that prompt the user to make decisions or enter
information without leaving the current activity.
• Used for alerts, confirmations, inputs, or choices.
• Common Types:
• AlertDialog: Shows alerts with buttons (OK, Cancel).
• ProgressDialog: Displays progress while a task is running. (Deprecated in newer APIs)
• Custom Dialog: Fully customizable layout for specific needs.
• Key Methods : show(), dismisss(), setMessage(), setTitle()
Menus: Option and Context
• Android Option Menus are the primary menus
of android. They can be used for settings,
search, delete item etc.
• To inflating the menu by calling the inflate()
method of MenuInflater class.
• To perform event handling on menu items, you
need to override onOptionsItemSelected()
method of Activity class.
Android Context Menu
• Android context menu appears when
user press long click on the element.
• It is also known as floating menu.
• It affects the selected content while
doing action on it.
• It doesn't support item shortcuts and
icons.