ANDROID APPLICATION DEVELOPMENT –

LEVEL 1
 Table Of Contents
1. Workshop Objectives ................................................ 2

2. Getting Started .................................................... 2

3. Layout ............................................................. 4

4. View ............................................................... 4

5. ViewGroup .......................................................... 5

6. Style Resource ..................................................... 7

7. Example 1 – Layout – General Card App .............................. 8

8. Example 2 – Court Counter App ..................................... 13

9. Deployment of developed Application ............................... 19

1
1. Workshop Objectives

Level 1 workshop aims to let beginners to get started with Android App Development by:

- Understanding the concept of Android App Development.

- Understanding how Android Studio will be used for developing an app
- Learning how to program for user interface (UI) of the application – XML
- Learning how to program for application to function logically – Java
- Deploying the developed application to an Android Device

2. Getting Started

Since 2012, our life has been completely dependent on the applications (apps) that are present
in our mobile or tablet devices. Google was generous enough to allow open source of the tools
or Integrated Development Environments (IDEs), the way by which anyone can become the
creator of any app with free of cost.

There are 2 popular IDEs that will allow us to make apps for Android Operating System devices
– IntelliJ IDEA and Android Studio. Android Studio is official IDE for building the
applications which is actually based on IntelliJ IDEA. But it provides more rich features and
interactive that will allow us to improve the productivity. Hence, creating an app in an IDE is
known as Android App Development.

It is initially required to download and install Java SE Development Kit or JDK that will act as
tool set for Android Studio. Then install Android Studio which act like a workshop for us to
build apps.

Figure 1: Depiction of JDK and Android Studio

2
It is already assumed that the participants have installed JDK Android Studio on their PCs. For
testing the application(app) build on Android Studio, it provides two ways:

1. Virtual Emulator
2. Directly deploying the app to the phone.

However, it is much faster to work by directly deploying the app to the phone. Hence, we will
be considering the second option to transfer, test and debug our app.

An Android App is made up of Resources and Java Code. Resources exists in the res directory
of our app. It includes, images, text-colors, dimensions – width and height, XML files, raw
media files – Audio and Video. Java code consists of files like MainActivity.java that exists
in java folder which is responsible for logical functioning of the application. Altogether, they
handle what should happen when the app is running.

Figure 2: Folders including XML and Java Files

Steps to create a new project:

1. Open Android Studio.

2. Click Start a new Android Studio project.
3. Change to appropriate application name as per your requirements for the app to be
developed and change the directory where you want to store the project files. Then click
Next.
4. Select Phone and Tablet and Minimum SDK: API 19: Android 4.4 (KitKat) followed
by clicking Next.

3
 5. Select Empty Activity and click Next.
6. Ensure Activity and Layout names are as it is and click Finish.

Note that Nexus 5X and API 23 will be set for XML visualizer that will preview the user
interface(UI) while coding.

3. Layout

The layout of the application is what the user sees on screen of the device. It is basically the
arrangement of the components that allows interaction within the device to the users thus
providing User Interface (UI). It includes rectangular areas known as Views. These views can
be included in a big view known as ViewGroup.

4. View

It is the first step to start as an Android Developer. View is a rectangular area that is visible on
the screen of a device. Each view has a width and height, and sometimes a background color.
There are three types of Views that allows we Android Developers to implement UI of the
application including:

ImageView: It allows displaying of image such as photo or icon.

Figure 3: Example of ImageViews

TextView: Allows displaying of the text.

Figure 4: Examples of TextViews

Button: It allows execution of certain tasks. It responds by just tapping finger on it.

4
 Figure 5: Example of Buttons

View on the screen of the Android device is actually drawn by Java object inside it. View is
actually a Java object. Even TextView, ImageView and Button are Java objects. Technically,
all the rectangles are invisible. But it can be traced by ourselves as shown in figure 6.

Figure 6: Illustration of Views as Rectangular boxes

5. ViewGroup

Within the screen of the Android device, UI is not only made of one View but it is composed
of many views inside a large View. This big view is known as ViewGroup which contains all
the small views known as children. Children can be TextView, ImageView or Button. And
ViewGroup is known as parent of its children as shown in figure 5.

5
 Figure 7: Example of ViewGroup and It's children

There are two types of ViewGroups that are most commonly used namely – LinearLayout and
RelativeLayout. LinearLayout – This type of ViewGoup just positions its children either
vertically or horizontally. RelativeLayout – This type of ViewGroup allows positioning of its
children in any position relative to the edges of the device.

Figure 9: RelativeLayout Example

Figure 8: LinearLayout
Example

It is the main_activity.xml which is the main XML file that responsible for the objects to be
used interaction to be displayed and allows us to modify their various attributes. Commonly
used elements and attributes listed in the table 1 and table 2 as follows:

Table 1: Elements used in main XML file

LinearLayout Allows positioning of objects either horizontally or vertically

RelativeLayout Allows positioning of objects as per user necessity. Doesn’t need
to be specifically horizontal or vertical

6
 ImageView Allows to display image on UI
TextView Allows to display text on UI
Button Allows to button text on UI

Table 2: Attributes used under the elements

android:layout_width This tag allows to alter the width of the object. It can be
either set to user defined value in dp or match_parent to
fill the width of screen fully or to wrap_content to fill
the width of the object.
android:layout_height This tag allows to alter height of the object.
android:orientation This tag is used by LinearLayout element to set it’s
attribute to either horizontal or vertical.
android:background Used to set background color either by defined names
stored in android libraries or hexadecimal code format.
android:layout_margin Used to push the object in dp value with respect to
edges of UI. android:layout_marginTop,
android:layout_marginBottom,
android:layout_marginLeft and
android:layout_marginRight to be used for more
specific side with respect to edge.
android:padding Allows to create space for the object to view itelf more
cleaner fashion.
android:src Allows to access the images which are to be stored in
drawable folder.
android:id Unique identifier that allows for proper positioning in
XML file.
android:layout_alignParent This attribute is used for RelativeLayout element for
positioning of objects relative to the edges of the screen
of the device.
android:textSize Varies the size of the text in sp.
android:textColor Used for varying color of the text.
Android:textStyle Used to set the text the following font styles: bold, italic
or underline

6. Style Resource

So far, View objects and Layout types are only included in the main_activity.xml file which
will only allow us to see the objects on UI and how it is arranged. But, in style.xml which is
the style resource is responsible for defining the format and the look of UI. It is referenced
provided in the name attribute. It allows combination of style resources with other simple

7
resources in one XML files under resource element. Table 3 and 4 lists the commonly used
elements and attributes:

Table 3: Elements used in Style XML file

Resources It is the root node.

Style It defines single style. Consists of attributes name –
which is used as resource ID to apply style to a View,
Activity or Application and parent – reference to a
style from which this style should inherit style
properties.
Item It defines a single property for this style. Only
attribute name is required.

7. Example 1 – Layout – General Card App

Supporting picture files can be downloaded from this link:

https://drive.google.com/open?id=0B49Jmc_aEoEQUkVzMFRKcnJxaVU.

1. First, create a new project with the name of your choice e.g. Geeky Technology.
2. While creating project, ensure the settings are as it is and select the most basic template.
3. Once done with creating the project, the working environment in Android Studio IDE
should look like this:

Figure 10: Working Environment to develop Android Application

8
4. To display certain pictures on the app, they must be included in drawable folder. Copy
the picture.

Figure 11: electronics.jpg extracted in Android project file

5. Right click the drawable folder and click paste.

Figure 12: Pasting to drawable folder

5. Copy dialog box will appear:

Figure 13: Copy dialog box

9
 Click Ok. Similarly, paste techhumor.jpg file to the drawable folder. Now we are ready
to modify .xml files and .java file to produce interactive app to be used by Android
devices.

6. Modify the color of the app bar by selecting values folder and click styles.xml. Change
the item name=“colorPrimary” line to:

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#66BB6A</item>
</style>
</resources>

Preview of the app template shown in figure 14:

Figure 14: Preview of XML Visualiser

❖ Discussion:
It can be observed from the code that other item name tags were deleted to keep
coding simple. item name=“colorPrimary” tag in style.xml file allows changing
the color of app bar. The color in hexadecimal format is selected from
https://material.io/color/.

7. Now we are all set for modifying the activity_main.xml file. This file is responsible of
maintaining UI of the application. Write the code to activity_main.xml file as follows:

10
 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#DCEDC8">

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="@drawable/electronics" />
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/imageView"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Science of today is the technology of tomorrow!"
android:textAlignment="center"
android:textColor="#689F38"
android:textStyle="bold" />

<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@drawable/techhumor" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Copyright © By Isham Rashik. All Rights
Reserved."
android:textAlignment="viewEnd"
android:textSize="10sp" />
</LinearLayout>

</RelativeLayout>

XML visualiser will look like this:

11
 Figure 15: Preview of XML Visualiser after inclusion of code

