CONTENTS

Unit No. Title Page No.

1.1. Introduction to Android Part-I 01

1.2. Introduction to Android SDK Part - II 15

2. User Interfaces 37

3. Storing and Retrieving Data 68

4. Graphics, Animation and Multimedia 100

5. Location and Sensors 111

6. Rest API Integration 142

7. Database Connectivity and Distributing Android Application 158

8. Open Source UX Tools 222

9. Creating a New Prototype 249

10. Identify and Describe the Objectives for UED Experiment 269

11. UX Design - For Web and Mobile Application 292

12. UX Evaluation 317

13. Developing Mobile Applications Based on UED Principles 334

❖❖❖❖
 Mobile Application and User Experience Design Lab
Syllabus
Sr.
Module Detailed Contents Hrs
No.
1 Introduction to The android platform, the layers of android, Four kinds of 04
Android android components, understanding the android Manifest.
xml file, creating an android application Introduction to
android SDK, Exploring the development environment

2 User interfaces Creating the activity, working with views, using resources 06
Working with intents and services, Different types of
layouts, components.
3 Storing and Using the file system, working with shared preferences, 10
Retrieving data persisting data to a database, Working with content
providers
4 Graphics and Drawing graphics in android, creating animations with 06
animation, androids graphics API, Playing audio & video, Capturing
Multimedia media
5 Location, Using Location Manager and Location Provider, working 04
Sensors with maps, Working with GPS, Bluetooth and Wi-Fi,
Integrating Google maps, services for push notification
Google ads.
6 REST API Using Async Task to perform network operations, 08
integration introduction to Htttp Url Connection and JSON,
performing network operations asynchronously, working
with Ok Http, Retrofit and Volley
7 Database SQLite Programming, Android database connectivity 08
connectivity and using SQLite , distribution options, packaging and testing
distributing the application, distributing applications on Google play
android application store

8 Open source Study of open source UX tools 02

UX tools
9 Creating new selecting device, defining prototype settings 02
prototype
10 Identify and a. Perform user research 08
describe the b. User requirement collection
objectives for c. User Requirement Analysis
UED d. Create User personas, user scenarios , customer
experiment journey maps
11 UX Design – for a. Conceptual Design- Site Maps 08
Web and Mobile b. Create Wireframe
application c. Create Screens, Widgets, Outlines
d. Setting properties
e. Ordering Screens, Screen Transition
f. Adding Actions & Triggers, Header & footer
12 UX Evaluation a. Set UX Goals 02
b. Perform UX Evaluation and Reporting
c. Usability Test
13 Mini project Developing mobile applications based on UED principles. 10
 Module1

1.1
INTRODUCTION TO ANDROID PART-I
Unit Structure
1.1.0 Objectives
1.1.1 Introduction
1.1.2 An Overview Android
1.1.2.1 Why android?
1.1.2.2 The android platform
1.1.2.3 Four kinds of android components.
1.1.2.4 Understanding the androidManifest.xml file.
1.1.3 Summary
1.1.4 Exercise
1.1.5 List of References

1.1.0 OBJECTIVES
After going through this unit, you will be able to:
● Introduction of Android.
● Why android?
● Features of Android
● Android Architecture
● Advantages and Disadvantages of Android
● Future scope and importance of Android
● Applications of Android Challenges of Android Development
● How to kick start with android easily?
● The android platform
● Four kinds of android components.
● Understanding the androidManifest.xml file.

1
 Mobile Application and 1.1.1 INTRODUCTION
User experience Design Lab
Android is an open-source operating system based on Linux with a Java
programming interface for mobile devices such as Smartphone (Touch
Screen Devices who supports Android OS) as well for Tablets too.
Android was developed by the Open Handset Alliance (OHA), which is
led by Google. The Open Handset Alliance (OHA) is a consortium of
multiple companies like Samsung, Sony, Intel and many more to provide
services and deploy handsets using the android platform.

1.1.2 AN OVERVIEW
1.1.2.1 Why android?
Android itself being widely used across the world makes it essential for
developers to choose android. There are other operating systems such as
IOS, Ti zen, etc. Most Apple smart phones use IOS as their mobile
operating system. Most of the smart phones available in the market use
Android as their operating system, making it available to more users.
It is not just why android is so essential, but several Android features
make android quite valuable for the current scenario.

Prerequisites of Android
There are not many prerequisites to start with Android Development.
However, before starting with android development, you should make sure
that you have gone through the following requirements. The prerequisites
can be listed as follows:
1. Java/Kotlin: You should have a basic knowledge of either Java or
Kotlin.
2. Database: If you have some knowledge of SQL and SQLite, then it’s
pretty good.
3. XML: A basic knowledge of XML is required.
4. OOP: Knowing the Object-Oriented Programming(OOP’s) concepts
would be an add-on and help you during app development.

Features of Android :
1. Most of the users in the world use android smart phones :
As discussed before, around 72% of the total users use android.
Moreover, this percentage may even rise in the coming years.
Considering this fact, it becomes essential for any company to develop
applications that are supported on android.

2
2. Interactive User Interface and efficient user experience : Introduction to Android Part I
Android provides exciting widgets and tools to make your creativity
and imagination turn into reality. Android developers keep on adding
exciting features and widgets to make the user interface quite
interactive and smooth. You can use these tools to make your design
and then publish that design.

3. Larger Community Support :

Google being the holder of Android, regularly updates forums, provides
stable releases and supports all budding developers. One can use their
developer guides, tools, and discussions to resolve their bugs and
developmental issues.
As the community is quite extensive and Android is open source, it is
easy to develop such exciting apps without any difficulty.

4. Easy to share your work and earn money :

Google provides flexibility in distributing the apps developed by
anyone. After one develops an app, he or she can quickly go to the
Google Play store to publish his/her app and then earn money. It
doesn’t stick to the Google Play store. One can even share his/her app
through other app stores of other manufactures or even directly share
through any network.

5. Regular Updates and Security Fixes :

Google always tries to give its user the best experience and security. To
maintain such standards, google updates android to its latest stable
version with the least to often no bugs and security issues. Therefore,
one can assure safety while working on the stable versions of android.

Android Architecture :
Any Operating System has its architecture to carry on various
functionalities. Similarly, android has its architecture. The android
architecture gives us an idea about its design and the build. The
architecture can be subdivided into further categories as below:
1. Linux Kernel
2. Libraries
3. Android Runtime
4. Application Framework
5. Applications

3
 Mobile Application and 1. Linux Kernel :
User experience Design Lab
Linux Kernel carries all the drivers for the low-level devices like Audio
Driver, Wi-Fi Driver, Flash Memory Driver, Bluetooth driver, Camera
Driver, Keypad Driver, etc. It is also the abstract layer of android.

2. Libraries :
There are several libraries to provide various functionality for purposes
like android development. These libraries are written in C/C++ and are
an essential part of architecture.

3. Android Runtime :
It provides us with an environment for executing and debugging our
android applications.

4. Application Framework :
It has many packages in it which are implemented in Java.

5. Applications :
At the top level of the architecture, you have the applications.
Applications can be of system or user or even kept by the OEM
manufacturers. Phone, Messaging, Camera, Gallery, etc., are some of
the standard applications present in any android device.

Advantages of Android
There are a lot of advantages of Android, and the following are some of
them:

1. Community Support :
Google being the developer and supporter of Android, always provides
necessary community support and has discussion forums to clear
issues.

2. Predefined Layouts and widgets :

Google’s Android Studio provides features like predefined layouts and
widgets, making our task more manageable.

3. Fragment Support :
Android has fragments using which we need not create multiple
activities. Using one single activity, we can perform several tasks.
One such example is Whatsapp, where we see a single activity
containing a trio of Chats, Status, and Calls.

4. Broad Segment of Users :

In the whole world, we know that most often, people have an android
device.
4
5. Easy Publishing : Introduction to Android Part I
You can publish any of your developed apps on the Google Play Store
and start your venture.

6. Immense Support :
Almost all devices can support Android as an operating system.

7. Multitasking :
Android enables multitasking for the users.

Disadvantages of Android
There are few disadvantages related to android that can be listed as
follows:

1. Low Security :
Often, we see android apps getting breached or hacked and people’s
data getting leaked. However, at its best, Google is always coming up
with security patches and resolving such issues.

2. Testing :
Sometimes, testing an android app is ridiculous as its performance or
state may vary from device to device and even at different Android
versions.

3. Power Consumption :
Android as an operating system consumes more power.

4. Lost Tracks :
With the coming up of new android versions, it becomes pretty
challenging to adapt yourself to new Android SDK tools.

5. Restrictions :
Sometimes, there are restrictions on developers to follow the new
standards for their existing applications. Failing to do so makes your
existing app depreciated.

Applications of Android
You would be discussing various types of applications related to android.
Android helps us to make our life easier and simpler. There are multiple
kinds of applications solving numerous varieties of issues. Whether it’s
navigation, messaging, lifestyle, social media, weather, finance, food
ordering, travel, games, etc.

5
 Mobile Application and Some of the most common applications are as follows:
User experience Design Lab
1. Navigation :
You have apps like Google Maps, which help us locate ourselves and
find a route to visit the desired location.

2. Lifestyle :
You have apps like Cult. Fit and Step Set Go helps you track your
fitness, how many calories you are burning, and how many walking
steps you are walking daily.

3. Messaging :
There are apps like Whats app, Telegram, etc., which help us message
any individual or a group of people together.

4. Travel :
You have apps like Make My Trip, Red Bus, etc., making our travel
booking, hotel book, or other amenities very easy and at our fingertips.

Challenges of Android Development

There can be several challenges which you can face while starting with
Android App Development. These are easily track able, and you can easily
overcome these challenges by practicing more and developing more apps.
Many developers often face these challenges while developing apps for
android. However, as beginners, we always tend to overlook or ignore
these challenging points and create a less secure app, does not fit the
user’s window or even crashes now and then.
To save yourself, you should always focus on the following points while
working on Android.

1. Security :
While developing an app, you should ensure that both user and system
data are secure on the user’s device.

2. Compatibility :
You should develop an app that can work on most Android versions.
Not all people have the latest versions of Android running on their
devices; hence making a supportive app would help you target a more
significant user section.

3. Performance :
You should always try to develop an app that is responsive and doesn’t
lag. Many users don’t have high-performance devices with greater
RAM or memory space. So you should make sure that your app doesn’t
occupy much memory and doesn’t create many junks.
6
4. Screen Variants : Introduction to Android Part I
Your app should be adaptive enough to adapt to any screen size or
resolution. Some people may run your app on their tablets or their
wide-screen smart phones. So your app should fit into those screen
variants.

5. Comments :
You should always try to comment on your codes and work so that if
anyone wants to add any feature in your application in the future, then
they can easily understand what changes they need to make and where.

Future scope and importance of Android

Android is one of the widely used operating systems that require
developers who can develop applications that can work on android.
Therefore, it can be a future job market for the guys who know Android
Development. With time, the number of users would increase in android,
which will lead to a higher need for android developers.
Therefore, learning android may help you launch your career by creating
your own company and reaching the maximum users globally with that
app.

How to start with android easily?

There are not many prerequisites to start with Android. However, for any
android developer, he should know some basic knowledge about what an
android is, how it works and what architecture it has. Now comes which
programming language you should study to proceed with android. So it
depends on the IDE or framework you choose to work.
Nowadays, many IDEs(Integrated Development Environment) and tools
help us develop apps for android. The most common being:
1. Android Studio
2. Flutter
Several other frameworks help us in building android apps like
1. React Native
2. Ionic
Among these, the most common and widely used is the Android Studio.
Android Studio gives you many features straight from designing your
layouts to providing the functionalities. You would get an environment
where you can write/debug your code and generate an APK published on
Google Play Store.
Android Studio is one of the common IDEs for Android development.
You can use it after gathering basic knowledge of XML and Java or
7
 Mobile Application and Kotlin. On the other hand, Kotlin is one of the most popular general-
User experience Design Lab purpose languages evolving in recent times.

1.1.2.2 The android platform

What Does Android Platform Mean?
The Android platform is a platform for mobile devices that uses a
modified Linux kernel. The Android Platform was introduced by the Open
Handset Alliance in November of 2007. Most applications that run on the
Android platform are written in the Java programming language.
The Android Platform was launched in 2007 by the Open Handset
Alliance, an alliance of prominent companies that includes Google, HTC,
Motorola, Texas Instruments and others. Although most of the
applications that run on the Android Platform are written in Java, there is
no Java Virtual Machine. Instead, the Java classes are first compiled into
what are known as Dalvik Executables and run on the Dalvik Virtual
Machine.
Android is an open development platform. However, it is not open in the
sense that everyone can contribute while a version is under development.
This is all done behind closed-doors at Google. Rather, the openness of
Android starts when its source code is released to the public after it is
finalized. This means once it is released anyone interested can take the
code and alter it as they see fit.
To create an application for the platform, a developer requires the Android
SDK, which includes tools and APIs. To shorten development time,
Android developers typically integrate the SDK into graphical user IDEs
(Integrated Development Environments). Beginners can also make use of
the App Inventor, an application for creating Android apps that can be
accessed online.

1.1.2.3 Four kinds of android components

Android Application Components with Implementation & Examples
In this part we will explain various Android Application Components used
in Android development. There are four basic components and some
additional application components, which we will learn in detail.
Android applications are developed using JAVA, Kotlin, and C++.
Application components are very essential for building Applications. They
work as an entry point for users or system to enter your application. There
are four different types of components. Each component has its own
purpose and distinct life cycle.
Android Application Components

8
The basic components of an Android application are: Introduction to Android Part I

1. Activities :
An activity is a class that is considered as an entry point for users that
represents a single screen. A messenger application might have an
activity that shows a new notification, another activity which reads
messages and another which composes a new message.
Each activity is independent of one another. For example – camera
application can be started in an email application to compose an email that
shares an image. The picture below depicts how each new activity adds an
item to back stack and how the current activity is destroyed and previous
activity is resumed.
To implement an activity, extend the Activity class in your subclass:
public class Main Activity extends Activity {
//code
}

2. Services :
A service is a component that runs in the background, it acts as an
invisible worker of our application. It keeps updating data sources and
activities. It also broadcasts intents and performs tasks when
applications are not active. An example of service is we can surf the
internet or use any other application while listening to music.
To execute services, extend the Services class in your sub-class:
public class My Service extends Services {
//code
}

3. Content Providers :
Content Provider is a component that allows applications to share data
among multiple applications. It hides the details of the database and can
be used to read and write private data of the application which is not

9
 Mobile Application and shared. It would be a mess to access data from other applications
User experience Design Lab without content providers.
For example – you can consider looking for contact details in contact list.
Or You might want photos from the gallery which are also provided by
Content Provider.
To implement this, extend Content Provider in your subclass:
public class Provider _Name extends Content Provider {
//code
}

4. Broadcast Receiver :
Broadcast Receiver is a component that responds to broadcast messages
from another application or the same system. It can also deliver
broadcasts to applications that are not running. For example – notify
the user that the battery is low. Android developers can use broadcast
messages in the application or outside the normal flow.
To implement this, extend Broadcast Receiver to your receiver:
public class Broadcast _Name extends Broadcast Receiver {
//code
}

Some additional components of an android application:

1. Intents :
It is an inter-application message passing framework for
communication between android components. It is also used for
transferring data between different Activities as well as to start a new
service and display a list of contacts in List View. Example – the
camera application sends an intent to the operating system when the
user decides to share a picture.

2. Widgets :
Widgets are variations of Broadcast Receivers and essential aspects
of home screen customization. They display data and allow users to
perform actions on them. There are various types of widgets:
● Information widget: These widgets display crucial information and
track how the information changes over time. Example – Clock widgets
and widgets that display weather and time information.
● Collection widget: As the name depicts, collection widgets are a
collection of information of the same type. Its use is for browsing
information and opening any one of the elements to view details.
10
 Example – music widgets, as we can skip pause and play music outside Introduction to Android Part I
the music application.
● Control widget: These widgets display functionalities and by using
them, the user can trigger from home screen without opening the
application. Example – pause and play the video outside the
application.
● Hybrid widget: These widgets combine features of all the other three
widgets. Example – music player widget is a control widget but it also
informs the user about which track is playing currently, which means it
is a combination of control and information thus it is termed as hybrid
widget.

3. Views
View is responsible for drawing and event handling. They are
rectangular elements on the screen. Some of the views are Edit Text,
Image View Button, Check Box and Image Button.
4. Notifications
It alerts users when the application is not visible or is inactive. This
alert flashes on the screen and then disappears. Example – Notification
of the new incoming message popped on the screen.

5. Fragments
A fragment is a portion of the total user interface. Users can combine
more than one fragment in a single activity and these fragments can be
reused in multiple activities. A fragment generally contains Views
and View Groups inside them.

6. Layout XML Files

Layout is the structure for the user interface in the application. XML
files provide different types of layouts for the different type of screen, it
also specifies which GUI component, an activity or fragment holds.

7. App APK files

Apk file is the package file format that contains the program’s code,
resources, assets. The Android operating system uses them for
installing mobile applications and middleware.

8. Resources
Resources in Android is for defining Images, texts, string values.
Everything is defined in the resource file and it can be referenced
within the source code. We will learn about Android Resources, in
detail in our next upcoming article on Resources.

11
 Mobile Application and 1.1.2.4 Understanding the androidManifest.xml file.
User experience Design Lab AndroidManifest.xml file in android
The AndroidManifest.xml file contains information of your package,
including components of the application such as activities, services,
broadcast receivers, content providers etc.
It performs some other tasks also:
 It is responsible to protect the application to access any protected parts
by providing the permissions.
 It also declares the android api that the application is going to use.
 It lists the instrumentation classes. The instrumentation classes provides
profiling and other informations. These informations are removed just
before the application is published etc.
This is the required xml file for all the android application and located
inside the root directory.
A simple AndroidManifest.xml file looks like this:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.javatpoint.hello"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="15" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
12
Elements of the AndroidManifest.xml file Introduction to Android Part I
The elements used in the above xml file are described below.
<manifest>
manifest is the root element of the AndroidManifest.xml file. It
has package attribute that describes the package name of the activity
class.
<application>
application is the subelement of the manifest. It includes the namespace
declaration. This element contains several subelements that declares the
application component such as activity etc.
The commonly used attributes are of this element
are icon, label, theme etc.
android:icon represents the icon for all the android application
components.
android:label works as the default label for all the application
components.
android:theme represents a common theme for all the android activities.
<activity>
activity is the subelement of application and represents an activity that
must be defined in the AndroidManifest.xml file. It has many attributes
such as label, name, theme, launchMode etc.
android:label represents a label i.e. displayed on the screen.
android:name represents a name for the activity class. It is required
attribute.
<intent-filter>
intent-filter is the sub-element of activity that describes the type of intent
to which activity, service or broadcast receiver can respond to.
<action>
It adds an action for the intent-filter. The intent-filter must have at least
one action element.
<category>
It adds a category name to an intent-filter.
1.1.3 SUMMARY
In this Introduction to Android Part I chapter, you learned about the Why
android?, Features of Android, Android Architecture Advantages and
Disadvantages of Android, Future scope and importance of Android,
Applications of Android ,Challenges of Android Development, How to
start with android easily?, The android platform, kinds of android
components we studied basic Android’s Application components and
some additional components used for android application development.

13
 Mobile Application and Also, we tried to explain each application component clearly ,
User experience Design Lab Understanding the androidManifest.xml file how and where to use it.
Along with that, you saw terminologies of Android Architecture. Still,
you had a doubt go through references and bibliography. In next chapter
Introduction to Android SDK Part II, we will learn about Android SDK .

1.1.4 EXERCISE
1) Explain Why android?
2) Explain Features of Android.
3) Explain Android Architecture
4) Write Advantages and Disadvantages of Android.
5) Write Future scope and importance of Android.
6) Write Applications of Android Challenges of Android Development
7) Explain how to kick start with android easily?
8) Explain the android platform.
9) Explain Four kinds of android components.
10) Explain androidManifest.xml file.
1.1.5 LIST REFERENCES
1) www.tutlane.com/tutorial/android/android-introduction
2) https://www.javatpoint.com/android-tutorial
3) www.tutorialspoint.com/android/android_overview.htm
4) https://techvidvan.com/tutorials/android-introduction/
5) https://www.sciencedirect.com/topics/computer-science/android-
platform
6) https://developer.android.com/codelabs/build-your-first-android-app#1
7) https://data-flair.training/blogs/android-application-components/



14
 1.2
INTRODUCTION TO ANDROID SDK
PART II
Unit Structure
1.2.0 Objectives
1.2.1 Introduction
1.2.2 An Overview Android SDK
1.2.2.1 Introduction to android SDK
1.2.2.2 Exploring the development environment
1.2.2.3 Creating an android application
1.2.3 Summary
1.2.4 Exercise
1.2.5 List of References

1.2.0 OBJECTIVES
After going through this unit, you will be able to:
● Introduction of android SDK
● What is the Android SDK?
● Android SDK Features
● SDK Platform
● How to Install the Android SDK?
● What Are the Components of the Android SDK?
● Exploring the development environment
● Creating an android application

1.2.1 INTRODUCTION
Android SDK is a software development kit developed by Google for the
Android platform. The Android SDK allows you to create Android apps,
and you don't need to be an expert to use it. In this tutorial, I'll explain
what the Android SDK is and how to get started with it.

15
 Mobile Application and Android SDK comes bundled with Android Studio, Google's official
User experience Design Lab integrated development environment (IDE) for the Android operating
system

1.2.2 AN OVERVIEW ANDROID SDK

1.2.2.1 Introduction to android SDK
What Is the Android SDK?
The Android SDK is a collection of software development tools and
libraries required to develop Android applications. Every time Google
releases a new version of Android or an update, a corresponding SDK is
also released which developers must download and install. It is worth
noting that you can also download and use the Android SDK
independently of Android Studio, but typically you'll be working through
Android Studio for any Android development.
The Android SDK comprises all the tools necessary to code programs
from scratch and even test them. These tools provide a smooth flow of the
development process from developing and debugging, through to
packaging.
The Android SDK is compatible with Windows, macOS, and Linux, so
you can develop on any of those platforms.

Android SDK Features

Android SDK has a lot of amazing features. I’ve tried noting down most
of them. So, have a look!

● Offline Mapping :
SDK helps in dynamically downloading the maps for more than 190
countries in over 60 languages. You can view these offline. Also
dealing with the map styles and the touch gesture. This SDK also has
the ability to render raster tiles and map objects interleaved within
different map layers.
16
● Dynamic Markers : Introduction to Android SDK
Part II
In the previous versions, you could not have moved the position
without a fallback or re-adding the icon. But in the lastest edition, you
can update the position of the icon dynamically.
● Improvised API compatibility :
With the latest release, it is much easier to migrate from the Google
Maps Android API. This is another added advantage of using Android
SDK in your program.

1.2.2.2 Exploring the development environment

How to Install the Android SDK?
The Android SDK is optimized for Android Studio, and hence to
effectively reap its benefits, you will need to install Android
Studio. Having the Android SDK managed from within Android Studio is
easier since support for languages like Java, Kotlin, and C++ is handled
automatically. Not only that, but updates to the Android SDK are handled
automatically by Android Studio.
To install the Android SDK from within Android Studio, first start
Android Studio.
From the Android Studio start page, select Configure > SDK Manager.

If you already have Android Studio open, the SDK Manager icon is found
on the top right corner, as shown below.

17
 Mobile Application and Install the required Android SDK platform packages and developer tools.
User experience Design Lab A good start is to install:
Android SDK Build-Tools
Android Emulator
Android SDK Platform-Tools
Android SDK Tools
Documentation for Android SDK

Click Apply, and Android Studio will install the selected tools and
packages.

What Is the SDK Manager?

The Android SDK is composed of modular packages that you can
download, install, and update separately using the Android SDK Manager.
The SDK Manager helps to update new SDK releases and updates
whenever a new Android platform is released. The SDK manager can be
found in the top-right corner of the Android Studio screen, as shown
below.

All that is required to follow the instructions provided, and the updates
will be immediately downloaded to your environment.
18
What Are the Components of the Android SDK? Introduction to Android SDK
Part II
The Android SDK consists of an emulator, development tools, sample
projects with source code, and the required libraries to build Android
applications. Let's look at the key components one by one.

Android SDK Tools

Android SDK Tools is a component of the Android SDK. It includes a
complete set of development and debugging tools for Android, and is
included with Android Studio. The SDK Tools also consist of testing tools
and other utilities required to develop an app.

SDK Build Tools

Build tools are required for building components for building the actual
binaries for your Android app. Always ensure your build tools component
is up to date by downloading the latest version in the Android SDK
Manager.

SDK Platform-Tools
Android Platform-Tools are used to support the features for the current
Android platform and are necessary for Android app development. These
tools interface with the Android platform on the device you use for testing.
They include:
Android Debug Bridge (adb): This is a handy command-line tool that lets
you communicate with a device. The adb command allows you to perform
device actions, such as installing and debugging apps. It also provides
access to a Unix shell that you can use to run a variety of commands on a
device.
fastboot: This lets you flash a device with a new system image.
systrace: This tool helps collect and inspect timing information across all
processes running on your device at the system level. It's crucial for
debugging app performance.
SDK Platform-Tools are backward compatible, so you need only one
version of the SDK Platform-Tools.

SDK Platform
For each version of Android, there's one SDK Platform available. These
are numbered according to the Android version (e.g. Android 7 Nougat)
and an API version (e.g. API Level 24). Before you build an Android app,
you must specify an SDK Platform as your build target. Newer SDK
Platform versions have more features for developers, but older devices
may not be compatible with the newer platform versions.

19
 Mobile Application and Google APIs
User experience Design Lab
Google provides a number of exclusive Google APIs to make developing
your app easier. They also offer a system image for the emulator so you
can test your app using the Google APIs.

Android Emulator
The Android Emulator is a QEMU-based device-emulation tool that
simulates Android devices on your computer, allowing developers to test
applications on different devices and Android API levels, without needing
to have physical devices for each. The emulator comes with configurations
for various Android phones, tablets, Wear OS, and Android TV devices.
The Android emulator provides almost all of the capabilities of a real
Android device. You can perform the following activities:
simulate phone calls and text messages
simulate different network speeds
specify the location of the device
simulate hardware sensors such as rotation
access Google Play Store and much more
Often it is faster and easier to test your app with an emulator instead of
using a physical device.

Install Android
System Requirements
System requirements for Windows, Mac OS and Linux are given below.
Windows - Microsoft® Windows® 7/8/10 (32- or 64-bit)
3 GB RAM minimum, 8 GB RAM recommended; plus 1 GB for the
Android Emulator
2 GB of available disk space minimum,
4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and
emulator system image)
1280 x 800 minimum screen resolution
For accelerated emulator: 64-bit operating system and Intel® processor
with support for Intel® VT-x, Intel® EM64T (Intel® 64), and Execute
Disable (XD) Bit functionality
Mac - Mac® OS X® 10.10 (Yosemite) or higher, up to 10.12 (macOS
Sierra)

20
 3 GB RAM minimum, 8 GB RAM recommended; plus 1 GB for the Introduction to Android SDK
Android Emulator 2 GB of available disk space minimum Part II

4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and

emulator system image)
1280 x 800 minimum screen resolution
Linux - GNOME or KDE desktop
Tested on Ubuntu® 12.04, Precise Pangolin (64-bit distribution
capable of running 32-bit applications)
64-bit distribution capable of running 32-bit applications
GNU C Library (glibc) 2.19 or later
3 GB RAM minimum, 8 GB RAM recommended; plus 1 GB for the
Android Emulator
2 GB of available disk space minimum
4 GB Recommended (500 MB for IDE + 1.5 GB for Android SDK and
emulator system image)
1280 x 800 minimum screen resolution
For accelerated emulator: Intel® processor with support for Intel® VT-x,
Intel® EM64T (Intel® 64), and Execute Disable (XD) Bit functionality, or
AMD processor with support for AMD Virtualization™ (AMD-V™).
(Source: https://source.android.com/source/requirements.html, CC:BY:
2.5)

Installation
Android supports java, c++, c# etc. language to develop android
applications. Java is the officially supported language for android. All the
android examples of this site is developed using Java language and Eclipse
IDE.
Here, we are going to tell you, the required softwares to develop android
applications using Eclipse IDE.
There are two ways to install android.
1. By ADT Bundle
2. By Setup Eclipse Manually

1) By Android Studio(ADT Bundle)

It is the simplest technique to install required software for android
application. It includes:
o Eclipse IDE
21
 Mobile Application and o Android SDK
User experience Design Lab
o Eclipse Plugin
Link to download https://developer.android.com/studio
If you download the Android Studio from android site, you don't need to
have eclipse IDE, android SDK and eclipse Plugin because it is already
included in Android Studio.
If you have downloaded the Android Studio, unjar it, go to eclipse IDE
and start the eclipse by clicking on the eclipse icon. You don't need to do
any extra steps here.

2) By set up eclipse manually

Steps for setup Android for Eclipse IDE
In this page, you will learn what softwares are required for running an
android application on eclipse IDE. Here, you will be able to learn how to
install the android SDK and ADT plugin for Eclipse IDE. Let's see the list
of software required to setup android for eclipse IDE manually.
1. Install the JDK
2. Download and install the Eclipse for developing android application
3. Download and Install the android SDK
4. Intall the ADT plugin for eclipse
5. Configure the ADT plugin
6. Create the AVD
7. Create the hello android application

1) Install the Java Development Kit (JDK)

For creating android application, JDK must be installed if you are
developing the android application with Java language. download the JDK

2) Download and install the Eclipse IDE

For developing the android application using eclipse IDE, you need to
install the Eclipse. you can download it from this location download the
Eclipse. Eclipse classic version is recommended but we are using the
Eclipse IDE for JavaEE Developers.

3) Download and install the android SDK

Already explained in previous section How to Install the Android SDK?
Pleas go through

22
4) Download the ADT plugin for eclipse Introduction to Android SDK
Part II
ADT (Android Development Tools) is required for developing the android
application in the eclipse IDE. It is the plugin for Eclipse IDE that is
designed to provide the integrated environment.
For downloading the ADT, you need to follow these steps:
1) Start the eclipse IDE, then select Help > Install new software...
2) In the work with combo box, write https://dl-
ssl.google.com/android/eclipse/

3) select the checkbox next to Developer Tools and click next

4) You will see, a list of tools to be downloaded here, click next
5) click finish
6) After completing the installation, restart the eclipse IDE

5) Configuring the ADT plugin

After the installing ADT plugin, now tell the eclipse IDE for your android
SDK location. To do so:
1. Select the Window menu > preferences
2. Now select the android from the left panel. Here you may see a dialog
box asking if you want to send the statistics to the google.
Click proceed.
3. Click on the browse button and locate your SDK directory e.g. my
SDK location is C:\Program Files\Android\android-sdk .
4. Click the apply button then OK.
23
 Mobile Application and 6) Create an Android Virtual Device (AVD)
User experience Design Lab
For running the android application in the Android Emulator, you need to
create and AVD. For creating the AVD:
1. Select the Window menu > AVD Manager
2. Click on the new button, to create the AVD
3. Now a dialog appears, write the AVD name e.g. myavd. Now choose
the target android version e.g. android2.2.
4. click the create AVD

1.2.2.3 Creating an android application

How to make android apps
In this paragraph, you will know how to create the simple hello android
application. We are creating the simple example of android using the
Eclipse IDE. For creating the simple example:
You need to follow the 3 steps mentioned above for creating the Hello
android application.
1. Create the new android project
2. Write the message (optional)
3. Run the android application

Experiment 1. Hello World Android Application

First, here's a peek at what we'll be building. The completed Android hello
world application will look like this:

24
To create this simplest Android app, just follow along with the steps in Introduction to Android SDK
this tutorial. Part II

Create the App Project

Launch Android Studio, and you should see a welcome page, as shown
below.

On the welcome page above, click Start a new Android Studio

project. The next window presents the activities page, as shown below.

Create a Hello World Activity

Android Studio provides activity templates to help you get started. For the
Hello World project, choose Empty Activity and click Next.

25
 Mobile Application and An activity is a crucial component of any Android app. It provides a
User experience Design Lab screen with which users can interact to perform activities, such as making
a phone call, taking a photo, or sending a message. Each Activity has a
window in which to draw its user interface. The window typically fills the
screen, but it may be smaller than the screen and float on top of other
windows.

Configure the Hello World Project Details

We'll finish creating the project by configuring some details about its
name, location, and the API version it uses.

● Change the name of the application.

● Change the default Project location to your preferred directory or just
leave it as the default location.
● On the minimum API level, ensure that API 15: Android 4.0.3 Ice
Cream Sandwich is set as the Minimum SDK. This ensures that your
application runs on almost all devices.
Click Finish.

The Gradle Build System

Each time you create a new application, Android Studio creates a folder
for your projects and builds the project with its Gradle system. The Gradle
process may take a few moments. Gradle is Android's build system, which
is responsible for the compilation, testing, and deployment of code. It
makes it possible for the app to run on the device.

Explaining the Files in an Android App Project

26
Whenever you start a new project, Android Studio creates the necessary Introduction to Android SDK
folder structure and files for that app. Let's look at the different files Part II
involved in an Android app project.

The manifests Folder

The manifests folder contains the AndroidManifest.xml file. The
manifest file describes essential information about your application.

The java Folder

This folder contains the Java source code files. As you can see from the
editor window above, the MainActivity.java file contains the Java source
code for the app's main Activity.

The res Folder

This folder includes all non-code resources, such as:
● layouts: Layouts are XML files that define the architecture for the UI
in an Activity or a component of a UI. For example, in our application,
the activity_main.xml file corresponds to the main Activity.
● values: Contains the color, style, and string XML files for the
application.
● drawable: This is a catch-all for graphics that can be drawn on the
screen, e.g. images.
● build.gradle: This is an auto-generated file which contains details of
the app such as the SDK version, build tools version, application ID,
and more.

Coding the Hello World App

Now that you have a general view of the project structure, let's describe
the most critical component files that constitute the hello world
application.

27
 Mobile Application and The Default Main Activity
User experience Design Lab
The main activity is the first screen that will appear when you launch your
app.
Each Activity represents a screen of the Android app's user interface. Each
Activity has a Java (or Kotlin) implementation file and an XML layout
file.

The Default Main Activity Java Code

Below is the default Java code generated by the application for the main
activity.
package com.example.helloworldapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

You don't need to understand this code fully. A lot of it is boilerplate and
will be the same for any app. The code defines a Main Activity class and,
along with the on Create method, defines what happens when the Activity
is created. In this case, it simply initializes the view of the Activity with
the layout from the activity _main layout file.

The Default Layout XML File

XML files are used for layouts. The main Activity layout XML file is
found in the project's /app/src/main/res/layout directory. Layout files are
named after what they represent. For example, the Hello World
application has one layout, which is the activity_main.xml named after
the main Activity.
Here is the default activity_main.xml layout. It contains one text view
element, with the text Hello World!

28
 Introduction to Android SDK
Activity.xml Part II
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:
android="https://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Changing the Activity Layout

As you can see, we don't need to change much to complete our Hello
World app, but we'll make a small change so that the text stands out
better—we'll change the text colour and font size.

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:textSize="50dp"
android:textColor="#800000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
The Strings File
The strings.xml file provides text strings for your application. For
example, a default strings file looks like this:
29
 Mobile Application and STRINGS
User experience Design Lab <resources>
<string name="app_name">Hello World
Application</string>
</resources>
If you want to change your app name, you can do it here.

Running the Application

Connect your Android device to your computer with a USB cable. The
right connection type should show up as connected as a media device.
You'll also need developer options enabled on your device. If this is not
already enabled, follow these steps (this will work on most Android
devices):
● Open up the Settings menu on your Android phone and scroll to the
bottom.
● Tap About phone and scroll down again until you see the Build
number option.
● Tap the Build number multiple times. Soon, you should see a pop-up
that reads something similar to You are five taps away from being a
developer.
● Keep tapping until the pop-up says you're a developer.
● Go back to the main Settings > System > Advanced. Developer
options should be the second-last option. Turn the Developer options
on.
In Android Studio, navigate to the top menu and select Run 'app'.
Android Studio will show a dialog where you can choose which device to
run your Android app on. Choose your connected device and click
the OK button.
The Hello World application should now be running on your phone. From
here, you can make modify your app to whatever you want and add more
features.

30
 Introduction to Android SDK
Part II

Experiment 2. Android Button Example with Listener

Here, we are going to create two textfields and one button for sum of two
numbers. If user clicks button, sum of two input values is displayed on the
Toast.
We can perform action on button using different types such as calling
listener on button or adding on Click property of button in activity's xml
file.
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
//code
}
});
<Button
android:onClick="methodName"
/>
Drag the component or write the code for UI in activity_main.xml
First of all, drag 2 textfields from the Text Fields palette and one button
from the Form Widgets palette as shown in the following figure.

31
 Mobile Application and
User experience Design Lab

The generated code for the ui components will be like this:

File: activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="example.sumoftwonumber.MainActivity">
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="61dp"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="84dp"
tools:layout_editor_absoluteY="53dp" />
32
 <EditText Introduction to Android SDK
Part II
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="number"
tools:layout_editor_absoluteX="84dp"
tools:layout_editor_absoluteY="127dp" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText2"
android:layout_centerHorizontal="true"
android:layout_marginTop="109dp"
android:text="ADD"
tools:layout_editor_absoluteX="148dp"
tools:layout_editor_absoluteY="266dp" />
</RelativeLayout>
Activity class

Now write the code to display the sum of two numbers.

File: MainActivity.java
package example.sumoftwonumber;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

33
 Mobile Application and import android.widget.Button;
User experience Design Lab
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private EditText edittext1, edittext2;
private Button buttonSum;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
addListenerOnButton();
}
public void addListenerOnButton() {
edittext1 = (EditText) findViewById(R.id.editText1);
edittext2 = (EditText) findViewById(R.id.editText2);
buttonSum = (Button) findViewById(R.id.button);
buttonSum.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String value1=edittext1.getText().toString();
String value2=edittext2.getText().toString();
int a=Integer.parseInt(value1);
int b=Integer.parseInt(value2);
int sum=a+b;
Toast.makeText(getApplicationContext(),String.valueOf(sum),
Toast.LENGTH_LONG).show();
}
});
}
}
34
Output: Introduction to Android SDK
Part II

1.2.3 SUMMARY
In this Introduction to Android SDK II chapter, you learned about the
Introduction of android SDK , What is the Android SDK? Android SDK
Features, SDK Platform, How to Install the Android SDK?, What Are the
Components of the Android SDK?, Exploring the development
environment, Creating an android application. Along with that, you saw
terminologies of Android Architecture. Still, you had a doubt go through
references and bibliography.

1.2.4 EXERCISE
1) Write Introduction of android SDK.
2) What is the Android SDK?
3) Explain Android SDK Features.
4) Explain SDK Platform.
5) How to Install the Android SDK?
6) What Are the Components of the Android SDK?
7) Exploring the development environment.
8) Create an simple android application.
9) Create an User interface android application.

35
 Mobile Application and 1.2.5 LIST OF REFERENCES
User experience Design Lab
1) www.tutlane.com
2) https://www.javatpoint.com
3) www.tutorialspoint.com
4) https://techvidvan.com
5) https://www.sciencedirect.com
6) https://developer.android.com
7) https://code.tutsplus.com
8) https://data-flair.training



36
 Module:2

