Index

S. No. List of Experiments Page No. Sign.

1 Introduction to Android platform. Introduction to 3-9

the tools used in lab. Create a simple application.

2 Understand the app idea and design user interface/ 10-15

wireframes of mobile app.

3 Setup up mobile app development environment. 16-22

4 Write a program using activity class to show 23-28

different events.

5 Write a program to convert text into speech. 29-33

6 Develop and debug mobile app components- user 34-36

interface, services, notifications, broadcast
receivers, data components.

7 Using emulator to deploy and run mobile apps. 37-39

8 Testing mobile app- unit testing, black box testing 40-43

and test automation.

2
 Experiment-1
Aim: Introduction to Android platform. Introduction to the tools used in lab. Create a simple
application.
Theory-
Android Platform
Android is an operating system and programming platform developed by Google for mobile
phones and other mobile devices, such as tablets. It can run on many different devices from
many different manufacturers. Android includes a software development kit (SDK) that helps
you write original code and assemble software modules to create apps for Android users.
Android also provides a marketplace to distribute apps. All together, Android represents
an ecosystem for mobile apps.

Android is a software package and linux based operating system for mobile devices such as tablet
computers and smartphones.It is developed by Google and later the OHA (Open Handset
Alliance). Java language is mainly used to write the android code even though other languages can
be used.

Android provides a rich development architecture. You don't need to know much about the
components of this architecture, but it is useful to know what is available in the system for your
app to use. The following diagram shows the major components of the Android stack—the
operating system and development architecture.

3
 Figure 1: Android Architecture

Tools used In the Lab

The tools can be generally categorized into two types.
• SDK tools
• Platform tools
SDK tools
SDK tools are generally platform independent and are required no matter which android platform
you are working on. When you install the Android SDK into your system, these tools get
automatically installed. The list of SDK tools has been given below −
1.Android
This tool lets you manage AVDs, projects, and the installed components of the SDK
2. ddms
This tool lets you debug Android applications

4
3. Draw 9-Patch
This tool allows you to easily create a NinePatch graphic using a WYSIWYG editor
4. Emulator
This tools let you test your applications without using a physical device
5. Mksdcard
Helps you create a disk image (external sdcard storage) that you can use with the emulator
6. Proguard
Shrinks, optimizes, and obfuscates your code by removing unused code
7. sqlite3
Lets you access the SQLite data files created and used by Android applications
8. Traceview
Provides a graphical viewer for execution logs saved by your application
9. Adb
Android Debug Bridge (adb) is a versatile command line tool that lets you communicate with an
emulator instance or connected Android-powered device.
Platform tools
The platform tools are customized to support the features of the latest android platform.
The platform tools are typically updated every time you install a new SDK platform. Each update
of the platform tools is backward compatible with older platforms.
Some of the platform tools are listd below −
• Android Debug bridge (ADB)
• Android Interface definition language (AIDL)
• aapt, dexdump , and dex etc

Developing a simple Application

The first step is to create a simple Android Application using Android studio. When you
click on Android studio icon, it will show screen as shown below:

5
You can start your application development by calling start a new android studio project. in a new
installation frame should ask Application name, package information and location of the project.−

After entered application name, it going to be called select the form factors your application runs
on, here need to specify Minimum SDK, in our tutorial, I have declared as API23: Android
6.0(Mashmallow) −

6
The next level of installation should contain selecting the activity to mobile, it specifies the default
layout for Applications.

At the final stage it going to be open development tool to write the application code.

7
The Main Activity File

package com.example.helloworld;

import android.support.v7.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);
}
}

The Manifest File

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tutorialspoint7.myapplication">

<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
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>
</activity>
</application>
</manifest>

The String File

<resources>
<string name="app_name">HelloWorld</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>

8
The Layout File

<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" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
tools:context=".MainActivity" />

</RelativeLayout>

Running The Application

To run the app from Android studio, open one of your project's activity files and click Run icon
from the tool bar. Android studio installs the app on your AVD and starts it and if everything is
fine with your set-up and application, it will display following Emulator window –

9
 Experiment-2
Aim: Understand the app idea and design user interface/ wireframes of mobile app.
Theory:
In simple terms, a mobile app wireframe is a two-dimensional sketch that serves as a visual
guide and illustrates how an application will work.
A wireframe doesn’t represent the full design of the app, but only the key screens and interface
elements. The app owner and development team can use a wireframe to agree and clarify the
entire project’s direction and scope

