Module 3

Android User Interface

Design Essentials
  User interface (UI) screen elements in mobile
application development encompass a wide range of
components
 that collectively define how users interact with and
User Interface perceive the app.
Screen  These elements are carefully designed to enhance
 usability,
elements  accessibility, and
 overall user experience
 These elements are crucial for creating a seamless
and engaging user experience.
Here’s a comprehensive overview of these UI screen
elements:
1. Navigation Components
2. Input Controls
3. Content Presentation
4. Interactive Elements
5. Feedback and Notifications
6. Media and Multimedia Elements
7. Additional UI Components
8. Gesture Controls
 ➢Navigation Bar:
 The navigation bar (on iOS) or tab bar (on Android) typically
appears at the bottom of the screen and
 contains icons or labels that allow users to switch between
different sections and
 Or Located typically at the top of the screen,
1. Navigation  it includes controls for navigating back, accessing menus, and
Components displaying the current screen title.
 Typically located at the top of the screen, the navigation bar
includes:
 Back Button: Allows users to navigate back to the previous screen.
 Title: Displays the name or description of the current screen or
section.
 Menu Button: Provides access to additional options or actions
related to the current context.
 ➢Toolbar / App Bar
 Displays actions, titles, and navigation buttons relevant to the
current screen.
 Examples: Top app bar with action buttons, title, and optional
navigation (Android), navigation bar (iOS).
1. Navigation
Components ➢Tab Bar:
 Positioned at the bottom of the screen,
 it allows users to switch between different sections or views within
the app using tabs.
 Each tab represents a distinct category or functionality.
 Tabs: Each tab represents a different section or view within the
app, enabling users to switch between them easily.
 ➢Drawer/Sidebar:
 A slide-in panel from the edge of the screen that provides
access to navigation links, settings, or additional options.
1. Navigation  A slide-in panel from the edge of the screen:
Components  Navigation Links: Provides access to different sections
of the app.
 Settings: Options for configuring app preferences.
 Additional Actions: Such as account management or
help.
 ➢Text Fields:
 Text fields allow users to input text (e.g., username, password,
search queries).
2.Input  They may include features like auto-complete, input validation,
and keyboard customization.
Controls
 Areas where users can input text or numbers.
 They may include options for auto-completion, suggestions, and
validation.
 Text Fields and Input Boxes:
Areas where users can enter text or numeric data:
2.Input  Labels: Describes the purpose of the input field.
Controls  Validation: Alerts users to errors or required fields.
 Examples: Text fields for names, email addresses, passwords;
numeric fields for quantities, prices
 ➢Buttons:
 Buttons are interactive elements that users tap to perform
actions, such as submitting a form, navigating to another screen,
or triggering a specific function within the app.
2.Input  Trigger actions such as submitting forms, navigating to different
Controls screens, or performing specific tasks.
 They can be styled as text, icons, or a combination.
Examples: Primary buttons (e.g., submit, save), secondary buttons
(e.g., cancel, delete)
 ➢Dropdowns and Pickers:
 Allow users to select from a list of options, dates, times, or
2.Input other inputs using a dropdown menu or a picker interface.
 Dropdown Menus: Display a list of options when
Controls tapped.
 Date/Time Pickers: Provide a user-friendly interface for
selecting dates or times.
 ➢Lists and Grids:
 Lists and grids display collections of data (e.g., contacts,
products) in a scrollable format.
 Scrolling: Users can scroll vertically to view more items.
3.Content Examples: List of contacts, products, messages; grid of
images.
Presentation
➢Carousel:
 Allows users to swipe horizontally through a set of items or
images, often used to showcase featured content or
products.
 ➢Icons:
 Icons are used throughout the interface to represent
actions, features, or categories visually.
 They can convey information quickly and are often used in
4.Interactive navigation bars, buttons, and menus and Graphical
representations used for navigation, actions, or indicating
Elements status.
 Navigation: Direct users to different sections or actions.
Examples: Menu icons, action icons (e.g., search, settings),
status icons (e.g., notifications, connectivity).
 ➢Toggle Switches and Checkboxes:
 Switches: Toggle between two states (on/off).
 Checkboxes: Select one or more items from a list.
 Examples: Checkboxes for multiple selections, switches for