2
USER INTERFACES
Unit Structure :
2.1 Practical 1
2.1.1 Aim
2.1.2 Objective
2.1.3 Theory
2.1.4 Program 1: Activity
2.1.4.1 Output
2.1.5 Program 2: Intent and its type
2.1.5.1 Output
2.2 Practical 2 (Views and types of layouts)
2.2.1 Aim
2.2.2 Objective
2.2.3 Theory
2.2.4 Program 1: View and Linear Layout
2.2.4.1 Output
2.2.5 Program 2: Relative Layout
2.2.5.1 Output
2.3 Questions

2.1 PRACTICAL 1 (ACTIVITY, TYPES OF INTENT)

2.1.1 Aim:
Creating android program to demonstrate activity lifecycle and different
types of intent.

2.1.2 Objective:
The objective of this practical is to understand the concept of activity,
resources and different types of intent.

37
 Mobile Application and 2.1.3 Theory:
User experience Design Lab
Activity
● An activity represents a single screen with a user interface just like
window or frame of Java.
● Android activity is the subclass of Context Theme Wrapper class.
● Activity class is one of the very important parts of the Android
component.
● Any app whether it is small or big, it has at least one Activity class.
● An activity is the entry point for interacting with the user.
● Every activity contains the layout, which has a user interface to
interact with the user.
● As we know that every activity contains a layout associated with it,
so it can be said that activity class is the gateway, through which a
user can interact programmatically with UI.
● The 7-lifecycle method of Activity describes below:

Methods Description
On Create called when activity is first created.
On Start called when activity is becoming visible to the user.
On Resume called when activity will start interacting with the
user.
On Pause called when activity is not visible to the user.
On Stop called when activity is no longer visible to the user.
On Restart called after your activity is stopped, prior to start.
On Destroy called before the activity is destroyed.

Android Resources
● We must take care of various resources like static content that we
use in our code such as bitmaps, colors, layout definitions, user
interface strings, animation instructions, and more.
● These resources are always maintained separately in various sub-
directories under res/ directory of the project.

38
 User Interfaces

Intent
● Android uses Intent for communicating between the components of
an application and also from one application to another application.
● Intent are the objects which is used in android for passing the
information among Activities in an application and from one app to
another also.
● Intent is used for communicating between the Application
components and it also provides the connectivity between two apps.
● For example: Intent provides you to redirect your activity to another
activity on occurrence of any event. By calling, start Activity() you
can perform this task.

Types of Intent
Explicit Intent:
• Explicit Intents are used to connect the application internally.
• Explicit Intent work internally within an application to perform
navigation and data transfer.

Implicit Intent:
● In Implicit Intents we do need to specify the name of the component.
We just specify the Action which has to be performed and further this
action is handled by the component of another application.
● The basic example of implicit Intent is to open any web page.

39
 Mobile Application and 2.1.4 Program 1: Activity
User experience Design Lab
Program to demonstrate the life cycle of Activity.
1) To create your new Android project, click on Create New Project on
the Welcome to Android Studio window.
2) If you have a project already opened, select File > New > New Project.

3) In the Select a Project Template window, select Empty Activity and

click Next.

4) In the Configure your project window, complete the following:

● Enter "Activity Life Cycle" in the Name field.

● Enter "com. example. Activity Life Cycle " in the Package name field.
● If you'd like to place the project in a different folder, change
its Save location.
● Select either Java or Kotlin from the Language drop-down menu.
● Select the lowest version of Android you want your app to support in
the Minimum SDK field.
● If your app will require legacy library support, mark the Use legacy
android.support libraries checkbox.
● Leave the other option as it is.

5) Click on finish.

Code for activity_main.xml file

Note: Below is the default code of activity_main.xml file as we are
demonstrating lifecycle of an activity, we don’t require any user interface.
40
<?xml version="1.0" encoding="utf-8"?> User Interfaces
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java
package com.example.activitylifecycle;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Log.d("lifecycle","onCreate invoked");

41
 Mobile Application and
User experience Design Lab Toast.makeText(MainActivity.this,"Created",Toast.LENGTH_SHORT).s
how();
}
@Override
protected void onStart() {
super.onStart();
Log.d("lifecycle","onStart invoked");

Toast.makeText(MainActivity.this,"Start",Toast.LENGTH_SHORT).sho
w();
}
@Override
protected void onResume() {
super.onResume();
Log.d("lifecycle","onResume invoked");

Toast.makeText(MainActivity.this,"Resume",Toast.LENGTH_SHORT).s
how();
}
@Override
protected void onPause() {
super.onPause();
Log.d("lifecycle","onPause invoked");

Toast.makeText(MainActivity.this,"Pause",Toast.LENGTH_SHORT).sho
w();
}
@Override
protected void onStop() {
super.onStop();
Log.d("lifecycle","onStop invoked");

42
 User Interfaces
Toast.makeText(MainActivity.this,"Stop",Toast.LENGTH_SHORT).show
();
}
@Override
protected void onRestart() {
super.onRestart();
Log.d("lifecycle","onRestart invoked");

Toast.makeText(MainActivity.this,"Restart",Toast.LENGTH_SHORT).sh
ow();
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.d("lifecycle","onDestroy invoked");

Toast.makeText(MainActivity.this,"Destroy",Toast.LENGTH_SHORT).s
how();
}
}

2.1.4.1 Output:

43
 Mobile Application and on Create, on Start and on Resume methods are invoked.
User experience Design Lab

44
 User Interfaces

2.1.5 Program 2: Intent and its type

Program to demonstrate various types of intent.
First create a new project and named it as Intent Example.

Code for activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"

45
 Mobile Application and xmlns:app="http://schemas.android.com/apk/res-auto"
User experience Design Lab
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginRight="50dp"
android:layout_marginLeft="50dp"
tools:ignore="RtlHardcoded">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Intent Example"
android:layout_marginTop="40dp"
android:layout_marginBottom="30dp"
android:textAlignment="center"
android:textColor="@color/black"
android:textSize="30sp"
tools:ignore="SpUsage" />
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Explicit Intent Example"
android:layout_marginTop="40dp"
android:layout_marginBottom="30dp"/>

46
 <Button User Interfaces
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Implicit Intent Example"
android:layout_marginTop="40dp"
android:layout_marginBottom="30dp"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Component Tree

activity_main.xml in design mode

47
 Mobile Application and Code for MainActivity.java
User experience Design Lab
package com.example.intentexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.content.Intent;
import android.net.Uri;
public class MainActivity extends AppCompatActivity {
Button explicit_btn, implicit_btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
explicit_btn = (Button)findViewById(R.id.button);
implicit_btn = (Button) findViewById(R.id.button2);
//implement Onclick event for Explicit Intent
explicit_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(getBaseContext(),
MainActivity2.class);
startActivity(intent);
}
});
//implement onClick event for Implicit Intent
implicit_btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent1 = new Intent(Intent.ACTION_VIEW);
48
 intent1.setData(Uri.parse("https://www.wikipedia.org/")); User Interfaces
startActivity(intent1);
}
});
}
}

Now create a second activity in this project only and named it as

MainActivity2.
Code for activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity2">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This is Second Activity"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:textSize="50dp"
android:textColor="@color/black"/>
</androidx.constraintlayout.widget.ConstraintLayout>

49
 Mobile Application and Component Tree
User experience Design Lab

Activity_main.xml in design
mode

Code for MainActivity2.java

package com.example.intentexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity2 extends AppCompatActivity {
@Override

50
 protected void onCreate(Bundle savedInstanceState) { User Interfaces
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
}
}

2.1.5.1 Output:

When we click on Explicit Intent example button we will get the following
output:

51
 Mobile Application and When we click on Implicit Intent example button, we will get the
User experience Design Lab following output:

2.2 PRACTICAL 2 (VIEWS AND TYPES OF LAYOUT)

2.2.1 Aim:
Creating android program for registration form with different views and
linear layout and also creating android program for login page using
relative layout.

2.2.2 Objective:
The objective of this module is to understand the different types of views
available in android and also learn the importance of different layout.
2.2.3 Theory:
Android Views and View Groups
● All the interaction of a user with the Android application is through the
user interface (UI).
● Actually, an android application comprises combination and nesting of
Views-Group and Views Classes.

Views
● View is the basic building block of UI (User Interface) in android.
View refers to the android. view. View class, which is the super class
for all the GUI components like Text View, Image View, Button etc.

52
● It is a small rectangular box that can be Text View, Edit Text, or even a User Interfaces
button. It occupies the area on the screen in a rectangular area and is
responsible for drawing and event handling.
● View is a super class of all the graphical user interface components.
● Here we have some of the most commonly used android View classes:
Text View
Edit Text
Button
Image View
Image Button
Check Box
Radio Button
List View
Grid View
Date Picker
Spinner, etc
View Group
● A View Group is a subclass of the View Class and can be considered as
a super class of Layouts.
● It provides an invisible container to hold the views or layouts.
● View Group instances and views work together as a container for
Layouts.
● In other words we can say that View Group is a special view that can
hold other views that are often known as a child view.
● Following are certain commonly used subclasses for View Group:
Linear Layout
Relative Layout
Frame Layout
Grid View
List View

53
 Mobile Application and The relation between View and view Group is shown in the below figure:
User experience Design Lab
Android Layout
● Layout basically refers to the arrangement of elements on a page and
these elements are likely to be images, texts or styles.
● These are a part of Android Jetpack. They define the structure of
android user interface in the app, like in an activity.
● All elements in the layout are built with the help of Views and View
Groups.
● These layouts can have various widgets like buttons, labels, textboxes,
and many others.

Types of Layouts in Android

● Linear Layout
● Relative Layout
● Constraint Layout
● Table Layout
● Frame Layout
● List View
● Grid View
● Absolute Layout

The two most important layout in android is as follows:-

Linear Layout :
● Linear layout is used to place the elements in a linear manner. A Linear
manner means one element per line. This layout creates various kinds
of forms on Android. In this, arrangement of the elements is in a top to
bottom manner.
● This can have two orientations:
1. Vertical Orientation – It is the form in which the widgets such as
Text Views, and all are placed in a vertical manner.
2. Horizontal Orientation – It is the form in which the widgets such as
Text Views, and all in a horizontal manner.

Relative Layout :
● This layout is for specifying the position of the elements in relation to
the other elements that are present there.

54
● In the relative layout, alignment of the position of the elements to the User Interfaces
parent container is possible.
● To define it in such a way, we write the following:
android:layout_alignParentTop= “true”
android:layout_alignParentLeft= “true”
● If we write the above code, the element will get aligned on the top left
of the parent container.
● If we want to align it with some other element in the same container, it
can be defined is as follows:
android:layout_alignLeft= “@+id/element_name”
android:layout_below= “@+id/element_name”
● This will align the element below the other element to its left.

2.2.4 Program 1: View and Linear Layout

Android program to demonstrate use of different types of view and linear
layout (Vertical and Horizontal orientation).
1) To create your new Android project, click on Create New Project on
the Welcome to Android Studio window.
2) If you have a project already opened, select File > New > New Project.

3) In the Select a Project Template window, select Empty Activity and

click Next.

55
 Mobile Application and 4) In the Configure your project window, complete the following:
User experience Design Lab
● Enter "View Example" in the Name field.
● Enter "com. example. View Example" in the Package name field.
● If you'd like to place the project in a different folder, change
its Save location.
● Select either Java or Kotlin from the Language drop-down menu.
● Select the lowest version of Android you want your app to support in
the Minimum SDK field.
● If your app will require legacy library support, mark the Use legacy
android.support libraries checkbox.
● Leave the other option as it is.
5) Click on finish.
In this program we are going to use the following controls:
1. Image View
2. Text(Plain Text)
3. Text (E Mail)
4. Text (Phone)
5. Text View
6. Three Check Box
7. Radio Group with three Radio Button
8. Button
And we have used Linear Layout(Vertical) and linear Layout (Horizontal)
for arranging the various views.

Code for activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"

56
tools:context=".MainActivity"> User Interfaces
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp">
<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srcCompat="@drawable/register"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Your Name"
android:inputType="textPersonName"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
<EditText
android:id="@+id/editTextTextEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Your Email"

57
 Mobile Application and android:inputType="textEmailAddress"
User experience Design Lab
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
<EditText
android:id="@+id/editTextPhone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="Enter Your Phone Number"
android:inputType="phone"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Gender" />
<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<RadioButton
android:id="@+id/radioButton"

58
 android:layout_width="wrap_content" User Interfaces
android:layout_height="wrap_content"
android:text="Male" />
<RadioButton
android:id="@+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Female" />
<RadioButton
android:id="@+id/radioButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Other" />
</RadioGroup>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp">
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Education" />
<CheckBox
android:id="@+id/checkBox"
android:layout_width="wrap_content"

59
 Mobile Application and android:layout_height="wrap_content"
User experience Design Lab
android:text="HSC" />
<CheckBox
android:id="@+id/checkBox2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Graduation" />
<CheckBox
android:id="@+id/checkBox3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="PostGraduation" />
</LinearLayout>
<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Submit" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Component Tree

60
Activity_main.xml in design mode User Interfaces

Note: In this program we are only designing user interface and not
providing any functionality to it. That is why, writing java files is not
required.
As in this practical we have use Image View Control so for that first we
have to add image in drawable folder. Then that image will be displayed
on the Image View Control.
MainActivity.java (This is auto generated code, we can add our code as
per our program in this file)
package com.example.viewexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

61
 Mobile Application and 2.2.4.1 Output:
User experience Design Lab

2.2.5 Program 2: Relative Layout

Program to create login page with the help of relative layout
1. Create a new project
2. Select the language as java
3. select the API level of 26(android OREO 8.0)
4. Click on the ok button. Wait until UI displays.
5. Then clean the project. Because gradle may not build.
6. After that, we can see two code files. One is activity_main.xml and
MainActivity.java.
7. Go to the activity_main.xml file.
8. In that, we can see two modes. One is design mode and another one is
code mode. Then go to code mode.
9. And use the below code.
10. We do not need to change the default java code. Because we are not
performing any on Click activities.

Code for activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"

62
xmlns:app="http://schemas.android.com/apk/res-auto" User Interfaces
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout_editor_absoluteX="43dp">
<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/editTextTextPassword"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="99dp"
android:layout_marginEnd="103dp"
android:layout_marginBottom="56dp"
android:ems="10"
android:hint="Enter your User Name"
android:inputType="textPersonName" />
<EditText
android:id="@+id/editTextTextPassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@+id/button"
android:layout_alignParentStart="true"

63
 Mobile Application and android:layout_alignParentEnd="true"
User experience Design Lab
android:layout_marginStart="105dp"
android:layout_marginEnd="96dp"
android:layout_marginBottom="56dp"
android:ems="10"
android:hint="Enter Your Password"
android:inputType="textPassword" />
<Button
android:id="@+id/button"
android:layout_width="157dp"
android:layout_height="wrap_content"
android:layout_above="@+id/textView"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="127dp"
android:layout_marginEnd="127dp"
android:layout_marginBottom="32dp"
android:text="Login" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="37dp"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginStart="98dp"
android:layout_marginEnd="104dp"
android:layout_marginBottom="299dp"
android:text="Not Registered? Register Here" />

64
 </RelativeLayout> User Interfaces
</androidx.constraintlayout.widget.ConstraintLayout>

Component Tree

Activity_main.xml in design mode

65
 Mobile Application and Note: In this program we are only designing user interface and not
User experience Design Lab providing any functionality to it. That is why, writing java files is not
required.
MainActivity.java (This is auto generated code, we can add our code as
per our program in this file)
package com.example.relativelayoutexample;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

2.2.5.1 Output:

66
2.3 QUESTIONS User Interfaces

1. Which of the following layout in android aligns all children either

vertically or horizontally?
a) Relative Layout
b) Table Layout
c) Frame Layout
d) Linear Layout
2. What is the default value of the orientation attribute in Linear Layout?
a) Horizontal
b) Vertical
c) There is no default value of orientation attribute in Linear Layout
d) None of the above
3. View refers to the?
a) android. View. view class
b) android. view. View class
c) android. view class
d) android. View class
4. To display text which control you will use?
a) Edit Text
b) Text View
c) label
d) View Text
5. To embed a web browser in your activity which view you will use?
a) Rich Text View
b) Browser
c) Web View
d) None of the above


67
 3
STORING AND RETRIEVING DATA
Unit Structure
3.0 File System
3.0.1 Introduction
3.0.2 Android File System Hierarchy Explained
3.0.3 How to access The Roots Files In Android
3.1 Android – Shared Preferences
3.1.1 Introduction
3.1.2 Mode & description
3.2 Definition of Persistence

3.0 FILE SYSTEM

3.0.1 Introduction
Most people know that the file system structure of Android devices
shares some obvious similarities with Linux since it is a framework that
is built on top of the Linux kernel. However, the Android file system
structure does have some traits which are unique. Let’s explore the
Android File system hierarchy together.
Nevertheless, the thing that is common between them is that it lacks the
concept of drives or directories as you see in Windows. Instead, it uses
partitions in a single directory, sort of like a single tree with multiple
branches. Certain partitions of the file system can be explored by
using file managers, which lets you bring some semblance of order to
your files. This is especially useful since sometimes it can feel that
Android completely ignores conventional file storage practices, with
users often ending up with a massive jumbled mess of files.
Additionally, each partition has a certain function as well. So, let’s
explore the Android file system hierarchy in depth.

Table of Contents
3.0.2 Android File System Hierarchy Explained:
● /boot
● /system
● /recovery
68
● /data Storing And Retrieving Data
● /cache
● /misc
● /sdcard
● /sd-ext

Android File System Hierarchy Explained:

Under the Android file system, there are usually six main partitions
found on every device. Some devices may come with a couple of
additional partitions, those differ from model to model, but there are six
primary partitions that are found on every single Android device. These
include /boot, /system, /recovery, /data, /cache, and /misc. Additionally,
for external Android smart phone, there are two file system partitions –
/sdcard and /sd-ext. So, let’s break down each partition separately and
explore the Android File system hierarchy.

/boot
This partition consists of the Android kernel and the ram disk. Basically,
every single thing that is needed to boot your Android device when
powered on. You should only proceed to wipe this partition from
recovery if it is absolutely necessary. If you do, once the partition is
wiped, ensure to reboot the phone only after installing a new boot
partition. The new partition can be a /boot partition found in a ROM.

/system
The system partition accommodates the entire Android OS. This includes
the Android GUI as well as the system apps that come pre-installed on
Android devices. So, what happens if you wipe this partition? Well, you
can still boot the device. We will only be able to put our device into
recovery or boot loader mode.

/recovery
This partition is designed for backup and can be considered the
alternative boot option or partition in an Android device. It lets the
device boot into recovery mode where backing up data, wiping data,
restoring phone to factory settings, and performing other maintenance
operations.

/data
Also known as user data partition, this partition consists of all of the
user’s data, including contacts, settings, apps and messages. Wiping the
data partition will lead to storing your phone to factory settings, having
removed all of the apps, messages, and user settings from the Android
device.

69
 Mobile Application and /cache
User experience Design Lab
This partition stores the frequently accessed app data and components.
Wiping this partition will just clear the built-up cache, and the device
will simply go back to rebuilding it as you continue using it. Clearing
cache also frees up some space in your device and can also fix certain
issues at times.

/misc
This partition contains all the miscellaneous system settings, usually
on/off switches. The settings may include carrier or region ID, USB
configuration, and certain hardware setting. This partition is very
important since it can cause several device features to malfunction if the
partition becomes corrupt or goes missing. A missing /misc partition can
also cause the Android device to not boot at all.

/sdcard
This partition is the space that is available to users to store their files and
data. Depending on your device, you could even have more than one SD
card partition. If your device has an external SD card slot, then the / SD
card partition refers to the internal storage device, and the external SD
card will be assigned a different partition, either a new partition called
/sdcard2 or a separate directory within the / SD card partition itself such
as / SD card/sd. Wiping the partition with the external SID card storage is
completely safe, as long as you have backed up any important data or
documents you may have on it. Wiping the / SD card partition with the
external SD and storage is completely safe, as long as you have backed
up any important data or documents you may have on it. Wiping the / SD
card partition, however, results in wiping some system and app data and
settings, but it still doesn’t hinder the system’s boot processor
functionality.

/sd-ext
This is an additional partition of the SD card partition, which is only
present on some devices, typically ones that have custom ROMS or mods
on them. It can usually be used with certain ROMS that have special
features such as APP2SD+ or data2ext enabled. This is essentially a /data
partition of the / SD card and stores some user data and settings that are
typically stored on the /data partition. This is useful for devices with
limited internal memory.
Without rooting your device, Android users typically can only access the
data partition. The contents of this partition are what you will see in most
file managers or when you connect it to a PC. If you have an external SD
card attached to the device, you will also be able to view the contents of
it in this user-accessible data partition. If your phone doesn’t come
packing a decent file explorer or manager, you can simply install one of
the powerful third-party file manager available on the Play Store. You
can also browse your data files on PC via a USB connection. However,
70
ensure that your phone is in MTP (Media Transfer) or File Transfer Storing And Retrieving Data
mode.
Android also divides its storage into three distinct categories, which is
quite different from a PC’s file system layout. Here is how it divides its
storage: Device storage – This refers to the pool of storage you can work
with and access. You can even modify files in this storage area. Portable
SD card storage – This storage area is allocated to external SD cards.
You can load files into this and then insert them into your device. Device
root storage – Every Android device has a special file system where all
the root files are stored. This includes operating system files, sensitive
application data, system apps, and more. Users typically cannot modify
this file system for security and device safety reasons unless, of course,
they have root access.
In the most basic sense, ‘root’ refers to the topmost folder in the Android
file system. This would be the equivalent to the c:\ drive on Windows.
Unlike Windows, though, Android has built an invisible barrier about
halfway up the file system tree and only allows you to access certain files
before you hit this virtual wall, beyond which the root files lie. This is to
stop users from making irreversible or irreparable changes to critical OS
files.

3.0.3 How To Access The Root Files In Android?

If you have confidence in your software tweaking skills and want to
access system-level files, you will have to gain ‘root access’ to modify
these files. For that, you will need to do something probably everyone
has heard of – root your device and gain access to root files. There’s no
stopping the amount of tweaks you can apply to your phone. From
deleting bloat ware and unnecessary system apps to completely
overhauling your device’s system UI. You can over clock, under clock,
partition SD card memory, and change it into internal memory, install
custom ROMS, mods, and much much more. You can even install an
array of root apps that are capable of extraordinary functions such as
blocking all ads in every single app, hibernating background apps,
installing a custom recovery to flash ZIPS and create backups, and more.
To access these root files on your rooted device, you will need file
managers compatible with rooted devices. Some popular root file
managers examples include Root File Manager, Root Browser, Solid
Explorer File Manager, File Expert, and Root Explorer.
However, there is a way you can uninstall some bloat ware apps without
rooting your device. These apps would not typically be accessible to
users without root, but by using ADB commands, you can
actually uninstall bloat ware without having to root if you’re spooked by
the idea of rooting. This could be useful for you since most users want to
root primarily to eliminate annoying system apps and other bloat ware.

71
 Mobile Application and 3.1 ANDROID - SHARED PREFERENCES
User experience Design Lab
3.1.1 Introduction
Android provides many ways of storing data of an application. One of
this way is called Shared Preferences. Shared Preferences allow you to
save and retrieve data in the form of key, value pair.
In order to use shared preferences, you have to call a method get Shared
Preferences() that returns a Shared Preference instance pointing to the
file that contains the values of preferences.
Shared Preferences sharedpreferences =
getSharedPreferences(MyPREFERENCES, Context.MODE_PRIVATE);
The first parameter is the key and the second parameter is the MODE.
Apart from private there are other modes available that are listed below –

3.1.2 Mode & Description

Sr. Mode & description

No

1 MODE_APPEND
This will append the new preferences with the already existing
preferences

2 MODE_ENABLE_WRITE_AHEAD_LOGGING
Database open flag. When it is set , it would enable write ahead
logging by default

3 MODE_MULTI_PROCESS
This method will check for modification of preferences even if the
shared preference instance has already been loaded

4 MODE_PRIVATE
By setting this mode, the file can only be accessed using calling
application

5 MODE_WORLD_READABLE
This mode allow other application to read the preferences

6 MODE_WORLD_WRITEABLE
This mode allow other application to write the preferences

You can save something in the shared preferences by using Shared

Preferences. Editor class. You will call the edit method of Shared
Preference instance and will receive it in an editor object. Its syntax is −
72
Editor editor = sharedpreferences.edit(); Storing And Retrieving Data
editor.putString("key", "value");
editor.commit();
Apart from the put String method , there are methods available in the
editor class that allows manipulation of data inside shared preferences.
They are listed as follows −

Sr. Mode & description

NO

1 apply()
It is an abstract method. It will commit your changes back from
editor to the shared Preference object you are calling

2 clear()
It will remove all values from the editor

3 remove(String key)
It will remove the value whose key has been passed as a
parameter

4 Put Long(String key, long value)

It will save a long value in a preference editor

5 Put Int(String key, int value)

It will save a integer value in a preference editor

6 Put Float(String key, float value)

It will save a float value in a preference editor

73
 Mobile Application and Example
User experience Design Lab
Steps Description

1 You will use Android studio to create an Android application

under a package com .example. sairamkrishna.myapplication.

2 Modify src/MainActivity.java file to add progress code to

display the spinning progress dialog.

3 Modify res/layout/activity_main.xml file to add respective

XML code.

4 Run the application and choose a running android device and

install the application on it and verify the results.

This example demonstrates the use of the Shared Preferences. It display a

screen with some text fields, whose value are saved when the application
is closed and brought back when it is opened again.
To experiment with this example, you need to run this on an actual
device on after developing the application according to the steps below −
Following is the content of the modified MainActivity.java.

package com.example.sairamkrishna.myapplication;
import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
EditText ed1,ed2,ed3;
Button b1;
public static final String MyPREFERENCES = "MyPrefs" ;
public static final String Name = "nameKey";
public static final String Phone = "phoneKey";
public static final String Email = "emailKey";
SharedPreferences sharedpreferences;
@Override

74
 protected void onCreate(Bundle savedInstanceState) { Storing And Retrieving Data
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ed1=(EditText)findViewById(R.id.editText);
ed2=(EditText)findViewById(R.id.editText2);
ed3=(EditText)findViewById(R.id.editText3);
b1=(Button)findViewById(R.id.button);
sharedpreferences = getSharedPreferences(MyPREFERENCES,
Context.MODE_PRIVATE);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String n = ed1.getText().toString();
String ph = ed2.getText().toString();
String e = ed3.getText().toString();
SharedPreferences.Editor editor = sharedpreferences.edit();
editor.putString(Name, n);
editor.putString(Phone, ph);
editor.putString(Email, e);
editor.commit();

Toast.makeText(MainActivity.this,"Thanks",Toast.LENGTH_LONG).sh
ow();
}
});
}
}

75
 Mobile Application and Following is the content of the modified main activity
User experience Design Lab fileres/layout/activiy_main.xml.

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Shared Preference "
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="35dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tutorials Point"
android:id="@+id/textView2"
android:layout_below="@+id/textView"
android:layout_centerHorizontal="true"
android:textSize="35dp"
android:textColor="#ff16ff01" />

76
<EditText Storing And Retrieving Data

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/editText"
android:layout_below="@+id/textView2"
android:layout_marginTop="67dp"
android:hint="Name"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/editText2"
android:layout_below="@+id/editText"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:hint="Pass" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/editText3"
android:layout_below="@+id/editText2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"

android:layout_alignParentRight="true"

77
 Mobile Application and android:layout_alignParentEnd="true"
User experience Design Lab
android:hint="Email" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Save"
android:id="@+id/button"
android:layout_below="@+id/editText3"
android:layout_centerHorizontal="true"
android:layout_marginTop="50dp" />

</RelativeLayout>

Following is the content of the modified content of

file res/values/strings.xml.

<resources>
<string name="app_name">My Application</string>
</resources>

Following is the content default file AndroidManifest.xml.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.sairamkrishna.myapplication" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >

78
 <intent-filter> Storing And Retrieving Data

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
</application>

</manifest>

Let's try to run your application. I assume you have connected your
actual Android Mobile device with your computer. To run the app from
Android studio, open one of your project's activity files and click
Run icon from the toolbar. Before starting your application, Android
studio will display following window to select an option where you want
to run your Android application.

Select your mobile device as an option and then check your mobile
device which will display following screen −
Now just put in some text in the field. Like i put some random name and
other information and click on save button.

79
 Mobile Application and
User experience Design Lab

Now when you press save button, the text will be saved in the shared
preferences. Now press back button and exit the application. Now open it
again and you will see all the text you have written back in your
application.

3.2 DEFINITION OF PERSISTENCE

Persistence in databases refers to the ways in which processes or objects
can continue on, or remain, even when systems are shut down. Learn
more about the definition of persistence and explore two types of
persistence in databases: object persistence and process persistence.
Then, discover the importance of persistent data and consider some
examples of persistent databases.
Persistence denotes a process or an object that continues to exist even
after its parent process or object ceases, or the system that runs it is
turned off. When a created process needs persistence, non-volatile

80
storage, including a hard disk, is used instead of volatile memory like Storing And Retrieving Data
RAM.
For example, imagine that you're using the Chrome browser on the
Windows operating system and, due to some technical issues, the
browser process was shut down or killed. The browser restarts the next
time you open it and attempts to reopen any tabs that were open when it
crashed. A persistent process thus exists even if it failed or was killed for
some technical reasons. The persistent state is the state that remains even
after a process shuts down. Persistent process states are stored in
persistent storage (non-volatile storage like hard drives) before the
system fails or shuts down. They're easily retrieved once the system is
turned on. The core processes of the operating system must be persistent
for maintaining the data, device, or workspace in a similar state when the
system is switched on.

Types of Persistence
There are two types of persistence: object persistence and process
persistence. In data terms, object persistence refers to an object that is
not deleted until a need emerges to remove it from the memory. Some
database models provide mechanisms for storing persistent data in the
form of objects. In process persistence, processes are not killed or shut
down by other processes and exist until the user kills them. For example,
all of the core processes of a computer system are persistent for enabling
the proper functioning of the system. Persistent processes are stored in
non-volatile memory. They do not need special databases like persistent
objects.

Object Persistence in Databases

A persistent database stores persistent data in the form of objects, or
records that are durable when changing devices and software. Persistent
data is stable and recoverable. Traditional relational database
management systems (RDBMS) store persistent data in the form of
records and tables. However, they cannot store objects and their
relationships. Objects have necessary features (like encapsulation,
inheritance, persistence, and polymorphism) that do not translate well
into records and tables. Thus, certain special databases like object-
oriented database management systems (OODBMS) and object relational
database management systems (ORDBMS) are needed for storing objects
and preserving object persistence.

Persistent Data: Importance

Persistent data is important for several reasons. For example:
1. Persistent data is static and does not change with time (not dynamic).
2. Persistent data stores core information. For example, an organization's
financial data must be persistent.

81
 Mobile Application and 3. Persistent data cannot be deleted by external processes or objects until
User experience Design Lab the user deletes it, meaning it's stable.
4. Persistent data is time independent data. The data created by an
application or object continues to exist even after the parent
application or object has been deleted and remains accessible beyond
object boundaries, other processes, or transactions.
5. Persistent data remains in its original format. If data resides in volatile
memory, it's deleted once the process is closed. However, persistent
data stored in persistent databases, or non-volatile storage, continues
to reside there even after closing the program.
6. Persistent data is non-volatile in nature and can withstand power
outages.
7. Persistent data is recoverable data even after a system restarts or shuts
down.
8. Persistent data changes cannot be lost and will always be available for
access.

Persistent Databases: Examples

Data manipulated in a database can be persistent or transient. The
transient data inside a program or transaction will be lost once its parent
program or transaction terminates. Persistent data exists beyond the
lifetime of its parent program or transaction and is capable of surviving
transaction updates. Persistent databases are typically updated and
accessed across several transactions.
Content Providers in Android
In Android, Content Providers are a very important component that
serves the purpose of a relational database to store the data of
applications. The role of the content provider in the android system is
like a central repository in which data of the applications are stored, and
it facilitates other applications to securely access and modifies that data
based on the user requirements. Android system allows the content
provider to store the application data in several ways. Users can manage
to store the application data like images, audio, videos, and personal
contact information by storing them in SQLite Database, in files, or
even on a network. In order to share the data, content providers have
certain permissions that are used to grant or restrict the rights to other
applications to interfere with the data.

82
 Storing And Retrieving Data

Content URI
Content URI(Uniform Resource Identifier) is the key concept of
Content providers. To access the data from a content provider, URI is
used as a query string.
Structure of a Content
URI: content://authority/optionalPath/optionalID

Details of different parts of Content URI :

● content:// – Mandatory part of the URI as it represents that the given
URI is a Content URI.
● authority – Signifies the name of the content provider like contacts,
browser, etc. This part must be unique for every content provider.
● optional Path – Specifies the type of data provided by the content
provider. It is essential as this part helps content providers to support
different types of data that are not related to each other like audio and
video files.
● optional ID – It is a numeric value that is used when there is a need to
access a particular record.
If an ID is mentioned in a URI then it is an id-based URI otherwise a
directory-based URI.
Operations in Content Provider
Four fundamental operations are possible in Content Provider
namely Create, Read, Update, and Delete. These operations are often
termed as CRUD operations.
● Create: Operation to create data in a content provider.
● Read: Used to fetch data from a content provider.
● Update: To modify existing data.
83
 Mobile Application and ● Delete: To remove existing data from the storage.
User experience Design Lab
Working of the Content Provider
UI components of android applications like Activity and Fragments use
an object Cursor Loader to send query requests to Content
Resolver. The Content Resolver object sends requests (like create, read,
update, and delete) to the Content Provider as a client. After receiving a
request, Content Provider process it and returns the desired result. Below
is a diagram to represent these processes in pictorial form.

Creating a Content Provider

Following are the steps which are essential to follow in order to create a
Content Provider:
● Create a class in the same directory where the that Main Activity file
resides and this class must extend the Content Provider base class.
● To access the content, define a content provider URI address.
● Create a database to store the application data.
● Implement the six abstract methods of Content Provider class.
● Register the content provider in AndroidManifest.xml file
using <provider> tag.

84
Following are the six abstract methods and their description which are Storing And Retrieving Data
essential to override as the part of ContenProvider class:

Abstract
Method Description

A method that accepts arguments and fetches the

data from the
query() desired table. Data is retired as a cursor object.

To insert a new row in the database of the content

provider.
insert() It returns the content URI of the inserted row.

This method is used to update the fields of an

existing row.
update() It returns the number of rows updated.

This method is used to delete the existing rows.

delete() It returns the number of rows deleted.

This method returns the Multipurpose Internet Mail

Extension(MIME)
getType() type of data to the given Content URI.

As the content provider is created, the android

system calls
onCreate() this method immediately to initialise the provider.

Example
The prime purpose of a content provider is to serve as a central
repository of data where users can store and can fetch the data. The
access of this repository is given to other applications also but in a safe
manner in order to serve the different requirements of the user. The
following are the steps involved in implementing a content provider. In
this content provider, the user can store the name of persons and can
fetch the stored data. Moreover, another application can also access the
stored data and can display the data.

85
 Mobile Application and Note: Following steps are performed on Android Studio version 3.0
User experience Design Lab
Creating a Content Provider:
Step 1: Create a new project
1. Click on File, then New => New Project.
2. Select language as Java/Kotlin.
3. Choose empty activity as a template
4. Select the minimum SDK as per your need.

Step 2: Modify the strings.xml file

All the strings used in the activity are stored here.

● XML

<resources>
<string name="app_name">Content_Provider_In_Android</string>
<string name="hintText">Enter User Name</string>
<string name="heading">Content Provider In Android</string>
<string name="insertButtontext">Insert Data</string>
<string name="loadButtonText">Load Data</string>
</resources>

Step 3: Creating the Content Provider class

1. Click on File, then New => Other => Content Provider.
2. Name the ContentProvider
3. Define authority (it can be anything for
example “com.demo.user.provider”)
4. Select Exported and Enabled option
5. Choose the language as Java/Kotlin
This class extends the Content Provider base class and override the six
abstract methods. Below is the complete code to define a content
provider.

86
● Java Storing And Retrieving Data

● Kotlin
package com.example.contentprovidersinandroid;
import android.content.ContentProvider;
import android.content.ContentUris;
import android.content.ContentValues;
import android.content.Context;
import android.content.UriMatcher;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.database.sqlite.SQLiteException;
import android.database.sqlite.SQLiteOpenHelper;
import android.database.sqlite.SQLiteQueryBuilder;
import android.net.Uri;
import java.util.HashMap;
public class MyContentProvider extends ContentProvider {
public MyContentProvider() {
}
// defining authority so that other application can access it
static final String PROVIDER_NAME =
"com.demo.user.provider";
// defining content URI
static final String URL = "content://" + PROVIDER_NAME +
"/users";
// parsing the content URI
static final Uri CONTENT_URI = Uri.parse(URL);
static final String id = "id";
static final String name = "name";
static final int uriCode = 1;
static final UriMatcher uriMatcher;
private static HashMap<String, String> values;
static {
// to match the content URI
// every time user access table under content provider
uriMatcher = new UriMatcher(UriMatcher.NO_MATCH);
// to access whole table
uriMatcher.addURI(PROVIDER_NAME, "users", uriCode);
// to access a particular row
// of the table
uriMatcher.addURI(PROVIDER_NAME, "users/*", uriCode);
87
 Mobile Application and }
User experience Design Lab @Override
public String getType(Uri uri) {
switch (uriMatcher.match(uri)) {
case uriCode:
return "vnd.android.cursor.dir/users";
default:
throw new IllegalArgumentException("Unsupported URI: " +
uri);
}
}
// creating the database
@Override
public boolean onCreate() {
Context context = getContext();
DatabaseHelper dbHelper = new DatabaseHelper(context);
db = dbHelper.getWritableDatabase();
if (db != null) {
return true;
}
return false;
}
@Override
public Cursor query(Uri uri, String[] projection, String selection,
String[] selectionArgs, String sortOrder) {
SQLiteQueryBuilder qb = new SQLiteQueryBuilder();
qb.setTables(TABLE_NAME);
switch (uriMatcher.match(uri)) {
case uriCode:
qb.setProjectionMap(values);
break;
default:
throw new IllegalArgumentException("Unknown URI " + uri);
}
if (sortOrder == null || sortOrder == "") {
sortOrder = id;
}
Cursor c = qb.query(db, projection, selection, selectionArgs, null,
null, sortOrder);
c.setNotificationUri(getContext().getContentResolver(), uri);
return c;

88
 } Storing And Retrieving Data
// adding data to the database
@Override
public Uri insert(Uri uri, ContentValues values) {
long rowID = db.insert(TABLE_NAME, "", values);
if (rowID > 0) {
Uri _uri = ContentUris.withAppendedId(CONTENT_URI,
rowID);
getContext().getContentResolver().notifyChange(_uri, null);
return _uri;
}
throw new SQLiteException("Failed to add a record into " + uri);
}
@Override
public int update(Uri uri, ContentValues values, String selection,
String[] selectionArgs) {
int count = 0;
switch (uriMatcher.match(uri)) {
case uriCode:
count = db.update(TABLE_NAME, values, selection,
selectionArgs);
break;
default:
throw new IllegalArgumentException("Unknown URI " + uri);
}
getContext().getContentResolver().notifyChange(uri, null);
return count;
}
@Override
public int delete(Uri uri, String selection, String[] selectionArgs) {
int count = 0;
switch (uriMatcher.match(uri)) {
case uriCode:
count = db.delete(TABLE_NAME, selection, selectionArgs);
break;
default:
throw new IllegalArgumentException("Unknown URI " + uri);
}
getContext().getContentResolver().notifyChange(uri, null);
return count;
}
// creating object of database
89
 Mobile Application and // to perform query
User experience Design Lab private SQLiteDatabase db;
// declaring name of the database
static final String DATABASE_NAME = "UserDB";
// declaring table name of the database
static final String TABLE_NAME = "Users";
// declaring version of the database
static final int DATABASE_VERSION = 1;
// sql query to create the table
static final String CREATE_DB_TABLE = " CREATE TABLE " +
TABLE_NAME
+ " (id INTEGER PRIMARY KEY AUTOINCREMENT, "
+ " name TEXT NOT NULL);";
// creating a database
private static class DatabaseHelper extends SQLiteOpenHelper {
// defining a constructor
DatabaseHelper(Context context) {
super(context, DATABASE_NAME, null,
DATABASE_VERSION);
}
// creating a table in the database
@Override
public void onCreate(SQLiteDatabase db) {
db.execSQL(CREATE_DB_TABLE);
}
@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int
newVersion) {
// sql query to drop a table
// having similar name
db.execSQL("DROP TABLE IF EXISTS " + TABLE_NAME);
onCreate(db);
}
}
}

