Lecture_On_AndroidApp_UserInterface.pptx

Mobile Design Principal
Lecture # 2
Instructor : Rida Zahra

This Week’s Topics
• Mobile Design Principal Designing for multiple screens Density
Independent Pixels
• Match parent & wrap content Property
• Layouts (Relative, Linear, Grid, Absolute, Nested) Types of
Views/widgets
• View group, adaptive views Material Design

CLO 1
• 1. Discuss Android fundamentals, including development tools, design
principles, and app components' lifecycle.

Designing for Multiple Screens
 Diverse range of sizes, densities, and proportions for Android devices
 Different images for different resolution screens
 Different screen layouts for screens of different sizes and proportions
 Tablet can fit more UI components than phones
 Adaptive UI
 Fragments
 Separate UI flow for different devices
 Orientation changes
 Screen orientation stays static regardless of device orientation
 Different UI layouts for different orientations

Density-Independent Pixel
• What does Density-Independent Pixel actually mean? You might be
familiar with a pixel, which is a small illuminated area on a screen.
Screens are essentially made up of hundreds of thousands of these
pixels.
• So what is a "density independent" pixel? Well, better screens will
often have more pixels in the same amount of space. The number of
pixels in a fixed space is known as the screen's pixel density. In case
you're wondering, 48dp translates to approximately 9mm in physical
size

Match Parent and Wrap Content
 Allows for flexible adaptive
object sizing in screen layouts
 Match parent (match_parent)
– expand view to match the
size of its parent view
 Wrap content (wrap_content)
– set width and height of the
view to the minimum size
necessary to fit the content
contained within the view

Layouts
• Layout – view component that defines a visual structure for a user
interface and can enforce rules or ordering for its children views.

Relative and Linear Layouts
• Relative layout (RelativeLayout) – a layout
that arranges its child views in relative
positions to each other (view a below view
b, view c to the right of view a, view d align
left with view b, etc)
• Linear layout – a layout that orders its child
views in a given direction (vertically or
horizontally) based upon their child
reference ordering.

Grid Layout
Lays out widgets/views in lines of rows and columns
•Orientation attribute defines row-major or column-major order
•Introduced in Android4;replaces olderTableLayout by default, rows
and columns are equal in size
•Grid of 4 rows, 3columns:

Views & view Groups
Android UI

Views
 Basic UI building blocks
 Arranged in a window in a single View tree
 Assigned a rectangular area on the screen
 Responsible for
 Drawing itself
 Dealing with event handling
 Has one of three states of visibility
 Visible – The View is visible unless covered or obscured by
another object
 Invisible – The View is invisible, but still takes up space
 Gone – The View is invisible and does not take up space

How many views you can see in the layout
below?

Popular Views
Views
 TextView
 EditText
 Button
 RadioButton
 CheckBox
 Switch
 ImageView
 WebView
 ViewStub
ViewGroups
 ScrollView
 ViewPager
AdapterViews
 Spinner
 ListView
 GridView

ViewStub
 Lightweight View with no dimensions, invisible, and zero-sized
 Placeholder for Views that are rarely used
 Allows to load Views on demand for better performance
 Replaces itself with a specified View to be inflated in its place
 Assign the View to be inflated for the ViewStub by defining attribute
android:layout

ScrollView
 Layout container that can be scrolled by the user either horizontally
or vertically
 Useful when displaying large amounts of content on different size
screens
 Common to embed a LinearLayout of the same orientation in the
ScrollView
 Do not use with ListView because redundant

ViewPager
 Layout that allows user to flip left and right through pages of data
 Each page can consist of a separate view, most commonly Fragments

Text View & Edit Text
 The basic text editor class
 TextView – preconfigured to not be editable, but can be changed in
runtime or preconfigured
 EditText – a “thin veneer” over TextView that is preconfigured to be
editable

Text View
<TextView
android:id="@+id/title_text_view"
android:text="@string/my_photos"
android:textAppearance="?android:textAppearanceLarge"
android:textColor="#4689C8"
android:textStyle="bold" />

EditText
<EditText
android:id="@+id/plain_text_input”
android:inputType="text"/>

Image View
 UI component for displaying images.
 Can load images from various sources
 Deals with computing image measurements
 Allows for easy scaling of the image to fit defined area
 Allows for easy tinting of the image

Image View
<ImageView
android:id="@+id/photo_image_view"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/beach" />

CompoundButtons
 CompoundButtons are two state buttons that can either be checked or unchecked
 ToggleButton, Switch, Checkbox, RadioButton, and more derive from this abstract class
 When this type of button is pressed or clicked the state of the button changes automatically
ToggleButton Switch
RadioButtons in RadioGroup
CheckBox

Button
 Basic push button UI component
 Can contain text, icon, or both
 When icon it can be preferable to use the ImageButton
 Can configure on-click event handler in xml by defining onClick
attribute

Button View
<Button
android:id="@+id/next_button"
android:text="@string/next" />

Image button
• <ImageButton
• android:id="@+id/simpleImageButton"
• android:layout_width="wrap_content"
• android:layout_height="wrap_content"
• android:src="@drawable/home" />

Switch
• <Switch
• android:id="@+id/simpleSwitch"
• android:layout_height="wrap_content"/>

CheckBox
• Checkbox with text label
CheckBox

Checkbox
<CheckBox
android:id="@+id/notify_me_checkbox"
android:text="@string/notify_me"
/>

Radio Button
• Radio button (where you can select one out of a group of
radio buttons)

Radio Button
• <RadioGroup
• android:orientation="vertical">
• <RadioButton
• android:id="@+id/yes_radio_button"
• android:text="@string/yes"
• android:textAppearance="?
android:textAppearanceMedium" />
• <RadioButton
• android:id="@+id/no_radio_button"
• android:text="@string/no"
• android:textAppearance="?
android:textAppearanceMedium" />
• </RadioGroup>

