Unit -3

Android User Interface Design Essentials

User Interface Screen Elements

Certainly! Let's delve deeper into each of these user interface screen elements
in Android:

1. Widgets:

Definition: Widgets are reusable UI components that users interact with

directly on the screen.

Purpose: They serve various functions such as displaying information,

accepting user input, or triggering actions.

Examples: Common widgets include buttons, text fields, checkboxes,

radio buttons, progress bars, spinners, and sliders. Each widget has
specific properties and behaviors that developers can customize to suit
their app's needs.

2. Layouts:

Definition: Layouts are containers that define the structure and

arrangement of UI elements on the screen.

Purpose: They help organize widgets and other UI components spatially

and hierarchically.

Examples: Android provides several types of layouts such as

LinearLayout (arranges UI elements in a single row or column),
RelativeLayout (positions UI elements relative to each other or to the
parent), ConstraintLayout (provides flexible positioning and sizing of UI
elements based on constraints), FrameLayout (displays a single item at a
time), and more. Choosing the appropriate layout depends on the design
requirements and complexity of the screen.

3. Menus and Toolbars:

Unit -3 1
 Definition: Menus and toolbars provide options and actions that users
can access through buttons or overflow menus typically located at the
top or bottom of the screen.

Purpose: They offer navigation, context-specific actions, and settings

options, enhancing user interaction and usability.