Wireframes are the backbone of any project, and mobile app design is not an exception.
Wireframes serve as a middle ground between low-fidelity sketches and first interactive
prototypes. The actual process of wireframing for mobile varies drastically. Different designers
approach wireframing and its translation to hi-fi design in different ways. While some companies
advocating for going to code straight from sketches, the typical design process contains the
following steps: Sketch (Conceptual level) → Wireframe (Component level) → Mock/Prototype
(Styles level/Interactions level) → Code.
Before Creating Wireframes:

A) Map Out a Target User Flow-

Before starting wireframing, you need to have a clear idea on many screens you’ll need to design
and how users will interact with them. It’s much easier to get this understanding when you have a
tangible user flow.

User flow of a food ordering process

B) Sketch Out the Core Part of the User Flow

The next step after defining the user flow is visualizing it. It might be tempting to use digital
prototyping tool for that, but it’s better to resist this temptation. The goal at this step is to let your
creativity shine and explore various design directions. In many cases sketching on paper or using a
digital sketching tool works better for that.

10
Sketches allow you to create quick concepts that you can share with other people, get feedback, and
iterate upon it.

Figure 2: Sketching is a great way to flesh out ideas

Wireframing:

The sketches you create will form a foundation for your wireframes. When it comes to wireframing,
strive to create mid-fidelity wireframes.

A) Set a Mobile Frame-

While it’s possible to use a simple rectangle as a frame for your mobile design, it’s much better to
select the frame that has dimensions of an actual device you design for. First, the frame will act as
a natural constraint — it will prevent you from putting too many elements on the screen. Second, a
frame will create an illusion of an actual design.

11
 B) Determine Layout With Boxes-

In the early stages of wireframe, your goal is to create a clear visual hierarchy — set layout and
structure. At this stage, you don’t focus on the content itself, you need to think about how it’s
presented. Plan the layout according to how you want your user to process the information and start
by drawing boxes on the canvas. Put a strong focus on the order of information you want to
present to your users. Note that people scan webpages and phone screens from top to bottom, from
left to right (F-shaped pattern works both for desktop and mobile screens).

Figure 3: Creating a visual hierarchy using basic shapes

12
 C) Use Design Patterns-

Familiarity is one of the most important properties of good UX design. When people see familiar
UI elements in a new product, they can rely on their previous experience when interacting with this
product. Both Android and iOS have native design patterns that simplify the task of creating a
familiar experience for designers. Design patterns act as reusable content blocks — it’s possible to
use them to solve common problems (such as global navigation).

Figure 4: Android design patterns

Bottom tab bar, side drawer and Floating Action Button (FAB) are the most frequently used patterns
for top-level mobile navigation. If you want to design clear and simple navigation paths, use one of
these patterns in your app.

Figure 5: Bottom tab bar navigation

D) Bring in Actual Copy-

After you are satisfied with your visual hierarchy, start replacing placeholders and dummy text with
real content (actual copy or the one that is relevant to the user). There is an important reason why
we should avoid dummy text at this stage — Lorem Ipsum doesn’t communicate how the page
supports users in reaching their goals. Also, a lot of visual elements we create are based on the
content we have in our products. As you start adding actual content, you will realize that some UI
elements (or even UI sections) are not necessary for your product.

13
 Figure 6: By adding actual content in your wireframes, you will get an understanding of whether the information is being well-
structured or not.

E) Ensure Your Content Scales Well-

If your design looks great on a medium-size phone screen like iPhone XS, it doesn’t mean that the
iPhone 5 and iPhone XS Max users will have the same great experience. While it’s absolutely fine
to start with middle size screen when wireframing, it’s also essential to check how content looks on
different screen sizes (both smaller and larger screens) and adjust it if required.

Figure 7: The home screen design

14
 F) Connect the Pages Together to Create a Flow-

While it’s possible to ship your design as a collection of individual screens, it’s better to create a
flow out of them. UX flows make it easy for the team to understand the details of interaction
scenarios — they communicate how people are supposed to interact with a product.

Figure 8: Creating a simple flow

G) Test Your Design Decisions-

Testing is the final (and one of the most important) steps in wireframing. Testing implies user
interactions that’s why this term is often used in the context of prototypes. But it’s possible to
conduct simple testing for a flow created from wireframes.

The goal of such testing is to see whether the screens work together.The ultimate goal of
wireframing is to identify the outline of the content and create a solid foundation for future steps
of the design process. Well-designed wireframes make the visual and interaction design much
easier.

As with any design activities, spend enough time experimenting with different tools and processes
and you’ll find your own style for wireframing. Practice makes perfect.

15
 Experiment-3

Aim: Setup up mobile app development environment.

Theory:

To develop an Android application, first you have to setup the Android development
environment.

First download and install the Android Studio, Java and then download and install every
individual tool (like Java, SDK Manger, DDMS tool, AVD Manager, etc.)

Step 1: Download and install Java Development Kit (JDK)

Most of the programming of Android is done using the Java programming language. To
download latest Java Development Kit, follow the link given below.
http://www.oracle.com/technetwork/java/javase/downloads/index.html

Download and Install Android Studio

Step 1: To download the Android Studio, visit the official Android Studio website in your web
browser.
Step 2: Click on the "Download Android Studio" option.

Step 3:
Double click on the downloaded "Android Studio-ide.exe" file.

16
Step 4:
"Android Studio Setup" will appear on the screen and click "Next" to proceed.

Step 5: Select the components that you want to install and click on the "Next" button.

17
Step 6: Now, browse the location where you want to install the Android Studio and click "Next"
to proceed.

Step 7: Choose a start menu folder for the "Android Studio" shortcut and click the "Install"
button to proceed.

Step 8: After the successful completion of the installation, click on the "Next" button.

18
Step 9: Click on the "Finish" button to proceed.

Now, your Android studio welcome screen will appear on the screen.

Android Studio Setup Configuration

Step 10: "Android Studio Setup Wizard" will appear on the screen with the welcome wizard.
Click on the "Next" button.

19
Step 11: Select (check) the "Standard" option if you are a beginner and do not have any idea
about Android Studio. It will install the most common settings and options for you. Click "Next"
to proceed.

Step 12: Now, select the user interface theme as you want. (I prefer Dark theme (Dracula) that is
most liked by the coders). Then, click on the "Next" button.

20
Step 13: Now, click on the "Finish" button to download all the SDK components.

And, the downloading and installation process of components gets started.

21
Step 14: After downloading all the necessary components, click on the "Finish" button.

Congrats, your Android Studio has been successfully installed in your system and you can start a
new Android studio project.

22
 Experiment- 04
Aim- Write a program using activity class to show different events.
Theory-
Events are a useful way to collect data about a user's interaction with interactive components of
Applications. Like button presses or screen touch etc. The Android framework maintains an event
queue as first-in, first-out (FIFO) basis. 4

There are the following three concepts related to Android Event Management −
Event Listeners − An event listener is an interface in the View class that contains a single callback
method. These methods will be called by the Android framework when the View to which the
listener has been registered is triggered by user interaction with the item in the UI.
Event Listeners Registration − Event Registration is the process by which an Event Handler gets
registered with an Event Listener so that the handler is called when the Event Listener fires the
event.
Event Handlers − When an event happens and we have registered an event listener for the event,
the event listener calls the Event Handlers, which is the method that actually handles the event.
Following is the content of the modified main activity
file src/com.example.myapplication/MainActivity.java:
package com.example.myapplication;
import android.app.ProgressDialog;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

private ProgressDialog progress;
Button b1,b2;

@Override

23
 protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
progress = new ProgressDialog(this);
b1=(Button)findViewById(R.id.button);
b2=(Button)findViewById(R.id.button2);
b1.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TextView txtView = (TextView) findViewById(R.id.textView);
txtView.setTextSize(25);
}
});
b2.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View v) {
TextView txtView = (TextView) findViewById(R.id.textView);
txtView.setTextSize(55);
}
});
}
}
Following is the content of res/layout/activity_main.xml file −
Here abc indicates about tutorialspoint logo
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"

24
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Event Handling "
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:textSize="30dp"/>

<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tutorials point "
android:textColor="#ff87ff09"
android:textSize="30dp"
android:layout_above="@+id/imageButton"
android:layout_centerHorizontal="true"
android:layout_marginBottom="40dp" />

25
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButton"
android:src="@drawable/abc"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Small font"
android:id="@+id/button"
android:layout_below="@+id/imageButton"
android:layout_centerHorizontal="true" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Font"
android:id="@+id/button2"
android:layout_below="@+id/button"
android:layout_alignRight="@+id/button"
android:layout_alignEnd="@+id/button" />

<TextView
android:layout_width="wrap_content"

26
 android:layout_height="wrap_content"
android:text="Hello World!"
android:id="@+id/textView"
android:layout_below="@+id/button2"
android:layout_centerHorizontal="true"
android:textSize="25dp" />
</RelativeLayout>

Following is the content of res/values/strings.xml to define two new constants −

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">myapplication</string>
</resources>

Following is the default content of AndroidManifest.xml −

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.myapplication" >
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.example.myapplication.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

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

Output-

28