on/off toggles.
4.Interactive
Elements ➢Sliders:
 Enable users to adjust settings or values within a specified
range by sliding a thumb control.
 Volume: Control audio output.
 Brightness: Adjust screen brightness.
 ➢Toast and Snackbar:
• Brief messages that appear at the bottom of the screen to
5.Feedback provide feedback or alerts about actions or system events.
and • Feedback: Confirmations or success messages.
• Warnings: Alerts for errors or issues.
Notifications
• Examples: Toasts for successful actions (e.g., "Saved"),
warnings (e.g., "No internet connection").
 ➢Dialogs and Alerts:
• Pop-up windows that require user attention, used for critical
5.Feedback notifications, confirmations, or warnings
and • Confirmation: Prompt for user confirmation before
proceeding.
Notifications • Error Messages: Notify users of critical errors or actions.
 ➢Notification :
5.Feedback  Notifications appear as banners or alerts to inform users
and about important updates, messages, or events within the app.
Notifications  They may include action buttons for users to respond or
dismiss
 ➢Image and Video Players:
 display visual content (e.g., photos, videos) within the app.
6.Media and  They may include features like zooming, cropping, and
playback controls.
Multimedia
 Interfaces for displaying and interacting with images, videos,
Elements or audio content within the app.
 Playback Controls: Play, pause, and seek options.
 Full-Screen Mode: Expand content for a better view.
6.Media and ➢Audio Controls:
 Buttons or sliders for controlling playback of audio content.
Multimedia  Playback: Control audio tracks or streams.
Elements  Volume Control: Adjust audio output levels.
 ➢Search Bar:
 Allows users to search for specific content within the app,
7.Additional often providing suggestions or recent search history.
UI  Allows users to find specific content within the app:
Components:  Suggestions: Provide autocomplete options or recent
searches.
 Filters: Refine search results based on criteria.
 ➢Progress Indicators:
 (e.g., spinners, progress bars) show the status of ongoing
operations or loading processes

7.Additional UI  to keep users informed about the app's activity.

 Visual cues that indicate the status of ongoing operations,
Components: such as loading screens or file downloads.
 Loading: Indicate that content or data is being fetched.
 Completion: Show progress towards completing a task.
 Examples: Progress bars, spinners, percentage indicators.
 ➢Toolbars:
 Positioned at the top or bottom of the screen,
 they contain actions or tools relevant to the current context or
7.Additional UI screen.

Components:  Located at the top or bottom of the screen:

 Actions: Provide quick access to relevant functions or
settings.
 Contextual Options: Change based on the current screen
or user activity.
 ➢Gestures:
 (e.g., swipe gestures, pinch-to-zoom) enable users to interact
with the app through intuitive touch-based movements for
8.Gesture navigation or manipulation of content.
 Essential for touch-enabled devices, gestures like tapping,
Controls: swiping, pinching, and long-pressing allow users to interact
with content and navigate through the app.
 Tapping: Select items or trigger actions.
 Swiping: Navigate between screens or content.
  It is a type of resource which gives definition on what is
drawn on the screen
 or how elements are placed on the device’s screen and
stored as XML files in the /res/layout resource directory for the
Designing application.
User  It can also be a type of View class to organize other controls.
Interfaces  Layout Managers are said to be extensions of the ViewGroup
class.
with Layouts  They are used to set the position of child Views within the UI
we are building.
 We can nest the layouts, and therefore we can create
arbitrarily complex UIs using a combination of layouts.
 There are many types of layout. Some of which are:
1.Linear Layout
Designing User
2.Absolute Layout
Interfaces with 3.Table Layout
Layouts 4.Frame Layout
5.Relative Layout
 Linear layout is further divided into
 horizontal and
 vertical layout.
It means it can arrange views in a single column or in a single
row.
A layout that organizes its children into a single horizontal or
vertical row.
It creates a scrollbar if the length of the window exceeds the
1.LINEAR length of the screen
LAYOUT
 The AbsoluteLayout enables you to specify the exact
location of its children.

<AbsoluteLayout