❖ Discussion:
- It can be observed and noticed from the XML code that the objects displayed on
visualizer are visualized as UI by ViewGroups namely RelativeLayout and
LinearLayout. RelativeLayout allows positioning of objects in any position but
LinearLayout will only allow positioning of objects either vertically or horizontally.
- RelativeLayout is coded as the parent View of the UI. ImageView and LinearLayout
are treated as its children. Its layout_width and layout_height attributes are set to
match_parent such that it fills the whole screen of the device. layout_background is
set to light green as hexadecimal number.
- ImageView allows displaying of image object on UI. It is name with unique id for
proper positioning of other objects. layout_width is set to match_parent such that it
fills the width of screen completely. layout_height is set to wrap_content so that
height of the image is not either fully stretched throughout the screen nor part of it
is cut. scaleType is set is center for just centring the image as no need for scaling.
And using src attribute, the picture is displayed to UI from the drawable folder.
- LinearLayout is a child of RelativeLayout. LinearLayout also includes children
namely two TextViews and an ImageView. Therefore, ViewGroups can be
hierarchical. It includes unique id, layout_width is set to match_parent,
layout_height is set to wrap_content and layout_below is set to unique id

12
 ImageView. This is done to fill the width of the screen, not to overlap with image
that was inserted previously to UI and properly position below the image.
orientation attribute is set vertical so that the children are vertically positioned one
above the other.
- TextView allows displaying of text on the screen. In the first TextView,
layout_width and layout_height is set to commonly used attributes by typical
children of a parent ViewGroup. layout_padding is set to 10dp in order for the text
to look much neater (not near the edge of the TextView object). text attribute is used
to set the text to be displayed on screen. textAlignment attribute is set for center
aligning the text. textColor attribute is used to set the color of the text. And textStyle
is set to bold. This attribute can also be used for italicizing as well as underlining.
- In the second ImageView which is a child of LinearLayout, layout_height is set to
0dp and layout_weight is set to 1. This is done so that the image to be displayed
doesn’t overlap other objects in any device and give proper space to other objects
to be viewed on screen. scaleType is set to fitCenter such that it aligns centrally as
well as scale fully. And from drawable folder, the image is accessed and displayed.
- The final textView group allows for displaying the copyright statement. All
attributes are similar to previous attributes except for textAlignment which is set to
viewEnd – allows right alignment of text and textSize is set to 10sp (very small
text).

8. Example 2 – Court Counter App

In this example, we will modify java file to make the Court Counter App to work logically.
This app will allow the user to display and keep track of scores of both teams of a live
BasketBall match.

Table 4: Keywords used for declaring classes

public This is the first statement for declaring a method. It means that the
method is visible and can be called from other object types.
void It is used for indicating that the method doesn’t include a return value.

After getting done with creating new project on Android Studio, firstly we will work with XML
files to implement UI followed by working in java file. From values folder located in res folder,
access styles.xml which allows changes in color of base application theme and write the
following code:

13
 <resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Primary theme color of the app (sets background color of app bar) --
>
<item name="colorPrimary">#FF9800</item>
<!-- Background color of buttons in the app -->
<item name="colorButtonNormal">#FF9800</item>
</style>
</resources>

❖ Discussion:
- The parent attribute inside style tag is set to Theme.AppCompat.Light in order to display
the title in white color text instead of black.
- The theme and button color is set to orange color in hexadecimal format.

Now write the following code to the main_activity.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:padding="16dp"
android:text="Team A"
android:textColor="#616161"
android:textSize="14sp" />

<TextView
android:id="@+id/team_a_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:padding="24dp"
android:text="0"
android:textColor="#000000"
android:textSize="56sp" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:onClick="threePointsA"

14
 android:text="+3 Points" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:onClick="twoPointsA"
android:text="+2 Points" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:onClick="freeThrowA"
android:text="Free throw" />

</LinearLayout>

<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_marginTop="16dp"
android:background="@android:color/darker_gray"/>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:padding="16dp"
android:text="Team B"
android:textColor="#616161"
android:textSize="14sp" />

<TextView
android:id="@+id/team_b_score"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:padding="24dp"
android:text="0"
android:textColor="#000000"
android:textSize="56sp" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:onClick="threePointsB"
android:text="+3 Points" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"

15
 android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:onClick="twoPointsB"
android:text="+2 Points" />

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:onClick="freeThrowB"
android:text="Free throw" />

</LinearLayout>

</LinearLayout>

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="8dp"
android:onClick="reset"
android:text="Reset" />

</RelativeLayout>

XML Visualiser should look like this:

Figure 16: Preview of Court Counter UI

❖ Discussion:
- As per the code included in main_activity.xml file, once again, RelativeLayout is selected
as the parent ViewGroup of UI and its attribute are same as to that of Example 1. One
LinearLayout and a Button are its children.