Edit Text
• Text field that you can type into

Edit text
<EditText
android:id="@+id/album_description_view"
android:hint="@string/album_description"
android:inputType="textMultiLine" />

AdapterViews
 Includes: GridView, ListView, and Spinner
 View that has a set of items as children
 This set is determined and controlled by an Adapter
GridView ListView
Spinner

Layouts
• List View
• Displays a scrolling single
column list.
• Grid View
Displays a scrolling grid of
columns and rows.

Spinner
• Click on it to show a list of dropdown options

Spinner
<Spinner
android:id="@+id/sort_by_spinner"
android:layout_height="wrap_content" />

Rating Bar
<RatingBar
android:id="@+id/rating_bar"
style="?android:attr/ratingBarStyleSmall"
android:numStars="5"
android:rating="2.5"
android:stepSize="0.5" />

Switch
• On / off switch that you can drag right or left (or just tap to toggle
the state)

Switch
<Switch
android:id="@+id/backup_photos_switch"
android:text="@string/auto_backup_photos"
android:textAppearance="?android:textAppearanceSmall" />

WebView
A View that displays web pages
Highly customizable and controllable
 Enable/Disable JavaScript (disabled by default)
 Dynamically load urls from Java code in runtime
 Load content from local assets or remote sites
 Callbacks for
 Page loading progress
 Content loading errors
 Page finished loading
 New url load requests (allowing for overriding url loading requests)
 Form submission

Web View
• Displays web pages.
• <?xml version="1.0" encoding="utf-8"?>
<WebView
android:id="@+id/webview"
android:layout_width=“match_parent"
android:layout_height=“match_parent"
/>

Qualify Resources Examples
 Different graphics (drawable) resources based on screen resolution density
(dpi – dots per inch)
 drawable/ - default graphics resources for the application
 drawable-hdpi/ - graphics resources for the application for high-density screens
 Different string constants resources based on the locale currently set for the
user’s device
 values/strings.xml – default locale string resources for the application
 values-es/strings.xml – string resources for the application when locale is set to
Spanish
 values-fr/strings.xml – string resources for the application when locale is set to French

Material Design
 Introduced in Android version 5.0 Lollipop
 A “comprehensive guide for visual, motion, and interaction design across
platforms and devices”
 Adds a z property to views to represent the elevation of the view
 Focus on visual feedback on user actions including smooth intuitive transitions
between screens or UI elements
 Some backwards compatibility support via AppCompat v21 support library
 Simplified color design using color palettes with predefined colors for certain
elements like toolbars or action buttons
 https://material.io/design/

XML
 Extensible Markup Language (XML) is a markup language that defines a set of rules
for encoding documents in a format which is both human-readable and machine-
readable.
 Used in Android for defining
 UI layouts
 String constants
 Graphical assets (drawables)
 Content of menus
 Animations
 Styles and themes
 Color schemes
 Predefined values for Booleans, dimensions (padding, margins, etc), arrays,
and much more

Android Studio Layout Editor
 Allows for drag-and-drop style building of UI components
 Converts UI created in drag-and-drop to XML code
 Edit directly with XML code
 Preview UI component for multiple screen sizes, dimensions, and
proportions
 Built in localization support
 Preview UI on different Android versions

XML in Runtime
 When a layout xml asset is loaded, Android initializes each
component of the layout into a runtime object
 These initialized objects are retrievable in the Java code of our
application by calling findViewById(int) method from the Activity that
loaded the xml resource
 These resources are referenced by integers created in the auto
generated R.java file
 The R.java file creates the linkage between our xml code and our java
code in runtime

Margins and Padding
View Content
View
Other views
Margin left
Margin bottom
Margin top
Margin right
Margin
Padding
Padding top
Padding left
Padding right
Padding bottom

Weight attribute
• To evenly distribute the area in between elements android:weight
attribute is used.
• Most commonly it is used with linear layout.
• for horizontal orientation
• android:weight=“1” & android:height =“0”
• For vertical orientation
• Android: weight=“1” & android:width=“0”

Gravity
 An attribute that allows us to define an objects placement inside of its parent view
 Normally used with the attribute layout_ gravity in a child View of a LinearLayout
 Can be set to parameters:
 BOTTOM - Push object to the bottom of its container
 CENTER - Place the object in the center of its container in both the vertical and horizontal axis
 CENTER_HORIZONTAL - Place object in the horizontal center of its container
 CENTER_VERTICAL - Place object in the vertical center of its container
 END - Push object to x-axis position at the end of its container
 FILL - Grow the horizontal and vertical size of the object if needed so it completely fills its container
 LEFT - Push object to the left of its container
 RIGHT - Push object to the right of its container
 TOP - Push object to the top of its container
 Much more

Event Listeners
• Android ui

Event Listeners
 An interface that contains a callback method
 Called by Android framework when user interacts with a View

Event Listener Interfaces
 Include Listeners like:
 View.OnClickListener – Called when user touches or clicks a View
 View.OnLongClickListener – Called when user holds or long clicks a View
 View.OnFocusChangeListener – Called when user navigates onto or away
from a View
 View.OnKeyListener – Called when user is focused on a View and presses
or releases a hardware key
 View.onTouchListener – Called when user performs a press, a release, or
any movement gesture within the bounds of the View
 View.onCreateContextMenu – Called when a context menu is being build
as the result of a long click

Lecture_On_AndroidApp_UserInterface.pptx

More Related Content

Similar to Lecture_On_AndroidApp_UserInterface.pptx (20)

Recently uploaded (20)

Lecture_On_AndroidApp_UserInterface.pptx

Editor's Notes