Step 4: Design the activity_main.xml layout

One Textview, EditZText field, two Buttons, and a Text view to
display the stored data will be added in the activity using the below
code.

90
● XML Storing And Retrieving Data

android:layout_marginBottom="40dp"
android:fontFamily="@font/roboto"
android:hint="@string/hintText" />
<Button
android:id="@+id/insertButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#4CAF50"
android:fontFamily="@font/roboto"
android:onClick="onClickAddDetails"
android:text="@string/insertButtontext"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.D
isplay1"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<Button
android:id="@+id/loadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#4CAF50"
android:fontFamily="@font/roboto"
android:onClick="onClickShowDetails"
android:text="@string/loadButtonText"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.D
isplay1"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="@+id/res"
android:layout_width="match_parent"
91
 Mobile Application and android:layout_height="wrap_content"
User experience Design Lab android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:clickable="false"
android:ems="10"
android:fontFamily="@font/roboto"
android:textColor="@android:color/holo_green_dark"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@drawable/banner" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 5: Modify the MainActivity file

Button functionalities will be defined in this file. Moreover, the query to
be performed while inserting and fetching the data is mentioned here.
Below is the complete code.

● Java
● Kotlin
package com.example.contentprovidersinandroid;
import androidx.appcompat.app.AppCompatActivity;
import android.content.ContentValues;
import android.content.Context;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;
92
 public class MainActivity extends AppCompatActivity { Storing And Retrieving Data
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
InputMethodManager imm =
(InputMethodManager)getSystemService(Context.INPUT_METHO
D_SERVICE);
imm.hideSoftInputFromWindow(getCurrentFocus().getWindow
Token(), 0);
return true;
}
public void onClickAddDetails(View view) {
// class to add values in the database
ContentValues values = new ContentValues();
// fetching text from user
values.put(MyContentProvider.name, ((EditText)
findViewById(R.id.textName)).getText().toString());
// inserting into database through content URI
getContentResolver().insert(MyContentProvider.CONTENT_U
RI, values);
// displaying a toast message
Toast.makeText(getBaseContext(), "New Record Inserted",
Toast.LENGTH_LONG).show();
}
public void onClickShowDetails(View view) {
// inserting complete table details in this text field
TextView resultView= (TextView) findViewById(R.id.res);

// creating a cursor object of the

// content URI
Cursor cursor =
getContentResolver().query(Uri.parse("content://com.demo.user.provider
/users"), null, null, null, null);

// iteration of the cursor

// to print whole table
if(cursor.moveToFirst()) {
StringBuilder strBuild=new StringBuilder();
while (!cursor.isAfterLast()) {
93
 Mobile Application and strBuild.append("\n"+cursor.getString(cursor.getColumnIndex(
User experience Design Lab "id"))+ "-"+ cursor.getString(cursor.getColumnIndex("name")));
cursor.moveToNext();
}
resultView.setText(strBuild);
}
else {
resultView.setText("No Records Found");
}
}
}

Step 6: Modify the AndroidManifest file

The Android Manifest file must contain the content provider name,
authorities, and permissions which enables the content provider to be
accessed by other applications.

● XML
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.content_provider_in_android">
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<provider
android:name="com.example.contentprovidersinandroid.MyCont
entProvider"
android:authorities="com.demo.user.provider"
android:enabled="true"
android:exported="true"></provider>
<activity android:name=".MainActivity">
94
 <intent-filter> Storing And Retrieving Data
<action android:name="android.intent.action.MAIN" />
</manifest>

Creating another application to access the Content Provider:

Step 1: Create a new Project
1. Click on File, then New => New Project.
2. Select language as Java/Kotlin.
3. Choose empty activity as a template
4. Select the minimum SDK as per your need.

Step 2: Modify strings.xml file

All the strings used in the activity are stored in this file.

● XML

<resources>
<string name="app_name">Accessing_Content_Provider</string>
<string name="heading">Accessing data of Content Provider</string>
<string name="loadButtonText">Load Data</string>
</resources>

Step 3: Designing the ctivity_main.xml layout

Two Text View is added in the activity, one for heading and one to
display the stored data in a content provider. One Button is also added to
receive the command to display data. Below is the code to implement
this design.

● XML
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
95
 Mobile Application and android:layout_width="match_parent"
User experience Design Lab
android:layout_height="match_parent"
android:background="#168BC34A"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="@+id/imageView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.13"
tools:ignore="MissingConstraints">
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
android:layout_marginBottom="70dp"
android:fontFamily="@font/roboto"
android:text="@string/heading"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@android:color/holo_green_dark"
android:textSize="36sp"
android:textStyle="bold" />

96
 <Button Storing And Retrieving Data
android:id="@+id/loadButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:layout_marginEnd="20dp"
android:layout_marginBottom="20dp"
android:background="#4CAF50"
android:fontFamily="@font/roboto"
android:onClick="onClickShowDetails"
android:text="@string/loadButtonText"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.
Display1"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<TextView
android:id="@+id/res"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginEnd="20dp"
android:clickable="false"
android:ems="10"
android:fontFamily="@font/roboto"
android:textColor="@android:color/holo_green_dark"
android:textSize="18sp"
android:textStyle="bold" />

97
 Mobile Application and </LinearLayout>
User experience Design Lab
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@drawable/banner" />
</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Modify the MainActivity file

The Content URI of the previous application is mentioned here and the
same functions which were used in the previous app to display the
records will also be used here. Below is the complete code:

● Java
● Kotlin
package com.example.accessingcontentprovider;
import androidx.appcompat.app.AppCompatActivity;
import android.database.Cursor;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
Uri CONTENT_URI =
Uri.parse("content://com.demo.user.provider/users");
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
98
 } Storing And Retrieving Data
public void onClickShowDetails(View view) {
// inserting complete table details in this text field
TextView resultView= (TextView) findViewById(R.id.res);
// creating a cursor object of the
// content URI
Cursor cursor =
getContentResolver().query(Uri.parse("content://com.demo.user.provider
/users"), null, null, null, null);
// iteration of the cursor
// to print whole table
if(cursor.moveToFirst()) {
StringBuilder strBuild=new StringBuilder();
while (!cursor.isAfterLast()) {
strBuild.append("\n"+cursor.getString(cursor.getColumnIndex(
"id"))+ "-"+ cursor.getString(cursor.getColumnIndex("name")));
cursor.moveToNext();
}
resultView.setText(strBuild);
}
else {
resultView.setText("No Records Found");
}
}
}



99
 4
GRAPHICS, ANIMATION AND
MULTIMEDIA
Unit Structure
4.0 Objectives
4.1 Introduction
4.2 Summary
4.3 References
4.4 Unit End Exercises

4.0 OBJECTIVE
One of the main goals and objectives of a graphic designer is to design a
project based on the individual needs of a client. Prior to beginning
the design phase of a project, a graphic designer speaks with a client to
determine a project's overall goal, purpose and desired appearance.
The biggest use for animation is for entertainment. Animation is used
on the TV, on your phones, and all over the internet. In television,
animation is mostly used to occupy children, as is gives them something
to laugh about and keep them entertained for long periods of time.
Multimedia introduces how multimedia can be used in various
application areas. It provides a solid foundation to the students so that
they can identify the proper applications of multimedia, evaluate the
appropriate multimedia systems and develop effective multimedia
applications.

4.1 INTRODUCTION
Drawing graphics in android
It is the use of computers to create and manipulate pictures on a display
device. It comprises of software techniques to create, store, modify,
represents pictures.

Why computer graphics used?

Suppose a shoe manufacturing company want to show the sale of shoes
for five years. For this vast amount of information is to store. So, a lot of
time and memory will be needed. This method will be tough to
understand by a common man. In this situation graphics is a better
alternative. Graphics tools are charts and graphs. Using graphs, data can

100
be represented in pictorial form. A picture can be understood easily just Graphics, Animation and
with a single look. Multimedia

Interactive computer graphics work using the concept of two-way

communication between computer users. The computer will receive
signals from the input device, and the picture is modified accordingly.
Picture will be changed quickly when we apply command.

Write a Program to draw basic graphics construction like line, circle,

arc, ellipse and rectangle.
1. #include<graphics.h>
2. #include<conio.h>
3. void main()
4. {
5. intgd=DETECT,gm;
6. initgraph (&gd,&gm,"c:\\tc\\bgi");
7. setbkcolor(GREEN);
8. printf("\t\t\t\n\nLINE");
9. line(50,40,190,40);
10. printf("\t\t\n\n\n\nRECTANGLE");
11. rectangle(125,115,215,165);
12. printf("\t\t\t\n\n\n\n\n\n\nARC");
13. arc(120,200,180,0,30);
14. printf("\t\n\n\n\nCIRCLE");
15. circle(120,270,30);
16. printf("\t\n\n\n\nECLIPSE");
17. ellipse(120,350,0,360,30,20);
18. getch();
19. }
101
 Mobile Application and Output
User experience Design Lab

Write a Program to draw animation using increasing circles filled

with different colors and patterns.
1. #include<graphics.h>
2. #include<conio.h>
3. void main()
4. {
5. intgd=DETECT, gm, i, x, y;
6. initgraph(&gd, &gm, "C:\\TC\\BGI");
7. x=getmaxx()/3;
8. y=getmaxx()/3;
9. setbkcolor(WHITE);
10. setcolor(BLUE);
11. for(i=1;i<=8;i++)
12. {
13. setfillstyle(i,i);
14. delay(20);
15. circle(x, y, i*20);
16. floodfill(x-2+i*20,y,BLUE);
17. }
18. getch();
102
19. closegraph(); Graphics, Animation and
Multimedia
20. }

Output

Animation with android graphics

In todays world which is filled with full of imagination and
visualizations, there are some areas which is covered with the word
animation. When this word will come in anyone’s mind they always
create a picture of cartoons and some Disney world shows. As we
already know that among kids, animation movies are very popular like
Disney world, Doraemon, etc. All the cartoons and animation pictures
are type of animation which made from a thousands of single pictures
add together and play according to steps.
As we shift our mind to past some decades than we will find that all
animation are created either by hand or painting also we see that some
puppet like structure were created to show the animation these type of
animation are real world animations on the other hand in that technical
world the digital animation will evolve. Now a days to create an
animation there have developed so many tools to create scenes with ease
and in a short time period some tools are as Blenders3D, Maya, cinema
4D etc, useful to create scenes.
There are many types of animation as we see in our TV’s or we see many
shows and pictures that are mainly differ from a real shows and films but
we properly divide animation that are based on there creation such as 2D
animation, 3D animation, paper animation, puppet animation, traditional
animation, etc.

103
 Mobile Application and Definition of Animation :
User experience Design Lab
Animation is the process of creating an illusion of motion and shape
change by means of rapid display of various type of pictures that were
made to create a single scene.
Principles of Animation :

Before doing animation, every animator should follow these principles to

create a good animation. These principles was evolved from past
animation techniques but these principle are also very useful and
essential for doing animation. In 1981 two bright Disney animators Ollie
Johnston and Frank Thomas introduced twelve basic principles of
animation to produce more realistic works. These principle are also
applicable on present computer animations.
There are 12 basic principles of animation, they are-

1. Squash and Stretch :

This is the most important principle of animation, it gives the sense
of weight and volume to draw an object.
2. Anticipation :
In this principle animator will create a starting scene like that it
shows that something will happen, almost nothing happens suddenly.
3. Staging :
Animator creates such type of scene which attract audience so that
audience’s attention is directed toward that scene.
4. Straight Ahead :
In this principle, all frames are drawn from beginning to the end and
then fill all the interval or scene.

5. Flow Z through and overlapping action :

Two object’s action have different speed in any scene can easily
describe this principle.
6. Slow in and Slow out :
When an abject have maximum acceleration in between and resist on
the beginning and end will show this principle’s working.
7. Arc :
Arcs are present in almost all animation as no object will follow
straight line and follows some arc in its action.

8. Secondary action :
As with one character’s action second character move shows the
multiple dimension of an animation.
9. Timing :
For playing a given action a perfect timing is very important.

104
10. Exaggeration : Graphics, Animation and
This principle creates extra reality in the scene by developing a Multimedia
proper animation style.
11. Solid drawing :
In this principle, any object will created into 3D form to get realistic
visualization of scene.
12. Appeal :
Any character need not be as same as any real character but it somewhat
seems to be like that which create a proper thinking in the audience’s
mind.
Write a program in C for bouncing ball animation using graphics.h
header file
In this program, we will draw a red color ball move it vertically up and
down like a bouncing ball. We will use below mentioned functions in
this program.

Function Description

Init graph It initializes the graphics system by loading the passed

graphics driver then changing the system into graphics
mode.

Get max x It returns the maximum X coordinate in current graphics

mode and driver.

Set color It changes the current drawing colour. Default colour is

white. Each color is assigned a number, like BLACK is 0
and RED is 4. Here we are using colour constants defined
inside graphics. h header file.

Set fill It sets the current fill pattern and fill color.
style

Circle It draws a circle with radius r and centre at (x, y).

Flood fill It is used to fill a closed area with current fill pattern and
fill color. It takes any point inside closed area and color of
the boundary as input.

Clear It clears the screen, and sets current position to (0, 0).
device

Kbhit It is used to determine whether a key is pressed or not. It

returns a non-zero value if a key is pressed otherwise zero.

105
 Mobile Application and Delay It is used to suspend execution of a program for a M
User experience Design Lab milliseconds.

Close It unloads the graphics drivers and sets the screen back to
graph text mode.

C program for bouncing ball graphics animation

In this program, we first draw a red color ball on screen having center at
(x, y) and then erases it using clear device function. We again draw this
ball at center (x, y + 5), or (x, y - 5) depending upon whether ball is
moving down or up. This will look like a bouncing ball. We will repeat
above steps until user press any key on keyboard.
#include <stdio.h>
#include <conio.h>
#include <graphics.h>
#include <dos.h>
int main() {
int gd = DETECT, gm;
int i, x, y, flag=0;
initgraph(&gd, &gm, "C:\\TC\\BGI");
/* get mid positions in x and y-axis */
x = getmaxx()/2;
y = 30;
while (!kbhit()) {
if(y >= getmaxy()-30 || y <= 30)
flag = !flag;
/* draws the gray board */
setcolor(RED);
setfillstyle(SOLID_FILL, RED);
circle(x, y, 30);
floodfill(x, y, RED);
/* delay for 50 milli seconds */
delay(50);
106
 /* clears screen */ Graphics, Animation and
Multimedia
cleardevice();
if(flag){
y = y + 5;
} else {
y = y - 5;
}
}
getch();
closegraph();
return 0;
}

Program Output
Here is the screenshot of bouncing
ball.

Playing Audio, Video and capturing media

Multimedia is an interactive media and provides multiple ways to
represent information to the user in a powerful manner. It provides an
interaction between users and digital information. It is a medium of
communication. Some of the sectors where multi medias is used
extensively are education, training, reference material, business
presentations, advertising and documentaries.
107
 Mobile Application and So far we have been using C language for simple console output only.
User experience Design Lab Most of us are unaware that using C++, low level graphics program can
also be made. This means we can incorporate shapes, colors and designer
fonts in our program. This article deals with the steps to enable the
DevC++ compiler to generate graphics

Configuring DevC++
● Step 1: Download the DevC++ version 5.11.
● Step 2: Download the Graphics header files, and etc stuff.
● Step 3: Extract the contents of the rar file.
● Step 4: Go to the location where DevC++ is installed. For me its D
drive. Go inside the MinGW64 folder. Copy the graphics.h and
winbgim.h in the include folder and D:\Dev-Cpp\MinGW64\x86_64-
w64-mingw32\include folder.
● Step 5:Copy the libbgi.a file into lib folder and in D:\Dev-
Cpp\MinGW64\x86_64-w64-mingw32\lib folder.
● Step 6: Copy the ConsoleAppGraphics.template,
ConsoleApp_cpp_graph.txt files and paste them inside the template
folder of the devc++ installer location.
Now we are done with configuring of the DevC++ to support graphics
programming. We shall write our very first graphics program now.

Running the first graphics program

1. Open DevC++. Click file ->New ->Project.
2. Make sure you get the Console Graphics option. However, we are not
going to click on it.
3. Choose Empty Project option and Give a project name and make sure
the selected language is C++.
4. Copy the following code to the editor window.
5. #include<graphics.h>
6. #include <conio.h>
7. int main()
8. {
9. int gd = DETECT, gm;
10. initgraph(&gd,&gm, "C:\\tc\\bgi");
11. circle(300,300,50);

108
12. closegraph(); Graphics, Animation and
Multimedia
13. getch();
14. }
Go to “Project” menu and choose “Project Options” (or just press
ALT+P).
Go to the “Parameters” tab In the “Linker” field, enter the following text:
-lbgi
-lgdi32
-lcomdlg32
-luuid
-loleaut32
-lole32

Click OK and Compile and run the project and you’ll get this output:

4.2 SUMMARY
Computer graphics is receiving much attention in the development of
interactive educational software, multimedia systems, and many other
applications. It not only adds a new dimension to such applications but
109
 Mobile Application and also makes them more exciting and dynamic. Furthermore, the use of
User experience Design Lab computer graphics is already well accepted in computer science
education. If skillfully and relevantly used, it can be an important
component of computer-assisted instruction, which is an educational
application area with tremendous potential.

4.3 REFERENCES
● Animation for Beginners
Basic Principles of Animation for Motion Graphics
(Lisa Lee)

● Fundamentals of Computer Graphics

Steve Marschner, Peter Shirley

● Introduction to Computer Graphics 2018 Edition

Darrell Hajek

4.4 UNIT END EXERCISE

1. Write a C graphics program for moving car animation.
2. Write a C Program to Calculate Area and Perimeter of a Rectangle.



110
 5
LOCATION AND SENSORS
Unit Structure
5.0 Objective
5.1 Introduction
5.2 Summary
5.3 References
5.4 Unit End Exercises

5.0 OBJECTIVE
The main purpose of location-based applications is to broadcast your
current location coordinates to local businesses. The technology that
uses radio waves to identify individual items is: QR codes can only store
information that is comprised of numbers or text.
The sensor is a device that detects and majors the changes in the
nearby environment and sends that data to the operating system or
processor. They sense and collects data for which they are made. Like
ambient light, the sensor is made for detecting light, so it is an expert in
detecting the light.

5.1 INTRODUCTION
Sensors can be used to monitor the three-dimensional device
movement or change in the environment of the device. Android
provides sensor API to work with different types of sensors.
A data class representing a geographic location. A location consists of
a latitude, longitude, timestamp, accuracy, and other information such as
bearing, altitude and velocity.
First, create a Location Manager object by calling the get System
Service() method and LOCATION_SERVICE as an argument. Call get
Best Provider() to get the location in the form of a string. Now the
provider to the get Last Known Location() as an argument to get the
location. Finally, get the latitude and longitude by calling the get
Latitude() and get Longitude() methods.

111
 Mobile Application and Step 1
User experience Design Lab
Create an XML file and write this:
1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/r
es/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:paddingLeft="@dimen/activity_horizontal_margin"
6. android:paddingRight="@dimen/activity_horizontal_margin"
7. android:paddingTop="@dimen/activity_vertical_margin"
8. android:paddingBottom="@dimen/activity_vertical_margin"
9. tools:context=".MainActivity">
10.
11. <TextView
12. android:id="@+id/textview1"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:text="@string/hello_world" />
16. <TextView
17. android:id="@+id/textview2"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:layout_marginTop="30dp" />
21. <TextView
22. android:id="@+id/textview3"
23. android:layout_width="wrap_content"
24. android:layout_height="wrap_content"
25. android:layout_marginTop="60dp" />
26. </RelativeLayout>

112
Step 2 Location and Sensors
First, create a Location Manager object by calling the get System
Service() method and LOCATION_SERVICE as an argument. Call get
Best Provider() to get the location in the form of a string. Now the
provider to get Last Known Location() as an argument to get the
location. Finally, get the latitude and longitude by calling the get
Latitude() and get Longitude() methods.
Create a Java file and write this:
1. package com.currentlocation;
2. import android.content.Context;
3. import android.location.Criteria;
4. import android.location.Location;
5. import android.location.LocationListener;
6. import android.location.LocationManager;
7. import android.os.Bundle;
8. import android.app.Activity;
9. import android.view.Menu;
10. import android.widget.TextView;
11. import android.widget.Toast;
12.
13. public class MainActivity extends Activity implements LocationL
istener {
14.
15. LocationManager locationmanager;
16. @Override
17. protected void onCreate(Bundle savedInstanceState) {
18. super.onCreate(savedInstanceState);
19. setContentView(R.layout.activity_main);
20.
21. locationmanager=(LocationManager)getSystemService(Context.L
OCATION_SERVICE);
22. Criteria cri=new Criteria();

113
 Mobile Application and 23. String provider=locationmanager.getBestProvider(cri,false);
User experience Design Lab
24.
25. if(provider!=null & !provider.equals(""))
26. {
27. Location location=locationmanager.getLastKnownLocation
(provider);
28. locationmanager.requestLocationUpdates(provider,2000,1,this);

29. if(location!=null)
30. {
31. onLocationChanged(location);
32. }
33. else{
34. Toast.makeText(getApplicationContext(),"location not foun
d",Toast.LENGTH_LONG ).show();
35. }
36. }
37. else
38. {
39. Toast.makeText(getApplicationContext(),"Provider is null",To
ast.LENGTH_LONG).show();
40. }
41. }
42. @Override
43. public boolean onCreateOptionsMenu(Menu menu) {
44. // Inflate the menu; this adds items to the action bar if it is pres
ent.
45. getMenuInflater().inflate(R.menu.main, menu);
46. return true;
47. }
48. @Override

114
 49. public void onLocationChanged(Location location) { Location and Sensors
50. TextView textView2=(TextView)findViewById(R.id.textview2);

51.
52. TextView textView3=(TextView)findViewById(R.id.textview3);

53.
54. textView2.setText("Latitude"+location.getLatitude());
55. textView3.setText("Longitude"+ location.getLongitude());
56. }
57. @Override
58. public void onStatusChanged(String s, int i, Bundle bundle) {
59. }
60. @Override
61. public void onProviderEnabled(String s) {
62. }
63. @Override
64. public void onProviderDisabled(String s) {
65. }
66. }

Step 3
Perform the following changes in the Android Manifest.xml file:
1. <?xml version="1.0" encoding="utf-8"?>
2. <manifest xmlns:android="http://schemas.android.com/apk/res/andr
oid"
3. package="com.currentlocation"
4. android:versionCode="1"
5. android:versionName="1.0" >
6. <uses-
permission android:name="android.permission.INTERNET"></use
s-permission>

115
 Mobile Application and 7. <uses-
User experience Design Lab permission android:name="android.permission.ACCESS_FINE_L
OCATION"></uses-permission>
8. <uses-sdk
9. android:minSdkVersion="7"
10. android:targetSdkVersion="16" />
11. <application
12. android:allowBackup="true"
13. android:icon="@drawable/ic_launcher"
14. android:label="@string/app_name"
15. android:theme="@style/AppTheme" >
16. <activity
17. android:name="com.currentlocation.MainActivity"
18. android:label="@string/app_name" >
19. <intent-filter>
20. <action android:name="android.intent.action.MAIN" />
21. <category android:name="android.intent.category.
LAUNCHER" />
22. </intent-filter>
23. </activity>
24. </application>
25. </manifest>

116
Step 4 Location and Sensors
Set latitude and longitude in Android Studio DDMS to run the
application on the emulator as in the following:

Step 5

This example demonstrate about How to get current location provider

information in android.

Step 1 − Create a new project in Android Studio, go to File ⇒ New

Project and fill all required details to create a new project.

117
 Mobile Application and Step 2 − Add the following code to res/layout/activity_main.xml.
User experience Design Lab
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="@+id/text"
android:textSize="30sp"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

In the above code, we have taken a text view to show the current
network location provider.
Step 3 − Add the following code to src/MainActivity.java

package com.example.myapplication;
import android.Manifest;
import android.content.pm.PackageManager;
import android.location.Address;
import android.location.Geocoder;
import android.location.Location;
import android.location.LocationManager;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v4.app.ActivityCompat;
118
import android.support.v7.app.AppCompatActivity; Location and Sensors

import android.widget.TextView;
import java.io.IOException;
import java.util.List;
public class MainActivity extends AppCompatActivity {
TextView textView;
Location location;
double describeContents;
List<Address> addresses;
Geocoder geocoder;
@RequiresApi(api = Build.VERSION_CODES.P)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = findViewById(R.id.text);
LocationManager locationManager = (LocationManager)
this.getSystemService(LOCATION_SERVICE);
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_FINE_LOCATION) !=
PackageManager.PERMISSION_GRANTED &&
ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_COARSE_LOCATION) !=
PackageManager.PERMISSION_GRANTED) {
ActivityCompat.requestPermissions(this, new
String[]{Manifest.permission.ACCESS_FINE_LOCATION,
Manifest.permission.ACCESS_COARSE_LOCATION}, 101);
}
location = locationManager
.getLastKnownLocation(LocationManager.NETWORK_PROVIDER);
geocoder= new Geocoder(this);
}

119
 Mobile Application and
User experience Design Lab
@RequiresApi(api = Build.VERSION_CODES.O)
@Override
public void onRequestPermissionsResult(int requestCode, String[]
permissions, int[] grantResults) {
switch (requestCode) {
case 101:
if (grantResults[0] ==
PackageManager.PERMISSION_GRANTED) {
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_FINE_LOCATION) !=
PackageManager.PERMISSION_GRANTED &&
ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_COARSE_LOCATION) !=
PackageManager.PERMISSION_GRANTED) {
return;
}
textView.setText("" + location.getProvider());
} else {
//not granted
}
break;
default:
super.onRequestPermissionsResult(requestCode, permissions,
grantResults);
}
}
@RequiresApi(api = Build.VERSION_CODES.O)
@Override
protected void onResume() {
super.onResume();
if (ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_FINE_LOCATION) !=
120
PackageManager.PERMISSION_GRANTED && Location and Sensors
ActivityCompat.checkSelfPermission(this,
Manifest.permission.ACCESS_COARSE_LOCATION) !=
PackageManager.PERMISSION_GRANTED) {
return;
}
textView.setText("" + location.getProvider());
}
}

Step 4 − Add the following code to AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapplication">
<uses-permission
android:name="android.permission.ACCESS_COARSE_LOCATION"
/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission
android:name="android.permission.READ_PHONE_STATE" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
121
 Mobile Application and </activity>
User experience Design Lab
</application>
</manifest>

Let's try to run your application. I assume you have connected your
actual Android Mobile device with your computer. To run the app from
android studio, open one of your project's activity files and click
Run icon from the toolbar. Select your mobile device as an option and
then check your mobile device which will display your default screen −

Working with Maps

A Map is an interface that maps keys to values. The keys are unique and
thus, no duplicate keys are allowed. A map can provide three views,
which allow the contents of the map to be viewed as a set of keys,
collection of values, or set of key-value mappings. In addition,
the order of the map is defined as the order in which, the elements of a
map are returned during iteration.
Basic Methods
A map has the form Map <K, V> where:
● K: specifies the type of keys maintained in this map.
● V: defines the type of mapped values.
Furthermore, the Map interface provides a set of methods that must be
implemented. In this section, we will discuss the most famous methods:
● clear: Removes all the elements from the map.
● containsKey: Returns true if the map contains the requested key.

122
● contains Value: Returns true if the map contains the requested value. Location and Sensors
● equals: Compares an Object with the map for equality.
● get: Retrieve the value of the requested key.
● entry Set: Returns a Set view of the mappings contained in this map.
● key Set: Returns a Set that contains all keys of the map.
● put: Adds the requested key-value pair in the map.
● remove: Removes the requested key and its value from the map, if the
key exists.
● size: Returns the number of key-value pairs currently in the map.
Examples of Map
There are many classes that implement the Java Map interface. In this
chapter, we will present the most common and used.
Hash Map
The most common class that implements the Map interface is the
Java Hash Map. A Hash Map is a hash table-based implementation of the
Map interface. It permits null keys and values. Also, this class does not
maintain any order among its elements and especially, it does not
guarantee that the order will remain constant over time. Finally,
a HashMap contains two fundamental parameters: initial capacity and
performance. The capacity is defined as the number of buckets in the
hash table, while the load factor is a measure that indicates the maximum
value the hash table can reach, before being automatically increased.
A simple example that uses a Hash Map is shown below:
HashMapExample.java:
package jcg.zheng.demo.data;
01
02
import java.util.HashMap;
03
import java.util.Map;
04
05
public class HashMapExample {
06
07
public static void main(String[] args) {
08
Map<String, Integer> vehicles = new HashMap<>();
09
10

123
 Mobile Application and // Add some vehicles.
User experience Design Lab 11 vehicles.put("BMW", 5);
12 vehicles.put("Mercedes", 3);
13 vehicles.put("Audi", 4);
14 vehicles.put("Ford", 10);
15
16 System.out.println("Total vehicles: " + vehicles.size());
17
18 // Iterate over all vehicles, using the keySet method.
19 for (String key : vehicles.keySet())
20 System.out.println(key + " - " + vehicles.get(key));
21 System.out.println();
22
23 String searchKey = "Audi";
24 if (vehicles.containsKey(searchKey))
25 System.out.println("Found total " +
26 vehicles.get(searchKey) + " " + searchKey + " cars!\n");
27
28 // Clear all values.
29 vehicles.clear();
30
31 // Equals to zero.
32 System.out.println("After clear operation, size: " +
33 vehicles.size());
34 }
}
A sample execution is shown below:
1 Total vehicles: 4
2 Audi - 4
3 Ford - 10
4 BMW - 5
5 Mercedes - 3
6
7 Found total 4 Audi cars!
8
9 After clear operation, size: 0

Hash Table
The Hash Table class implements a hash table and maps keys to values.
However, neither the key nor the value can be null. This class contains
two fundamental parameters: initial capacity and performance, with the
same definitions as the Hash Map class.
124
A simple example that uses a Hash Table is shown below: Location and Sensors
HashTableExample.java:

package jcg.zheng.demo.data;
01
import java.util.Hashtable;
02
import java.util.Map;
03
04
public class HashTableExample {
05
public static void main(String[] args) {
06
Map<String, Integer> vehicles = new Hashtable<>();
07
08
// Add some vehicles.
09
vehicles.put("BMW", 5);
10
vehicles.put("Mercedes", 3);
11
vehicles.put("Audi", 4);
12
vehicles.put("Ford", 10);
13
14
System.out.println("Total vehicles: " + vehicles.size());
15
16
// Iterate over all vehicles, using the keySet method.
17
18
for (String key : vehicles.keySet())
19
System.out.println(key + " - " + vehicles.get(key));
20
System.out.println();
21
22
String searchKey = "Audi";
23
if (vehicles.containsKey(searchKey))
24
System.out.println("Found total " + vehicles.get(searchKey)
25
+ " " + searchKey + " cars!\n");
26
27
// Clear all values.
28
vehicles.clear();
29
30
// Equals to zero.
31
System.out.println("After clear operation, size: " +
32
vehicles.size());
33
// The next statements throw a NullPointerException, if
34
uncommented.
35
// vehicles.put("Nissan", null);
36
// vehicles.put(null, 6);
37
}
}

125
 Mobile Application and A sample execution is shown below:
User experience Design Lab
1 Total vehicles: 4
2 Audi - 4
3 Ford - 10
4 BMW - 5
5 Mercedes - 3
6
7 Found total 4 Audi cars!
8
9 After clear operation, size: 0

TreeMap
The TreeMap is a Red-Black tree implementation that is sorted according
to the natural ordering of its keys, or by a Comparator provided at the
creation time. Also, this class maintains order on its elements. Finally,
this class is not synchronized and thus, if an application uses multiple
threads, the map must be synchronized externally.
A simple example that uses a TreeMap is shown below:
TreeMapExample.java:
01
package jcg.zheng.demo.data;
02
03
import java.util.Map;
04
import java.util.TreeMap;
05
06
public class TreeMapExample {
07
public static void main(String[] args) {
08
Map<String, Integer> vehicles = new TreeMap<>();
09
10

126
 Location and Sensors
11 // Add some vehicles.
12 vehicles.put("BMW", 5);
13 vehicles.put("Mercedes", 3);
14 vehicles.put("Audi", 4);
15 vehicles.put("Ford", 10);
16
17 System.out.println("Total vehicles: " + vehicles.size());
18
19 // Iterate over all vehicles, using the keySet method.
20 for (String key : vehicles.keySet())
21 System.out.println(key + " - " + vehicles.get(key));
22 System.out.println();
23
24 System.out.println("Highest key: " + ((TreeMap) vehicles).lastKey());
25 System.out.println("Lowest key: " + ((TreeMap) vehicles).firstKey());
26
27 System.out.println("\nPrinting all values:");
28
29 for (Integer val : vehicles.values())
30 System.out.println(val);
31 System.out.println();
32
33 // Clear all values.
34 vehicles.clear();
35
36 // Equals to zero.
37 System.out.println("After clear operation, size: " + vehicles.size());
38 }
}

127
 Mobile Application and A sample execution is shown below:
User experience Design Lab
01 Total vehicles: 4
02 Audi - 4
03 BMW - 5
04 Ford - 10
05 Mercedes - 3
06
07 Highest key: Mercedes
08 Lowest key: Audi
09
10 Printing all values:
11 4
12 5
13 10
14 3
15
16 After clear operation, size: 0
As you can observe, the elements of the map are printed in a strict
lexicographic order, which does not appear in the previous examples
of Hash Map and Hash Table.

Concurrent Hash Map

The class is a hash table that supports the full concurrency of retrievals.
Thus, this structure is safe to use in case of multiple threads. Finally, this
class allows neither keys nor values to be null.
A simple example that uses a Concurrent Hash Map is shown below:
ConcurrentHashMapExample.java:

128
 package jcg.zheng.demo.data; Location and Sensors
01
02
import java.util.Enumeration;
03
import java.util.Map;
04
import java.util.concurrent.ConcurrentHashMap;
05
06
public class ConcurrentHashMapExample {
07
08
public static void main(String[] args) {
09
Map<String, Integer> vehicles = new ConcurrentHashMap<>();
10
11
// Add some vehicles.
12
vehicles.put("BMW", 5);
13
vehicles.put("Mercedes", 3);
14
vehicles.put("Audi", 4);
15
vehicles.put("Ford", 10);
16
17
System.out.println("Total vehicles: " + vehicles.size());
18
19
// Iterate over all vehicles, using the keySet method.
20
for (String key : vehicles.keySet())
21
System.out.println(key + " - " + vehicles.get(key));
22
23
System.out.println();
24
25
String searchKey = "Audi";
26
if (vehicles.containsKey(searchKey))
27
System.out.println("Found total " + vehicles.get(searchKey) + " " + searchKey + "
28
cars!\n");
29
30
Enumeration<Integer> elems = ((ConcurrentHashMap) vehicles).elements();
31
while (elems.hasMoreElements())
32
System.out.println(elems.nextElement());
33
System.out.println();
34
35
Integer val = (Integer) vehicles.putIfAbsent("Audi", 9);
36
if (val != null)
37
System.out.println("Audi was found in the map and its value was updated!");
38
39
val = (Integer) vehicles.putIfAbsent("Nissan", 9);
40
if (val == null)
41
System.out.println("Nissan wasn't found in map, thus a new pair was created!");
42
System.out.println();
43
44
// The next statements throw a NullPointerException, if uncommented.
45
// vehicles.put("Nissan", null);
46
// vehicles.put(null, 6);
47
48
// Clear all values.
49
vehicles.clear();
50
51
// Equals to zero.
52
System.out.println("After clear operation, size: " + vehicles.size());
53
}
54
}
129
 Mobile Application and A sample execution is shown below:
User experience Design Lab
01 Total vehicles: 4
02 BMW - 5
03 Mercedes - 3
04 Audi - 4
05 Ford - 10
06
07 Found total 4 Audi cars!
08
09 5
10 3
11 4
12 10
13
14 Audi was found in the map and its value was updated!
15 Nissan wasn't found in map, thus a new pair was created!
16
17 After clear operation, size: 0

Working with GPS, Bluetooth and Wi-Fi

The Android platform includes support for the Bluetooth network stack,
which allows a device to wirelessly exchange data with other Bluetooth
devices.
The Android Bluetooth APIs provide us access to the Bluetooth
functionality in order to wirelessly connect to other Bluetooth devices,
enabling point-to-point and multipoint wireless features.
So, if we want to exchange data between different devices through our
application, Bluetooth is a common way to connect two devices that
support Bluetooth.
For our example will use the following tools in a Windows 64-bit or an
OS X platform:

130
● JDK 1.8 Location and Sensors
● Android Studio 2.1.2
● Android SDK 6.0

2. Create a New Android Studio Project

“Welcome to Android Studio” screen. Choose “Start a new Android
Studio Project”.
Specify the name of the application, the project and the package.
“Configure your new project” screen. Add your application name and
the projects package name.
In the next window, select the form factors your app will run on.
In the next window you should choose to “Add an activity to Mobile”. In
our example, we will choose to create a project with no activity, so
choose: “Add no activity”
Now press finish, and our project has just been created!
3. Create the layout of the Bluetooth Chat
Add a new xml file inside /res/layout folder, with
name main_activity.xml.
Integrating google map
Let’s see how to create a new project and integrate Google Maps.

Step 1. Install the Google Play Services SDK

Add Google Play services to Android Studio. To make the Google Play
services APIs available to your app:
1. Open the build.gradle file inside your application module directory.
2. Add a new build rule under dependencies for the latest version of play-
services, using one of the APIs listed below.
Implementation ‘com.google.android.gms:play-services-maps:+
googlePlayVersion’ (other Google Play API
https://developers.google.com/android/guides/setup)
3. Save the changes and click Sync Project with Gradle Files in the
toolbar.
4. If you receive an error, check that your top-level build.gradle contains
a reference to the google() repo or to maven.

Step 2. Create a new Google Maps project

These are the steps to create a new project with Google Maps activity:
131
 Mobile Application and 1. Start Android Studio.
User experience Design Lab
2. Start a new project::
● Click Start a new Android Studio project in the Welcome to Android
Studio dialog
● If you don’t see this dialog, then click File –> New –> New Project.
3. Fill in the app name, company domain, and location.
4. Choose form factors, for example Phone and Tablet.
5. Select the Google Maps Activity in the Add an Activity to
Mobile dialog.

6. After filling in the activity name and title, click Finish. Don’t touch
the default values – they’re okay.
After a few seconds, your project will be built by Gradle. Then you’ll see
google_maps_api.xml and the MapsActivity.java files in the editor.
Note!
Before you try to run the app, you’ll need do get an API key. You can
find instructions on how to do this in your google_maps_api.xml file, and
we will explain how to do it in more detail in the next paragraph.

132
 Location and Sensors

Step 3. Get a Google Maps API key

The Android Maps API is used to access Google’s servers, and there are
several ways you can get a key. An API key is free and supports any
number of users.
● The easiest way to get a key is to use the link provided in the
google_maps_api.xml file that Android Studio created for you:
1. Copy the link and paste it into your browser. It will direct you to the
Google API Console and you won’t have to fill in anything by yourself.
2. Select a project you’ve created before or create a new one.
3. Create an Android-restricted API key for your project.
4. Copy the API key, go back to Android Studio, and paste it into the
element in the google_maps_api.xml file.
● Another option for getting an API key is this:
Use the credentials provided in the google_maps_api.xml file that
Android Studio created for you:
1. Copy the credentials provided in the google_maps_api.xml file.
2. Go to the Google API Console in your browser.
3. Use the copied credentials to add your app to an existing API key or to
create a new API key.

Step 4. Check your code

Now, when everything is set up, look at the code and check these files in
your project:
The XML layout file

133
 Mobile Application and You can find the XML layout file at res/layout/activity_maps.xml. It
User experience Design Lab should have this code in it:
fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/map"
tools:context=".MapsActivity"
android:name="com.google.android.gms.maps.SupportMapFragment"
The maps activity Java file
MapsActivity.java is the file that’s responsible for the maps activity.
Here’s the code you should find in it:
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;
public class MapsActivity extends FragmentActivity implements
OnMapReadyCallback {
private GoogleMap mMap;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_maps);
SupportMapFragment mapFragment = (SupportMapFragment)
getSupportFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this);
134
 } Location and Sensors