16
- LinearLayout which is a child of RelativeLayout also further includes two LinearLayout
ViewGroups as its children. Orientation attribute is set as horizontal to position one child
beside the other.
- For both LinearLayout Viewgroups to fill width of the screen equally, layout_width attribute
is set to 0 and layout_weight is set to 1.
- For first textView objects under both LinearLayout ViewGroups, the font of the text is
changed via fontFamily attribute that is set as sans-serif-medium. To align the text at center,
gravity attribute is used and is set as center. Padding of 16dp is used such that the text is not
near edge of textView object. Grey color font is set via fontColor attribute and font size is
set to 14sp.
- For second textView objects which will be used for displaying the scores under both
LinearLayout ViewGroups, unique ids are included that will be in turn used in the methods
in java file. Padding is set to 24dp and the initial value of the score is made to display as 0.
Color is set to black and size is set to 56sp.
- For the buttons in both LinearLayout ViewGroups, in order to not fill up the width of their
parent ViewGroup fully and such that the buttons are not towards the relative edges,
marginBottom, marginLeft, and marginRight attributes are specifically given certain values.
- onClick attributes for all the buttons are set to declared methods in java file which will allow
updating of scores.
- The button which will allow resetting of scores is made to be child of the parent ViewGroup.
It is positioned at the bottom of screen such that even in other devices, it aligns in the same
way. This is done by setting attribute alignParentBottom to be true. Center alignment of this
button is done by setting centralHorizontal attribute to true and set marginBottom to 8dp
such that it is not exactly to the edge of the screen and there is little space. onClick attribute
is set to reset method which is declared in java file to set the scores back to 0.

Now we are ready to include snippets of code in main_activity.java for logical function of the
application. Steps to be follows:

1. Include the following libraries right below package statement.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

2. Declare global variables inside the mainclass right above onCreate method:

17
 int scoreTeamA = 0;
int scoreTeamB = 0;

3. Include the rest of the code below onCreate method:

/* Allows to update scores for Team A. */
public void threePointsA(View view) {
scoreTeamA = scoreTeamA + 3;
displayForTeamA(scoreTeamA);
}
public void twoPointsA(View view) {
scoreTeamA = scoreTeamA + 2;
displayForTeamA(scoreTeamA);
}
public void freeThrowA(View view) {
scoreTeamA = scoreTeamA + 1;
displayForTeamA(scoreTeamA);
}

/* Allows to update scores for Team B. */

public void threePointsB(View view) {
scoreTeamB = scoreTeamB + 3;
displayForTeamB(scoreTeamB);
}
public void twoPointsB(View view) {
scoreTeamB = scoreTeamB + 2;
displayForTeamB(scoreTeamB);
}
public void freeThrowB(View view) {
scoreTeamB = scoreTeamB + 1;
displayForTeamB(scoreTeamB);
}

/*Reset button*/
public void reset(View view) {
scoreTeamA = 0;
scoreTeamB = 0;
displayForTeamA(scoreTeamA);
displayForTeamB(scoreTeamB);
}

/*Allows displaying of updated scores*/

public void displayForTeamA(int score) {
TextView scoreView = (TextView) findViewById(R.id.team_a_score);
scoreView.setText(String.valueOf(score));
}

public void displayForTeamB(int score) {

TextView scoreView = (TextView) findViewById(R.id.team_b_score);
scoreView.setText(String.valueOf(score));
}

❖ Discussion:
- The package statement and libraries provided by Android Studio was included
which establishes relation between XML files and the java file.
- Global integer variables were declared and initialized rather than local variables in
order to store and update the score values as it is to be used by the methods that will
allow to update and display the scores.
- Description of declared Methods:

18
 o threePointA and threePointB: It adds the score by 3 followed by displaying
it.
o twoPointA and twoPointB: It adds the score by 2 followed by displaying it.
o freeThrowA, and freeThrowB: It adds the score by 1 followed by displaying
it.
o reset: It will reset the score to 0.
o displayForTeamA and displayForTeamB: In this method, unique ids stated
in the XML files are included via the built-in method present in Android
library – findViewById. R.Id.unique id passed to this method that will
establish connection between the declared textView tags in XML file and
methods in java file. Finally, setText built-in method allows to display. Also
it can be observed that in this method, Stringvalueof() function is passed
such that integer type value of score is converted to string type as textView
object in XML can only view String type variable values.

It is to note that in order to perform logical operations, the values are required to be integer or
float type. The textView objects will be used for displaying scores and buttons to update scores
on the UI. Then methods in java file are implemented to perform logical operations and finally
include onClick attributes for buttons in XML file that will allow them to work and display
scores.

9. Deployment of developed Application

Before deploying the app to the device, install ADB driver as per the manufacturer of Android
device. Once installed, click on Play Button. Under Connected Devices, name in details of the
device to which the application will be deployed will be displayed. After selecting the device,
click OK.

References
Udacity. 2018. Udacity. [ONLINE] Available at: https://classroom.udacity.com/courses/ud834.
[Accessed 15 March 2018].

Udacity. 2018. Udacity. [ONLINE] Available at: https://classroom.udacity.com/courses/ud836.

[Accessed 15 March 2018].

19