android:layout_width=”fill_parent” android:layout_height=”fill_parent”
2.Absolute xmlns:android=”http://schemas.android.com/apk/res/android” >
<Button
Layout android:layout_width=”188dp” android:layout_height=”wrap_content”
android:text=”Button” android:layout_x=”126px”
android:layout_y=”361px” />
</AbsoluteLayout>>
 TableLayout is a ViewGroup subclass, used to display the
child View elements in rows and columns.
The TableLayout groups views into rows and columns.
<TableLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_height=”fill_parent” android:layout_width=”fill_parent”
3.Table Layout >
<TableRow>

<TextView android:text=”User Name:” android:width =”120dp” />

<EditTextandroid:id=”@+id/txtUserName” android:width=”200dp”/>
</TableRow>
 RelativeLayout enforces to display elements in relations to
each other.
You can specify that, for instance, one UI element can be
said to be placed on the left of another element, or on the
bottom of another etc.
4.RelativeLayout Each UI element can also be positioned according to the
layout’s borders (e.g. aligned to the right)
RelativeLayout is a ViewGroup subclass, used to specify
the position of child View elements relative to each other
like (A to the right of B) or relative to the parent
4.RelativeLayout
 The FrameLayout is a placeholder on screen that you can
use to display a single view.
5.Frame Layout FrameLayout is a ViewGroup subclass, used to specify the
position of View elements it contains on the top of each
other to display only a single View inside the FrameLayout.
6.Android List ListView is a ViewGroup, used to display scrollable lists of
Layout items in a single column.
 List View is a ViewGroup, used to display scrollable lists of
items in a single GridView of rows and columns.
It was introduced in Android 4.0,
7.Android Grid  the Grid Layout used a rectangular grid of infinitely thin
Layout lines to layout Views in a series of rows and columns.
The Grid Layout is incredibly flexible
 and can be used to greatly simplify layouts and
 reduce or eliminate the complex nesting.
 View Description
layout_width Specifies the width of the View or ViewGroup

layout_height Specifies the height of the View or ViewGroup

Other layout_marginTop Specifies extra space on the top side of the View or
ViewGroup
Attributes That
layout_marginBottom Specifies extra space on the bottom side of the View
are Common or ViewGroup
in all Views and layout_marginLeft Specifies extra space on the left side of the View or
ViewGroup
Viewgroups layout_marginRight Specifies extra space on the right side of the View or
ViewGroup
layout_gravity Specifies how child Views are positioned

layout_weight Specifies how much of the extra space in the layout

should be allocated to the View
  Animation is the process of adding a motion effect to
any view, image, or text.
 With the help of an animation, you can add motion or
can change the shape of a specific view.
 Animation in Android is generally used to give your UI a
rich look and feel.
Drawing and The animations are basically of three types as follows:
1.Property Animation
Working with
2.View Animation
Animation 3.Drawable Animation

Methods Description
startAnimation() This method will start the animation.
This method will clear the animation
clearAnimation() running on a specific view.
  Property Animation is one of the robust frameworks
which allows animation almost everything.
 This is one of the powerful and flexible animations
which was introduced in Android 3.0.
1.Property
 Property animation can be used to add any
Animation animation in the
 CheckBox,
 RadioButtons, and
 widgets other than any view.
  View Animation can be used to add animation to a
specific view to perform tweened animation on views.
 Tweened animation calculates animation information
such as size, rotation, start point, and endpoint.

2.View  These animations are slower and less flexible.

 Tweed animation refers
Animation  to the process of creating smooth transitions
between keyframes
 by generating intermediate frames, called
"inbetweens,"
 to give the illusion of movement.
  Drawable Animation is used if you want to animate
one image over another.
3.Drawable  The simple way to understand is to animate drawable
Animation  is to load the series of drawable one after another to
create an animation.
 A simple example : apps logo animation.
 1. Fade In Animation
2. Fade Out Animation
3. Cross Fading Animation
4. Blink Animation
Types of 5. Zoom In Animation
Android 6. Zoom Out Animation
Animation 7. Rotate Animation
8. Move Animation
9. Slide Up Animation
10. Slide Down Animation
11. Bounce Animation
End of Chapter 3