Examples: Android applications commonly use options menus (activated

by the device's Menu button or a dedicated overflow icon), context
menus (activated by long-pressing UI elements), and toolbars (action
bars) that contain icons, titles, and actions relevant to the current context
or activity. These elements improve the accessibility and functionality of
the app by providing quick access to essential features.

These elements together form the foundational building

1. Text Elements

TextView

Displays text to the user.

Can be styled with different fonts, sizes, colors, and other properties.

Supports HTML formatting.

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello, World!"
android:textSize="20sp"
android:textColor="#000000" />

EditText

Allows user input.

Can be configured for different input types (text, number, password).

Supports input validation and formatting.

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"

Unit -3 2
 android:hint="Enter text"
android:inputType="text" />

2. Buttons

Button

Triggers actions when clicked.

Customizable text, background, and shape.

Can be disabled or enabled programmatically.

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:onClick="onButtonClick" />

ImageButton

Displays an image as a button.

Useful for icons and graphical buttons.

Can be styled and customized.

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_foreground"
android:contentDescription="Icon Button" />

FloatingActionButton

Circular button typically used for primary actions.

Often placed at the bottom right of the screen.

Supports animations and material design styles.

<com.google.android.material.floatingactionbutton.Floa
tingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"

Unit -3 3
 android:src="@drawable/ic_add"
android:contentDescription="Add Button" />

3. Input Controls

CheckBox

Allows users to select multiple options from a list.

Can be checked or unchecked.

Often used in forms and settings.

<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I agree to the terms and conditions"
/>

RadioButton

Used for selecting one option from a group.

Grouped using RadioGroup.

Only one RadioButton in a group can be selected at a time.

<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 1" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Option 2" />
</RadioGroup>

Switch

Provides a two-state toggle switch.

Unit -3 4
 Typically used for enabling or disabling a feature.

Can be styled and customized.

<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enable feature" />

Spinner

Dropdown list for selecting an item.

Can be populated with data programmatically.

Supports various styles and customization.

<Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

SeekBar

Allows users to select a value from a range.

Commonly used for volume and brightness controls.

Can be customized with different thumb and track styles.

<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content" />

4. Pickers

DatePicker

Allows users to select a date.

Can be embedded in a layout or used as a dialog.

Supports custom formatting and validation.

<DatePicker
android:layout_width="wrap_content"

Unit -3 5
 android:layout_height="wrap_content" />

TimePicker

Allows users to select a time.

Can be embedded in a layout or used as a dialog.

Supports 24-hour and AM/PM formats.

<TimePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

5. Image Elements

ImageView

Displays an image resource.

Supports scaling and tinting.

Can be used for icons, backgrounds, and other graphical elements.

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher_foreground" />

6. Progress Indicators

ProgressBar

Shows the progress of a task.

Can be determinate or indeterminate.

Customizable with different styles and colors.

<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleLarge" />

SwipeRefreshLayout

Unit -3 6
 Provides a swipe-to-refresh gesture.

Commonly used with RecyclerView or ListView.

Supports custom animations and colors.

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayou
t>

7. Menus

PopupMenu

Shows a menu anchored to a view.

Useful for context actions.

Supports icons and submenus.

val popup = PopupMenu(context, anchorView)

popup.menuInflater.inflate(R.menu.popup_menu, popup.me
nu)
popup.show()

<menu xmlns:android="<http://schemas.android.com/apk/r
es/android>">
<item android:id="@+id/item1" android:title="Item
1" />
<item android:id="@+id/item2" android:title="Item
2" />
</menu>

ContextMenu

Appears when a view is long-pressed.

Provides contextual actions for the view.

Unit -3 7
 Can be registered for any view.

registerForContextMenu(view)

<menu xmlns:android="<http://schemas.android.com/apk/r
es/android>">
<item android:id="@+id/item1" android:title="Item
1" />
<item android:id="@+id/item2" android:title="Item
2" />
</menu>

OptionsMenu

Displays menu items in the app bar.

Supports icons and submenus.

Can be customized for different screens.

override fun onCreateOptionsMenu(menu: Menu): Boolean

{
menuInflater.inflate(R.menu.options_menu, menu)
return true
}

<menu xmlns:android="<http://schemas.android.com/apk/r
es/android>">
<item android:id="@+id/item1" android:title="Item
1" />
<item android:id="@+id/item2" android:title="Item
2" />
</menu>

8. Dialogs

AlertDialog

Shows an alert message with actions.

Supports custom layouts.

Unit -3 8
 Can be configured with positive, negative, and neutral buttons.

val builder = AlertDialog.Builder(context)

builder.setTitle("Alert")
.setMessage("Are you sure?")
.setPositiveButton("Yes") { dialog, which -> }
.setNegativeButton("No") { dialog, which -> }
.show()

DatePickerDialog

Allows users to select a date.

Supports customization of date ranges and formats.

Can be used in dialogs.

val datePickerDialog = DatePickerDialog(

context,
{ view, year, month, dayOfMonth -> },
year, month, day
)
datePickerDialog.show()

TimePickerDialog

Allows users to select a time.

Supports customization of time formats.

Can be used in dialogs.

val timePickerDialog = TimePickerDialog(

context,
{ view, hourOfDay, minute -> },
hour, minute, true
)
timePickerDialog.show()

9. Containers

CardView

Unit -3 9
 Displays content with rounded corners and shadows.

Supports custom content.

Can be used to group information.

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius

="8dp"
app:cardElevation="4dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is a card view" />
</androidx.cardview.widget.CardView>

- **ScrollView** - Enables scrolling for content that overflows the screen.

- Can contain only one direct child. - Supports vertical and horizontal scrolling.

xml
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Scrollable content" />
</LinearLayout>
</ScrollView>

- **RecyclerView** - Efficiently displays large sets of data. - Supports

different layout managers (LinearLayoutManager, GridLayoutManager). - Can be

customized with item decorators and animations. xml

Unit -3 10
 <androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent" />

kotlin
recyclerView.layoutManager = LinearLayoutManager(context)
recyclerView.adapter = MyAdapter(myDataset)
```

Designing User Interfaces with Layouts

1. LinearLayout

Arranges child views in a single row or column.

Supports both horizontal and vertical orientations.

Weight property can distribute space among child views.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Item" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second Item" />
</LinearLayout>

2. RelativeLayout

Positions child views relative to each other or the parent.

Flexible layout for complex UI designs.

Can overlap views or align them with each other.

<RelativeLayout
android:layout_width="match_parent"

Unit -3 11
 android:layout_height="match_parent">
<TextView
android:id="@+id/firstItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Item" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/firstItem"
android:text="Second Item" />
</RelativeLayout>

3. ConstraintLayout

Flexible positioning and sizing using constraints.

Reduces nesting of layouts for better performance.

Supports chains and guidelines for complex designs.

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/firstItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="First Item"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" />
<TextView
android:id="@+id/secondItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Second Item"
app:layout_constraintTop_toBottomOf="@id/firstIte
m"
app:layout_constraintLeft_toLeftOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Unit -3 12
 4. FrameLayout

Stacks child views on top of each other.

Useful for single view overlays (e.g., progress bars).

Can be used to create layered UI components.

<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" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Overlay Text" />
</FrameLayout>

Drawing and Working with Animation

1. Drawing with Canvas

Custom drawing on views.

Use onDraw() method to perform custom drawing.

Draw shapes, text, and images.

class CustomView(context: Context) : View(context) {

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
val paint = Paint()
paint.color = Color.RED
canvas.drawCircle(50f, 50f, 25f, paint)
}
}

2. Property Animations

Unit -3 13
 Animate properties of objects over time.

Use ObjectAnimator for animating properties.

Supports complex animations like movement, size change, etc.

val animator = ObjectAnimator.ofFloat(view, "translation

X", 0f, 100f)
animator.duration = 1000
animator.start()

3. View Animations

Simple animations like fade in, slide, rotate.

Use XML or code to define animations.

Common classes: AlphaAnimation , TranslateAnimation , RotateAnimation .

<alpha
xmlns:android="<http://schemas.android.com/apk/res/an
droid>"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />

4. Drawable Animations

Frame-by-frame animations.

Defined in XML using animation-list .

<animation-list xmlns:android="<http://schemas.android.co
m/apk/res/android>" android:oneshot="false">
<item android:drawable="@drawable/frame1" android:dur
ation="50" />
<item android:drawable="@drawable/frame2" android:dur
ation="50" />
<item android:drawable="@drawable/frame3" android:dur
ation="50" />
</animation-list>

Unit -3 14
 <ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/animation_list" />

By using these elements, layouts, and animations, you can create rich and
interactive user interfaces in Android applications.

Certainly! Here's a comparison of FrameLayout , ConstraintLayout , RelativeLayout , and

LinearLayout in tabular form, highlighting 10 key differences.

Feature FrameLayout ConstraintLayout RelativeLayout LinearLayout

Multiple
Single child at a children
Single root with
time positioned Single row or
Hierarchy multiple
(overlapping relative to each column layout
constraints
views) other or the
parent

Complex, Moderate,
Simple for
handles all other requires nested Simple, easy to
Complexity single child
layouts' layouts for use
overlays
functionalities complex UIs

Good
High Better Good
performance,
performance performance performance,
Performance but nested
with few with flat but nesting can
layouts may
children hierarchy degrade it
impact

Simple linear
Overlapping
Complex and arrangements
views, simple Dynamic
responsive UIs (e.g., form
Use Case overlays (e.g., positioning of
with flat fields, vertical
progress bar child views
hierarchy or horizontal
over an image)
lists)

Stacked, last Position and size Position based

Position in a
Positioning child drawn on based on on relative
linear sequence
top constraints relationships

Flexible but can

Limited, best Highly flexible get complex Limited to linear
Flexibility
for overlays with constraints with many arrangements
children

Unit -3 15
 Layout File Small and Larger due to Larger with Small to
Size simple constraints nested layouts moderate size

Alignment
Overlapping Precise Alignment
based on
Alignment views without alignment using based on linear
relative
alignment constraints arrangement
positioning

Can be nested
Generally not Requires
but not
nested, used Often used to nesting for
Nestability recommended
for specific use reduce nesting complex
for complex
cases layouts
layouts

Highly
Used when
Less frequent, recommended
Usage in simple relative Used for simple
specific use due to flexibility
Modern Apps positioning forms and lists
cases and
suffices
performance

Here's a comparison of different types of animations in Android: View Animations ,

,
Property Animations Drawable Animations , and Layout Animations in a tabular form with
8 key differences.

View Property Drawable Layout

Feature
Animations Animations Animations Animations

Introduced in Introduced in Introduced in Introduced in API

API Level
API level 1 API level 11 API level 1 level 11

Animates Frame-by-
Animates any
properties of frame
property of an Animates layout
Basic Concept views animation of
object (not just changes
(translation, drawable
views)
rotation) resources

Can animate Animates

Limited to View Animates
Scope any object's changes in layout
properties drawables
properties position and size

Alpha, Scale, ObjectAnimator,

Types of
Translate, ValueAnimator, Animation-list LayoutTransition
Animation
Rotate AnimatorSet

Dynamic UI
Complex Loading,
Simple UI updates
Usage animations and progress, and
effects (adding/removing
transitions visual effects
views)

Unit -3 16
 Limited to
predefined Moderately
Flexibility Limited Highly flexible
drawable flexible
sequences

Performance
Performance
Less efficient More efficient depends on the
varies with the
Performance for complex for complex number of
complexity of
animations animations frames and
layout
size

Requires more
Easy to Requires
Easier to setup and
Ease of Use implement understanding of
implement understanding
using XML layout changes
of keyframes

Example Code Snippets

1. View Animations

<alpha xmlns:android="<http://schemas.android.com/apk/re
s/android>"
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="1000" />

val animation = AnimationUtils.loadAnimation(context, R.a

nim.fade_in)
view.startAnimation(animation)

2. Property Animations

val animator = ObjectAnimator.ofFloat(view, "translation

X", 0f, 100f)
animator.duration = 1000
animator.start()

val valueAnimator = ValueAnimator.ofInt(0, 100)

valueAnimator.addUpdateListener { animator ->
val value = animator.animatedValue as Int
view.alpha = value / 100f

Unit -3 17
 }
valueAnimator.duration = 1000
valueAnimator.start()

3. Drawable Animations

<animation-list xmlns:android="<http://schemas.android.co
m/apk/res/android>" android:oneshot="false">
<item android:drawable="@drawable/frame1" android:dur
ation="50" />
<item android:drawable="@drawable/frame2" android:dur
ation="50" />
<item android:drawable="@drawable/frame3" android:dur
ation="50" />
</animation-list>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/animation_list" />

4. Layout Animations

<layoutTransition
xmlns:android="<http://schemas.android.com/apk/res/an
droid>"
android:animateParentHierarchy="false"
android:layoutAnimation="@anim/layout_animation" />

val layoutTransition = LayoutTransition()

layout.transition.layoutTransition = layoutTransition
layoutTransition.setAnimator(LayoutTransition.APPEARING,
ObjectAnimator.ofFloat(view, "alpha", 0f, 1f))

Unit -3 18