@Override
public void onMapReady(GoogleMap googleMap) {
mMap = googleMap;
// Add a marker in Sydney, Australia, and move the camera.
LatLng sydney = new LatLng(-34, 151);
mMap.addMarker(new
MarkerOptions().position(sydney).title("Marker in Sydney"));
mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
}
}
If you don’t see this code in the file, just copy and paste it in after the
package name.

READ ALSO
Google Maps vs Apple Maps: Best Choice For Your Mobile Solution
8 mins to read

Integrating Google Maps into an existing project

If you already have an application and you just want to add maps to it,
this set of instructions will help you do so.

Map Objects
Maps are represented in the API by the GoogleMap and MapFragment
classes.
Follow these steps to add a map:
1. Follow the steps in the project configuration guide to get the API,
obtain a key, and add the required attributes to your Android manifest.
(You only need to do this once.)
2. Add a <fragment> element to the layout file for the Activity.
3. Get a Google Map object that’s a representation of a map. You can
modify it according to your needs. To get to it, you’ll need to
implement the On Map Ready Callback interface with the help of the
on Map Ready callback method.
4. Register the callback by calling get Map A sync() on the fragment.

135
 Mobile Application and We’ll explain each step in detail below.
User experience Design Lab
1. Add a fragment :
Add a <fragment> element to the activity’s layout file to define a
Fragment object.
In this element, set the android:name attribute to
com.google.android.gms.maps.MapFragment. This will attach a
MapFragment to the activity.
Here’s where you can find the <fragment> element:
You can also add a MapFragment to an Activity in your code. To do this,
create a new MapFragment instance, then call
FragmentTransaction.add() to add the Fragment to the current Activity:
mMapFragment = MapFragment.newInstance();
FragmentTransaction fragmentTransaction =
getFragmentManager().beginTransaction();
fragmentTransaction.add(R.id.my_container, mMapFragment);
fragmentTransaction.commit();

2. Add map code :

The On Map Ready Callback interface is useful if you want to work with
a map in your application. The most common way to add a map to an
application is to set a callback on a Map Fragment. You can also use
MapView object for that.
First, implement a callback interface:
public class MainActivity extends FragmentActivity
implements OnMapReadyCallback {
...
}
Use this code in your Activity’s onCreate() method to set the layout file
as the content view:
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
...
136
} Location and Sensors
Get a handle to the fragment by calling
FragmentManager.findFragmentById(), passing the resource ID of your
element.
Notice that when you build the layout file, the resource ID R.id.map is
added automatically to the Android project.
Then use getMapAsync() to set the callback on the fragment.
MapFragment mapFragment = (MapFragment) getFragmentManager()
.findFragmentById(R.id.map);
mapFragment.getMapAsync(this)
Use the onMapReady(GoogleMap) callback method to get a handle to
the GoogleMap object.
When the map is ready for use, the callback will be triggered. Then
you’ll be able to use the GoogleMap object. This will allow you to add
markers or view options.
Here’s an example of how to add a marker:
@Override
public void onMapReady(GoogleMap map) {
map.addMarker(new MarkerOptions()
.position(new LatLng(0, 0))
.title("Marker"));
}

3. Adding the map object :

Maps that are displayed with the help of the API look essentially the
same as Google Maps for mobile (GMM). However, there are a few
differences:
● API map tiles don’t have any personalized content like smart icons,
for example.
● Not all icons are clickable, but markers that you add can be clicked
on.
The API supports not only map functions but also a wide range of
interactions within the Android UI model – for example, gestures.
The Google Map class is what you’ll use to work with a map object. It
automatically:
● Connects to the Google Maps service
● Downloads map tiles
137
 Mobile Application and ● Displays tiles on the device screen
User experience Design Lab
● Displays zoom, pan and other controls
● Responds to these controls

Map types
The Google Maps API offers many types of maps so you can choose the
one that suits your app best. For example, if you have a travel app, you’ll
probably need a road map to show routes. Other use cases may require a
satellite view or even no map at all. You’ll also be able to find out how to
customize route on Google Maps app from documentation.
Here are the types of maps you can choose from:
Normal – a typical road map that shows roads, some human-built
features, and important natural features like rivers; road and feature
labels are also visible.
Hybrid – a satellite photograph with roads added; road and feature labels
are also visible.
Satellite – photograph data from satellites; road and feature labels are not
visible.
Terrain – contains topographic data including colors that show different
map features like water or vegetation, contour lines and labels, and
perspective shading; some roads and labels are also visible.
None – shows no tiles; the map will be rendered as an empty grid with
no tiles loaded.
Set the map type
To set the type of map, call the Google Map object’s set Map Type()
method, passing one of the type constants defined in Google Map. For
example, here’s how to display a hybrid map:
Google Map map;
...
// Sets the map type to be "hybrid"
map .set Map Type (GoogleMap.MAP_TYPE_HYBRID);
The image below shows a comparison of normal, hybrid, and terrain
maps for the same location:

138
 Location and Sensors

Problems and how to solve them

When you implement Google Maps into an Android app, you probably
won’t face serious obstacles. Google Maps is a very complex technology,
and Google handles most of the errors that developers may make. Thus,
it’s pretty easy to integrate Google Maps once you know the basics.
However, there are some nuances that you need to know.

1. Permissions
You’ll need two permissions to work with a map that has access to a
user’s location:
● android. permission. INTERNET
● android. permission. ACCESS_FINE_LOCATION
Note that ACCESS_FINE_LOCATION is a dangerous permission – in
Android versions 6.0 and above, the app needs to request this permission
while the app’s running. A user may or may not give permission, so you
need to keep that in mind.

2. Marker customization
Marker customization lets you change the shape and color of a marker to
make it suit your app. For example, if you develop an app for a retailer,
you can make markers look like the shop’s logo.
For this, you’ll need a Bitmap Descriptor object. You can get one with
the help of the Bitmap Descriptor Factory object.

Here’s how to create a standard marker:

map.addMarker(new MarkerOptions().position(new LatLng(0, 0)).icon(
BitmapDescriptorFactory.defaultMarker()));

139
 Mobile Application and And how to create a custom marker:
User experience Design Lab
map.addMarker(new MarkerOptions().position(new LatLng(10,
10)).icon(
BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher)));
BitmapDescriptorFactory also has other methods to get the marker icon:
– fromAsset, from the Assets folder
– fromBitmap, from a Bitmap object
– from File, from internal storage
– from Path, from a specified path
There are some other colors available with the default Marker method
,all of which are described in Help.
This is an example of a standard green marker:
map. add Marker(new Marker Options().position(new Lat Lng (-10, -
10)).icon(
Bitmap Descriptor Factory .default Marker (Bitmap Descriptor
Factory. HUE_GREEN)

Services for push notification Google ads

Enable push notifications in the Google Ads Mobile App to receive
relevant updates on performance changes, new features, and actionable
recommendations for improving campaign performance, from wherever
you are.
How to set up push notifications

Turn on notifications for iOS devices

1. Tap More on the bottom navigation bar and select Settings.
2. Tap Turn on notifications.
3. Tap Notifications.
4. Tap Allow Notifications.

Turn on notifications for Android devices

1. Tap More on the bottom navigation bar and select Settings.
2. Tap Turn on notifications.
3. Tap Notifications.
4. Tap Show notifications.

140
Selecting notification categories Location and Sensors
1. Tap More on the bottom navigation bar and select Settings.
2. Toggle on the notification categories you’d like to receive
notifications for. If toggles are not displayed, first tap on a category of
interest and then tap Show notifications.

5.2 SUMMARY
Most Android-powered devices have built-in sensors that measure
motion, orientation, and various environmental conditions. These sensors
are capable of providing raw data with high precision and accuracy, and
are useful if you want to monitor three-dimensional device movement or
positioning, or you want to monitor changes in the ambient environment
near a device. For example, a game might track readings from a device's
gravity sensor to infer complex user gestures and motions, such as tilt,
shake, rotation, or swing. Likewise, a weather application might use a
device's temperature sensor and humidity sensor to calculate and report
the dew point, or a travel application might use the geomagnetic field
sensor and accelerometer to report a compass bearing.

5.3 REFERENCES
1. Smashing UX Design. (by Jesmond J. Chudley)
2. Don't Make Me Think. (by Steve Krug)
3. 100 Things Every Designer Needs to Know About People. (by Susan
Weinschenk)
4. Lean UX. (by Jeff Gothelf and Josh Seiden)
5. The Design of Everyday Things. (by Don Norman)

5.4 UNIT END EXERCISES

Write a code to demonstrate the connection of Bluetooth using java.



141
 6
REST API INTEGRATION
Unit Structure
6.0 Objective
6.1 Introduction
6.2 Summary
6.3 References
6.4 Unit End Exercises

6.0 OBJECTIVE
A REST FUL API is an architectural style for an application program
interface (API) that uses HTTP requests to access and use data. That
data can be used to GET, PUT, POST and DELETE data types, which
refers to the reading, updating, creating and deleting of operations
concerning resources.

6.1 INTRODUCTION
Representational State Transfer (REST) is an architectural style that
defines a set of constraints to be used for creating web services. REST
API is a way of accessing web services in a simple and flexible way
without having any processing.
REST technology is generally preferred to the more robust Simple Object
Access Protocol (SOAP) technology because REST uses less bandwidth,
simple and flexible making it more suitable for internet usage. It’s used
to fetch or give some information from a web service. All
communication done via REST API uses only HTTP request.
Working: A request is sent from client to server in the form of a web
URL as HTTP GET or POST or PUT or DELETE request. After that, a
response comes back from the server in the form of a resource which can
be anything like HTML, XML, Image, or JSON. But now JSON is the
most popular format being used in web services.
In HTTP there are five methods that are commonly used in a REST-
based Architecture i.e., POST, GET, PUT, PATCH, and DELETE. These
correspond to create, read, update, and delete (or CRUD) operations
respectively. There are other methods which are less frequently used like
OPTIONS and HEAD.
● GET: The HTTP GET method is used to read (or retrieve) a
representation of a resource. In the safe path, GET returns a
representation in XML or JSON and an HTTP response code of 200
142
 (OK). In an error case, it most often returns a 404 (NOT FOUND) or Rest API integration
400 (BAD REQUEST).
● POST: The POST verb is most often utilized to create new
resources. In particular, it’s used to create subordinate resources. That
is, subordinate to some other (e.g. parent) resource. On successful
creation, return HTTP status 201, returning a Location header with a
link to the newly-created resource with the 201 HTTP status.
● PUT: It is used for updating the capabilities. However, PUT can
also be used to create a resource in the case where the resource ID is
chosen by the client instead of by the server. In other words, if the
PUT is to a URI that contains the value of a non-existent resource ID.
On successful update, return 200 (or 204 if not returning any content
in the body) from a PUT. If using PUT for create, return HTTP status
201 on successful creation. PUT is not safe operation but it’s
idempotent.
● PATCH: It is used to modify capabilities. The PATCH request only
needs to contain the changes to the resource, not the complete
resource. This resembles PUT, but the body contains a set of
instructions describing how a resource currently residing on the
server should be modified to produce a new version. This means that
the PATCH body should not just be a modified part of the resource,
but in some kind of patch language like JSON Patch or XML Patch.
PATCH is neither safe nor idempotent.
● DELETE : It is used to delete a resource identified by a URI. On
successful deletion, return HTTP status 200 (OK) along with a
response body.
Idempotence : An idempotent HTTP method is a HTTP method that
can be called many times without different outcomes. It would not
matter if the method is called only once, or ten times over. The result
should be the same. Again, this only applies to the result, not the
resource itself.
Example : C

1. a = 4 // It is Idempotence, as final value(a = 4)

// would not change after executing it multiple
// times.
2. a++ // It is not Idempotence because the final value
// will depend upon the number of times the
// statement is executed.

143
 Mobile Application and Request and Response
User experience Design Lab
Now we will see how request and response work for
different HTTP methods. Let’s assume we have
an API(https://www.geeksforgeeks.org/api/students) for all students data
of gfg.
● GET: Request for all Students.

Request

GET:/api/students

● POST: Request for Posting/Creating/Inserting Data

Request

POST:/api/students
{“name”:”Raj”}

● PUT or PATCH: Request for Updating Data at id=1

Request

PUT or PATCH:/api/students/1
{“name”:”Raj”}

● DELETE: Request for Deleting Data of id=1

Request

DELETE:/api/students/1

Android A sync Task

Android A sync Task is an abstract class provided by Android which
gives us the liberty to perform heavy tasks in the background and keep
the UI thread light thus making the application more responsive.

144
 Android application runs on a single thread when launched. Due to this Rest API integration
single thread model tasks that take longer time to fetch the response can
make the application non-responsive. To avoid this we use android A
sync Task to perform the heavy tasks in background on a dedicated
thread and passing the results back to the UI thread. Hence use of A sync
Task in android application keeps the UI thread responsive at all times.
The basic methods used in an android A sync Task class are defined
below :
do In Background() : This method contains the code which needs to be
executed in background. In this method we can send results multiple
times to the UI thread by publish Progress() method. To notify that the
background processing has been completed we just need to use the return
statements
● On Pre Execute() : This method contains the code which is executed
before the background processing starts
● On Post Execute() : This method is called after do In Background
method completes processing. Result from do In Background is passed to
this method
● On Progress Update() : This method receives progress updates from do
In Background method, which is published via publish Progress method,
and this method can use this progress update to update the UI thread
The three generic types used in an android A sync Task class are given
below :
● Params : The type of the parameters sent to the task upon execution
● Progress : The type of the progress units published during the
background computation
● Result : The type of the result of the background computation

Android A sync Task Example

To start an A sync Task the following snippet must be present in the
Main Activity class :
My Task my Task = new My Task();
my Task. execute();
In the above snippet we’ve used a sample class name that extends A sync
Task and execute method is used to start the background thread.
Note:
● The A sync Task instance must be created and invoked in the UI thread.
● The methods overridden in the A sync Task class should never be called.
They’re called automatically
145
 Mobile Application and ● A sync Task can be called only once. Executing it again will throw an
User experience Design Lab exception
In this tutorial we’ll implement an A sync Task that makes a process to
go to sleep for a given period of time as set by the user.

Android A sync Task Example Code

The xml layout is defined in the activity_main.xml and its given below:
activity_main.xml
<RelativeLayout
xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="10pt"
android:textColor="#444444"
android:layout_alignParentLeft="true"
android:layout_marginRight="9dip"
android:layout_marginTop="20dip"
android:layout_marginLeft="10dip"
android:text="Sleep time in Seconds:"/>
<EditText
android:id="@+id/in_time"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_background"
android:layout_toRightOf="@id/tv_time"

146
 android:layout_alignTop="@id/tv_time" Rest API integration
android:inputType="number"
/>
<Button
android:id="@+id/btn_run"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Run Async task"
android:layout_below="@+id/in_time"
android:layout_centerHorizontal="true"
android:layout_marginTop="64dp" />
<TextView
android:id="@+id/tv_result"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="7pt"
android:layout_below="@+id/btn_run"
android:layout_centerHorizontal="true" />
</RelativeLayout>
In the above layout we’ve used a predefined drawable as the border of
the EditText.
The MainActivity.java is defined below:
package com.journaldev.asynctask;
import android.app.ProgressDialog;
import android.os.AsyncTask;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
147
 Mobile Application and import android.widget.TextView;
User experience Design Lab
public class MainActivity extends AppCompatActivity {
private Button button;
private EditText time;
private TextView finalResult;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
time = (EditText) findViewById(R.id.in_time);
button = (Button) findViewById(R.id.btn_run);
finalResult = (TextView) findViewById(R.id.tv_result);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
AsyncTaskRunner runner = new AsyncTaskRunner();
String sleepTime = time.getText().toString();
runner.execute(sleepTime);
}
});
}
private class AsyncTaskRunner extends AsyncTask<String, String,
String> {
private String resp;
ProgressDialog progressDialog;
@Override
protected String doInBackground(String... params) {
publishProgress("Sleeping..."); // Calls onProgressUpdate()
try {
int time = Integer.parseInt(params[0])*1000;
148
 Thread.sleep(time); Rest API integration
resp = "Slept for " + params[0] + " seconds";
} catch (InterruptedException e) {
e.printStackTrace();
resp = e.getMessage();
} catch (Exception e) {
e.printStackTrace();
resp = e.getMessage();
}
return resp;
}
@Override
protected void onPostExecute(String result) {
// execution of result of Long time consuming operation
progressDialog.dismiss();
finalResult.setText(result);
}

@Override
protected void onPreExecute() {
progressDialog = ProgressDialog.show(MainActivity.this,
"ProgressDialog",
"Wait for "+time.getText().toString()+ " seconds");
}
@Override
protected void onProgressUpdate(String... text) {
finalResult.setText(text[0]);
}

149
 Mobile Application and }
User experience Design Lab
}
In the above code we’ve used AsyncTaskRunner class to perform the
AsyncTask operations. The time in seconds is passed as a parameter to
the class and a ProgressDialog is displayed for the given amount of time.

Introduction to Http Url Connection and JSON

Building a JSON POST Request With Http URL Connection
Create a URL Object
Let's create a URL object with a target URI string that accepts the JSON
data via HTTP POST method:
URL url = new URL ("https://reqres.in/api/users");

Open a Connection
From the above URL object, we can invoke the open Connection method
to get the Http URL Connection object.
We can't instantiate Http URL Connection directly, as it's an abstract
class:

150
Http URL Connection con = Rest API integration
(HttpURLConnection)url.openConnection();

Set the Request Method

To send a POST request, we'll have to set the request method property to
POST:
con.setRequestMethod("POST");

Set the Request Content-Type Header Parameter

Set the “content-type” request header to “application/json” to send the
request content in JSON form. This parameter has to be set to send the
request body in JSON format.
Failing to do so, the server returns HTTP status code “400-bad request”:
con.setRequestProperty("Content-Type", "application/json");

Set Response Format Type

Set the “Accept” request header to “application/json” to read the
response in the desired format:
con.setRequestProperty("Accept", "application/json");

Ensure the Connection Will Be Used to Send Content

To send request content, let's enable
the URLConnection object's doOutput property to true.
Otherwise, we won't be able to write content to the connection output
stream:
con.setDoOutput(true);

Create the Request Body

After creating a custom JSON String:
String jsonInputString = "{"name": "Upendra", "job": "Programmer"}";
We would need to write it:
try(OutputStream os = con.getOutputStream()) {
byte[] input = jsonInputString.getBytes("utf-8");
os.write(input, 0, input.length);
}

Read the Response From Input Stream

Get the input stream to read the response content. Remember to use try-
with-resources to close the response stream automatically.
151
 Mobile Application and Read through the whole response content, and print the final response
User experience Design Lab string:
try(BufferedReader br = new BufferedReader(
new InputStreamReader(con.getInputStream(), "utf-8"))) {
StringBuilder response = new StringBuilder();
String responseLine = null;
while ((responseLine = br.readLine()) != null) {
response.append(responseLine.trim());
}
System.out.println(response.toString());
}
If the response is in JSON format, use any third-party JSON parsers such
as Jackson library, Gson, or org.json to parse the response.

Performing network operations asynchronously

What does asynchronous mean?
More specifically, asynchronous describes the relationship between two
or more events/objects that do interact within the same system but do
not occur at predetermined intervals and do not necessarily rely on each
other's existence to function. They are not coordinated with each other,
meaning they could occur simultaneously or not because they have their
own separate agenda.

Uses
The term itself is broad and has many applications. In information
technology (IT) alone, the term has several different applications. In most
IT contexts, asynchronous refers to a style of communication that can
occur both between people and between technological components. Since
the term casts such a wide net, even within IT, it can be difficult to
reconcile its general definition when comparing its various applied uses.
One simple way to understand asynchronous is through the lens of
personal communication. Sending an email or text is an example of an
asynchronous form of communication because they do not necessarily
have to be coordinated in time. Each event or sent message can happen at
irregular intervals because the information is stored for whenever the
recipient chooses to access it. Events happen independently of each other
and have no fixed agenda.
This can be contrasted against in-person conversations and video
conferencing, which are synchronous communication methods, because
the events -- turns in conversation -- need to happen in order and over a
152
fixed span of time -- the amount of time that participants are engaged in Rest API integration
the conversation. The events are dependent on each other and build on
top of one another in a linear fashion.
The bottom line is: In synchronous personal communications, recipients
must respond immediately; in asynchronous, they can respond at their
convenience.
This general model applies to most asynchronous contexts, the variables
being the units of information -- referred to as objects or events -- and the
medium used to communicate them.
Some prominent examples of the term's use are in computer
programming, in which the program is communicating with the
computer, and telecommunication, in which signals are transmitted at
certain rates and affect the quality of the information they contain based
on those rates.

Asynchronous in telecommunication
In telecommunication signaling -- within a network or between networks
-- an asynchronous signal is one that is transmitted at a different clock
rate than another signal. Plesiochronous signals are almost but not quite
in synchronization -- and a method is used to adjust them --
and synchronous signals are those that run at the same clock rate.

Asynchronous in computer programming

In computer programming, asynchronous operation means that a process
operates independently of other processes, whereas synchronous
operation means that the process runs only as a result of some other
process being completed or handed off. A typical activity that might use
a synchronous protocol would be a transmission of files from one point
to another. As each transmission is received, a response is returned
indicating success or the need to resend. Each successive transmission of
data requires a response to the previous transmission before a new one
can be initiated.

Asynchronous in workplace communication

The term asynchronous is also used to describe a growing trend in
workplace communication. Applications known as team collaboration
tools are used to enable employees to have conversations that are not
bound by a linear format; the participants don't need to wait for responses
to carry out the conversation. This format of communication increases
flexibility, enabling participants to engage with each other without time-
and location-based restraints. Instead of having an in-person conversation
-- an event that requires both parties to be present in real time and
volleying responses -- participants can use team collaboration tools to
communicate remotely and in their own time frame.

153
 Mobile Application and Examples
User experience Design Lab
Below are a few applied examples of the term asynchronous as it is used
in each context mentioned above.
Telecommunication : The clarity of transmission is critical when
communicating using devices such as a radio or telephone. It requires the
data being exchanged to be processed by both parties in phase with each
other, according to a shared rate. When this is done using a centralized
clock, it is asynchronous transmission.
However, it can be done asynchronously as well. Asynchronous transfer
mode (ATM) is a protocol used in telecommunications to enable the
asynchronous transmission of data without the signals having to pass
through a mainframe or centralized clock. Instead, ATM establishes a
pathway through the network for the data and assigns it a traffic contract
that ensures data is processed according to an agreement made between
the client and the network. For example, this can guarantee a constant bit
rate for telephone calls, ensuring a caller's voice is not cut off or delayed.
Programming : One tangible example of a program that operates
asynchronously is a printer's embedded software. When a printer sends
out a low toner alert to the user, it continues to print. The printer does not
stop everything to issue the alert and then resume. The part of the
program that issues the alert is not dependent on the part that triggers
printing. They can occur simultaneously because they function
independently.

Working with Ok Http

Ok Http is a third party library that was introduced by Square in 2013
for sending and receive HTTP-based network requests.

Ok Http Android
Initially Android had only two HTTP clients: Http URL
Connection and Apache HTTP Client; for sending and receiving data
from the web. Each of these clients required a lot of boilerplate code to
be written inside the A sync Task or the background thread methods.
Moreover, these clients have their own sets of limitations when it came
to cancelling an HTTP request or connection-pooling.
Ok Http android provides an implementation of Http URL
Connection and Apache Client interfaces by working directly on a top
of java Socket without using any extra dependencies.

Ok Http Android Advantages

Some advantages that Ok Http brings to us are:
1. Connection pooling
2. Gziping

154
3. Caching Rest API integration
4. Recovering from network problems
5. Redirects
6. Retries
7. Support for synchronous and asynchronous calls

Synchronous vs Asynchronous calls

● Synchronous calls require an A sync Task wrapper around it. That
means it doesn’t support cancelling a request. Also, A sync Tasks
generally leak the Activity’s context, which is not preferred.
● Asynchronous Calling is the recommended way since it supports native
cancelling, tagging multiple requests and canceling them all with a single
method call (by invoking the cancel on the Activity instance inside
the on Pause or on Destroy method).

Retrofit and Volley

Now a days , Almost every mobile app includes some sort of network
hits to perform its functionality and there are many alternatives available
to perform network operations. Networking libraries are one of the best
option for this. Now the question arises which library we should use. The
confusion is mainly with two popular and most used libraries i.e. Retrofit
and Volley.
So, Here is a comparison of both the libraries with different parameters.

Uses /Code complexity :

Both Retrofit and Volley are easy to use and provides the feature to make
network calls both synchronously and asynchronously. If we talk about
the request and response handling than Retrofit treats the API calls as
simple java method calls and it also handle the JSON/Xml parsing itself,
while with Volley we have to do some extra code to achieve the same for
parsing(need to create a custom request).

Inbuilt Types :
The data returned by an API plays vital role in implementation of
network call and its handling. It is one of the important parameter to
decide which option we should use. Volley can capture four types of
responses automatically through these requests:
String Request – This type of request converts the response into a String.
JSON Object Request – This type of request and response is
automatically converted into a JSON Object.
JSON Array Request – This type of request and response is automatically
converted into a JSON Array.
155
 Mobile Application and Image Request – This type of request converts the response into a
User experience Design Lab decoded bitmap.
Retrofit can parse many other types of responses automatically like:
Boolean – Web API response needs to be a Boolean.
Integer – Web API response needs to be an integer.
Date – Web API response should be Long format date.
String – Web API response needs to be in String format.
Object – Web API response needs to be in JSON object.
Collections – Web API response needs to be in a String Format.
Image Loading:
Volley has an inbuilt support for image loading. It is packaged with a
loader a custom view called Network Image View which is specially
designed to download and show images.
On the other hand Retrofit does not provide any such feature, Other
libraries such as Picasso or glide is recommended to perform image
loading.
Caching : Android volley has a very elaborate and flexible caching
mechanism. When a request is made through volley first the cache is
checked for appropriate response if it is found there than it is returned
and parsed else network hit is made.
Retrofit does not support caching.
Retrying Mechanism : With volley we can set a retry policy using set
Retry Policy method. It support the customized request timeout, number
of retries and back off multiplier.
Retrofit does not support any retrying mechanism. But it can be achieved
manually by doing some extra code.
Request Cancellation : Both Volley and Retrofit supports request
cancellation.
Post Requests and Multipart uploads : Volley supports both post
requests and multipart uploads but for post requests we have to convert
our java objects to JSON Object. Also for multipart uploads we have to
do some extra code and use some additional classes.

6.2 SUMMARY
REST (Representational State Transfer) APIs, sometimes also referred to
as REST FUL APIs, are an increasingly popular design style. REST APIs
are built to take advantage of pre-existing protocols within an
environment, most commonly over HTTP for a Web API. The REST
API design is more lightweight and is known for its vast flexibility in
enabling modern business connectivity.

156
6.3 REFERENCES Rest API integration

1. Smashing UX Design. (by Jesmond J. Chudley)

2. Don't Make Me Think. (by Steve Krug)
3. 100 Things Every Designer Needs to Know About People. (by Susan
Weinschenk)
4. Lean UX. (by Jeff Gothelf and Josh Seiden)
5. The Design of Everyday Things. (by Don Norman)

6.4 UNIT END EXERCISE

Create an application using android async task in android studio.



157
 7
DATABASE CONNECTIVITY AND
DISTRIBUTING ANDROID
APPLICATION
Unit Structure :
7.0 SQ Lite Programming
7.1 Android database connectivity using SQ Lite
7.2 Distribution options
7.3 Packaging and Testing the Application
7.4 Distributing applications on Google play store
7.5 Questions
7.6 Quiz
7.7 Moocs
7.8 Video lectures
7.9 References

7.0 SQLITE PROGRAMMING

SQLite is a software library that implements a self-contained, server less,
zero-configuration, transactional SQL database engine. SQLite is an in-
process library that implements a self-contained, server less, zero-
configuration, transactional SQL database engine. SQLite engine is not a
standalone process and can link it statically or dynamically as per the
requirement with the application.

SQLite A Brief History

❖ 2000 - D. Richard Hipp designed SQLite for the purpose of no
administration required for operating a program.
❖ 2000 - In August, SQLite 1.0 released with GNU Database Manager.
❖ 2011 - Hipp announced to add UNQl interface to SQLite DB and to
develop UNQLite (Document oriented database).

158
SQLite Advantages: Database
Connectivity and
❖ SQLite is server less. Distributing Android
Application
❖ SQLite comes with zero-configuration.
❖ SQLite database is stored in a single cross-platform disk file.
❖ SQLite is very small and light weight.
❖ SQLite is self-contained.
❖ SQLite transactions are ACID-compliant.
❖ SQLite supports most of the query language features found in SQL92
(SQL2) standard.
❖ SQLite is written in ANSI-C and provides simple and easy-to-use
API.
❖ SQLite is available on UNIX (Linux, Mac OS-X, Android, iOS) and
Windows (Win32, WinCE, Win RT).

SQLite Limitations
Few unsupported features of SQL92 in SQLite are listed below:
Sr. No. Feature & Description
1 RIGHT OUTER JOIN
Only LEFT OUTER JOIN is implemented.
2 FULL OUTER JOIN
Only LEFT OUTER JOIN is implemented.
3 ALTER TABLE
The RENAME TABLE and ADD COLUMN variants of the ALTER
TABLE command are supported. The DROP COLUMN, ALTER
COLUMN, ADD CONSTRAINT are not supported.
4 Trigger support
FOR EACH ROW triggers are supported but not FOR EACH
STATEMENT triggers.
5 VIEWs
VIEWs in SQLite are read-only. You may not execute a DELETE,
INSERT, or UPDATE statement on a view.
6 GRANT and REVOKE
The only access permissions that can be applied are the normal file
access permissions of the underlying operating system.

SQLite Commands
The standard SQLite commands are CREATE, SELECT, INSERT,
UPDATE, DELETE and DROP and can be classified into groups based
on their operational nature:

159
 Mobile Application and DDL - Data Definition Language
User experience Design Lab
Sr. Command & Description
No.
1 CREATE
Creates a new table, a view of a table, or other object in database.
2 ALTER
Modifies an existing database object, such as a table.
3 DROP
Deletes an entire table, a view of a table or other object in the database.

DML - Data Manipulation Language

Sr. Command & Description

No.
1 INSERT
Creates a record
2 UPDATE
Modifies records
3 DELETE
Deletes records

DQL - Data Query Language

Sr. Command & Description

No.
1 SELECT
Retrieves certain records from one or more tables

Install SQLite on Windows

❖ Step 1 − Go to SQLite download page, and download precompiled
binaries from Windows section.
❖ Step 2 − Download sqlite-shell-win32-*.zip and sqlite-dll-win32-*.zip
zipped files.
❖ Step 3 − Create a folder C:\>sqlite and unzip above two zipped files in
this folder, which will give you sqlite3.def, sqlite3.dll and sqlite3.exe
files.
❖ Step 4 − Add C:\>sqlite in your PATH environment variable and
finally go to the command prompt and issue sqlite3 command, which
should display the following result.

160
C:\>sqlite3 Database
Connectivity and
SQLite version 3.7.15.2 2013-01-09 11:53:05 Distributing Android
Application
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

Install SQLite on Linux

Issue the following command to check if SQLite is installed on your
machine.
$sqlite3
SQLite version 3.7.15.2 2013-01-09 11:53:05
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>
If you do not see the above result, then it means you do not have SQLite
installed on your Linux machine. Following are the following steps to
install SQLite −
❖ Step 1 − Go to SQLite download page and download sqlite-autoconf-
*.tar.gz from source code section.
❖ Step 2 − Run the following command −
$tar xvfz sqlite-autoconf-3071502.tar.gz
$cd sqlite-autoconf-3071502
$./configure --prefix=/usr/local
$make
$make install
The above command will end with SQLite installation on your Linux
machine. Which you can verify as explained above.

Install SQLite on Mac OS X

Though the latest version of Mac OS X comes pre-installed with SQLite
but if you do not have installation available then just follow these
following steps −
❖ Step 1 − Go to SQLite download page, and download sqlite-autoconf-
*.tar.gz from source code section.
❖ Step 2 − Run the following command −
161
 Mobile Application and $tar xvfz sqlite-autoconf-3071502.tar.gz
User experience Design Lab
$cd sqlite-autoconf-3071502
$./configure --prefix=/usr/local
$make
$make install
The above procedure will end with SQLite installation on your Mac OS
X machine. Which you can verify by issuing the following command −
$sqlite3
SQLite version 3.7.15.2 2013-01-09 11:53:05
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>
Finally, you have SQLite command prompt where you can issue SQLite
commands for your exercises.

SQLite command prompt for various SQLite commands.

$sqlite3
SQLite version 3.3.6
Enter ".help" for instructions
sqlite>
For a listing of the available dot commands, you can enter ".help" any
time. For example −

sqlite>.help

The above command will display a list of various SQLite dot commands.

Sr.No. Command & Description

1 .backup ?DB? FILE

Backup DB (default "main") to FILE

2 .bail ON|OFF
Stop after hitting an error. Default OFF

162
3 .databases Database
Connectivity and
List names and files of attached databases Distributing Android
Application
4 .dump ?TABLE?
Dump the database in an SQL text format. If TABLE
specified, only dump tables matching LIKE pattern
TABLE

5 .echo ON|OFF
Turn command echo on or off

6 .exit
Exit SQLite prompt

7 .explain ON|OFF
Turn output mode suitable for EXPLAIN on or off. With
no args, it turns EXPLAIN on

8 .header(s) ON|OFF
Turn display of headers on or off

9 .help
Show this message

10 .import FILE TABLE

Import data from FILE into TABLE

11 .indices ?TABLE?
Show names of all indices. If TABLE specified, only show
indices for tables matching LIKE pattern TABLE

12 .load FILE ?ENTRY?

Load an extension library

13 .log FILE|off
Turn logging on or off. FILE can be stderr/stdout

163
 Mobile Application and 14 .mode MODE
User experience Design Lab
Set output mode where MODE is one of −
● csv − Comma-separated values
● column − Left-aligned columns.
● html − HTML <table> code
● insert − SQL insert statements for TABLE
● line − One value per line
● list − Values delimited by .separator string
● tabs − Tab-separated values
● tcl − TCL list elements

15 .nullvalue STRING
Print STRING in place of NULL values

16 .output FILENAME
Send output to FILENAME

17 .output stdout
Send output to the screen

18 .print STRING...
Print literal STRING

19 .prompt MAIN CONTINUE

Replace the standard prompts

20 .quit
Exit SQLite prompt

21 .read FILENAME
Execute SQL in FILENAME

22 .schema ?TABLE?
Show the CREATE statements. If TABLE specified, only
show tables matching LIKE pattern TABLE

23 .separator STRING
Change separator used by output mode and .import

164
 24 .show Database
Connectivity and
Show the current values for various settings Distributing Android
Application
25 .stats ON|OFF
Turn stats on or off

26 .tables ?PATTERN?
List names of tables matching a LIKE pattern

27 .timeout MS
Try opening locked tables for MS milliseconds

28 .width NUM NUM

Set column widths for "column" mode

29 .timer ON|OFF
Turn the CPU timer measurement on or off

.show command to see default setting for your SQLite command prompt.

sqlite>.show
echo: off
explain: off
headers: off
mode: column
nullvalue: ""
output: stdout
separator: "|"
width:
sqlite>

Make sure there is no space in between sqlite> prompt and dot command,
otherwise it will not work.
Formatting Output
You can use the following sequence of dot commands to format your
output.

165
 Mobile Application and sqlite>.header on
User experience Design Lab
sqlite>.mode column
sqlite>.timer on
sqlite>

The above setting produces the output as follows.

ID NAME AGE ADDRESS SALARY
---------- ---------- ---------- ---------- ----------
1 Paul 32 California 20000.0
2 Allen 25 Texas 15000.0
3 Teddy 23 Norway 20000.0
4 Mark 25 Rich-Mond 65000.0
5 David 27 Texas 85000.0
6 Kim 22 South-Hall 45000.0
7 James 24 Houston 10000.0
CPU Time: user 0.000000 sys 0.000000

The sqlite_master Table

The master table holds the key information about your database tables
and it is called sqlite_master.

sqlite>.schema sqlite_master

Produces the following result.

CREATE TABLE sqlite_master (
type text,
name text,
tbl_name text,
rootpage integer,
sql text
);

Case Sensitivity
SQLite is case insensitive, i.e. the clauses GLOB and glob have the
same meaning in SQLite statements.
166
Comments Database
Connectivity and
SQLite comments are extra notes, which can be added to increase its Distributing Android
readability and can appear anywhere. They begin with two consecutive "- Application
" characters (ASCII 0x2d) and extend up to and including the next
newline character (ASCII 0x0a) or until the end of input, whichever
comes first. We can also use C-style comments, which begin with "/*"
and extend up to and including the next "*/" character pair or until the
end of input, whichever comes first. C-style comments can span multiple
lines.

sqlite> .help -- This is a single line comment

SQLite Statements
SQLite statements start with any of the keywords like SELECT,
INSERT, UPDATE, DELETE, ALTER, DROP, etc., and end with a
semicolon (;).

SQLite ANALYZE Statement

ANALYZE;
or
ANALYZE database_name;
or
ANALYZE database_name.table_name;

SQLite AND/OR Clause

SELECT column1, column2....columnN

FROM table_name
WHERE CONDITION-1 {AND|OR} CONDITION-2;

SQLite ALTER TABLE Statement

ALTER TABLE table_name ADD COLUMN column_def...;

SQLite ALTER TABLE Statement (Rename)

ALTER TABLE table_name RENAME TO new_table_name;

SQLite ATTACH DATABASE Statement

ATTACH DATABASE 'DatabaseName' As 'Alias-Name';

SQLite BEGIN TRANSACTION Statement

167
 Mobile Application and BEGIN;
User experience Design Lab
or
BEGIN EXCLUSIVE TRANSACTION;

SQLite BETWEEN Clause

SELECT column1, column2....columnN

FROM table_name
WHERE column_name BETWEEN val-1 AND val-2;

SQLite COMMIT Statement

COMMIT;

SQLite CREATE INDEX Statement

CREATE INDEX index_name

ON table_name ( column_name COLLATE NOCASE );

SQLite CREATE UNIQUE INDEX Statement

CREATE UNIQUE INDEX index_name

ON table_name ( column1, column2,...columnN);

SQLite CREATE TABLE Statement

CREATE TABLE table_name(

column1 datatype,
column2 datatype,
column3 datatype,
.....
columnN datatype,
PRIMARY KEY( one or more columns )
);

SQLite CREATE TRIGGER Statement

CREATE TRIGGER database_name.trigger_name

BEFORE INSERT ON table_name FOR EACH ROW
BEGIN

168
 stmt1; Database
Connectivity and
stmt2; Distributing Android
Application
....
END;

SQLite CREATE VIEW Statement

CREATE VIEW data base_name.view_name AS

SELECT statement....;

SQLite CREATE VIRTUAL TABLE Statement

CREATE VIRTUAL TABLE database_name.table_name USING

weblog( access.log );
or
CREATE VIRTUAL TABLE database_name.table_name USING fts3( );

SQLite COMMIT TRANSACTION Statement

COMMIT;

SQLite COUNT Clause

SELECT COUNT(column_name)
FROM table_name
WHERE CONDITION;

SQLite DELETE Statement

DELETE FROM table_name

WHERE {CONDITION};

SQLite DETACH DATABASE Statement

DETACH DATABASE 'Alias-Name';

SQLite DISTINCT Clause

SELECT DISTINCT column1, column2....columnN

FROM table_name;

SQLite DROP INDEX Statement

DROP INDEX database_name.index_name;

169
 Mobile Application and SQLite DROP TABLE Statement
User experience Design Lab
DROP TABLE database_name.table_name;

SQLite DROP VIEW Statement

DROP INDEX database_name.view_name;

SQLite DROP TRIGGER Statement

DROP INDEX database_name.trigger_name;

SQLite EXISTS Clause

SELECT column1, column2....columnN

FROM table_name
WHERE column_name EXISTS (SELECT * FROM table_name );

SQLite EXPLAIN Statement

EXPLAIN INSERT statement...;

or
EXPLAIN QUERY PLAN SELECT statement...;

SQLite GLOB Clause

SELECT column1, column2....columnN

FROM table_name
WHERE column_name GLOB { PATTERN };

SQLite GROUP BY Clause

SELECT SUM(column_name)
FROM table_name
WHERE CONDITION
GROUP BY column_name;

SQLite HAVING Clause

SELECT SUM(column_name)
FROM table_name

WHERE CONDITION
GROUP BY column_name

170
HAVING (arithematic function condition); Database
Connectivity and
SQLite INSERT INTO Statement Distributing Android
Application
INSERT INTO table_name( column1, column2....columnN)
VALUES ( value1, value2....valueN);

SQLite IN Clause

SELECT column1, column2....columnN

FROM table_name
WHERE column_name IN (val-1, val-2,...val-N);

SQLite Like Clause

SELECT column1, column2....columnN

FROM table_name
WHERE column_name LIKE { PATTERN };

SQLite NOT IN Clause

SELECT column1, column2....columnN

FROM table_name
WHERE column_name NOT IN (val-1, val-2,...val-N);

SQLite ORDER BY Clause

SELECT column1, column2....columnN

FROM table_name
WHERE CONDITION
ORDER BY column_name {ASC|DESC};

SQLite PRAGMA Statement

PRAGMA pragma_name;
For example:
PRAGMA page_size;
PRAGMA cache_size = 1024;
PRAGMA table_info(table_name);

171
 Mobile Application and SQLite RELEASE SAVEPOINT Statement
User experience Design Lab
RELEASE savepoint_name;

SQLite REINDEX Statement

REINDEX collation_name;
REINDEX database_name.index_name;
REINDEX database_name.table_name;

SQLite ROLLBACK Statement

ROLLBACK;
or
ROLLBCK TO SAVEPOINT savepoint_name;

SQLite SAVEPOINT Statement

SAVEPOINT savepoint_name;

SQLite SELECT Statement

SELECT column1, column2....columnN

FROM table_name;

SQLite UPDATE Statement

UPDATE table_name
SET column1 = value1, column2 = value2....columnN=valueN
[ WHERE CONDITION ];

SQLite VACUUM Statement

VACUUM;

SQLite WHERE Clause

SELECT column1, column2....columnN

FROM table_name
WHERE CONDITION;

Create a new SQLite database

$sqlite3 DatabaseName.db

172
$sqlite3 testDB.db Database
Connectivity and
SQLite version 3.7.15.2 2013-01-09 11:53:05 Distributing Android
Application
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

Once a database is created, we can verify it in the list of databases using

SQLite .databases command.
sqlite>.databases
seq name file
--- --------------- ----------------------
0 main /home/sqlite/testDB.db
Use SQLite .quit command to come out of the sqlite prompt as follows −
sqlite>.quit
$
The .dump Command
.dump dot command to export complete database in a text file using the
following SQLite command at the command prompt.

$sqlite3 testDB.db .dump > testDB.sql

The above command will convert the entire contents

of testDB.db database into SQLite statements and dump it into ASCII
text file testDB.sql.

$sqlite3 testDB.db < testDB.sql

SQLite ATTACH DATABASE statement is used to select a particular

database, and after this command, all SQLite statements will be executed
under the attached database.

Syntax
ATTACH DATABASE 'DatabaseName' As 'Alias-Name';

sqlite> ATTACH DATABASE 'testDB.db' as 'TEST';

Use SQLite .database command to display attached database.

sqlite> .database
seq name file

173
 Mobile Application and --- --------------- ----------------------
User experience Design Lab
0 main /home/sqlite/testDB.db
2 test /home/sqlite/testDB.db

The database names main and temp are reserved for the primary
database and database to hold temporary tables and other temporary data
objects.

sqlite> ATTACH DATABASE 'testDB.db' as 'TEMP';

Error: database TEMP is already in use
sqlite> ATTACH DATABASE 'testDB.db' as 'main';
Error: database TEMP is already in use

SQLite DETACH DATABASE statement is used to detach and

dissociate a named database from a database connection which was
previously attached using ATTACH statement.
DETACH DATABASE 'Alias-Name';

sqlite>.databases
seq name file
--- --------------- ----------------------
0 main /home/sqlite/testDB.db
2 test /home/sqlite/testDB.db
3 currentDB /home/sqlite/testDB.db

Let's try to detach 'currentDB' from testDB.db using the following

command.

sqlite> DETACH DATABASE 'currentDB';

We will find that testDB.db is still connected with 'test' and 'main'.

sqlite>.databases
seq name file
--- --------------- ----------------------
0 main /home/sqlite/testDB.db
2 test /home/sqlite/testDB.db

SQLite CREATE TABLE statement is used to create a new table in any

of the given database.

174
CREATE TABLE database_name.table_name( Database
Connectivity and
column1 datatype PRIMARY KEY(one or more columns), Distributing Android
Application
column2 datatype,
column3 datatype,
.....
columnN datatype
);

sqlite> CREATE TABLE COMPANY(

ID INT PRIMARY KEY NOT NULL,
NAME TEXT NOT NULL,
AGE INT NOT NULL,
ADDRESS CHAR(50),
SALARY REAL
);
sqlite> CREATE TABLE DEPARTMENT(
ID INT PRIMARY KEY NOT NULL,
DEPT CHAR(50) NOT NULL,
EMP_ID INT NOT NULL
);
sqlite>.tables
COMPANY DEPARTMENT
sqlite>.schema COMPANY
CREATE TABLE COMPANY(
ID INT PRIMARY KEY NOT NULL,
NAME TEXT NOT NULL,
AGE INT NOT NULL,
ADDRESS CHAR(50),
SALARY REAL
);

175
 Mobile Application and 7.1 ANDROID DATABASE CONNECTIVITY USING
User experience Design Lab SQLITE
SQLiteDatabase namespace defines the functionality to connect and
manage a database. It provides functionality to create, delete, manage
and display database content.
Create a Database
Simple steps to create a database:
1. Create "SQLiteDatabase" object.
2. Open or Create a database and create a connection.
3. Perform insert, update or delete operation.
4. Create a Cursor to display data from the table of the database.
5. Close the database connectivity.
Step 1: Instantiate "SQLiteDatabase" object
SQLiteDatabase db;
We must import the android.database.sqlite.SQLiteDatabase namespace
in your application.
db=openOrCreateDatabase(String path, int mode, SQLiteDatabase.Curso
rFactory factory)
This method is used to create/open database. As the name suggests, it
will open a database connection if it is already there, otherwise, it will
create a new one.
Example:
db=openOrCreateDatabase("XYZ_Database",SQLiteDatabase.CREATE
_IF_NECESSARY,null);

Arguments:

String path Name of the database

Int mode operating mode. Use 0 or "MODE_PRIVATE" for the
default operation, or "CREATE_IF_NECESSARY"
if you like to give an option that "if a database is not
there, create it"
CursorFactory An optional factory class that is called to instantiate a
factory cursor when a query is called

Step 2: Execute DDL command

db.execSQL(String sql) throws SQLException
176
This command is used to execute a single SQL statement that doesn't Database
return any data means other than SELECT or any other. Connectivity and
Distributing Android
db.execSQL("Create Table Temp (id Integer, name Text)"); Application

This will create a table of "Integer" & "Text" fields.

Step 3: Create an object of "ContentValues" and Initiate it.
ContentValues values=new ContentValues();

This class is used to store a set of values.

values.put("id", eid.getText().toString());
values.put("name", ename.getText().toString());

String Key Name of the field as in table. Ex. "id", "name"

String Value Value to be inserted.

Step 4: Perform Insert Statement.

insert(String table, String nullColumnHack, ContentValues values)

String table Name of table related to the database.

String null If not set to null, the null Column Hack parameter
Column Hack provides the name of nullable column name to
explicitly insert a NULL into in the case where
your values is empty.
Content This map contains the initial column values for the
Values values row.

This method returns a long. The row ID of the newly inserted row, or -1
if an error occurred.
Example,
db.insert("temp", null, values);

Step 5: Create Cursor

This interface provides random read-write access to the result set
returned by a database query.
Cursor c=db.rawQuery(String sql, String[] selectionArgs)

177
 Mobile Application and Strign sql The SQL query
User experience Design Lab String You may include ?s in where clause in the query,
[]selectionArgs which will be replaced by the values from
selectionArgs. The values will be bound as Strings.

Example,
Cursor c=db.rawQuery("SELECT * FROM temp",null);

Methods

Move To Moves cursor pointer at a first position of a result set

First

move To Moves cursor pointer next to the current position.

Next

Is After Last Returns false, if the cursor pointer is not at last position
of a result set.

Example:
c.moveToFirst();
while(!c.isAfterLast())
{
//statement…
c.moveToNext();
}
Step 6: Close Cursor and Close Database connectivity
It is very important to release our connections before closing our
activity. It is advisable to release the Database connectivity in "onStop"
method. And Cursor connectivity after use it.
DatabaseDemoActivity.java
1. package com.DataBaseDemo;
2. import android.app.Activity;
3. import android.content.ContentValues;
4. import android.database.Cursor;
5. import android.database.SQLException;
178
6. import android.database.sqlite.SQLiteDatabase; Database
Connectivity and
7. import android.os.Bundle; Distributing Android
Application
8. import android.view.View;
9. import android.widget.Button;
10. import android.widget.EditText;
11. import android.widget.Toast;
12. public class DataBaseDemoActivity extends Activity {
/** Called when the activity is first created. */
13. SQLiteDatabase db;
14. Button btnInsert;
15. @Override
16. public void onCreate(Bundle savedInstanceState) {
17. super.onCreate(savedInstanceState);
18. setContentView(R.layout.main);
19. btnInsert=(Button)findViewById(R.id.button1);
20. try{
21. db=openOrCreateDatabase("StudentDB",SQLiteDatabase.CRE
ATE_IF_NECESSARY,null);
22. db.execSQL("Create Table Temp(id integer,name text)");
23. }catch(SQLException e)
24. {
25. }
26. btnInsert.setOnClickListener(new View.OnClickListener() {
27. @Override
28. public void onClick(View v) {
29. // TODO Auto-generated method stub
30. EditText eid=(EditText) findViewById(R.id.editText1);
31. EditText ename=(EditText)findViewById(R.id.editText2);
32. ContentValues values=new ContentValues();
33. values.put("id", eid.getText().toString());
179
 Mobile Application and 34. values.put("name", ename.getText().toString());
User experience Design Lab 35. if((db.insert("temp", null, values))!=-1)
36. {
37. Toast.makeText(DataBaseDemoActivity.this, "Record Succe
ssfully Inserted", 2000).show();
38. }
39. else
40. {
41. Toast.makeText(DataBaseDemoActivity.this, "Insert Error",
2000).show();
42. }
43. eid.setText("");
44. ename.setText("");
45. Cursor c=db.rawQuery("SELECT * FROM temp",null);
46. c.moveToFirst();
47. while(!c.isAfterLast())
48. {
49. Toast.makeText(DataBaseDemoActivity.this,c.getString(0)+
" "+c.getString(1),1000).show();
50. c.moveToNext();
51. }
52. c.close();
53. }
54. });
55. }
56. @Override
57. protected void onStop() {
58. // TODO Auto-generated method stub
59. db.close();
60. super.onStop();
61. }
62. }

180
 Database
Connectivity and
Distributing Android
Application

If you want to see where your database stored? Follow below instruction.
1. Start Your Emulator ( It is necessary to start Emulator to see File
Explorer content)
2. Open "File Explorer"

181
 Mobile Application and
User experience Design Lab

3. Data -> Data -> find your "package" -> databases -> "database"

7.2 DISTRIBUTION OPTIONS

We can distribute your Android apps to users in any way, using any
distribution approach that meets your needs. The process for building and
packaging your apps for distribution is the same, regardless of how you
distribute them saving your time and automate parts of the process as
required. The sections below highlight some of the alternatives for
distributing your apps.

Distributing Through an App Marketplace

To reach the broadest possible audience, you’d distribute your apps
through a marketplace, like Google Play. It is the premier marketplace
for Android apps and is particularly useful to a large global audience.
Google Play allows you to use the In-app Billing service and Licensing
service, makes it easy to sell in-app products like game jewels or app
feature upgrades it even prevent unauthorized installation and use of your
apps.

182
Distributing Your Apps by Email Database
Connectivity and
Distributing Android
Application

Figure 1. Users can simply click Install when you send them an
application via email.
An easy and quick way to release your apps is to send them to users by
email. When the user open your email on their Android-powered device,
the Android system recognizes the APK and displays an Install Now
button in the email message (see the above Figure 1). Users can install
your app by touching the button.
Distributing apps through email is convenient if you’re sending them to a
few trusted users, as it provides few protections from piracy and
unauthorized distribution; that is, anyone you send your apps to can
simply forward them to others.

Distributing Through a Website

You can make your app available for download on your own website or
server, including on a private or enterprise server. Initially you need to
prepare your apps for release in the normal way. Then all you need to do
is host the release-ready APK file on your website and provide a
download link to users.

User Opt-In for Apps from Unknown Sources

Figure 2. Users must enable the Unknown sources setting before they can
install apps not downloaded from Google Play.
Android protects users from inadvertent download and install of apps
from locations other than Google Play (which is trusted). It blocks such
installs until the user opts-in Unknown sources in Settings > Security,
183
 Mobile Application and shown in Figure 2. Users need to make this configuration change before
User experience Design Lab they download your apps to their devices.

7.3 PACKING AND TESTING THE APPLICATIONS

Packaging Your ANDROID Project
We will name the package of the project as a .APK file.
We are currently packaging in Development because we are testing this
game, but when your game is complete, you can package it
in Shipping by hovering over the Build Configurations option in
the Package Project menu.
1. In the File menu, go to Package Project > Android and select the
Texture format you want to package. We will choose
Android ETC2 as it is supported by all devices.

Different devices support different Texture formats depending on the

hardware they run on.

Format Description
ETC2 Supported by all OpenGL 3.x class devices and supports
alpha compression.
DXT Supported by Nvidia Tegra GPUs and supports alpha
compression.
ASTC Latest Texture compression format allowing more quality
control by specifying block size and supports alpha
compression. Available on some devices at this point.

If you are using an older version of Unreal Engine to support an existing

project, you will also have access to the following legacy Texture
formats.

184
 Format Description Database
ETC1 Supported by all Android based devices but cannot Connectivity and
Distributing Android
compress alpha textures (they are stored uncompressed).
Application
Recommend using an RGB and a separate alpha texture if
need alpha to get better compression.
ETC1a Uses ETC1 for non-alpha textures and ETC2 for alpha
texture. If the device does not support ETC2, alpha textures
will be uncompressed into RGBA at runtime. This format
can be used on both ETC1 and ETC2 devices, but ETC1
for non-alpha textures may not be as high-quality as ETC2.
ATC Supported by Qualcomm Adreno GPUs and supports alpha
compression.
PVRTC Supported by PowerVR GPUs and supports alpha
compression.
2. You will be prompted for a location to save your packaged game,
which should default to your project folder. Create a new folder and
call it AndroidBuilds.

3. While your project is being packaged a packaging message will

appear in the bottom right corner showing the progress of the
packing.

4. Once packaging is successful, a Packaging Complete message will

appear in the bottom right of the editor.

5. Navigate to the folder you created in step two. There will be a new
folder named specifically for the texture type you selected when
packaging. In this example, the folder is named Android_ETC2.

185
 Mobile Application and
User experience Design Lab

Deploying A Packaged Project to Device

Now that we have packaged your project as a .APK, we will look into
how to deploy your build to a device.
1. Plug your Android device into your PC with a USB cable. If prompted,
allow your PC to change files.
2. Open up the Android_ETC2 folder and then Double-click on
the Install_[ProjectName]_Development.bat batch file to install the
project on your Android device.

If you do not have your device plugged in via USB, running the .BAT
file will do nothing.
When you have completed this How-To, your project should appear on
your Android device per the following image:

186
In addition, you will have packaged .APK files and accompanying Database
helpers to deploy them to other devices for testing. Connectivity and
Distributing Android
Packaging App Bundles Application

Android App Bundles are a distribution format offered by Google as an

alternative to packaging .apks. Instead of creating different .apks for
different subsets of devices, you can create a single Android App Bundle
build (.aab) and upload it to the Google Play Store. The store's dynamic
distribution system then uses the contents of the App Bundle to generate
a .apk optimized for the user's specific device when they download the
application.
In addition to greatly condensing the work involved in maintaining builds
on the Google Play Store, App Bundle builds can distribute .apks with up
to 150 MB instead of the previous limit of 100 MB. This limit applies to
the final .apk and not the App Bundle used to generate it.
To create an App Bundle Build, open your Project Settings and navigate
to the Platforms > Android section. In the App Bundles section,
enable Generate Bundle (AAB).

Now when you package a project for Android, you will generate a .aab
file to upload to Google Play. You will also generate a universal .apk for
testing purposes.
The other settings available for configuring App Bundle builds enable
you to fine-tune the degree of sensitivity that the App Bundle will use in
generating the final .apks for your project.

Setting Description
Generate Enabling this setting will allow the App Bundle to
Universal APK generate a universal .apk file for end-users, which
from Bundle can be run on any kind of device. This does not
affect the universal .apk that is generated for
testing on your machine.
Enable ABI Split The App Bundle will generate separate .apks
based on the Application Binary Interface used by
the user's CPU. For example: arm64-v8a, x86,
x86_64.
Enable language The App Bundle will generate separate .apks
split based on the user's language. Only strings
localized for the user will be downloaded.

187
 Mobile Application and Enable density The App Bundle will generate separate .apks
User experience Design Lab split based on image resolution and DPI. Only icons
and splash screens compatible with the user's
device will be downloaded.

If you enabled ABI split but disabled language split, the .aab would tailor
the final APK to a user's device based on the compatible ABI for their
device, but every user would receive resources for all languages
regardless of their device or language settings. The default settings will
result in the smallest possible size for the final .apk, while disabling these
settings will result in larger .apks.

Test Structure
Android's build and test tools assume that test projects are organized into
a standard structure of tests, test case classes, test packages, and test
projects.

Testing Tools in android

There are many tools that can be used for testing android applications
like Junit, Monkey and some are third party tools that can be used to test
android applications.
● JUnit
● Monkey

JUnit
You can use the JUnit TestCase class to do unit testing on a class that
doesn't call Android APIs. TestCase is also the base class for
AndroidTestCase, which you can use to test Android-dependent objects.
Besides providing the JUnit framework, AndroidTestCase offers
Android-specific setup, teardown, and helper methods.

188
In order to use TestCase, extend your class with TestCase class and Database
implement a method call setUp(). Connectivity and
Distributing Android
public class MathTest extends TestCase { Application

protected double fValue1;

protected double fValue2;

protected void setUp() {

fValue1= 2.0;
fValue2= 3.0;
}
}

For each test implement a method which interacts with the fixture. Verify
the expected results with assertions specified by calling
assertTrue(String, boolean) with a boolean.

public void testAdd() {

double result= fValue1 + fValue2;
assertTrue(result == 5.0);
}

The assert methods compare values you expect from a test to the actual
results and throw an exception if the comparison fails.
Once the methods are defined you can run them.

TestCase test= new MathTest("testAdd");

test.run();

Monkey
The UI/Application Exerciser Monkey, usually called "monkey", is a
command-line tool that sends pseudo-random streams of keystrokes,
touches, and gestures to a device. You run it with the Android Debug
Bridge (adb) tool.
You use it to stress-test your application and report back errors that are
encountered. You can repeat a stream of events by running the tool each
time with the same random number seed.

189
 Mobile Application and Monkey features
User experience Design Lab
Monkey has many features, and is categorized to four:
❖ Basic configuration options
❖ Operational constraints
❖ Event types and frequencies
❖ Debugging options

Monkey Usage
In order to use monkey, open up a command prompt and just navigate to
the following directory.
android ->sdk ->platform-tools
Once inside the directory, attach your device with the PC , and run the
following command.
adb shell monkey -p your.package.name -v 500
This command can be broken down into these steps.
● adb - Android Debug Bridge. A tool used to connect and sends
commands to your Android phone from a desktop or laptop computer.
● shell - shell is just an interface on the device that translates our
commands to system commands.
● monkey - monkey is the testing tool.
● v - v stands for verbose method.
● 500- it is the frequency conut or the number of events to be sent for
testing.

190
In the above command, you run the monkey tool on the default android Database
UI application. By typing this command , you are actually generating 500 Connectivity and
random events for testing. Distributing Android
Application

Example
It creates a basic application which can be used for monkey. To
experiment with this example, you need to run this on an actual device
and then follow the monkey steps explained in the beginning.

Steps Description
1 You will use Android studio to create an Android application
under a package com.tutorialspoint.myapplication.
2 Modify src/MainActivity.java file to add Activity code.
3 Modify layouta XML file res/layout/activity_main.xml add
any GUI component if required.
4 Create src/second.java file to add Activity code.
5 Modify layout XML file res/layout/view.xml add any GUI
component if required.
6 Run the application and choose a running android device and
install the application on it and verify the results.

Here is the content of MainActivity.java.

package com.tutorialspoint.myapplication;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
191
 Mobile Application and import android.view.View;
User experience Design Lab
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
Button b1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1=(Button)findViewById(R.id.button);
}

public void button(View v){

Intent in =new Intent(MainActivity.this,second.class);
startActivity(in);
}
}

Here is the content of second.java.

package com.tutorialspoint.myapplication;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
public class second extends Activity{
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.view);
Button b1=(Button)findViewById(R.id.button2);
192
 b1.setOnClickListener(new View.OnClickListener() { Database
Connectivity and
@Override Distributing Android
Application
public void onClick(View v) {

Toast.makeText(second.this,"Thanks",Toast.LENGTH_SHORT).show();
}
});
}
}

Here is the content of activity_main.xml.

In the below code abc indicates the logo of tutorialspoint.com

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="UI Animator Viewer"
android:id="@+id/textView"
android:textSize="25sp"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"

193
 Mobile Application and android:layout_height="wrap_content"
User experience Design Lab
android:text="Tutorials point"
android:id="@+id/textView2"
android:layout_below="@+id/textView"
android:layout_alignRight="@+id/textView"
android:layout_alignEnd="@+id/textView"
android:textColor="#ff36ff15"
android:textIsSelectable="false"
android:textSize="35dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:src="@drawable/abc"
android:layout_below="@+id/textView2"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:onClick="button"
android:id="@+id/button"
android:layout_below="@+id/imageView"
android:layout_centerHorizontal="true"
android:layout_marginTop="100dp" />
</RelativeLayout>

194
Here is the content of view.xml Database
Connectivity and
<?xml version="1.0" encoding="utf-8"?> Distributing Android
Application
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="button"
android:id="@+id/button2"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tutorials point "
android:id="@+id/textView3"
android:textColor="#ff3aff22"
android:textSize="35dp"
android:layout_above="@+id/button2"
android:layout_centerHorizontal="true"
android:layout_marginBottom="90dp" />
</RelativeLayout>

Here is the content of Strings.xml.

<resources>
<string name="app_name">My Application</string>
</resources>

195
 Mobile Application and Here is the content of AndroidManifest.xml.
User experience Design Lab
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.tutorialspoint.myapplication" >
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER"
/>
</intent-filter>
</activity>
<activity android:name=".second"></activity>
</application>
</manifest>

To run the app from Android studio, open one of your project's activity
files and click Run icon from the toolbar.

196
 Database
Connectivity and
Distributing Android
Application

Select your mobile device as an option and then check your mobile
device which will display application screen.

7.4 DISTRIBUTING APPLICATIONS ON GOOGLE

PLAY STORE
Android App on Google Play Store?
Smartphones are among the most essential gadgets for users. Various
applications like games, music player, camera, etc. are built for these
smartphones for running on Android. Google Play store features quite 3.3
million apps.

So let’s understand step by step process to publish your android app on

google play store.
Step 1: Make a Developer Account
A developer account is must be needed to upload an app on the Google
Play Store, and the process is very simple.

197
 Mobile Application and
User experience Design Lab

The account can be created in four simple steps:

1. Sign-In with Your Google Account
2. Accept Terms
3. Pay Registration Fee of $25.
4. Complete Your Account Details
Step 2: After you completed step 1 you will be redirected to this page
where you have to click on the CREATE APPLICATION button.

Once you click on it a pop up will be shown like this where you have to
choose your Default language and Title of your app. Then click on
the CREATE button.

Step 3: Store listing

After you completed step 2 you will be redirected to this page where you
have to provide the Short description and Full description of your App.

198
 Database
Connectivity and
Distributing Android
Application

Then you scroll down the page and now you have to add the Hi-res
icon of your app.

Then you have to provide the Screenshots of your app.

Ant next thing you have to provide is the Feature Graphic of your app.
Note that this graphic is then used everywhere your app is featured on
Google Play.

199
 Mobile Application and
User experience Design Lab

Then come to Categorization part where you have to provide

your Application type and Category of your app.

Then come to Contact details part where you have to provide

your Website(if any), email, and Phone of yours.

And finally when you click on SAVE DRAFT button you can see
that Store listing tab is now become turned to green and you are done for
Store listing.

200
 Database
Connectivity and
Distributing Android
Application

Step 4: App release

After completing step 3 go to App releases then scroll down
to Production track and click on MANAGE button.

After redirecting to the next page click on the CREATE

RELEASE button.

After that on the next page, you have to upload your APK file
in Android App Bundles and APKs to add section.

201
 Mobile Application and
User experience Design Lab

After that simply click on the SAVE button.

Step 5: Content rating

Now after completing step 4 go to Content rating and click
on CONTINUE button.

202
After that fill your email address as well as confirm the email address. Database
Connectivity and
Distributing Android
Application

And then Select your app category.

After selecting your app category make sure that you read all of these
and answer them correctly.

And after answering them correctly don’t forget to click on SAVE

QUESTIONNAIRE button.

203
 Mobile Application and
User experience Design Lab

Once you saved all those things then click on CALCULATE

RATING button.

When you redirected to another page scroll down and click on APPLY
RATING button. And you are done for Content rating section. Don’t
forget to notice that Content rating section is now become turned to
green.

Step 6: Pricing & distribution

Then go to the Pricing & distribution section. Then select the country
in which you want to available your app.

204
 Database
Connectivity and
Distributing Android
Application

Then go down and down and check out the Content guidelines and US
export laws section by marking them tick mark. And click on the SAVE
DRAFT button. Don’t forget to notice that Pricing &
distribution section is now become turned to green tick.

Step 7: App content

Then come to the App content section. And in the Privacy
policy section click on the Start button.

205
 Mobile Application and And then provide a valid Privacy policy URL. Note that google will
User experience Design Lab check this.

Then go back and continue further steps by clicking start button

in Ads section.

Then select does your app contain ads or not? And click
on SAVE button.

206
Then again go back and continue further steps by clicking start button Database
in Target audience and content section. Connectivity and
Distributing Android
Application

In the next page select the Target age group and scroll down and click
on the Next button.

Then check the Appeal to children section. And click on

the Next button.

207
 Mobile Application and On the next page click on the Save button and you are done for App
User experience Design Lab content section.

Step 8: App releases

Again go back to the App releases section. And in the Production
track click on the EDIT RELEASE button.

Then on the next page go down and down and click on

the REVIEW button.

And finally, on the next page click on the START ROLLOUT TO

PRODUCTION button to send your app to review. And you are finally
done.

208
After usually 4 to 5 days they will review your app and let you know to Database
either approve or reject your app. Connectivity and
Distributing Android
Application

7.5 QUESTIONS
1) What is SQLite?
2) Who was the designer of SQLite?
3) What are the most important features of SQLite?
4) What are the advantages of using SQLite?
5) How would you create a database in SQLite?
6) How would you create a table in SQLite database?
7) How would you drop a table in SQLite database?
8) How would you create an AUTOINCREMENT field?
9) What data types are supported by SQLite?
10) How to insert data in a table in SQLite?
11) How would you retrieve data from SQlite table?
12) What is the use of UPADTE query in SQLIte?
13) How can you delete the existing records from a table in SQLite?
14) What is the use of WHERE clause in CRUD statements?
15) What is the usage of AND & OR operators with WHERE clause?
16) What is the usage of LIKE operator with WHERE clause?
17) What is the use of LIMIT clause with SELECT query?

209
 Mobile Application and
User experience Design Lab 18) Why is ORDER BY clause used with SELECT statement?
19) What is the use of SQLite GROUP BY clause?
20) What is the use of DISTINCT clause in SQLite?
21) What is UNION operator? How does it work?
22) What is UNION ALL operator? What is the difference between
UNION and UNION ALL operator?
23) What is SQLite JOIN? How many types of JOINS are supported in
SQLite?
24) What is SQLite INNER JOIN?
25) What is SQLite OUTER JOIN?
26) Explain SQLite CROSS JOIN.
27) What is SQLite date and time () function?
28) What is the use of date() function in SQLite?
29) What is the use of datetime() function in SQLite?
30) What is SQLite julianday() function?
31) What is the use of SQLite now() function?
32) What is the usage of SQLite strftime() function?
33) What is the use of SQLite time() function?
34) What do you understand by SQLite aggregate functions?
35) What is SQLite MIN aggregate function?
36) What is SQLite MAX aggregate function?
37) What is SQLite AVG aggregate function?
38) What is SQLite COUNT aggregate function?
39) What is SQLite SUM aggregate function?
40) What is the difference between SQL and SQLite?
41) What is SQLite Transactions?
42) In which areas, SQLite is preferred most?

210
7.6 QUIZ Database
Connectivity and
1. The SQLite database management system is an ____ database. Distributing Android
Application
A. Embedded relational
B. Non-embedded relational
C. Non-relational
D. Structural
2. The SQLite database engine is ____. It is self-contained and no
configuration is required.
A. Serverless
B. Transactional

C. Both A and B
D. None of the above
3. An ____, self-contained, stand-alone, transactional relational database
engine, SQLite is designed to be embedded within an application
without requiring additional configuration.

A. Open-source
B. Closed-source
C. Open-end
D. Open-wire
4. SQLite differs from most other SQL databases because it is based on a
server process instead of a ____ server.
A. Unique
B. Mixed
C. Configured

D. Separate
5. In SQLite, files are ____ directly to disk.
A. Read
B. Written

C. Both A andB
D. None of the above

211
 Mobile Application and 6. Typically, a single disk file contains the entire SQL database,
User experience Design Lab including ____ and views.
A. Tables
B. Indices
C. Triggers

D. All of the above

7. SQLite is written in -
A. C
B. C#
C. C++

D. ANSI-C
8. SQLite is -
A. Data-based

B. File-based
C. Structure-based
D. None of the above
9. SQLite supports many of the features of SQL and is fast; however,
____ procedures are not supported.

A. Stored
B. Bypass
C. Failed
D. Transactional
10. SQLite is a ____ database resource.
A. Interface
B. Non-interface

C. Portable
D. Non-portable

212
11. For your programming language to access that database, you'll need Database
an SQLite ____. Connectivity and
Distributing Android
A. Powerplug Application

B. Extension
C. Structure
D. Database
12. In contrast with other database management systems like SQL Server
or Oracle, SQLite is very small (less than ____ in size).
A. 200 kb

B. 500 kb
C. 1000 kb
D. 1 MB
13. What is/are the feature(s) of SQLite?
A. Totally free
B. Serverless
C. Very flexible
D. All of the above
14. What is not the feature of SQLite?
A. Configuration Not Required

B. Storage of data is tough

C. Variable length of columns
D. Cross-platform DBMS
15. ____ databases can be accessed simultaneously with SQLite in the
same session.
A. Two
B. Three
C. Four

D. Multiple

213
 Mobile Application and 16. Several programming languages support SQLite's API such as -
User experience Design Lab
A. PHP
B. Java
C. Python

D. All of the above

17. SQLite is available on -
A. Windows
B. Linux

C. Both A and B
D. None of the above.
18. In addition to version control systems, financial analysis tools, media
cataloging and editing suites, CAD packages, and record keeping
programs, SQLite has been used successfully in many desktop
applications as well as ____ file formats.

A. On-disk
B. Off-disk
C. Disk
D. None
19. What is/are the advantage(s) of SQLite?
A. Lightweight
B. Better Performance
C. No Installation Needed

D. All of the above

20. In addition to being a very light weight database, SQLite can be
easily integrated into devices such as ____, home electronic devices,
and so forth.
A. Televisions
B. Mobile Phones
C. Cameras

D. All of the above

214
21. As SQLite databases are almost ____ faster than the File system, Database
reading and writing operations are very fast. Connectivity and
Distributing Android
A. 10% Application

B. 35%
C. 65%
D. 95%
22. Instead of reading the whole file and storing it in memory, SQLite
only ____ the data that is needed.
A. Adds
B. Restores

C. Loads
D. Deletes
23. When you edit small segments of the file, SQLite ____ only the
portions that have been edited.
A. Writes
B. Rewrites

C. Overwrites
D. None
24. Which of the following is TRUE about the reliability of SQLite?
A. Your content is continuously updated, so when the power goes out
or the computer crashes, little or no work is lost.
B. I/O code written in SQLite is less likely to be bug-prone than
custom-written code.
C. In contrast to procedural code, SQLite queries are smaller, so the
chances of a bug occurring are lower.

D. All of the above

25. This open-source database management system is compatible with
both big- and little-endian architectures, including ____ operating
systems.
A. 32-bit
B. 64-bit

C. Both A and B
D. None of the above
215
 Mobile Application and 26. The same application file can be accessed and written by ____
User experience Design Lab processes without interfering with one another.
A. Two
B. Three
C. Five

D. Multiple
27. Which of the following is TRUE about the portability of SQLite?
A. There is one compatibility issues with any of the programming
languages
B. There are two compatibility issues with any of the programming
languages
C. There are no compatibility issues with any of the
programming languages
D. There are multiple compatibility issues with any of the
programming
28. What is TRUE about accessibility of SQLite?
A. A number of third-party tools are available for accessing the
SQLite database
B. There is a greater likelihood of recovering content from a SQLite
database if it has been lost
C. Code is short-lived compared to data

D. All of the above

29. Because SQLite allows access to and update content in a concise
manner rather than through lengthy and error-prone procedural
queries, it reduces the application's ____.

A. Cost
B. Size
C. Storage
D. Fields

216
30. What is TRUE about reducing the cost and complexity in SQLite? Database
Connectivity and
A. With the addition of new tables and/or columns, SQLite can Distributing Android
easily be extended in the future Application

B. Backward compatibility is also preserved

C. Both A and B
D. None of the above
31. HTTP requests with _____ traffic is/are handled by SQLite.
A. Low
B. Medium

C. Both A and B
D. None of the above
32. Most databases have a size limit of ____.
A. 2 KB
B. 2 MB

C. 2 GB
D. 2 TB
33. With SQLite, there is no ____ required, making it an excellent choice
for small businesses.
A. Configuration
B. Administration

C. Both A and B
D. None of the above
34. How many types of SQLite commands are there?
A. 1
B. 2

C. 3
D. 4

217
 Mobile Application and 35. Which of the following is/are SQLite command(s)?
User experience Design Lab
A. DDL
B. DML
C. DQL

D. All of the above

36. What is the full form of DQL?
A. Data Quantization Language

B. Data Query Language

C. Data Qualcomm Language
D. Data Quarter Language
37. How many commands are there in DDL?
A. 1
B. 2

C. 3
D. 4
38. Which of the following is/are the DDL command(s)?
A. CREATE
B. ALTER
C. DROP

D. All of the above

39. The CREATE command creates ____ in the database.
A. Tables
B. Views of tables
C. Other objects
D. All of the above
40. A table can be ____ with the ALTER command.
A. Created
B. Modified
C. Recreated
D. Deleted

218
41. You can delete a whole table, a view of a table, or any other object Database
within a database by using the ____ command. Connectivity and
Distributing Android
A. DELETE Application

B. DROP
C. REMOVE
D. None
42. How many commands are there in DML?
A. 1
B. 2

C. 3
D. 4
43. Which of the following is/are the command(s) in DML?
A. INSERT
B. UPDATE
C. DELETE

D. All of the above

44. How many commands are there in DQL?
A. 1
B. 2
C. 3
D. 4
45. SQLite dot commands are not terminated by -
A. Colon (:)
B. Semicolon (;)
C. Both A and B
D. None of the above
46. What does .backup ?db? File command do?
A. It takes DB(default "main") backup to file
B. It takes file backup to file
C. It takes file backup to DB(default "main")
D. It takes DB(default "main") backup to DB

219
 Mobile Application and 47. What does .bailon|off command do?
User experience Design Lab
A. It stops after hitting an error. default off
B. It starts after hitting an error
C. It stops after switching off
D. It defaults to off
48. What does .databases command do?
A. It removes files of attached databases
B. It adds files of attached databases

C. It lists names and files of attached databases

D. It alter names and files of attached database
49. Does .dump ?table? command do?
A. Databases are dumped in SQLite format

B. Databases are dumped in SQL text format

C. Databases are dumped in PL/SQL format
D. Databases are dumped in SQL image format
50. What does .echoon|off command do?
A. It turns the echo command on
B. It turns the echo command off

C. It turns the echo command on or off

D. None of the above

7.7 MOOCS
1. SQLite for beginners. Udemy. https://www.udemy.com/course/sqlite-
for-beginners/
2. SQLite Fundamentals - Comprehensive SQL course on SQLite.
Udemy. https://www.udemy.com/course/sqlite-sql-beginners/
3. Learn SQLite Programming on Android Kitkat. Udemy.
https://www.udemy.com/course/learn-sqlite-programming-on-
android-kitkat/
4. Learn SQLite Database in Android. Udemy.
https://www.udemy.com/course/learn-sqlite-database-in-android/

220
5. SQLite For Beginners Learn SQL from Scratch. Eduonix. Database
https://www.eduonix.com/courses/Web-Development/sqlite-for- Connectivity and
beginners-learn-sql-from-scratch Distributing Android
Application
6. Overview of SQLite. Coursera.
https://www.coursera.org/lecture/androidapps-2/overview-of-sqlite-
part-1-HsicE

7.8 VIDEO LECTURES

1. SQLite What, Why , Where.
https://www.youtube.com/watch?v=KHc2iiLEDoQ
2. SQLite Database for Android - Full Course.
https://www.youtube.com/watch?v=312RhjfetP8
3. SQLite on Windows.
https://www.youtube.com/watch?v=L3FwRRx6bqo
4. QLite Database for Android - Full Course.
https://www.youtube.com/watch?v=312RhjfetP8
5. How to create Sqlite database - SQlite tutorial-1.
https://www.youtube.com/watch?v=Pni6WxHFTUg
6. Android SQLite Database Tutorial.
https://www.youtube.com/watch?v=CzGNaiSoh7E
7. Android SQLite Database Tutorial.
https://www.youtube.com/watch?v=OlMDuBfQAc8

7.9 REFERENCES
1. https://docs.unrealengine.com/4.26/en-
US/SharingAndReleasing/Mobile/Android/PackagingAndroidProject/
2. https://www.tutorialspoint.com/android/android_testing.htm
3. http://docs.52im.net/extend/docs/api/android-50/distribute/tools/open-
distribution.html
4. https://developer.android.com/distribute/marketing-tools/alternative-
distribution
5. https://www.tutorialspoint.com/sqlite/sqlite_create_table.htm
6. https://www.geeksforgeeks.org/how-to-publish-your-android-app-on-
google-play-store/
7. https://www.c-sharpcorner.com/UploadFile/88b6e5/sqlitedatabase-
connectivity/


221
 8
OPEN SOURCE UX TOOLS
Unit Structure
8.1 Study of open source UX tools
8.2 Questions
8.3 Quiz
8.4 Moocs
8.5 Video Lectures
8.6 References

8.1 STUDY OF OPEN SOURCE UX TOOLS

PROTOTYPING TOOLS
Conceptly
Concept.ly is a web based collaboration and prototyping tool. It allows
you to upload designs and then add hotspots to quickly create an
interactive prototype. It can create both web and mobile prototypes and
as well as being integrated with Drop box has lots of nice collaboration
features such as annotations and feedback capture, live notifications and
being able to see the design history for a screen and project.

Fig 1. Concept.ly – A wireframing and prototyping tool

Fluid
Fluid is a web based tool for creating mobile app wireframes and
prototypes. It provides a drag and drop interface for building mobile app
mock-ups and comes with large library of ready-made iOS, Android and
Windows UI widgets for smartphone and tablet.

222
 Open Source UX
Tools

Fig 2. Fluid – A wire framing and prototyping tool

InVision
In Vision allows you to easily create interactive prototypes by adding
hotspots to uploaded designs and provides lots of great collaboration and
presentation features, including annotations, tracked feedback and project
updates. It has lots of cool features like automatic Drop box syncing and
user testing capture and is probably the slickest prototyping tool currently
out there.

Fig 3. In Vision – A great design collaboration tool

Marvel
Marvel allows you to create interactive web, tablet and mobile prototypes
from imported screen designs. You can automatically synch Photoshop
PSDs through Drop Box and even capture feedback from clients and
colleagues within the tool.

223
 Mobile Application and
User experience Design Lab

Fig 4. Marvel – A prototype generator

Mock flow
Mock flow provide a suite of online design and prototyping tools. These
include Wireframe Pro for creating wireframes; Design Collab for
sharing and reviewing designs with your team; Website Pro, a
development platform to code, manager and host static websites;
Annotate Pro for annotating designs and Banner Pro for creating
annotated banners and slideshows in HTML5.

Fig 5. MockFlow – A wireframing and prototyping tool

Open Office
Open Office is open source’s answer to Microsoft Office. It includes
Writer, a word processor; Calc a spreadsheet tool; Impress, that can be
used to create PowerPoint like prototypes and Draw for creating
diagrams, images and graphics.

224
 Open Source UX
Tools

Fig 6. Open Office – The open source answer to Microsoft Office

Origami
Origami is Facebook’s free prototyping tool. It allows you to create
desktop, tablet and mobile prototypes using imported screens and
components. It supports a wide range of interactions, such as scrolling,
swiping, tapping and dragging as well as common design patterns, such
as slide in navigation.

Fig 7. Origami – A mobile app prototyping tool

Pixate
Pixate is a mobile prototyping tool that allows you to build mobile
prototypes that run as native apps. There is both a PC and Mac version
and like most mobile prototyping tools you create a prototype from
design components that you import into the tool. Pixate has now joined
the growing family of Google tools, so expect more features to be added
in the future.

225
 Mobile Application and
User experience Design Lab

Fig 8. Pixate – A mobile app prototyping tool

Webflow
Webflow is a powerful drag and drop website builder used to design and
launch responsive websites without writing code and now supports not
only static websites, but CMS driven dynamic websites as well.

Fig 9. Webflow – A very powerful dynamic and responsive website and

prototype builder

Weld
Weld is another drag and drop website builder that allows you to quickly
create responsive websites, prototypes and apps. It’s newer to the game
than Webflow and doesn’t yet have so many bells and whistles, but looks
very promising.

226
 Open Source UX
Tools

Fig 10. Weld – A drag and drop website and prototype builder

DESIGN TOOLS
Gimp
Gimp is an open source graphics tool and is very useful for all manner of
graphic and design related tom foolery.

Fig 11. Gimp – The open source answer to Photo Shop

Pinterest
Pinterest describes itself as a visual discovery tool that you can use to
keep a track of great designs you find and to share things like design
patterns with others.

227
 Mobile Application and
User experience Design Lab

Fig 12. Pinterest – Great for collating design examples and patterns
User research tools
Ever note
Ever note is a fantastic app for keeping track of notes, information,
photos, arte facts and anything else that you want to store and keep track
of. It’s a great way to maintain a digital repository of stuff for a project
and because you can sort your notes into notebooks and add tags, it’s
very easy to organise your notes and to retrieve information.

Fig 13. Evernote – A great way to manage digital notes

Reframer
Reframer is a qualitative analysis tool from Optimal Workshop. It allows
to add notes from user interviews and user testing sessions and to include
tags and a significance rating so that we can easily identify themes,
retrieve key information and generally slice and dice your data.

228
 Open Source UX
Tools

Fig 14. Reframer – A great free qualitative analysis tool

Trello
Trello is a great tool for capturing, organising and tracking tasks and
information. It allows to create cards and boards to help track and
organise your stuff, be it tasks, research insights or simply ideas.

Fig 15. Trello – Useful for card sorting and lots of other UX related stuff

User testing tools

Chalkmark
Chalkmark is part of Optimal Workshop’s suite of UX tools. It allows to
quickly capture user feedback by capturing where users would click on
an image to carry out a task.

229
 Mobile Application and
User experience Design Lab

Fig 16. Chalk mark – A click testing tool

Google hangouts
Google hangouts is a free video conferencing tool that is great for
communicating, collaborating and also remote user testing. It’s a great
way to run remote user testing sessions and even supports remote
desktop control so you can run a prototype locally and invite participants
to take control of your computer to use it.

Fig 17. Google hangouts – An easy way to carry out remote user testing

Join. me
Join. me is an online meeting tool, supports screen sharing and remote
desktop control.

230
 Open Source UX
Tools

Fig 18. Join. me – A great tool for remote user testing

Treejack
Tree jack is another great UX tool from Optimal Workshop. Tree jack
allows you to test an information architecture (IA) by carrying out
‘reverse card sorting’. You upload your IA, which might be the site
structure or a taxonomy used then ask users where they would go to find
something within a clickable navigation tree of your IA.

Fig 19. Tree jack – A navigation testing tool

Survey tools
Google forms
Google forms is a great way to quickly create online surveys. It’s a little
bit limited when compared to the Survey Monkeys and Survey Gizmos
of the world but what do you expect given that it’s free?

231
 Mobile Application and
User experience Design Lab

Fig 20. Google forms – Free surveys and forms

Plot
Plot allows you to capture in-product video feedback from your users.
Users reply to questions (such as “How was your setup experience?”)
and can record in-product feedback videos with their screen and
microphone.

Fig 21. Plot – A survey and video feedback capture tool

Annotation tools
Adobe reader
Adobe reader is of course Adobe’s free PDF viewer. Not only can it be
used to view PDFs but it can also be used to add annotations to a PDF.

232
 Open Source UX
Tools

Fig 22. Adobe Reader – Great for annotating designs

Windows Edge
Windows Edge is of course Microsoft’s replacement for Internet
Explorer – the much loathed ugly step sister of web browsers, and comes
free with Windows 10. Not only is a much better browser than its
predecessor, but it also allows you to annotate web pages.

Fig 23. Card sorting tools

Optimal Sort
Optimal Sort is an online card sorting tool from Optimal Workshop. It
allows you to carry out closed card sorting where by participants sort
items into predefined categories and open card sorting where by
participants can choose their own categories.

233
 Mobile Application and
User experience Design Lab

Fig 24. Optimal Sort – An online card sorting tool

Screen grab tools

Fire Shot
Fire Shot is a great little screen capture tool. It allows you to quickly grab
a full web page, the visible part of a web page or just part of a webpage
and works with all the major browsers. Screen grabs can copied to the
clipboard and exported as an image or PDF.

Fig 25. Fire Shot – A great web page screen grab add-on

234
 Open Source UX
Tools
ORIGAMI
Learn how to build, preview and share your prototypes.
COMMON INTERACTIONS
❖ Adding Logic
❖ Scrolling Views
❖ Horizontal Scrolling
❖ Screen Transitions
❖ Timed Animations
SMARTER INTERACTIONS
❖ Multiple States
❖ Masking Layers
❖ Orientation
❖ Device Motion
❖ Text Input
❖ Introduction to Loops
❖ Interactive Loops
❖ Prototyping with Data
❖ Create a Component
❖ Create a System
❖ Audio Metering
COMMON INTERACTIONS

Adding Logic (Add logic to your transitions and flows.)

Setting up
You should notice when you open the file that some core interactions
have already been created.

235
 Mobile Application and
User experience Design Lab

The basis of this prototype is centered around the direct messaging

functionality found in Instagram. We have our Send To layer, which
opens the Direct Messages Modal Group, and the Cancel layer which in
turn closes it. On closer inspection, our prototype contains the Direct
Messages Hit Area. Interacting with this layer causes the Switch to Turn
On, and tapping on the Cancel layer causes the Switch to Turn Off.

Or
Ideally a Tap on Color Fill would also close Modal. Hover over Color
Fill in the Layers panel and click Tap under the Touch menu.

A new Interaction patch should appear on the Patch Editor.

In the Viewer, try opening Modal and then tapping on Color Fill.
Looking at our new Interaction patch we can see see that our tapping is
detected.

236
 Open Source UX
Tools

Keep an eye on the Down and Tap outputs of the Interaction patch whilst
interacting with Color Fill. We ultimately would like tapping on Cancel
or Color Fill to Turn Off the Switch. We need an Or patch to allow both
of these options. Double-click on the Patch Editor and add an Or
patch . Connect the Tap output from the Cancel Interaction patch to an
input of Or. Also connect the Tap output of Color Fill to the remaining
Or input.
You should see now that when we tap on Cancel or anywhere in the
Color Fill the output of Or will trigger.

Replacing with Or
We currently have only the Cancel Interaction Tap output connected to
Turn Off the Switch. Replace that connection by connecting the output of
Or to the Turn Off input of Switch.

237
 Mobile Application and Now when we Tap on Color Fill or Cancel, the Turn Off of Switch is
User experience Design Lab triggered.

Preparing for more logic

A Color Fill layer takes up the full height and width of the Viewer by
default. That means tapping anywhere on Send To (not just Cancel)
triggers Switch to Turn Off and therefore Modal to close.
To prevent this, we need to first know when Send To is being tapped.
Add an Interaction patch for the Send To layer by selecting the layer and
clicking Tap from the the Touch menu.

The new Interaction patch on the Patch Editor will now detect any Tap
on Send To.

Not
We want our Switch to Turn Off if Color Fill or Cancel are tapped, but
not when Send To is tapped. Origami has an appropriately named Not
patch for this purpose. Double-click on the Patch Editor and add in a
Not patch .

Connect the Tap output of our Send To Interaction patch to the input of
our Not patch. Observe the Not patch as the Send To layer is tapped in
the Viewer. Pulses will appear briefly on the Not patch, respective to
when the layer is tapped and not tapped.

238
 Open Source UX
Tools

And
The Switch should Turn Off when Cancel is tapped or Color Fill is
tapped, and not when Send To is tapped. Origami has an And patch for
this purpose. Double-click on the Patch Editor and add an And patch
.

Connect the output of the Or patch directly to an input of the And patch.
Then connect the output of the And patch to the Turn Off input of the
Switch patch.

239
 Mobile Application and These connections and orderings allow the following logic to be checked:
User experience Design Lab
Have the Cancel layer or Color Fill layer been tapped?
And has something else happened?
You can now connect the Not output to the second And input to finish
the last piece of logic.
Our final logic to be checked is now:
Have the Cancel layer or Color Fill layer been tapped?
And has there not been tapping on Send To?
When you Tap Color Fill and Send To, Modal will not close. If you Tap
Cancel or Color Fill elsewhere however, Modal will close.

TIMED ANIMATIONS
Create time-based, automatic animations.
We would like an animation to occur simply on its own — as soon as a
prototype starts, or with only a timer triggering it. Sometimes we want
multiple things to happen over time, all purely time-based, without any
tap triggers or the like.

Setting up

Click through each of these inputs to cause a pulse, making the Position
Y of Comments move up or down. Clicking on Set To 1 will bring up our
first position, Set To 2 our second, and so on.

240
 Open Source UX
Tools

When prototype starts

That first position (Set To 0) is our starting position. How can we
automatically have our prototype go to next position (Set To 1) after a set
time? Origami has a patch for this purpose, called When Prototype Starts.
Insert one to our Patch Editor by double-clicking on the Patch Editor ,
typing to find When Prototype Starts, then Return . Then connect this to
the Set to 1 input on the Option Switch patch.

Prototype has already started, so we won’t see the effect of this until we
click the Restart Prototype button on the Viewer toolbar.

241
 Mobile Application and Wait
User experience Design Lab
We are instantly going to Option 1, but what we actually want is for that
option to only kick-in after the prototype starts and holds off little bit, to
give a bit of breathing room. We want the prototype to Wait a second.
Insert a Wait patch between the When Prototype Starts and the Option
Switch. Double-click on the Patch Editor , type to find Wait, then
Return . Connect the When Prototype Starts output to the Start input in
the Wait patch, and the output of Wait to that Set to 1 input.

Restart our prototype now, and keep an eye on the first two patches. We
should see that the signal is immediately sent, and then after one second,
the signal is carried on to the Option Switch.

There are a few ways to automatically advance to the next Set To inputs,
but for the sake of simplicity, we are going to add more Wait patches as
our solution. These will then be connected to corresponding inputs in the
Option Switch. Add more Wait patches by double-clicking on the Patch
Editor , typing to find Wait, and then Return . Like the first Wait
patch, have the output of the When Prototype Starts go into its Start
input. Have the output of this Wait patch go to the next Option Switch
input, which is Set to 2.

242
 Open Source UX
Tools

Give the second Wait patch a duration of 3 seconds. That means that the
3 seconds is counting from when the prototype starts, not 3 seconds from
when the first Wait patch is triggered.

Multiple delays
For the sake of simplicity, keep all timing connected to When Prototype
Starts. Add enough Wait patches to cover each Option Switch input (5 in
total). You can add new patches by double-clicking on the Patch Editor,
or by Option-clicking and dragging an existing one. That will create a
new Wait patch, with the same input connection.

Do three more of these so we have 5 Wait patches in total. Change the

durations of each so they all trigger at a different time. The third Wait
243
 Mobile Application and patch for example could have a Duration input of 6 seconds, second-last
User experience Design Lab Wait patch 8 seconds, and the last 11 seconds. Lastly, connect each Wait
patch output to the remaining inputs on the Option Switch, in sequential
order.

Like earlier, click the Restart Prototype button and keep an eye on the
Wait patches as each Duration passes.

Each of these Duration values are measured from When Prototype Starts,
and send their respective outputs to the Option Switch accordingly. The
Option Picker takes each option and outputs a corresponding position for
Comments Y.

8.3 QUESTIONS
1. Describe your design process and what methods you follow.
2. Describe a recent project you were particularly challenged by and
how you approached the problem.

244
3. What are some of the biggest challenges you face as a UX Open Source UX
designer? Tools

4. What does the term ‘design-thinking’ mean to you?

5. Please provide some examples of your experience dealing with user
research and usability testing.
6. What are some of the biggest trends in the UX Design industry
right now?
7. What is your approach to making websites and platforms accessible
to all user groups, including users with visual, hearing, and motor
disabilities?
8. When a client says: “I don’t like this design.” What do you do?
9. Is UX design UI design? What’s the difference?
10. Who are your design heroes? What are your favorite apps for UX?
Explain why.
11. Walk me through a design example where you set out to solve a
business problem.
12. What does it mean to be a great UX designer?
13. What analytics tools and key performance indicators (KPIs) have
you used to evaluate your designs?
14. If tasked to perform a UX evaluation of a product, what would your
process look like to accomplish this? Can you tell me about a
project you did this for and what the outcome of the evaluation
was?
15. Sell me on the ROI of investing in UX design. How would it
improve my bottom line?

8.4 QUIZ
1. Which of the following is golden rule for interface design?
a) Place the user in control
b) Reduce the user’s memory load
c) Make the interface consistent
d) All of the mentioned
Answer: d

245
 Mobile Application and 2. Which of the following is not a design principle that allow the user to
User experience Design Lab maintain control?
a) Provide for flexible interaction
b) Allow user interaction to be interrupt-able and undo-able
c) Show technical internals from the casual user
d) Design for direct interaction with objects that appear on the screen
Answer: c
3. Which of the following is not a user interface design process?
a) User, task, and environment analysis and modeling
b) Interface design
c) Knowledgeable, frequent users
d) Interface validation
Answer: c
4. When users are involved in complex tasks, the demand on
__________ can be significant.
a) short-term memory
b) shortcuts
c) objects that appear on the screen
d) all of the mentioned
Answer: a
5. Which of the following option is not considered by the Interface
design?
a) the design of interfaces between software components
b) the design of interfaces between the software and human producers
and consumers of information
c) the design of the interface between two computers
d) all of the mentioned
Answer: c

246
6. A software might allow a user to interact via Open Source UX
Tools
a) keyboard commands
b) mouse movement
c) voice recognition commands
d) all of the mentioned
Answer: d
7. A software engineer designs the user interface by applying an iterative
process that draws on predefined design principles.
a) True
b) False
Answer: a
8. What incorporates data, architectural, interface, and procedural
representations of the software?
a) design model
b) user’s model
c) mental image
d) system image
Answer: a
9. What establishes the profile of end-users of the system?
a) design model
b) user’s model
c) mental image
d) system image
Answer: b
10. What combines the outward manifestation of the computer-based
system , coupled with all supporting information that describe
system syntax and semantics?
a) mental image
b) interface design
c) system image
d) interface validation
Answer: c

247
 Mobile Application and 8.5 MOOCS
User experience Design Lab
1. User Experience (UX) Fundamentals. Udemy.
https://www.udemy.com/course/introtoux/
2. UI / UX Design Specialization. Coursera.
https://www.coursera.org/specializations/ui-ux-design
3. UI/UX. GreatLearning.
https://www.mygreatlearning.com/academy/learn-for-free/courses/ui-
ux
4. Google UX Design Professional Certificate. Coursera.
https://www.coursera.org/professional-certificates/google-ux-design

8.6 VIDEO LECTURES

1. The 5 Best UX Tools for Beginners.
https://www.youtube.com/watch?v=5oXV9ZvdpEU
2. UX Design Tutorial for Beginners.
https://www.youtube.com/watch?v=I0-vBdh4sZ8
3. How To Become UX Designer In 3 Month With No Experience?
https://www.youtube.com/watch?v=T74jX9tBnFg
4. UX Design Tools 2020.
https://www.youtube.com/watch?v=s3QGrWOHqDc
5. What Is UX Design?
https://www.youtube.com/watch?v=V8zhAKz5dRE

8.7 REFERENCES
1. https://www.uxforthemasses.com/more-free-ux-tools/
2. https://origami.design/tutorials/
3. https://origami.design/tutorials/common-interactions/timed-
animations
4. https://www.toptal.com/designers/ux/interview-questions
5. https://www.sanfoundry.com/software-engg-mcqs-user-interface-
design/



248
 9
CREATING A NEW PROTOTYPE
Unit Structure
9.0 Device Selection
9.1 Prototyping Methodology
9.2 The Prototyping Process
9.3 Prototyping is Mandatory for Mobile
9.4 References

9.0 DEVICE SELECTION

Simple thing any designer can learn. Prototyping isn't enough. you
wish to know the method of building your first product design.
Prototyping is that the experimental process by which a design team
transforms an inspiration from paper into a substantial digital form.
Prototyping is that the fourth stage of design thinking and
style sprints. this is often a crucial a part of user experience (UX)
design, and frequently comes after the team has created and selected
ideas which will meet the user's needs. Prototyping involves creating a
straightforward experimental model of the proposed product
and, supported the feedback given, verifying how it meets user needs.
Prototyping (paper prototyping) should be considered timely because
it could also be appropriate supported feedback and will aid user
development.
❖ Realize
❖ Address the matter
❖ Iterate
❖ Recognize Unintended
❖ Scenarios
❖ Recognize Usability
❖ Present
❖ Issues

249
 Mobile Application and Realize: Before a prototype is constructed, the merchandise is
User experience Design Lab totally conceptual. It's the primary step from concept to reality.
Solving: Prototyping may be a good way to visualize problems and
present solutions. If it doesn't work, throw the previous one and take a
look at the new one.

Iterate: Prototyping is completed, with each new iteration providing rich

behaviors and features to check.

Identify Unintended Scenarios: A product which will be investigated,

providing better context about what should and should not exist!

Find Usability Issues: Once a product is designed it easier to suddenly

discover and fix problems.
Presentations: Prototypes are the quality for presentations at any stage.
Whether you're testing a version of your page or showing your product to
a customer.

Fig 1: Prototyping - potential to fix errors

Prototypes have four main qualities.
❖ Representation — The prototype itself, i.e., paper and mobile, or
HTML and desktop.
❖ Precision — The fidelity of the prototype, meaning its level of
detail—low-fidelity or high-fidelity.
❖ Interactivity — The functionality open to the user, e.g., fully
functional, partially functional, or view-only.
❖ Evolution — The lifecycle of the prototype. Some are built quickly,
tested, thrown away, and then replaced with an improved version.
Others may be created and improved upon, ultimately evolving into
the final product.
250
Another common misconception about prototyping is that at the Creating A
top of the look process he only has got to pair once or he only has got New Prototype
to jazz twice, which is wrong.
One of UX Pin's mottos is "test early, test often".
According to Elementor’s Director of UX, the web site building
platform’s designers’ – average four to 5 prototyping sessions, counting
on the complexity of a given design.
Prototyping shouldn’t be reserved just for beta tests of the
ultimate version; we can test any and each version of your product!

Fig 2: Testing a prototype

If testing a prototype produces new insights about how end-users will
interact together with the product, then it’s worth taking the time to
collect user feedback and iterate.

9.1 PROTOTYPING METHODOLOGY

Prototypes are in three styles:
1. Paper
2. Digital and
3. HTML

PAPER PROTOTYPING
Paper prototyping works best during early design stages. Team members
sketch ideas by hand using simple lines, shapes, and text. the stress is on
ingenuity and speed instead of aesthetics.

251
 Mobile Application and
User experience Design Lab

Fig 3: Paper prototype – early designs

Fig 4: Paper prototype – later designs

Paper Prototyping Benefits

Fast - Prototypes will be created quickly (even in an
exceedingly brainstorming meeting) so if an inspiration fails, you will
not waste quite some minutes.
Inexpensive - Only Maker pen and paper are required to make a
prototype, making the method inexpensive and accessible.
Team Building - Paper Prototyping could be a collaborative process and
teams often come up with new ideas. This can be a good team building
exercise and these open-ended thinking sessions often spark creativity.
Documentation - Team members keep physical copies of paper
prototypes, notes, and tasks for ready reference in future iterations.
Cons
Unrealistic - irrespective of how skilled the art or craftsmanship, a
paper prototype will never be quite a hand-drawn representation of a
digital product. Paper prototypes are easy to draw, but user her tests yield
little to no results.
False Positives - Paper prototypes sometimes don't validate ideas
properly.

252
 Creating A
No Gut Responses - Paper prototypes depend on the user's imagination, New Prototype
adding an intermission between seeing a stimulus and reacting thereto.
This "gut feeling" response is critical to a successful UX.

DIGITAL PROTOTYPING
Digital prototyping is an exciting a part of the planning process.
Prototypes resemble the ultimate product, allowing teams to check and
validate their ideas.

Fig 5: Digital prototype

DIGITAL PROTOTYPE COMES IN TWO VARIETIES

1. Low Fidelity Prototype: User Flows with Wireframes
2. High Fidelity Prototypes: User Flows with Models
Low Fidelity Prototypes allow research teams to sketch basic user
flows and data architectures. Examine high-fidelity
prototypes intimately to check the computer program, interaction, and
usefulness of how participants interact with the merchandise.
Designers use design tools like Figma and Adobe XD to
make prototypes. Non-designers on product teams sometimes use
PowerPoint or Google Slides to simulate user flows.
UXPin is exclusive because it allows designers to form prototypes that
look and performance exactly just like the final product—something you
can't achieve with other popular design tools!

Advantages of Digital Prototyping

❖ Realistic interactions: Testing with high-fidelity digital prototypes
lets UX teams see how users interact with the ultimate product,
thus effectively move out any usability issues.
❖ Flexibility: Test early and test often! We will be able to start with
low-fi prototypes that become progressively more
advanced because the product design process moves forward.

253
 Mobile Application and ❖ Speed: While paper prototypes can be the fastest thanks to test
User experience Design Lab ideas, digital prototypes are the quickest thanks to test usability
issues.

Disadvantages
❖ Learning curve: Before we will be able to build a prototype,
we’ll have to learn and understand the software—which is why
product teams often use Powerpoint rather than a specialized design
tool.
❖ Cost: As you progress from low-fidelity to high-fidelity prototyping,
time and labor costs increase.
A prototype’s success depends on teams outlining clear objectives and
KPIs for every usability study. Without a correct plan, designers can get
side-tracked, adding unnecessary features and interactions!

HTML& JAVASCRIPT PROTOTYPING

Teams might build HTML & JavaScript prototypes to urge more accurate
results. The downside to the present approach is that coding comes with
considerable time and technical costs.
Product designers (and non-designers) can create code-based high-
fidelity prototypes that look and performance just like the final product.
With UX Pin Merge, participants never need to “imagine” what a button
or dropdown will do because the prototype functions just like the final
product!

Fig 6: Low Visual/High Functional Prototype built-in HTML

254
Advantages Creating A
New Prototype
❖ Final product functionality: HTML prototypes provide
participants with an accurate model of the ultimate product.
❖ The technical foundation for the ultimate product: Building an
HTML prototype provides researchers with a valuable research tool
and provides developers with the foundations for building the
ultimate product.
❖ Platform agnostic: We will be able to test your prototype on
virtually any software or device, and therefore the user won’t have
to run outside software.

Disadvantages
❖ Dependent on designer skill level: HTML prototype is
merely pretty much as good as your ability to code. Poorly coded
prototypes could introduce usability issues that don’t have
anything to try and do with UX design!
❖ Inhibits creativity: Coding takes time and focus to create a usable
prototype. Designers may not achieve the identical level of
innovation or creativity as employing a familiar design tool.

9.2 THE PROTOTYPING PROCESS

There’s no single best process for prototyping; it all depends on the
merchandise and application. Below are the three best prototyping
processes, each intended for various scenarios.
Paper => Lo-fi Digital => Hi-fi Digital => Code
Most designers follow the paper => lo-fi digital => hi-fi digital => code
process for prototyping—it’s how we designed UXPin :).
Teams collaborate to develop many ideas, sketching wireframes on paper
and creating user flows before committing to digital. UX teams will use
common brainstorming methods like crazy eights or asking “how might
we” inquiries to get into an end-user mindset.
A lo-fi digital prototype (wireframe) tests crucial elements like
navigation and data architecture early within the design process. Teams
can use feedback to form quick adjustments to wireframes before
committing to mockups.
Once teams complete navigation and data architecture, designers build
mockups resembling the ultimate product—adding color, content,
interactions, and animations.
When researchers have exhausted testing, UX teams turn over designs to
engineers to develop the ultimate product.

Paper => Lo-fi Digital => Hi-fi Digital => Code

255
 Mobile Application and Paper => Lo-fi Digital => Code
User experience Design Lab
Going from Lo-fi prototyping to code is an old approach that few teams
ever use nowadays. While lo-fi prototyping is affordable, it doesn’t catch
many of the usability issues high-fidelity prototypes expose.

Product developers without design skills might use the paper => lo-fi
digital => code method because it’s quicker for them to code than find
out how to use a design tool.
The process is precisely just like the example above, except that teams
will skip the hi-fi digital step.

Fig 7: Low fidelity prototype created during a Yelp redesign exercise

Fig 8: High fidelity prototype created during a Yelp redesign exercise.

256
HTML Prototyping => Code Creating A
New Prototype
Solo developers might skip any early prototyping methods and go
straight to code. With nobody to bounce ideas with, it can add up for a
developer to leap straight in.
Essentially, the prototype creates a foundation and evolves into the
ultimate product. This prototyping method is merely effective for skilled
product developers with efficient workflows.
Even designers with excellent design skills might want to avoid this
method of prototyping. Low-fidelity and high-fidelity prototyping are
significantly faster than building and editing code.

Paper =>UXPin Merge – Hi-fi Prototyping => Code

With UX Pin Merge, we’ll be able to accelerate the UX process through
rapid prototyping. Create fully-functioning high-fidelity prototypes using
UI code components to produce participants with a life-like model of the
ultimate product.

Fig 9: Image Based Design Vs Code Based Design

UX teams follow the quality paper prototyping processes as outlined
above. Next, designers build high-fidelity prototypes using UXPin Merge
just by dragging and dropping ready interactive UI blocks on the canvas.
The outcome: no more “imagining!” Your prototype will work even
as the ultimate product. Prototyping in a very code-based design tool like
UXPin Merge means engineers can build the ultimate product
significantly quicker than working with vector-based designs.

257
 Mobile Application and Try Prototyping with UI Components
User experience Design Lab
UX Pin has just released a replacement tool, Merge Component
Manager that creates it easy for designers to import and manage UI
components that come from a React-based Design System, like Ant
Design, and use those true components to make interfaces within the UX
Pin editor.

How Prototypes Improve Collaboration & Communication

Showing is often better than telling, and knowledge is king. If people can
interact along with your ideas, then they’re better ready to understand
them. This works both externally — pitching to clients and stakeholders
— and internally — in collaborating more deeply along with your team,
or rallying them to support a replacement idea .
Prototypes clarifies internal communication in a very few ways.
First, it creates a connection between designers and developers earlier,
giving both the identical goal to figure towards. Prototypes are the toys
of design, and when something is fun, people are more desirous
to disenchanted their guard and begin exploring the crazy ideas that just
might work.

Fig 10: Prototypes Improve Collaboration

In UX Pin, collaborating on prototypes is natural due to the live
presentation and collaboration features. With iteration tracking and live
commenting, wireframes and prototypes will be discussed and presented
in real time with none need for email.
Clients and stakeholders can easily misinterpret an outline, whether or
not delivered with some convincing research or pixel-perfect mockups.
An interactive prototype, on the opposite hand, requires little description.
Prototypes help stakeholders consider the experience, rather than falling
on the crutch of criticizing visual elements simply because they’re
258
right before of their eyes. On the other side, prototypes also add flair to Creating A
presentations — people can literally experience the “magic” of design: New Prototype
it’s the difference between seeing the blueprint versus exploring the
model house.
A prototype may be a powerful weapon to bring around any presentation.
In terms of its communicative and persuasive abilities, this presentational
aid often makes the difference between a “yes” or a “no.” How
Prototypes Add Balance to style
Prototyping is that the innovate which the conceptual becomes real, so it
requires both creativity with practicality, rationale with intuition.

Fig 10 : Source: User flow for Search function on Kick starter

Prototypes help make decisions that can't be described by parameters.
Three main benefits of prototyping:
❖ Decision-making : Important design choices concerning ergonomics,
shape, function, production — sometimes all directly — are
finalized within the prototyping phase. A working prototype will offer
you instant feedback so you'll be able to make an informed decision.
❖ Focus : With concrete feedback for all senses, prototypes ground you
in user reality. UX priorities become apparent once you can
experience them right before of you.
❖ Parallelism : The look process doesn’t need to be sequential.
Gathering feedback, setting requirements, and brainstorming new
concepts and interactions can all happen at the identical time while
prototyping, and when done right will complement one another.
Long story short, the prototyping phase was after we were ready
to merge our conceptual goals with our practical reality. It had
been when visual design and interaction design came into balance.

259
 Mobile Application and How Prototyping Makes Usability Testing Easier
User experience Design Lab
The reason divide the tasks into wireframes, mockups, and prototypes is
because each contains a different purpose.
By focusing only on structuring in wireframing, for instance, we’re able
to create a solid structure without distracting ourselves just yet with
mockup visuals or prototype functionality. While wireframing and
mockups lean more towards the creative and abstract, prototyping is
about knuckling down and bringing ideas to life — which requires
usability testing to urge right.

Fig 12 : Usability Testing for Prototypes

To make an analogy, prototypes are to the ultimate product what sketches
are to wireframes/mockups. Prototyping may be a thanks to “sketch with
interactions” to form a rough model of usability, then refine and
excellent.
For this, usability testing is important. Like we recommend within
the Guide to Prototyping, try and run usability tests on each stage of the
prototype in order that its fidelity and functionality move within the right
direction. While usability testing may be a dense topic all its own, here
are some basics to stay in mind:
❖ Know the product: Know your product well and what you wish to
check before you begin. If you get into usability testing with a product
that behaves erratically, or if you’re undecided what has to be tested,
the results are invalid.
❖ Recruit the right test-takers: Likelihood is that your product
is geared toward a target user-group, so ensure your test-takers
represent that group. Qualitative tests are often run with as few as 5
people, quantitative tests require a minimum of 20 people for
statistical significance. For a full list of user recruiting tips, take a look
260
 at Jakob Nielsen’s list of 234 tips and tricks to recruiting people for Creating A
usability tests. New Prototype

❖ Set up the correct test: There are many alternative varieties

of usability tests and lots of alternative ways to conduct them. Choose
the one that match your budget, timing, and project needs.
❖ Analyze results: This can be when usability data turns into design
insights. Incorporate your findings into your iterations as soon as
possible.

Fig 13: Test With 5 Users

9.3 PROTOTYPING IS MANDATORY FOR MOBILE

While prototyping for desktop products is just recommended, for
mobile it's mandatory. Mobile devices are utilized in more environments
than desktop devices, which results in way more user scenarios and use
cases.

261
 Mobile Application and We’ve found the subsequent to be the foremost compelling reasons for
User experience Design Lab mobile prototyping:
❖ Flow makes or breaks the mobile experience: Because mobile
experiences span several pages, user flow should be front and center
on the list of design priorities. Just visit UXArchive to work out how a
number of the highest companies like Snapchat, Google Maps, et
al architect their mobile flows.
❖ Animations make the experience fun & desirable: Animations are
the core element to mobile micro-interactions, with gesture-triggered
effects like timing, velocity, and bounciness adding a part of fun while
providing visual feedback and affordance. try this piece to work
out the contrasting views on animations from Google Material Design
and Apple iOS, then see 20 samples of these best practices in action.
❖ UX mistakes are costlier: Mobile app costs range from $6,000 to
upwards of $200,000, with the typical cost hovering around
$6,400. coping with the App Store can even be a headache, so some
up-front prototyping can go a protracted ways in saving time, money,
and sanity.

1. Create the Prototype Project

Once Adobe XD is opened, the Welcome screen appears and allows to
decide on the project type. Select the iPhone 6 (375 × 667px). Then
click on the iPhone icon to make the project. From the Apple
iOS, you'll access iPhone UI elements that may be utilized in your
prototype. Once the artboard is made, double-click the art board
name, and change it to “Home”.

Fig 14: Create Prototype Project

Adobe XD Welcome screen
262
2. Create the Prototype Background Creating A
New Prototype
Click the art board to display its properties within the Properties panel
on the proper side of the applying, and click on on the Fill color to
open the Colours selection window. Set the colour to dark gray and
close the window.

Fig 15: Set the art board background to dark gray

3. Setup the Screen Header
Next visit File > Import. within the file browser, navigate to the
header image and click on Import. Use the controls round the image
to resize it to suit within the screen header. you'll also double-click the
image to crop the image.

Select the Text tool from the Tools panel, click on the header area and
kind “Nature”. Double-click the text and from the correct Properties
panel, select “Helvetica”, set its weight to “bold”, and size to “32”.
Double-click the Fill color and set it to “dark gray”.

4. Build the Content Area Background

Select the Rectangle tool from the Tools panel on the correct side,
then create a rectangle under the header. From the proper Properties
panel, set the Fill color to dark gray, and uncheck the Border choice
to remove the stroke.

263
 Mobile Application and
User experience Design Lab

Fig 16: Creating the content area background

5. Add the Content

Import the content thumbnail and add the text as highlighted in step 3.
Setup the thumbnail to suit within the content area background and
on the correct side add the text as shown in figure 17 below. So as to
crop the thumbnail to a particular area, you'll be able to double-click the
image and use the four corners to crop it.

Fig 17: Adding content below the header area

6. Creating Content Grid

One of the foremost useful tools in Adobe XD is that you just can create
a grid out of existing content without duplicating them manually. Press
Shift on your keyboard and choose the thumbnail, content background,
and text. Then, click on the Repeat Grid button within the Properties
panel. This translates the created content into a grid. Drag the
underside green icon to form vertical grid of the content.
Then, you'll double-click the repeated content to switch it. Finally, select

264
the content and choose Ungroup Grid to interrupt the linkage between Creating A
them. New Prototype

7. Create New Page (Art board)

In order to make a brand new layout page, click on the Art board tool
from the Tools panel on the left. Then, select the iPhone 6 template
from the right to create a new page.

Fig 18 : Create a replacement Art board

8. Create More Pages

Repeat the above steps to create more pages and add content to the pages
as shown above. The ultimate look for the layout should be
something just like the image below.

Fig 19: The ultimate prototype of the UI design layout

Once the design layout is complete, we'll jump to Prototype view to
make the linkage between the created pages.

265
 Mobile Application and 9. Setup the Project Homepage
User experience Design Lab
Before putting in the linkage between pages, we want to assign a
homepage for the project. The homepage will be any of the created
pages. during this example, we are going to assign the primary layout we
created because the homepage by clicking on the house icon that appears
to the highest left of the art board.

Fig 20: Assign a homepage to the project

10. Build the Linkage Between Pages

In order to link between the pages, select the homepage, click on the blur
arrow to the correct side. The Target floating menu appears; select the
following page, and set the transition animation type. Repeat this step to
link between the other pages.

Fig 21: Link between pages

266
11. Creating Interaction Creating A
New Prototype
In this prototype, the primary content block on the homepage should
jump to the primary content art board, and therefore the second content
block should link to the second art board…etc. So, select the
primary content block, and click on the proper blue arrow to line the
target similarly to what we did in step 10. Repeat the step with the
second content block.

Fig 22: Add interaction to content

After creating the prototype, there are two main methods to preview
it. The primary is that the Preview feature within Adobe XD itself, and
also the other is through the online link which will be sent to team
members.
12. Preview the Prototype
Click on the Preview icon to the highest right of the applying. this
can display a preview screen which allows us to look at and navigate the
various pages. As a pleasant extra, it's a Record icon which allows us to
record the flow between pages and reserve it to Quick time (MOV)
format.

Fig 23: Previewing the prototype in Adobe XD

267
 Mobile Application and 13. Sharing the Prototype
User experience Design Lab
We’re done! Now we just have to share our document with other team
members or stakeholders who aren’t necessarily using XD. Click on the
Share icon at the highest right of the application; a floating menu will
appear, providing a URL which will be copied and shared between team
members:

Fig 24: The prototype web URL

9.4 REFERENCES
1. https://www.freecodecamp.org/news/ui-ux-design-tutorial-from-zero-
to-hero-with-wireframe-prototype-figma/
2. https://aspirity.com/blog/complete-guide-design-prototyping
3. https://www.toptal.com/designers/prototyping/guide-to-prototype-
design
4. https://www.interaction-design.org/literature/topics/prototyping
5. https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-
functional-ux/
6. https://designshack.net/articles/graphics/how-why-prototypes-are-
mandatory-for-good-design/
7. https://webdesign.tutsplus.com/tutorials/how-to-create-a-ui-prototype-
using-adobe-xd--cms-26585




268
 10
IDENTIFY AND DESCRIBE THE
OBJECTIVES FOR UED EXPERIMENT
Unit Structure :
10.0 UX Design
10.1 Perform user research
10.2 User requirement collection
10.3 User Requirement Analysis
10.4 Create User personas, user scenarios , customer journey maps
10.5 References

10.0 UX DESIGN
User experience (UX) design is the process of building products that are
easy and enjoyable for people to use. By building products to be as
effortless as possible for users, you can encourage adoption, retention,
and loyalty.
UX is an iterative process of constant improvement: product teams and
designers use data and usability testing to continuously refine the product
experience so it becomes easier for users as the product develops.

The UX design process in 5 steps

Every UX and product team follows—products, users, and internal
processes vary, whereas some teams follow the Lean UX model, for
example, which includes three broad phases:
1. THINK: teams draw on user feedback, product and usage data,
competitive analysis, and other research to identify blockers and pain
points, and brainstorm ways to improve the product to solve problems
for their users.
2. MAKE: developers and designers build the change or new feature
into the product.
3. CHECK: teams use surveys, A/B or multivariate (MVT) testing, and
other tools and methods to check whether the change or new feature
improves UX and solves the original problem for their users.

269
 Mobile Application and The basic UX design process can be classified into five steps to illustrate
User experience Design Lab the cyclical, iterative nature of UX design:

1. Research and understanding

User experience design begins with extensive UX research before any
designs are mocked up.
❖ User research
❖ Market research
❖ Historical analysis

2. Prototyping and wireframing

After the research stage, a designer creates a prototype and wireframe of
your product, outlining how users will flow from one feature or element
to the next, and how the product will look visually.
The prototype is your minimum viable product (MVP): a version of
your product with enough features to allow your first users to test it and
offer feedback.
Prototyping and wireframing—and then testing, which is the next step—
lets you get valuable user feedback before you spend resources finalizing
your product, potentially avoiding a lot of work and time spent
developing the wrong features and UX for your users.

3. Testing
Next, your product team will conduct user tests—like A/B tests, MVT,
and split tests—to identify existing or potential design issues that may
cause friction for users. For example, your team may find:
❖ The UX is confusing and prevents users from accomplishing their
goals
❖ Some features aren’t worth developing further because users aren’t
interested in them
❖ Certain user actions create friction in the product experience

4. Launch
Throughout the testing phase, you’ll refine your prototype based on
results and user feedback, make changes, and add final touches before
launch.
Once your product is ready, launch is often done in stages. For
example, your UX team might release a beta version or ‘soft launch’,
where a new design is launched to a small group of users first, to get
additional user feedback and usage data before rolling it out to your
whole user base.

270
5. Iteration Identify And
Describe The
UX design is a constant, iterative process—you’re never done creating Objectives For UED
good UX—so more testing follows the product’s launch. Experiment

In the iteration stage, your team will continue to make updates and
improvements as needed, and closely monitor how those changes impact
the product experience.
A/B and multivariate testing are often part of this stage, so your team can
see the impact of product changes and compare multiple versions of the
design to see which creates the best user experience. Then the winning
version is rolled out.

Importance of UX design?
A poor user experience will cost you customers as they aren’t satisfied
with their experience in your product—if it’s difficult for them to
navigate, if they encounter bugs or issues that cause friction—they might
churn. When you make UX design a key part of your product
development process, and keep product experience top of mind, you
can mitigate churn.
Your product team, in particular, can draw on UX design to:

❖ Convert more users

❖ Drive adoption
❖ Boost customer retention and loyalty
❖ Banish churn
4 Key principles of UX design
'Good UX design' can be a little murky and hard to wrap your head
around. After all, UX is all about the user and helping them reach their
goals—and that varies from one product and one user base to another.
Four things good user experiences have in common:

1. The user comes first

The number one principle of UX design is that the user comes first. Good
UX design centers the needs of users in every decision—the product
helps users reach their goals or solve their problems in the fastest, easiest
way possible. Every part of the design, every change, and every new
feature flows from that.
Your business goals should be a reflection of your users' needs and
should work to support them.
To improve the user experience, some sites add a ‘Jump to recipe’ button
so people can get what they came for as quickly as possible.

271
 Mobile Application and
User experience Design Lab

Fig 1: UX Design

2. Simplicity, hierarchy, and consistency

Simple, hierarchical, and consistent UX design enables users to quickly
and easily find what they’re looking for. Whenever possible, your
product should use the simplest design, the simplest copy, and the
simplest actions to get users where they want to go. Organize your design
with a clear hierarchy ensures the product elements that remain are easy
to understand and navigate.
Apple’s App Store is a good example of this: users can pick up any
device—be it an Apple Watch, MacBook, iPad, or iPhone—and the
product experience is consistent, with similar gestures, icons, hierarchy,
and visual style.

Fig 2: 'Get' means the same thing across Apple devices

3. Functionality first, then design

Good UX means making it as effortless as possible for users to do
what they came to do on your site or app—that’s the ultimate goal.
That means clarity and function always come first. The design itself
should never make the users' life harder or slower.

272
Moleskine’s iOS calendar app, Time page, is a counter-example: the app Identify And
lets users choose the color theme, but while the UI looks cool, it makes it Describe The
harder for users to view their options and tap the color they want. Objectives For UED
Experiment

Fig 3: Time page's design in cool, but it puts design over functionality

4. Draw on the familiar

Great UX leans into design frameworks and interactions that make sense
for users, giving users what they expect.
Designing interactions that aren’t familiar to users may add barriers and
make it harder for users to accomplish their goals, because it creates a
learning curve when users adopt your product.
Drawing on elements and interactions users are familiar with often
makes for better UX.

Fig 4: Tinder users swipe right to 'like' someone

UX design best practices for refining products

The four principles above are a great place to start and can help you get a
better sense of what makes a good user experience. Now, let’s get
into how you can create that kind of experience.

273
 Mobile Application and Objectives
User experience Design Lab
A project objective is a statement of a measurable goal for the project.
Let’s talk about objectives in more detail.

Solidify Project Objectives

Objectives are an important focusing lens that you’ll use throughout the
project. They should spring from the client company’s overall business
strategy, so the project objectives should be in line with the strategic
initiatives within the company.
A clear objective resonates throughout a project. It helps you:
❖ Ask the right questions as you gather ideas from business
stakeholders
❖ Plan research with users and focus your analysis of the results
❖ Detail the ideas gathered from stakeholders and users and convert
them into a consolidated list of project requirements
❖ Prioritize those project requirements based on their value to the
company
❖ Create effective interaction designs
❖ Manage requests for changes to the design once development
begins
❖ Focus efforts during deployment activities (such as training and
communications to users about the new site or application before
and during its launch)
❖ Determine whether you’ve met the needs of the client company,
once the project is launched
When you start a new project, you probably have project objectives from
the project’s sponsor, as well as a set of project-related requests coming
from business stakeholders and from customers, but they all may be a bit
fuzzy. Your goal is to clarify these into solid statements that you can use
as a yardstick for the project’s success.

Fig 5 Fuzzy objectives, ideas, and needs

274
A solid objective has the following characteristics: Identify And
Describe The
❖ Easy to understand. Objectives For UED
Experiment
❖ Distinct.
❖ Measurable.

Fig 6: Objectives being solidified

❖ Analyzing fuzzy ones such as those below will help you solidify
your objectives and communicate more effectively within the
project team.

❖ This is an objective for the entire company, but is too broad for a
specific project. Multiple initiatives at the company need to come
together to make this happen; any one site or application
may help with this but will be very unlikely to be able to handle the
entire burden—unless the entire company is about this one site or
application and it ends up being wildly successful.

❖ This one is better, because a site or application could have an

impact on this, but it’s still too vague. Why is it important to
generate excitement? How does that excitement translate into
meeting a business need? And how can you tell if you’ve been
successful?

275
 Mobile Application and 10.1 PERFORM USER RESEARCH
User experience Design Lab
User experience research is the systematic investigation of your users in
order to gather insights that will inform the design process. Typically
done at the start of a project—but also extremely valuable throughout—it
encompasses different types of research methodology to gather
both qualitative and quantitative data in relation to your product or
service.
Before we continue, let’s consider the difference between qualitative
and quantitative data.

Qualitative vs. Quantitative data: What’s the difference?

Qualitative UX research results in descriptive data which looks more at
how people think and feel. It helps to find your users’ opinions,
problems, reasons, and motivations.:
Quantitative UX research, on the other hand, generally produces
numerical data that can be measured and analysed, looking more at the
statistics. User research rarely relies on just one form of data collection,
and often uses both qualitative and quantitative research methods
together to form a bigger picture. From the data gathered during your
user research phase, you should be able to understand the following areas
within the context of your product or service:
❖ Who your users are
❖ What their needs are
❖ What they want
❖ How they currently do things
❖ How they’d like to do them
These doodles illustrate some of the reasons why we do user research.

276
 Identify And
Describe The
Objectives For UED
Experiment

It’s important to ensure that you’re conducting inclusive UX research–

and that starts in the earliest stages!

2. What is the purpose of user research?

It helps you understand the problem you’re trying to solve; it tells you
who your users are, in what context they’ll be using your product or
service, and ultimately, what they need from you, the designer! UX
research ensures that you are designing with the user in mind, which is
key if you want to create a successful product.

Why is it so important to conduct user research?

Without UX research, you are essentially basing your designs on
assumptions. If you don’t take the time to engage with real users, it’s
virtually impossible to know what needs and pain-points your design
should address.

User research helps you to design better products!

There’s a misconception that it’s ok to just do a bit of research and
testing at the end of your project. The mantra in UX design is that some
user research is always better than none. It’s likely at some point in
your UX career that you will come across the first challenge of any UX
designer-convincing a client or your team to include user research in a
project.

User research saves time and money!

If you (or your client) decide to skip the research phase altogether, the
chances are you’ll end up spending time and money developing a product
that, when launched, has loads of usability issues and design flaws, or
simply doesn’t meet a real user need.
The research phase ensures you’re designing with real insights and
facts-not guesswork! Imagine you release a product that has the
potential to fill a gap in the market but, due to a lack of user research, is
full of bugs and usability issues. UX research gives the product a
competitive edge. Research shows you how your product will perform in

277
 Mobile Application and a real-world context, highlighting any issues that need to be ironed
User experience Design Lab out before you go ahead and develop it.

What are UX Design Requirements?

Gathering UX design requirements (also called UX requirements) is a
discovery process including conducting interviews, discussions, and
document gathering for designers to understand what they need for a
project and why.

10.2 USER REQUIREMENT COLLECTION

Purpose of UX Gathering
This gathering process occurs before designers begin working on a
project to guide early research and set goals and expectations.
These are some reasons for Gathering UX requirements:
❖ Most importantly, to understand users and their needs. This user
research is not as thorough as the empathize or research stage of
the design thinking process. It’s simply a foundational
understanding of the product’s user experience, so UX designers
know where to begin.
❖ To set project goals and objectives
❖ Understand business goals from a stakeholder’s point of view and
align these goals with users
❖ Learn about technical constraints and how they impact the project
❖ Eliminate ambiguity and misunderstanding

Types of UX Design Requirements

UX gathering falls into three primary categories:

❖ Business
❖ User
❖ Technical

278
Business Requirements Identify And
Describe The
UX designers must answer the question, “What does the business want to Objectives For UED
achieve from this project?” An example of a business requirement might Experiment
be, “Increase new user sales conversion by 20% without affecting
retention.”
Team members use stakeholder interviews and other documentation to
gather and understand these business requirements.
Business requirements include:
❖ Project timeline
❖ Project scope
❖ Branding rules
❖ Various departmental goals–business, marketing, sales, customer
services, etc.
❖ Competitors
❖ Stakeholder expectations

User Requirements
Who are the users, and what do they need from this project? Are there
any specific usability or accessibility issues designers must solve?
❖ User interviews
❖ Surveys
❖ Dairy studies

Technical Requirements
Technical requirements fall into two categories:
❖ Functional: Outlines the product’s specifications, technical
capabilities, and limitations
❖ Non-functional: Describes the product’s performance, such as
usability, performance, data integrity, and maintenance
The requirements will answer key technical questions for design teams:
❖ What is the product’s operating system (iOS, Android, Windows,
etc.)?
❖ What devices will the product operate on (mobile, tablet, web,
smart devices, etc.)?
❖ What front-end framework does the product use (React, Vue,
Angular, etc.)?
279
 Mobile Application and ❖ What are the product’s technical limitations?
User experience Design Lab
Who is Responsible for Gathering These Requirements?
A representative from each department within the project is responsible
for gathering the relevant requirements. For example:

❖ Business
❖ User
❖ Technical
The above is an example of a typical project. These responsibilities will
vary depending on the company, project, etc.
How to Capture UX Design Requirements

Fig 7: How to capture UX Design Requirements

There is no standardized step-by-step process for gathering UX
requirements. The process, steps, methods, and responsibilities will differ
depending on the organization and project.
There are several methods for capturing UX design requirements.

Business Requirements
❖ 1:1 Interviews – meeting with individual stakeholders and experts
allows you to discuss specific topics in detail
❖ Workshops – an opportunity to discuss issues with multiple
stakeholders and team members
❖ Documentation – reviewing various business guidelines, manuals,
and other documentation relevant to the project
❖ Competitor research
❖ Surveys
❖ Storyboards
❖ Mood boards

280
User Requirements Identify And
Describe The
❖ User interviews Objectives For UED
Experiment
❖ Usability testing existing products
❖ Existing user experience research–user personas, journeys
❖ Surveys
❖ Diary studies
❖ Focus groups
❖ Storyboards

Technical Requirements
❖ Technical stakeholder interviews
❖ Systems reviews
❖ Technical documentation and specifications
❖ Data analysis

Create a Low-Fidelity Prototype

Design teams often create a basic paper prototype for stakeholder and
expert interviews. Design teams can also use these prototypes as part of
the UX requirements documentation to demonstrate basic functionality,
constraints, add context, etc.

Document UX Requirements
Documenting the relevant business, user, and technical requirements is
crucial. This documentation will provide UX designers with a starting
point and reference for the project. Categorizing your UX requirements
document will help team members find the information they need. Here
are some recommendations for UX requirement categories:
❖ User stories & personas
❖ Task flows
❖ Style guides
❖ Specifications
❖ Manuals
❖ Competitor research

281
 Mobile Application and Best Practices for Gathering UX Requirements
User experience Design Lab

Fig 8: Best Practices for Gathering UX Requirements

Learning From Stakeholders & Experts

Stakeholder interviews are crucial for understanding business needs and
high-level strategies. These are some considerations for getting the most
out of these interviews:
❖ Set goals relating to what you want to know from each stakeholder
❖ Research your stakeholders beforehand to understand their role and
what they want to achieve
❖ Avoid assumptions and bias by pretending you know nothing–ask
questions even if you think you know their answer
❖ Practice active listening, giving stakeholders and experts time to
answer thoughtfully, leaving gaps to allow for elaboration
❖ Document the interview with notes and video/audio recordings

Getting the Best Results From Surveys

Surveys are excellent, inexpensive research tools for acquiring quick
feedback and sentiment. These recommendations apply to user and
stakeholder interviews:
❖ Short surveys reduce dropoffs and increase the likelihood of
completion
❖ Five questions are optimal, eight maximum
❖ Prioritize questions with the most important first
❖ Keep questions brief, preferably one sentence
❖ Closed questions (yes/no, multiple choice) are easy for participants
to answer and researchers to analyze

Conduct Meaningful User Interviews

During the UX requirements gathering process, user interviews can help
validate existing research or learn about changes. These guidelines will
help you get meaningful feedback from users:

282
 ❖ Ask open-ended questions so as not to bias answers. Identify And
Describe The
❖ Always leave an appropriate amount of silence at the end of an Objectives For UED
answer in case the interviewee wants to add or elaborate. Experiment

❖ Record interviews (with the participant’s signed consent) for future

reference and analysis.
❖ Humans tend to withhold information or misinterpret facts. Don’t
rely on interviews as a single source of truth. Compare with data
and analytics to get an accurate picture.

Faster Prototyping With UXPin

UX designers rely on paper or wireframes because they’re quick to create
and iterate. With UXPin’s built-in design libraries, UX designers can
drag and drop components to build high-fidelity mockups and prototypes
to present to stakeholders, users, and experts during the UX requirements
gathering process.

Fig 9: Faster Prototyping

The ability to create high-fidelity prototypes at any stage of the UX
design process or even when gathering UX requirements means
designers get meaningful, actionable feedback from users and
stakeholders.

10.3 USER REQUIREMENTS ANALYSIS

The aim of our user-focused tools and methods is to provide a clear
understanding of requirements as an early input to development projects.
Usability Partners is experienced with a range of requirements gathering
and analysis techniques.
Typical requirements gathering and analysis methods include:
❖ Surveys
❖ Interviews
❖ Focus groups
❖ Field studies
❖ Evaluation of an existing product
❖ Customer journey mapping
283
 Mobile Application and ❖ Task analysis
User experience Design Lab
❖ User personas and usage scenarios
❖ Formulation of usability goals and overall design criteria

10.4 USER PERSONA

User personas are archetypical users whose goals and characteristics
represent the needs of a larger group of users. Usually, a persona is
presented in a one or two-page document (like the one you can see in
the example below). Such 1–2-page descriptions include behavior
patterns, goals, skills, attitudes, and background information, as well as
the environment in which a persona operates.

Why are user personas important?

A deep understanding of a target audience is fundamental to creating
exceptional products. User personas help a product team find the
answer to one of their most important questions, “Who are we designing
for?” By understanding the expectations, concerns, and motivations of
target users, it’s possible to design a product that will satisfy users’
needs and therefore be successful.
B benefits of using personas in the UX design process:

Build empathy
Empathy is a core value if designers want to make something that is
good for the people who are going to use it. Personas help designers to
create understanding and empathy with the end-users. Thanks to
personas designers can:
● Gain a perspective similar to the user. Creating user personas can
help designers step out of themselves and recognize that different
people have different needs and expectations. By thinking about the
needs of a fictional persona, designers may be better able to infer
what a real person might need.
● Identify with the user they are designing for. The more designers
engage with the user personas and see them as real people, the more
likely they will be to consider them during the design process and
want to create the best product for them.
284
 Identify And
Describe The
Objectives For UED
Experiment

Fig 10: Design thinking process. Image by d. School of Design.

Provide direction for making design decisions

User personas help designers shape product strategy and accompany
during the usability testing sessions. A deep understanding of user
behavior and needs makes it possible to define who a product is being
created for and what is necessary or unnecessary for them from a user-
centered point of view. User personas also help prevent common design
pitfalls:
❖ Self-referential design.
❖ Design for elastic users. An elastic user is a generic user which
means different things to different people.
Communicate research findings
Most designers work in multidisciplinary teams that have team
members with varying expertise, experience, and points of view.
Personas encapsulate the most critical information about users in a
way that all team members and stakeholders can understand and relate
to.

Characteristics of a good persona

1. Personas aren’t fictional guesses at what a target user thinks. Every
aspect of a persona’s description should be tied back to real data.
2. Personas reflect real user patterns, not different user roles. Personas
aren’t a reflection of roles within a system.
3. A persona focuses on the current state, not the future.
4. A persona is context-specific.

Creating user personas in design process

The research that goes into forming user personas usually happens early
in the design process. In the Design Thinking process, designers often
start creating personas during the second phase, the Define phase.

285
 Mobile Application and
User experience Design Lab

Fig 11: Design thinking process. Image by NNGroup.

5 Steps to creating user personas

Personas can be created in a myriad of ways — it all depends on
budget, type of a project and the type of data designers are able to
collect.
a. Collect the information about your users
b. Identify behavioral patterns from research data
c. Create personas and prioritize them
d. Find scenario(s) of interaction and create user personas UX
documentation

Generally, when creating a user persona template you should include

the following information:
❖ Persona name
❖ Photo
❖ Demographics (gender, age, location, marital status, family)
❖ Goals and needs
❖ Frustrations (or “pain points”)
286
 ❖ Behaviors Identify And
Describe The
❖ Bits of personality (e.g. a quote or slogan that captures the Objectives For UED
personality) Experiment

e. Share your findings and obtain acceptance from the team

USER SCENARIO
User scenarios are one of the many tools UX designers have in their
arsenal. On a more practical side, a user scenario tends to include who
the user is and what their goal is at that moment. Generally, scenarios are
concise and represent a snapshot of the user experience.

An important aspect of user scenarios is that they can help the team
understand more than what the goals of the user are. Many design teams
believe the main advantage of having user scenarios is that once we
establish what the user’s goal is, it becomes easier to define how the user
would go about reaching that goal. That is closely connected to other
tools in the UX game, like mental models and user personas.
Some prefer short and sweet user scenarios that focus only one the user
goal or task. Others claim we can obtain even more benefits from a more
complete scenario, with additional information about users that adds
value – like their main source of income.

The benefits of user scenarios

User scenarios are all about getting the context of use right and tailoring
the experience to the user’s needs and motivations.

287
 Mobile Application and What does a user scenario look like?
User experience Design Lab
User Scenarios are useful for designers because they can spark ideas,
generate features and help refine any requirements going forward. They
are also crucial when it comes to usability testing. With user scenarios
and a professional wireframe tool, designers can make sure they cover all
their bases and validate every move users make in the product.

How to write a user scenario

Most teams tend to have a clear user persona (or two) before they start
creating user scenarios, for example.

The process of writing user scenarios can be described as scenario

mapping. This means that in order to have a realistic user scenario, the
design team has to consider the possible goals and tasks, along with what
that means for the user experience. This process doesn’t have to be
complex but it does require a lot of consideration on possible scenarios
and outcomes.
Here’s a few things you can find in user scenarios:
❖ Who the user is
❖ The situation that drives users to seek the product
❖ A specific task or goal the user has
❖ Information regarding user’s income and spending
❖ The path to completion of a task
❖ Points of friction or stress in daily life or in the user experience

288
User scenario examples to learn from Identify And
Describe The
1. Social Security platform user scenario Objectives For UED
Experiment

2. Supply management user scenario example

3. A user scenario within a user persona

4. User scenario mapping example

289
 Mobile Application and 5. Pete the avid reader: user scenario
User experience Design Lab

CUSTOMER JOURNEY MAPS

Customer journey maps are used to map the relationship between a
customer and an organization over time and across all channels on which
they interact with the business. Design teams use customer journey maps
to see how customer experiences meet customers’ expectations and find
areas where they need to improve designs.

Customer Journey Maps – Tell Customer Stories

Customer journey maps are research-based tools which design teams use
to reveal typical customer experiences over time and visualize the many
dimensions and factors involved. These enable brands to learn more
about target users. Team members examine tasks and questions (e.g.,
what-ifs) regarding how a design meets or fails to meet customers’ needs
over time when they encounter a product or service. The map should
consist of:
1. A timescale
2. Scenarios
3. Touch points
4. Channels
5. Thoughts and feelings

How to Make Customer Journey Maps for Exceptional Experiences

To create a customer journey map, you can follow these steps:
1. Define your Map’s Business Goal
2. Conduct Research
3. Review Touch points and Channels
4. Make an empathy map
5. Sketch the Journey
6. Iterate and Refine
7. Share with Stakeholders

290
 Once the map is ready, you should measure the enhanced journey’s Identify And
results. For instance, check key performance indicators (KPIs). The more Describe The
touch points there are, the more complex the map will be. Objectives For UED
Experiment

10.5 REFERENCES
1. https://www.hotjar.com/ux-design/
2. https://www.interaction-design.org/literature/topics/ux-design
3. https://www.peachpit.com/articles/article.aspx?p=1856033
4. https://careerfoundry.com/en/blog/ux-de
5. sign/the-importance-of-user-research-and-how-to-do-it/
6. https://www.uxpin.com/studio/blog/the-beginners-guide-to-capturing-
ux-requirements/
7. https://www.usabilitypartners.se/services/user-requirements-
analysis.php
8. https://xd.adobe.com/ideas/process/user-research/putting-personas-to-
work-in-ux-design/


291
 11
UX DESIGN - FOR WEB AND MOBILE
APPLICATION
Unit Structure :
11.0 Conceptual Design - Site Maps
11.1Ccreate Wireframe
11.2 Create Screens ,Widgets ,Outlines
11.3 Setting Properties
11.4 Ordering Screens ,Screen Transition
11.5 Adding Actions & Triggers ,Header & Footer
11.6 References

11.0 CONCEPTUAL DESIGN - SITE MAPS

Definition
A UX sitemap is a hierarchical diagram of a website or application that
shows how pages are prioritized, linked, and labeled. Sometimes it is
called as Information Architecture (IA) diagram or content outline. A
sitemap is essentially a guide that outlines the main pages on a site and
their relationship to each other, showing how they’re connected and
where each page fits into the bigger picture.

Sitemap Importance
Sitemap is a useful process for designers and UX professionals who are
looking for a way to improve website navigation, understand the scope of
work, and avoid missing out on critical parts of a website’s architecture.
Ultimately, site mapping helps you deliver a better user experience. Let’s
dive deeper and understand the purpose of sitemaps.

Showing Visual Hierarchy

The most challenging aspect of creating new information architecture is
almost always in constructing it hierarchically. It’s a common
misconception that IA must be built “from the top down.” That’s almost
always more difficult to do unless it’s an existing product, such as in the
video above. When building IA from scratch, unless your website or
application is following a standard format, drawing out anything after the
top level is very difficult. It’s like asking a mechanic to build a car from
the top down instead of in parts. The same is true with IA.Displaying
visual hierarchy is a valuable asset to IA, not only because it provides
better context for the reader, but also generalizes key regions of the
292
product. Sitemaps come in handy for understanding hierarchy since they UX Design - For
organize pages numerically (such as 1.0 Home, 2.0 Payment, 2.1 Add Web And Mobile
Pay Method, etc.). Or consider the example in the image below for Duke Application
University’s library website, where the top navigation isn’t only at the
top but also highlighted to be visible across the entire application.

The Best Information Architecture Tools

Draw.io, is an excellent tool for flowcharting, creating user flows and
information architecture, and with Drive functionality, multiple people
can work on the same document and see changes live.
Lucid chart is another great tool that provides a slightly better
experience than Draw.io and has additional benefits like pre-built
templates, many more integrations.
Omni graffle and Visio are long-time industry mainstays and work
excellently for building and maintaining an IA design, though Visio is
online only (the older offline version is Windows-only) whereas Omni
graffle is Mac-only and requires separate purchases for the MacOS and
iOS versions.
Other applications like Balsamiq, Mind Meister, Mind Manager, or X
Mind all offer similar-style behavior but are built for other major
purposes, such as prototyping or mind mapping.

8 steps to creating your visual sitemap

Site mapping is essential when you are building a new website, but it
doesn’t mean it has to be complicated. Follow our quick guide to build
your first sitemap:

293
 Mobile Application and i. Grab Miro’s Sitemap Template
User experience Design Lab
Your sitemap will be used by different teammates and stakeholders, so
it’s important to document your decisions digitally so they are easily
accessible by everyone on the team. If you are using Miro, you can
start by choosing the site mapping template from the library.

ii. List primary pages on your website

Think of all the major sections of your future website, then write them
down on stickies (one section = one sticky).
This can be things like:
❖ Tour
❖ Case Studies
❖ Product
❖ Pricing
❖ Enterprise
❖ Blog
❖ Login
❖ Sign Up

iii. List secondary pages

A lot of content isn’t important enough to be a category on your
website, but it’s still worth including. This content usually goes into
secondary pages that can’t be accessed through the website’s main
page but can be put under different categories. This can be things like:

Case studies
❖ Education
❖ Legal
❖ Business
❖ Etc.
Pricing
❖ Free Tier
❖ Personal Tier
❖ Business Tier
❖ Etc.

294
i. Put your pages together using the template UX Design - For
Web And Mobile
Sort out your stickies, putting secondary pages under primary pages in Application
columns.

ii. Consult with members of the team

If you have 20 different primary pages, you’re going to get a very
bloated website, so consult with all the stakeholders to understand
what your team’s top priorities are.

iii. Trim unnecessary primary and secondary pages

Once you’ve gotten feedback, trim what seems to be cumbersome.

iv Review with the team

When you’re satisfied, review with the team to see if the layout makes
sense and if all the stakeholders agree with the final result.

v. Keep space for notes and comments!

You can leave comments for designers and other stakeholders over
different pages you want to pay special attention to.

Examples of visual sitemaps

A good sitemap represents all key pages of the site and structures them in
a way that is clear to the user and doesn’t feel cluttered.

11.1 CREATE WIREFRAME

Definition
Wireframe is a way to design a website service at the structural level.
Wireframes are used early in the development process to establish the
basic structure of a page before visual design and content is added. It is a
critical part of the interaction design process. Wireframes can also be

295
 Mobile Application and used to create the global and secondary navigation to ensure the
User experience Design Lab terminology and structure used for the site meets user expectations.

Examples of wireframes
Well-known companies are shown to visualize website’s structure and
the relationships between certain pages. They are:-

i. Twitter – High-Fidelity Mobile App Wireframe:-

Displaying user feed and communication, this high-fidelity Twitter
wireframe is simple and straightforward. It shows how a Twitter
profile page looks to users and how they interact with their feed and
other users.

ii. YouTube – Mid-Fidelity Website Wireframe:-

The medium-fidelity video platform wireframe example outlines the
main elements of the page and uses branded colors for calls-to-action
(CTAs).
In this wireframe, we can see content grouped by categories while
channels that the user subscribed to are displayed on the left. Videos
are displayed in a grid format with author information and ratings
listed below the video.

296
iii. Facebook – Mid-Fidelity Website Wireframe:- UX Design - For
Web And Mobile
This wireframe displays a user page with a profile picture, cover Application
photo, and user chats. We can clearly see the feed and "About" section
as well as the gallery placeholder. Elements and buttons are already
aligned and we only need to add graphics here to show the full page
functionality.

iv. Instagram – High-Fidelity Mobile App Wireframe:-

Instagram's app, this wireframe depicts the design of stories and how
people are sharing their photos here. The wireframe mirrors the
original app including the graphics, so we can clearly see the final
version of the platform. It will be useful for someone who decided to
create an application with similar functionality.

The best tools for wire framing

UX Pin: UXP in has a wide range of functionalities, but one of the best
ones is how it facilitates building responsive, clickable prototypes
directly in your browser.

297
 Mobile Application and In Vision: In Vision allows you to get feedback straight from your team
User experience Design Lab and users through clickable mock-ups of your site design. It’s completely
free too!
Wireframe.cc: Wireframe.cc provides you with the technology to create
wireframes really quickly within your browser, the online version of pen
and paper.
Wireframe Sketcher: Wireframe Sketcher is a wire framing tool. It is
used for creating wireframes, mockups, and prototypes for desktop, web,
and mobile applications. The application is offered in a desktop version
as well as a plug-in for any Eclipse IDE such as Flash Builder,
ColdFusion Builder, Astana, My Eclipse, and Zend Studio.

7 Steps to design a wireframe

i. Mind Mapping for your design
Before building a site, it’s important to understand what makes a good
site layout and navigation flow. Familiarise you with site components,
and what users would want on their site, and how they want to find it.
Check out some ready-made designs and templates on Quackit and
Creative Market to get more clear idea through examples.

ii. Designing your process

Wire framing is about process, so the first thing is to design your own
process. It begins with the overall layout, so that you can map out
navigation. Adobe Illustrator can be used for web frame design
because of its compatibility with Adobe Photoshop, which are need
for visual designs. Adobe Illustrator can generate PSD files, which
can be edited in Adobe Photoshop after.

298
 UX Design - For
Web And Mobile
Application

iii. Pick your Top Tools

Users care about visuals, whereas developers build from the ground
up. To save time, it is easier to show users what we’re planning to
make sure we are on the same page before the real work begins. For
that select one of the tool discussed above in “The best tools for
wireframing” topic.

iv. Setting up your Grid

CSSGrid can be used to setup grid dimensions.

v. Define Layout with Boxes

Once the grid has been defined, boxes are made and placed on the grid
layout screen. The hierarchy of these boxes should also be kept in
mind (starting with the heading on top and gradually with the contacts
at the bottom). The dimensions for the components need to be
accurate, as that will directly affect your code later on. Sometimes it
might be useful if boxes with different dimensions placed side by side
to visually see what works. Don’t just plug in 3 because you feel like
it. These details will mater later on.

299
 Mobile Application and
User experience Design Lab

vi. Determine pecking order using the ‘Text Tool’

Generally, it is better to start with the label for the box, and a smaller
text if it needs a bit of description. Make your formatting consistent in
your boxes to be professional. Your wireframes are meant to facilitate.

vii. Converting Wireframe into a Visual

After your wireframe has been approved, you will need to populate
the squares with – no, not data – images. If you were creating a file
on Illustrator, then save the .psd file and send it over to Photoshop
from where the visuals can be plugged in. Adobe Photoshop CS6
and later versions will have this import feature.
That’s the quick and dirty for now! We kept it short because the
most important part to wireframing is to play around with the tools
yourself and see which platforms are intuitive to you. We’ll be
following up with more in-depth pieces in the coming months!

300
 UX Design - For
Web And Mobile
11.2 CREATE SCREENS ,WIDGETS ,OUTLINES Application

Here for creating screen, widgets and outline we will be use the tool
called “Wireframe Sketcher”. It will be performed as follows:-
Wireframe Sketcher has a flexible user interface consisting of editors and
views all working together. These user interface parts can be
conveniently laid out in various ways to best suit your preferences.
Wireframe Sketcher comes with an initial arrangement that is called Wire
framing perspective.
If you are using the standalone version of Wireframe Sketcher then Wire
framing perspective will be open for you by default. If you are using an
Eclipse IDE then open the Wire framing perspective using Window >
Open Perspective > Other… > Wire framing.

To change this arrangement, you can drag & drop views around,
maximize and minimize them, make views float, or close altogether. You
can always restore any closed view using Window > Show View menu.
You can also restore the layout to its initial configuration of views using
Windows > Reset Perspective…. You can also save various layout
configurations using Window > Save Perspective As…, and then toggle
between these layouts to suit better your current task.
For creating screens:-
i. Screens can be created or modified using Screen Editor.
ii. The editor works along with other views like Palette, Properties, Links
and Outline. Double-click the editor’s tab to maximize it and
temporarily gain more screen space. Double-click the tab again to
restore editor’s position.
iii. New screen can be created using New Screen wizard. Specify the
parent folder and the name of the .screen file. Make sure that you have
at least one project in your workspace. If not, then you can create one
using the Wireframe Project wizard.
301
 Mobile Application and iv. To open the New Screen wizard select File > New > Screen.
User experience Design Lab Alternatively, right-click on a folder in the Project Explorer and select
New > Screen:

❖ For widgets:-
1. Screens are drawn by adding widgets and other assets from palette to
them.
2. Various ways to add widgets :-
i. Drag and drop the palette item onto the editor canvas. The widget
will have its size calculated automatically.
ii. Select the palette item and then draw a bounding box in the editor
canvas to place the widget and give it an initial size.
iii. Double click palette item to add it.
iv. Open the Quick Add dialog (Ctrl+Space), start typing a widget
name, select the widget and then press Enter to place it.

Selecting widget
To select a widget just click on it. For multiple selection hold the Ctrl
key while clicking to toggle the selected state of a widget. Hold Shift
while clicking to add a widget to the current selection.
Selected widgets have a blue rectangle around them – move handle, and
white or black squares which are resize handles. One widget that has
black resize handles is called primary or anchor selection. This is the last
widget selected. Relative actions such as align and match size use
primary selection as their reference.

302
 UX Design - For
Web And Mobile
Application

Skinnable widgets; new Alert, Shape and Switch widgets

Skinnable widgets
Stencils are a good way to extend Wireframe Sketcher’s widget library
with new widgets that better match the targeted user interface. There are
stencils for iOS, Android and Windows Phone that provide UI elements
for those platforms. New widgets are usually constructed as groups of
some primitives like lines, text and images. This release finally brings a
mechanism for solving this problem. This is widget skinning mechanism
that lets you to completely change the look of built-in widgets, while still
keeping properties and smart text support.
Examples of what widget skinning:

New Alert, Shape and Switch widgets

This release also brings several new widgets: Alert, Shape and Switch.
These widgets were added with skinning support in mind so that they can
be re-used by stencils to provide specialized versions. Alert widget lets
you quickly add alert and message dialogs. Note how easy it is to create
buttons by using smart text:

Shape widget brings a set of common shapes that support text and other
common properties. At the same time Rectangle and Circle widgets were
deprecated as Shape widget provides a much more flexible alternative:

303
 Mobile Application and
User experience Design Lab

Switch widget is there to represent toggles as are now found on all

mobile platforms and in UI toolkits like GTK. Switch is also skinnable
and can be customized to better match the target platform:

Other changes
❖ Added round border option for Button widget.
❖ Added header toggle property for List widget.
❖ Added automatic image refresh in editor on image change.
❖ Changed “Clone Screen” action to include source screen as
component instead of copying it.
❖ Improved the look of Tabs widget and made it resizable horizontally.
❖ Disabled delete action for locked widgets.
❖ Renamed “Export to HTML” action to “Share Online”.
❖ Improved painting performance.
❖ Removed “Advanced” button from new screen and storyboard
wizards.
❖ Fixed center alignment for widgets with “\n” in text.
❖ Fixed the behavior of Image widget placeholder on resize.
304
❖ Fixed the error sometimes occurring when overriding properties. UX Design - For
Web And Mobile
For outlines:- Application

The Outline view displays the overview of the edited contents. For
screens it displays widgets in their Z-order, those in the back being at the
top of the list and those in the front being at the bottom. For storyboards
it displays the list of included screens.

11.3 SETTING PROPERTIES

The Properties view allows you to quickly edit the properties of the
selected objects. If multiple objects are selected then the view lets you
edit just the common properties of those objects. If you prefer to work
with your editor maximized you can detach the Properties view so it can
float above the editor canvas.
There are various properties available for editing the selected objects.
The following are the available properties:-

Border Toggle Lets you toggle on and off the border for
Shape, List, Table and Tree widgets.

Button Lets you switch the Button’s style

between Point Left, Square, Round and
Point Right. Pointy variants can be used to
represent iPhone/iOS buttons.

Chart Lets you switch the Chart’s style between

Pie, Line, Bar and Column.

Color Lets you control color properties such as

background, foreground and border. Alpha
slider lets you change the opacity for
widgets that support it.

Component Displays the source screen file for

Component widget. Lets you open and
edit the source screen. It’s also possible to
gray out a component in design mode. It’s
useful for background templates that you
wish to stay out of your way. Components
can also be detached from their source and
transformed into a group.

305
 Mobile Application and Curly Brace Lets you switch the orientation of a Curly
Brace between Left, Right, Top and
User experience Design Lab Bottom.

Icon Lets you choose an icon for some widgets.

When an icon is selected you can choose
its size between Small (16×16), Medium
(24×24), Large (32×32), Extra Large
(48×48) and Extra Extra Large (128×128).
Icons can also be rotated in 90 degree
increments. Delete button lets you remove
previously specified icon.

Icon Position Lets you switch the position of an Icon

between Left and Top. This property is
available for Shape and Label widgets that
have an icon selected.

Image Lets you choose a raster image file from

available assets for Image widget. Black
and White toggle lets you automatically
render colored images in grayscale colors.
Image can be flipped horizontally and
vertically and rotated in 90 degrees
increments.

Label Rotation Lets you rotate the text of a Label widget

in 90 degree increments.

Line Style Lets you control the line style for Arrow,
Shape, Horizontal and Vertical Line.
Available styles are Solid, Dotted and
Dashed.

List Lets you control the row height and the

visibility of horizontal grid lines for List
and Table widgets. Additionally you can
control the visibility of vertical lines and
header for Table widget.

Name Lets you assign a name to a Group widget.

Position & Size Gives you a fine control over position and
size properties. Use arrow keys to
increment and decrement values. Lock
toggle lets you lock a widget in place so it
gets out of your way. Auto-size button
forces a widget to resize to its preferred
size. When editing
groups or components the anchor drop-
down becomes available and allows to
control anchor settings.

Screen Font Lets you specify a font per-screen. To

access this property click in the empty
space in Screen Editor. You can also
revert to a global font configured in
WireframeSketcher’s preferences. If the
configured font doesn’t exist on your
system then its name will be displayed in
red to indicate that.

Screen Theme Lets you specify choose between Clean

and Sketch theme for a screen. To access
this property click in the empty space
in Screen Editor. Default theme choice
makes the screen use a global theme
configured in
WireframeSketcher’s preferences.

306
 Selection Lets you specify the selected item or row. UX Design - For
Web And Mobile
Application
Selection Toggle Lets you toggle the selected state for
Checkbox and Radio Button widgets.

Shape Lets you choose the type of Shape widget.

Possible choices are Ellipse, Rectangle,
Rounded Rectangle, Round Rectangle,
Diamond, Star, Parallelogram, Triangle,
Right Triangle. Some shapes can be
rotated in 90 degrees increments.

State Lets you specify the state of the widget.

This mostly applies to input (form)
widgets. Possible choices are Normal,
Selected, Disabled, Focused.

SVG Image Lets you choose the .svg image file from
available assets for SVG Image widget.
Image can be flipped horizontally and
vertically and rotated in 90 degrees
increments.

Tabs Lets you change the orientation of Tabs

and Tabbed Pane widgets. Possible
choices are Top, Bottom, Left and Right.

Text Lets you specify the font size and and

toggle Bold, Italic and Underline font
styles. For some widgets you can also
specify Left, Center or Right text
alignment. For Text and Text Area
widgets you can also set the line height
(leading). Line height is expressed as a
multiple of font size.

Tooltip Lets you specify the orientation of Tooltip

widget. Possible values are Bottom Left,
Bottom Right, Top Left and Top Right.

Scrollbar Lets you toggle on and off the visibility of

vertical scrollbar. When visible, you can
also specify the position of the thumb.

Window Lets you toggle on and off the visibility of

minimize, maximize and close buttons for
Window widget.

11.4 ODERING SCREENS ,SCREEN TRANSITION

To change the order in which widgets are drawn use the Object > Send
Backward and Object > Bring Forward, Alt+Ctrl+Shift+B and
Alt+Shift+Ctrl+F respectively.

307
 Mobile Application and
User experience Design Lab

Note:- Send Backward and Bring Forward are highlighted using red
box.
Better screen flows
The latest release brings the long awaited export option for screen flows.
Screen flows can now be exported as an extra page in PDF document:

308
Screen flows also got a long-needed face lift. Multiple links between a UX Design - For
pair of screens are now collapsed to a single link. Link labels were also Web And Mobile
removed as most of the time they are of little use: Application

Screen flows can now also be printed. So if you need a single page with
your screen flow then just go to “Screenflow” tab and print it. With the
right system setup you can also print to PDF.
The last addition are align and distribute actions. These actions make it
easy to layout screen flows with large number of screens.
Other changes
❖ Improved Ctrl+MouseWheel to zoom on mouse cursor position.
❖ Added “minus” icon.
❖ Cleaned up built-in icons to look better when rotated.
❖ Fixed an error when removing a rotated icon.
❖ Fixed an issue with “+” character in image file names.
❖ Fixed icon rotation in Label widget.
❖ Fixed the z-order of link areas in exported HTML.

11.5 ADDING ACTIONS & TRIGGERS ,HEADER &

FOOTER
DESIGNING FOR ACTION
Buttons are designed for users to take action on a page or a screen.
Buttons should be the first choice when designing for action, because that
is what buttons are intended for and what users expect.

309
 Mobile Application and Tips about styles, placement, and wording to create better user
User experience Design Lab interfaces
i. Make buttons look like buttons

ii. Visually differentiate Primary and Secondary actions

iii. Buttons are not links

310
iv. Don’t have more than one primary action button on the screen at UX Design - For
a time Web And Mobile
Application

Placement
The placement of your buttons matter. Again, they have used many sites
and applications before yours and gotten used to certain button placement
patterns.

v. In small windows, the primary action button should be placed at

the bottom right

311
 Mobile Application and vi. Full page designs should have the primary button on the left side
User experience Design Lab of the page

Wording
The words you use matter. Words in buttons are meant to be clicked or
tapped to execute an action. Make sure to clearly explain what your
button will do, once clicked.

vii. Words should be simple and to the point

viii. Avoid generic commands such as "OK" in a dialog box

312
ix. Use task specific words UX Design - For
Web And Mobile
If the user is adding an item to a cart, write "Add to Cart". If you’re Application
about to publish a blog post, “Publish” should be the action word
within the button.

x. Avoid words that can potentially cause confusion

Delete is an overused action word when removing a piece of content
from a list.

xi. Be clear about what will happen next

xii. If the user is seeking to execute a critical operation, focus their

attention on it

xiii. Allow users to recover from accidents

313
 Mobile Application and ADDING TRIGGERS
User experience Design Lab
Notification Triggers
Notification Triggers allows you to schedule local notifications that don't
require a network connection, which makes them ideal for use cases like
calendar apps.
Web developers can display notifications using the Web Notifications
API. This feature is often used with the Push API to inform the user of
time-sensitive information, such as breaking news events or received
messages. Notifications are shown by running JavaScript on the user's
device.
Notification triggers solve this problem by letting you schedule
notifications with their triggering condition in advance, so that the
operating system will deliver the notification at the right time even if
there is no network connectivity or the device is in battery saver mode.

ADDING HEADER & FOOTER

The Header
Header is one of the most valuable sections of your entire website,
especially since it takes top real estate on every one of your webpages.
Visitors should be able to recognize your brand and understand what
your company does as soon as they land on your website, and the header
is one of the most important tools to make sure that happens.

WHAT SHOULD BE IN THE HEADER?

❖ Your company logo
❖ Navigation
❖ CTA/conversion tactic
❖ Your phone number
❖ Login section
314
❖ Search functionality UX Design - For
Web And Mobile
❖ Announcement/alert bar Application

The Navigation
Arguably the most important part of your header is the layout and design
of the navigation. This section is like a table of contents for all the pages
on your website. It’s how users can find what they need from you, so it’s
pretty crucial that you get it right.

WHERE SHOULD THE NAVIGATION BE PLACED

❖ Sticky Header & Navigation
❖ Horizontal Navigation
❖ Vertical Navigation

Hamburger Navigation

FOOTER
The website footer is the section of content at the very bottom of a web
page. It typically contains a copyright notice, link to a privacy policy,
sitemap, logo, contact information, social media icons, and an email sign-
up form. In short, footer contains information that improves a website’s
overall usability.

315
 Mobile Application and What to Put in a Website Footer
User experience Design Lab
❖ Copyright Notice
❖ Privacy Policy Link
❖ Sitemap
❖ Logo
❖ Contact Information
❖ Social Media Icons
❖ Email Sign-up Form

11.6 REFERENCES
1. https://balsamiq.com/learn/articles/button-design-best-practices/
2. https://www.smashingmagazine.com/2009/10/call-to-action-buttons-
examples-and-best-practices/
3. https://notification-triggers.glitch.me/
4. https://vtldesign.com/web-strategy/navigation-header-design/



316
 12
UX EVALUATION
Unit Structure :
12.0 Set UX Goals
12.1 Perform UX Evaluation and Reporting
12.2 Usability Test
12.3 Questions
12.4 Quiz
12.5 Video Lectures
12.6 Moocs
12.7 References

12.0 SET UX GOALS

User experience design plays an important role in product design
process. But what is good user experience on earth? Is there any
criterion? The following 5 user experience goals, listed in a logical order,
may help you to find the right direction of user experience design and
make you an excellent UX designer.
The following are the goals: -
1. Goal 1: “I got what I need”
2. Goal 2: “Don’t make me think”
3. Goal 3: “I really enjoy using it”
4. Goal 4: Habit is a second nature
5. Goal 5: Make users your promoters

Goal 1: “I got what I need”

To give users what they need is the first goal of user experience design.
Before using a product, people are mostly concerned about “whether it is
useful?” “Will this product solve my problems?” So a product should
meet the functional demands of users first (not only those existed
demands, but also potential ones). Doing user research is a good way to
find out users’ demands, but objectively, it’s hard to measure users’
needs precisely, even if it was huge company which has advanced user
survey technologies.

317
 Mobile Application and For example, Facebook at the beginning didn’t take “making friends with
User experience Design Lab strangers (say, a friend’s friend)” seriously as they believed that people
only have curiosities on their surroundings; social network is essentially
“a game among acquaintances”. However the data show that most of
users like to expand their circles by adding strangers as their friends.
Now social platform also contributes a lot to companies and brands who
want more influence online. They put money and energy on operating an
official page to promote their products. All of these are unexpected
demands for the early designers. Thus, collecting users’ feedback
constantly and make use of data or other materials to follow your users’
activities is also a key to meet users’ demands. If UX designers don’t
give users what they want, the users will give a shit.

Goal 2: “Don’t make me think”

“Will I get what I want in a most simple, direct and quick way?” It would
be better if you “Don’t make me think”. The top-download games in app
store are always those like “Don't Tap the White Tile”, which people can
play without brains. This shows the laziness nature of human beings. But
laziness is also an important drive of technology development.
How to design to give users what they want in the easiest way? First UX
designers should be a mastery of the user stories & scenario of products.
Which are important things that users pay much attention to? Which are
secondary? How to simplify the operations by taking advantage of users’
habits? As to user interface, whether the flat design method should be
adopted to enable users to get most information at the first sight. Besides,
the usability of products also depends on the design tools you choose. A
complicated-to-use prototype/wireframe tool is a bad design itself, so
how can we make good UI or product prototype with it?

Goal 3: “I really enjoy using it”

Many products have similar functions, which can all meet the users’
needs to some extent. But only few of them are favored by users, why?
As a music lover, I go to a concert at least once a month. Among these
concerts of any scale, there are some which thrilled me from start to
finish. It seems that the design of a music concert has nothing to do with
product design, but as I have been immerging in design circle for many
years I gradually found that an exciting concert is just like a product
offering good user experience, both of them give you the right thing at
the right time.
At an evening dinner, the starter is always delicate but of low volume.
Gradually, under the influence of some spirits, the main course was
served, at this moment the light is warmest and the atmosphere is the
best. The ending part is usually made easy. This is a very good example
to explain that “UX Designers should have a sense of rhythm (of
product)”. When designing video player software, how many “ss” should
the “black screen” last to draw the users’ attention, but never make them
feel impatient? Why some social platforms only allow its users to access

318
more functions after a period of time? Those are all questions that user UX Evaluation
experience designers should concern about.

Goal 4: Habit is a second nature

“Whether the product is attractive enough for me to use it for a long
term?”, and even “becomes part of my life” and “makes me addicted to
it”.
In the article “UX/UI Designer Skills Valued by Facebook” I mentioned
that one important reason that Facebook became a huge social platform
with over 200 million users is that FB knows the mental & psychological
needs of users: people win others’ attention on Facebook, which they
didn’t get in real life. “Helping people to build a strong connection with
external world; enabling them to follow and be followed, these are what
a social platform was born for.” A functionally powerful product will no
doubt be favored by people. But a product which forms a new habit has
immeasurable potential. We chat, Whatsapp, these are all among the
latter.

Goal 5: Make users your promoters

“Whether the product is good enough to motivate me to become one of
its promoters?”
If a designer set the above 4 user experience goals when designing a
product, he would be an excellent designer. The last goal, as far as I can
see, is the inherent property of an excellent design: to mobilize its users.
As we all know, users are the best spokesmen of your products.
Companies may seek help from all kinds of resources to promote their
products: KOL, famous blogger, web celebrities. However, none of them
is as powerful as users. You may ask: why does product promotion has
something to do with designers? If UX designers can build a relationship
between the users and potential users, for example, put a “sharing on
Twitter” button on the right place, there might be more people will join
in (this is a method of most basic level). For another example, users need
to cooperate with others when using the product (like game products). In
short, to mobilize your users and make them your promoters is also an
important user experience goals that good UX designers should set.

12.1 PERFORM UX EVALUATION AND REPORTING

User experience evaluation (UXE) or user experience assessment (UXA)
refers to a collection of methods, skills and tools utilized to uncover how
a person perceives a system (product, service, non-commercial item, or a
combination of them) before, during and after interacting with it. It is
non-trivial to assess user experience since user experience is subjective,
context-dependent and dynamic over time. For a UXA study to be
successful, the researcher has to select the right dimensions, constructs,
and methods and target the research for the specific area of interest such
as game, transportation, mobile, etc.
319
 Mobile Application and DIMENSIONS
User experience Design Lab
There are many different dimensions to consider when choosing the best
assessment approach:
❖ Goal: Summative (on the final product) or formative (during the
process)
❖ Approach: Objective or subjective
❖ Data: Quantitative or qualitative
❖ Granularity: Momentary, episodic, or overall UX
❖ Setup: Lab or field
Laboratory experiments may work well for studying a specific aspect of
user experience, but holistic user experience is optimally studied over a
longer period of time with real users in a natural environment.

CONSTRUCTS
In all cases, however, there are certain aspects of user experience that
researchers are interested in (measures), and certain procedures and
techniques used for collecting the data (methods). There are many
measures and some high-level constructs of user experience that can be
used as the basis for defining the user experience measures, for example:
1. Utility: Does the user perceive the functions in the system as useful
and fit for the purpose?
2. Usability: Does the user feel that it is easy and efficient to get things
done with the system?
3. Aesthetics: Does the user see the system as visually attractive? Does it
feel pleasurable in hand?
4. Identification: Can I identify myself with the product? Do I look good
when using it?
5. Stimulation: Does the system give me inspiration? Or wow
experiences?
6. Value: Is the system important to me? What is its value for me?
To properly evaluate user experience, metrics and other factors
surrounding a study need to be taken into account, for example:
❖ Data (metrics): The time taken to complete a task.
❖ Scale (metrics): Indicators that show effectiveness, efficiency and
satisfaction.
❖ Other Factors: Conditions of use, the surrounding environment and
other human factors.
320
METHODS UX Evaluation
An individual method can collect data about a set of specific constructs
of user experience. For instance, usability testing is used to collect data
about usability construct. Methods also differ if they are to measure a
momentary or episodic experience (i.e., assessing how a person feels
about a specific interaction episode or after executing a task) or an
experience over time, also known as an longitudinal experience. UXA
methods can be classified in three categories: implicit, explicit and
creative methods.

Implicit methods
Implicit methods of UX research focus not just only on what the users
say, but also on what the user cannot express verbally. Many available
tools can assist in the implicit evaluation, in particular to gather implicit
or objective data. When available, UX researchers utilize state of the art
equipment to uncover all aspects of the experience.
Examples of implicit evaluation methods and tools:
❖ Eye tracking
❖ Attention tracking
❖ User tracking
❖ Task and reaction measurement, galvanic skin response or skin
conductance
❖ Electroencephalography (EEG)
❖ Observation studies: participant observation where observers monitor
the participant's reactions such as facial and other gestures, the tone
of voice or other body language cues

Explicit methods
Explicit methods of UX research explore what the user is consciously
aware of getting them to reflect on their own feelings or thoughts, and
gather their views and opinions. An important aspect of explicit methods
includes usability testing and emotion evaluation.

Emotion assessment
When investigating momentary user experiences, we can evaluate the
level of positive affect, negative affect, joy, surprise, frustration, etc. The
measures for emotions are bound to the methods used for emotion
assessment, but typical emotion measures are e.g. valence and arousal.
Objective emotion data can be collected by psycho physiological
measurements or by observing expressed emotions. Subjective emotional
data can be collected by using self-report methods, which can be verbal
or non-verbal.

321
 Mobile Application and Examples of emotion assessment methods:
User experience Design Lab
❖ Psycho physiological emotion measurements aim to identify emotions
from physiological changes in muscles (e.g. face), pupils, skin, heart,
brains, etc.
❖ Expression
❖ Think aloud protocol can be used for reporting emotions (real-time
verbal self-report)
❖ Positive and Negative Affect Schedule (PANAS) (retrospective verbal
self-report)
❖ Geneva emotion wheel[4] (retrospective verbal self-report)
❖ Photographic Affect Meter (PAM)
❖ Emotion slider[6] (continuous non-verbal self-report)
❖ Sensual evaluation instrument (SEI)[7] (snapshot non-verbal self-
report)
❖ Pr Emo, a new version of Emo Cards for assessing emotion[8]
(snapshot non-verbal self-report)

Creative methods
Equally important to implicit and explicit methods are the creative
methods that the user researcher can utilize in order to bring together the
design team's view, as well as the target market's dreams, aspirations and
ideas of optimal design. These activities are more open and allow people
to either co-create with the engineers/designers, or to use their
imagination to express their ideal system.
Examples of creative assessment methods
❖ Co-design activities
❖ Creativity workshops
❖ Paper prototyping, wireframing, mind mapping
❖ Card sorting
❖ Personas
Longitudinal
In contrast to identifying a momentary emotion, longitudinal UXA
investigates how a person feels about a system as a whole, after using it
for a while.
Examples of longitudinal UXA methods (excluding traditional usability
methods):

322
❖ Diary methods for self-reporting experiences during field studies UX Evaluation
❖ Experience sampling method (ESM) for self-reporting during field
studies
❖ Day reconstruction method (DRM) – story-telling to reveal the
meaningful experiences during field studies
❖ AttrakDiff questionnaire for overall UX evaluation
❖ User experience questionnaire (UEQ) (available in several language
versions)
❖ Ladder interviews – e.g. to find out attitudes or values behind
behaviour or experience
❖ Holistic user experience (HUX)[14] identifying the relevant product
factors for holistic user experience

12.2 USABILITY TEST

Usability Testing also known as User Experience (UX) Testing, is a
testing method for measuring how easy and user-friendly a software
application is. A small set of target end-users, use software application to
expose usability defects. Usability testing mainly focuses on user’s ease
of using application, flexibility of application to handle controls and
ability of application to meet its objectives.
This testing is recommended during the initial design phase of SDLC,
which gives more visibility on the expectations of the users.
Why do Usability Testing?
There are many software applications/websites, which miserably fail,
once launched, due to following reasons –
❖ Where do I click next?
❖ Which page needs to be navigated?
❖ Which Icon or Jargon represents what?
❖ Error messages are not consistent or effectively displayed
❖ Session time not sufficient.

323
 Mobile Application and
User experience Design Lab

Example Usability Testing Test Cases

Fig 1: Usability Testing

The goal of this testing is to satisfy users and it mainly concentrates on
the following parameters of a system:

The effectiveness of the system

❖ Is the system is easy to learn?
❖ Is the system useful and adds value to the target audience?
❖ Are Content, Color, Icons, Images used are aesthetically pleasing?
Efficiency
❖ Little navigation should be required to reach the desired screen or
webpage, and scrollbars should be used infrequently.
❖ Uniformity in the format of screen/pages in your
application/website.
❖ Option to search within your software application or website.
Accuracy

324
 ❖ No outdated or incorrect data like contact information/address UX Evaluation
should be present.
❖ No broken links should be present.
User Friendliness
❖ Controls used should be self-explanatory and must not require
training to operate
❖ Help should be provided for the users to understand the
application/website
❖ Alignment with the above goals helps in effective usability testing

How to do Usability Testing: Complete Process

Usability testing process consists of the following phases

Fig 2: Usability Testing Process

Planning : During this phase the goals of usability test are determined.
Having volunteers sit in front of your application and recording their
actions is not a goal. You need to determine critical functionalities and
objectives of the system. You need to assign tasks to your testers, which
exercise these critical functionalities. During this phase, the usability
testing method, number & demographics of usability testers, test report
formats are also determined.
Recruiting : During this phase, you recruit the desired number of testers
as per your usability test plan. Finding testers who match your
demographic (age, sex etc.) and professional ( education, job etc.) profile
can take time.
Usability Testing : During this phase, usability tests are actually
executed.
Data Analysis : Data from usability tests is thoroughly analyzed to
derive meaningful inferences and give actionable recommendations to
improve the overall usability of your product.
Reporting : Findings of the usability test is shared with all concerned
stakeholders which can include designer, developer, client, and CEO

325
 Mobile Application and Methods of Usability Testing:
User experience Design Lab
2 Techniques
There are two methods available to do usability testing –
1. Laboratory Usability Testing
2. Remote Usability Testing
Laboratory Usability Testing : This testing is conducted in a separate
lab room in presence of the observers. The testers are assigned tasks to
execute. The role of the observer is to monitor the behavior of the testers
and report the outcome of testing. The observer remains silent during the
course of testing. In this testing, both observers and testers are present in
a same physical location.
Remote Usability Testing : Under this testing observers and testers are
remotely located. Testers access the System Under Test, remotely and
perform assigned tasks. Tester’s voice , screen activity , testers facial
expressions are recorded by an automated software. Observers analyze
this data and report findings of the test. Example of such a software –
http://silverbackapp.com/

UX Testing Checklist

Fig 3: Usability Testing Checklist

The primary goal of this testing is to find crucial usability problems
before the product is launched. Following things have to be considered to
make a testing success:
❖ Start the UX testing during the early stage of design and
development
❖ It’s a good practice to conduct usability testing on your
competitor’s product before you begin development. This will help
you determine usability standards for your target audience
326
 ❖ Select the appropriate users to test the system(Can be experts/non- UX Evaluation
experts users/50-50 of Experts and Non-Experts users)
❖ Use a bandwidth shaper . For instance , your target audience has
poor network connectivity , limit network bandwidth to say 56
Kbps for your usability testers.
❖ Testers need to concentrate on critical & frequently used
functionalities of the system.
❖ Assign a single observer to each tester. This helps observer to
accurately note tester’s behavior. If an observer is assigned to
multiple testers, results may be compromised
❖ Educate Designers and Developers that this testing outcomes is not
a sign of failure but it’s a sign of Improvement

Usability Testing Advantages

Fig 4: Usability Testing Advantages

As with anything in life, usability testing has its merits and de-merits.
Let’s look at them
❖ Easy access to information.
❖ Ease of use
❖ Gesture and voice feedback
❖ Connectivity issues
❖ Call interpretation and notifications
❖ Feedback from User groups.

327
 Mobile Application and Usability Testing Disadvantages
User experience Design Lab

Fig 5: Usability Testing Disadvantage

❖ Cost is a major consideration in usability testing. It takes lots of
resources to set up a Usability Test Lab. Recruiting and management
of usability testers can also be expensive
However, these costs pay themselves up in form of higher customer
satisfaction, retention and repeat business. Usability testing is therefore
highly recommended.
USABILITY TESTING TOOLS

Fig 5: Usability Testing Tools

Top 16 usability testing tools for better UX
Usability testing tools are solutions to streamline the usability testing
process and gather actionable insights and answer questions on how
people perceive and experience your product. They can help you put your
prototype or website in front of real users, allowing you to check how
they accomplish a given task and identify possible frustration points.

328
Top 16 tools which are a good fit for usability testing tools for better UX. UX Evaluation
1. Maze
2. Look back
3. User Testing
4. Optimal Workshop
5. Usability Hub
6. Loop11
7. User feel
8. Try My UI
9. Hot jar
10. User Zoom
11. Qualaroo
12. Usabilla
13. Crazy Egg
14. Optimizely
15. Userlytics
16. User brain

12.3 QUESTIONS
1. How can you define the Usability Testing?
2. How is Usability testing related to the functional testing?
3. List the steps that are covered as part of usability testing.
4. What is the difference between build and release?
5. What do you understand by bug status in case of usability testing?
6. Give the different types of bug status?
7. What is Data-driven testing? Is it related to usability testing too?
8. What are the benefits offered by the data-driven testing?
9. Explain the important and considerable points to write usability test
cases
10. What is Automation Testing? Can usability testing be automated?

329
 Mobile Application and 11. Explain Load Testing and Stress Testing.
User experience Design Lab
12. Explain the volume testing.
13. Explain different types of Usability Testing.
14. What are the benefits of usability testing for website owners?
15. What is the major benefit of usability testing for businesses?

12.4 QUIZ
1. Which of the following is NOT an example of a context research
method?
a. Field study
b. Diary study
c. Usability test
d. Contextual inquiry
Answer: C
2. Visual hierarchy refers to the visual organization of page elements so
that the user can easily perceive:
a. The breadth of the content and controls available on the page
b. Whatever elements they are interested in first
c. Differences in all the elements on the screen
d. Which elements are related and their relative importance
Answer: D
3. Which of the following is an example of a good How might we
question?
a. How might we implement the tax-payment flow?
b. How might we ensure that people pay taxes on time?
c. How might we improve the user experience of the tax-payment
flow?
d. How might we get users to like our payment flow more?
Answer: B

330
4. What is keyword foraging? UX Evaluation
a. The user conducts a preliminary search to determine the right
keywords for her information need, then composes a search query
with those keywords.
b. The user scans the list of search suggestions to find the one that
most appropriately matches their need.
c. The researcher browses keyword statistics for a site to see what the
most popular keywords were for a given period.
d. The researcher interviews users about a topic to understand the set
of words that they are most likely to use in referring to that topic.
Answer: A
5. What is a disadvantage of vertical navigation?
a. Can accommodate only a small number of categories
b. Offers no room for growth
c. Is unfamiliar to users
d. Requires more space
Answer: D
6. What is grounding?
a. The process of establishing common ground with a communication
partner or a work team
b. The process of getting the user calm and comfortable at the
beginning of a user test
c. The process of collecting user data on which to base design
d. The process of connecting with users to build empathy
Answer: A
7. What characterizes organizations at stage 3 (Emergent) of NN/g’s
latest UX-maturity model?
a. UX work is comprehensive, effective, and pervasive.
b. UX work is rare, done haphazardly, and lacking importance.
c. The organization has semi systematic UX-related methodology that is
widespread, but with varying degrees of effectiveness and efficiency.
d. UX work is functional and promising but done inconsistently and
inefficiently.
Answer: D

331
 Mobile Application and 8. The principle of closure says that people
User experience Design Lab
a. Assume that items within a boundary are related and part of the
same group
b. Perceive items that share a visual characteristic as related
c. Assume that items close together are part of the same group
d. Fill in blanks to perceive a complete object whenever an external
stimulus partially matches that object
Answer: D
9. Which of the following is an example of Campbell’s law?
a. Shoppers with niche needs making up for a high aggregated sales
volume
b. Airbnb hosts begging customers for high ratings
c. Small number of web pages accumulating most page views
d. The tendency of most webpage layouts to follow golden-ratio
proportions
Answer: B
10. The recommended number of participants needed for an exploratory
UX-interview:
a. Is the same as in usability testing (5)
b. Is the same as in quantitative studies (40)
c. Depends on how broad your research goals are
d. Depends on the size of your target audience
Answer: C

12.5 VIDEO LECTURES

1. USABILITY TESTING.
https://www.youtube.com/watch?v=bYVrmCjVHFA
2. How to Write a Usability Testing Report.
https://www.youtube.com/watch?v=u5RYuIU5jq8
3. Usability Testing Tips and Examples.
https://www.youtube.com/watch?v=nYCJTea1AUQ
4. User Testing vs Usability Testing.
https://www.youtube.com/watch?v=r3j_dwMbLo0

332
5. what is usability testing. UX Evaluation
https://www.youtube.com/watch?v=9vDqbOVuKhM
6. Usability Testing w. 5 Users.
https://www.youtube.com/watch?v=RhgUirqki50
7. Test Case Design Techniques.
https://www.youtube.com/watch?v=BSjRmiYP7vg
8. Usability Testing Tips & Tools: Powerful UX Research Method.
https://www.youtube.com/watch?v=RyGFEmimwoM
9. UX Evaluation.
https://www.youtube.com/watch?v=wN5v4NZODXY



333
 13
DEVELOPING MOBILE APPLICATIONS
BASED ON UED PRINCIPLES
Unit Structure :
13.0 Introduction
13.1 Steps For Creating Mobile Application UED Design In FIGMA
13.2 Quiz
13.3 Moocs
13.4 Video Lectures
13.5 References

MINI PROJECT

13.0 INTRODUCTION
As compared to desktop application, mobile applications are becoming
more popular due to its compatibility and portability. The UED design
for mobile applications are important because it makes the users stay and
help businesses eventually earn loyal customers. A good UI helps load
the app faster and provides the users with a top-notch user experience in
terms of navigation, look and feel to widen the customer base. In the end,
it's all about making a trusted user base.
Here, we have shown a real-time project related to mobile application
development based on UED principle. So, for doing this we have used
online tool called Figma.

13.1 STEPS FOR CREATING MOBILE APPLICATION

UED DESIGN IN FIGMA
❖ Step 1 - Project – Fruit selling App:-

334
Click on New design file after login on figma website available on top Developing Mobile
left option. Applications Based
On UED Principles

❖ Step 2 - Click on Frame(Option)

❖ Step 3- Click on iphone 8 plus available on right side of figma

worksheet. In this worksheet the top of figma is also shown
(highlighted in red color box).

335
 Mobile Application and  Step 4 - Set the frame color with hex color #F5FEC0 and set its
User experience Design Lab corner radius to 50 of frame property available on right side of figma
worksheet.

 Step 5 - Now, put the image in centre of the frame and set its layer
property to multiply available on right side of figma worksheet.

 Step 6 - After that create rectangle at last part of the frame using the
rectangle tool available on the top panel of figma worksheet and fill it
with hex color #126804 with 60% intensity.

336
 Step 7 - Use pencil tool available at the panel top of figma worksheet Developing Mobile
in order to create vector shape above rectangle and fill it with hex Applications Based
color #126804 with intensity 60%. On UED Principles

 Step 8 - Inside rectangle draw 3 other rectangles (highlighted in red

color box) of required size and set its corner radius to 30 of the frame
property available on right side of figma worksheet, also fill it with
hex color #ffffff.

 Step 9 - In 1st rectangle draw increment/decrement shape using

ellipse tool (highlighted in red color box) available at the panel top of
figma worksheet, in order to increase or decrease the quantity of the
fruits and also display quantity using text tool available on the top
panel of figma worksheet.

337
 Mobile Application and  Step 10 - In 2nd rectangle draw order tracking button shape using
User experience Design Lab ellipse tool, in order to do it first take a large ellipse, then place
smaller ellipse in it and filled it with black color and also display
delivery time using text tool.

 Step 11 - In 3rd rectangle draw buy button shape using ellipse tool,
also fill it with hex color #208A0E and also display the total price of
the fruit using text tool.

338
 Step 12 - Select text tool available on top panel of figma worksheet Developing Mobile
for setting the text fruits above orange image with hex color Applications Based
#A67A46. On UED Principles

 Step 13 - Set left arrow symbol (highlighted in red color box) using
arrow tool available on top panel of figma worksheet before text
fruits with same hex color, i.e. used for text fruits.

339
 Mobile Application and  Step 14 - Create ellipse (highlighted in red color box) using ellipse
User experience Design Lab tool available on top panel of figma worksheet and filled it with hex
color #208A0E.

 Step 15 - Put add to cart icon (highlighted in red color box) into this
ellipse (mentioned above).

 Step 16 - In order to place the text THAI ORANGES below orange

image, select the text tool available on top panel of figma worksheet
and set its color with hex color # 033403.

340
 Step 17 - Now, below of this text THAI ORANGES place another Developing Mobile
text Fresh, ready to eat with hex color # 208A0E and set its intensity Applications Based
to 71%. On UED Principles

 Step 18 - On other side of this text THAI ORANGES, place the price
of the Orange in the form of text i.e. $2 and on above of $2, place
another text i.e. /KILO with hex color #109709.
Final layout of this design will be:-

341
 Mobile Application and 13.3 QUIZ
User experience Design Lab
1. Which of the following is golden rule for interface design?
a) Place the user in control
b) Reduce the user’s memory load
c) Make the interface consistent
d) All of the mentioned

Answer: d
2. Which of the following is not a design principle that allow the user to
maintain control?
a) Provide for flexible interaction
b) Allow user interaction to be interrupt-able and undo-able
c) Show technical internals from the casual user
d) Design for direct interaction with objects that appear on the screen

Answer: c
3. Which of the following is not a user interface design process?
a) User, task, and environment analysis and modeling
b) Interface design
c) Knowledgeable, frequent users
d) Interface validation

Answer: c
4. When users are involved in complex tasks, the demand on
__________ can be significant.
a) short-term memory
b) shortcuts
c) objects that appear on the screen
d) all of the mentioned

342
Answer: a Developing Mobile
Applications Based
5. Which of the following option is not considered by the Interface On UED Principles
design?
a) the design of interfaces between software components
b) the design of interfaces between the software and human producers
and consumers of information
c) the design of the interface between two computers
d) all of the mentioned
Answer: c
6. A software might allow a user to interact via
a) keyboard commands
b) mouse movement
c) voice recognition commands
d) all of the mentioned
Answer: d
7. A software engineer designs the user interface by applying an iterative
process that draws on predefined design principles.
a) True
b) False

Answer: a
8. What incorporates data, architectural, interface, and procedural
representations of the software?
a) design model
b) user’s model
c) mental image
d) system image
Answer: a
9. What establishes the profile of end-users of the system?
a) design model
b) user’s model
c) mental image
d) system image

Answer: b

343
 Mobile Application and 10. What combines the outward manifestation of the computer-based
User experience Design Lab system , coupled with all supporting information that describe system
syntax and semantics?
a) mental image
b) interface design
c) system image
d) interface validation

Answer: c

13.4 MOOCS
1. Introduction to User Experience Principles and Processes. Coursera.
https://www.coursera.org/learn/introtoux-principles-and-
processes?specialization=michiganux&utm_medium=institutions&ut
m_source=umich&utm_content=sem&utm_campaign=adwords-ux-
introtoux-principles-and-
processes&utm_term=%2Bonline%20%2Bux%20%2Bcourse&gclid=
Cj0KCQjwmouZBhDSARIsALYcoursqTDlbReHRD4TIZPVd5D5o
V56o8qcmHBwPNjFlDSTAwOYlS2KttgaAmCpEALw_wcB
2. The Ultimate UI UX Design Course: Beginner to Pro. Knowledgehut.
https://www.knowledgehut.com/web-development/ui-ux-design-
bootcamp-
course?utm_source=google&utm_medium=cpc&utm_campaign=Indi
a-INR-IST-Desktop-Search-UIUX-MSV-
Exact_ui%20ux%20design%20course%20online_{adid}&gclid=Cj0K
CQjwmouZBhDSARIsALYcouoTLoxj7kUIN09bFj_bDYwQG4S08b
PH8jL6jD1tbZcdGfKjmZix-QUaApTPEALw_wcB
3. UI/UX Design Expert. SimpliLearn. https://www.simplilearn.com/ui-
ux-design-masters-program-certification-
course?utm_source=google&utm_medium=cpc&utm_term=ui%20ux
%20design%20course%20online&utm_content=18037681095-
145720773088-
616334220894&utm_device=c&utm_campaign=Search-
DigitalBusinessCluster-BusinessLeadership-UI-UX-OtherStates-IN-
Main-AllDevice-adgroup-UI-UX-Course-
Exact&gclid=Cj0KCQjwmouZBhDSARIsALYcoupBfgkro6uLGp0u1
ebZ3rAB0VBBWH3qpQmv3lFgJgqlIuibBu6wLEcaAtBFEALw_
wcB
4. User Experience Design Courses.Udemy.
https://www.udemy.com/courses/design/user-experience/.

344
13.5 VIDEO LECTURES Developing Mobile
Applications Based
1. UI/UX Complete Course | UI/UX Tutorial | UI/UX Training | On UED Principles
Intellipaat. https://www.youtube.com/watch?v=QeTbLkH64kQ
2. UI UX Tutorial For Beginners | UI UX Full Course | UI UX Training |
Intellipaat. https://www.youtube.com/watch?v=ONrvf5bjsF8
3. UI/UX Course | UI/UX Free Course | UI/UX Training | Intellipaat.
https://www.youtube.com/watch?v=spGDKJNq-EE
4. BEST UI/UX Design Guide 2022.
https://www.youtube.com/watch?v=keKQxadqnoA
5. UI/UX Development Introduction | UI/UX Design Tutorials.
https://www.youtube.com/watch?v=qDUYIQZVQDE&list=PLVlQH
NRLflP_5_vCknMsxLS-mTJgq1QzH

13.6 REFERENCES
1. https://www.sanfoundry.com/software-engg-mcqs-user-interface-
design/
2. "Fundamentals of Creating a Great UI/UX" . Creative Tim
3. "Refactoring UI". Steve Schoger & Adam Wathan
4. "Laws of UX: Using Psychology to Design Better Products &
Services". Jon Yablonski
5. "Don’t make me think". Steve Krug
6. "100 Things Every Designer Needs to Know About People". Susan
Weinschenk
7. "The Principles of Beautiful Web Design". Jason Beaird



345