CHAPTER 1: Introducing Android Studio

Installation of Emulators
Emulators are software that mimics the behaviour of real devices. When we develop
an app, we obviously won‟t have all the possible devices (Android phones, tablets,
etc.) available at hand. Because of this, we run the apps on emulators for testing on
various devices. Emulators are also called as “Android Virtual Devices (AVDs)”
in Android Studio. When Android Studio is first installed, there is no default AVD.
We need to create one before testing our apps. For this, select Tools Android
AVD Manager as shown in Figure 1

Figure 1. Launching the AVD Manager

When AVD Manager appears, there won‟t be any AVDs created or installed. Please
click on the + Create a Virtual Device button as shown below:

Figure 2. Creating a new AVD

AVD Manager will show a detailed window as in Figure 2.8. You can select various
devices with different screen sizes and other hardware properties. You can select
device groups from the left pane as TV, Phone, etc. Phone group is the default
selection. In this group, Nexus 5 is also selected by default. When you click “Next”,
you‟ll be presented by choices for the Android version of the AVD as shown in
Figure 4.

Figure 3. Creating a new AVD – selecting the device

The recommended targets start from Android 5.1. We can Android 7.0 with Goole
APIs (Nougat) as shown in the figure. Then, please click “Next” and give a name
you like to the AVD. I didn‟t change the defaults in the next screen as shown in
Figure 2.10. After clicking “Finish”, the AVD is created and shown in the AVD
Manager as in Figure 2.11. You can now try your Android apps on this AVD, which
will accurately mimic the behaviour of a real Nexus 5 phone.
We can run the AVD by clicking the “Play” button shown inside the square in
Figure 2.11. The virtual device will appear as in Figure 2.12 which you can use like
a real Nexus 5 phone.
After installing both the development environment and the emulator, we‟re now
ready to develop our test drive app, Hello World, in the next chapter.

Figure 4.. Selecting the Android version of the AVD

Figure 5. Final settings of the AVD

Figure 6. Newly created AVD shown in the AVD Manager

Figure 7. Nexus 5 emulator window

Test Drive: The Hello World App
A good method for testing the installation of a compiler or a development
environment is to try a “Hello World” example. It just displays a text such as “Hello
World” on the screen. OK, I know it is not an app that you‟d be proud of showing
to your family or friends but its usefulness stems from testing whether your
programming environment is working properly and to see if you‟re ready to go for
real projects. In our very first Android project, we will develop an app in which the
“Hello, World!” text will be shown in the middle of the device screen. We will test
it on the emulator we created before but if you have access to an Android device,
you can test your “Hello World” app on it too.
I‟d like to point out general steps of app development before setting off for
developing our first app:
Creating an Android Studio project,
Setting up the User Interface (UI) of the app,
Connecting the UI components such as buttons, textboxes, etc. to the Java code,
Coding in Java – the actual programming part
Building the project: this means creating the executable (file that actually runs on
device or the emulator). This is not difficult as it sounds; Android Studio does the
entire job with a single click,
Trying the app on an emulator,
Running the app on a real Android device (optional),
Publishing the app on Google Play (optional).
Creating a New Android Studio Project
When we run Android Studio for the first time, we are presented by the dialog
shown in Figure 3.1 where several options are available: i) Start a new Android
Project, ii) Open an existing project, iii) Check out a project from a version control
website (like GitHub), iv) Import a project created in a different development
environment (like Eclipse) or
v) Import an Android code sample (where code samples are downloaded from
version control websites). We‟ll develop our first Android project therefore
please select the first option shown by the arrow in Figure 8.
 Figure 8. Creating a new Android Studio project for our first app
After selecting to create a new project, a dialog box for entering the project settings
will appear as in Figure 9. In the first textbox (shown by “1” in the figure), we are
required to enter the project name, which will also be the name of the app. I entered
“Hello World” but you can enter another name as you wish. The company domain
is given in the next textbox shown by “2”. This is a string similar to a web address
that is used to distinguish among developers in the Google Play market. You can
use any unique domain here. If you won‟t upload your app to Google Play (as in
this example where we‟re just developing for learning thebasics), you can use
any domain you like. I used the one shown in the figure. And then, we need to select
the location on the computer to save the project files (shown by “3”). You can select
any place you like to save your project files.
 Figure 9. New project settings
After clicking “Next”, the Target Android Devices window shown in Figure 10.
will appear. I selected the Phone and Tablet checkbox and then set the Minimum
SDK as API 15 – Android 4.0.3. This means that the app we‟ll develop will be able
to run on devices having Android version 4.0.3 or higher. After selecting the target,
please click “Next”.
 Figure 10. Selecting target devices
The template of the user interface is selected in the following dialog. As you can
see from Figure 11, there are several templates including a login activity, maps
activity, etc. However, since our aim is just writing a text on the screen, it is OK
to select the Empty Activity as shown in Figure
11. So, what does an activity mean? Activities can be defined as screens shown
to the user with user interfaces. Therefore, we have to include an activity to have
an app because as you know Android apps are visual programs that have one or
more user interfaces.
After selecting the default activity, Android Studio asks us to give names to the
activity and the related layout file as shown in Figure 3.5. Since we will have a
single activity in this app, it is perfectly OK to leave their names as defaults. When
we click “Finish”, Android Studio will create the project files and folders
automatically (this make take a while) and then the IDE will appear as in Figure
13.
Figure 11. Adding an activity template to the app

Figure 12. Customizing the newly added activity

Main Sections of the IDE
Android Studio is a sophisticated tool therefore it has dozens of properties to make
app development easier. Instead of giving every detail of this IDE at once, I prefer
to explain and teach in a slower way so that the reader can grasp the app
development concepts in a solid way. Let‟s start with explaining the main sections
of Android Studio by referring to Figure 13.

Figure 13. Basics sections of Android Studio

The sections of Android Studio in the figure above can be summarized as follows:
Section 1. The project files and folders can be viewed from here. In addition, new
files can be added from this pane. We need to double-click on the filenames here
to open them in the middle pane. The project structure will be explained in detail
in the next subsection.
Section 2. The opened files can be activated from the tabs located here for viewing
in the middle pane.
Section 3. This is the middle pane. Contents of the active files can be viewed and
changed from here. For the project shown in Figure 13, the file called
“MainActivity.java” is the active tab in Section 2 therefore the middle pane in
Section 3 shows the contents of this “MainActivity.java” file.
Section 4. This section is also controlled via tabs. The developer can switch project
files, structures, captures and favourites for viewing in the left pane.
Section 5. The current or previous compilation, building or debugging processes
are shown here. For the snapshot of Figure 3.6, it is indicated that the “Gradle build
finished in 14 seconds”. Gradle is the build system of Android Studio. Therefore,
the message says that the building engine completed its previous task in 14 seconds.
Section 6. This is the Run button of Android Studio. When we set up the user
interface and write the Java code of a project, we click this button to make the
Android Studio build the project (which means creating the executable file from
project files) and then we can run it on an emulator or on a real device.
Folder and File Structure of an Android Studio Project
The file structure of an Android project can be viewed in various forms in Android
Studio. The button just at above the left pane (shown by the arrow) is used to open
the selection box for choosing the preferred method of viewing the file hierarchy
as shown in Figure 3.7. The default file viewer is the “Android” mode which is the
easiest way of grouping files and folders in my opinion. When the selection is the
“Android” mode, the default files and folders shown in Figure 3.8 is shown in the
left pane. You can use the arrows (shown inside the circle in the figure) for viewing
the contents of folders.
The default folders (shown inside the rectangles in Figure 3.8) and their contents
are explained as follows:

Figure 14. Switching among different ways of viewing files and folders
manifests folder: This folder has the AndroidManifest.xml file inside. This file
contains the configuration parameters of the project such as permissions, services
and additional libraries.
java folder: The source code files written in Java programming language reside in
this folder. You can see that the java file of the activity named “MainActivity.java”
is automatically created in this folder.
res folder: The resource files are contained in this folder. Resources basically mean
all the needed files except the source code. For example, if we want to include an
mp3 file in our project, we place this file inside the “res” folder.

Figure 15. Default folder and file structure of an Android project

The media, image and layout files residing in the resources folder are accessed via
Java code written in MainActivity.java as we‟ll see in a while.
Building the User Interface
Android Studio provides an easy way of designing user interfaces. The file named
“activity_main.xml” located under the “res/layout” folder contains all the layout
information of the current activity.
If we try to open an .xml file outside of Android Studio, it is opened by a text editor
or a browser. However, when we open an .xml file in Android Studio, it reads the
.xml file and shows the corresponding activity layout with its components. In order
to open the activity_main.xml in Android Studio, please double-click on it in the
project explorer and the activity layout will be displayed in the middle pane as
shown below:

Figure 16. Layout of the activity

As you can see, the layout of the activity is shown in the middle pane. The name of
the app appears at the top of the activity. The default empty activity contains a
default text which is shown inside the circle in the above figure. At the left top of
the middle pane, there exists a tab called “Palette” indicated inside the rectangle in
the figure. When we click on this tab, the palette shown in Figure 3.10 appears from
which we can add all possible user interface objects and layout templates to the
activity.

Figure 17.. The component palette

When the palette tab is clicked, two panes are opened: the Palette shown by the
upper rectangle and the Component Tree pane inside the lower rectangle in Figure
17.
The Palette contains several groups like Widgets, Text Fields and Layouts. We can
easily drag and drop these components to the user interface. On the other hand, the
Component Tree lists the activity‟s components in a hierarchical manner. We‟ll
see the utilization of these components as we develop complex apps in the
following chapters. However, our aim for now is to write a text on the screen. As
you can see from Figure 3.10, Android Studio already placed a “Hello World” text
at the top left of the view.
Let‟s position this text, comprised of a TextView widget, to the middle of the view.
For this, select this TextView and then drag and drop to the middle by the help of
the guiding lines as shown below:

Figure 18.. Drag and drop operation on the TextView

After the drag and drop operation, the TextView will be kept selected. We can now
change the properties of the TextView using the Properties pane which is at the
right of the Layout view as shown inside the rectangle in Figure 19. Please click
the arrow shown inside the circle in this figure to open the basic editable properties
of the TextView.
 Figure 19. The Properties pane
The editable properties of the TextView component are shown inside the rectangle
in Figure 20. In order to display the “Hello World” text in a better way, I changed
its text size to 24sp (sp = scale–independent pixels) and its style to bold by clicking
the B button in the textStyle section.
We have now completed setting up the user interface. Since we don‟t want our first
app to do something interactive, we don‟t need to write single line of code for now.
Of course we‟ll do a lot of coding in the upcoming projects but we don‟t need any
coding here.

Building the Project and Running on an Emulator Our first Android

app is now ready to be run on an emulator. This is easy in Android Studio. We have
set up a Nexus 5 emulator in the previous chapter therefore the only things we need
to do are i) building the project, ii) selecting the emulator and then, iii) run our app
on the emulator.
 Figure 20. The editable properties of the TextView
In order to build and run the project, please click the “Run” button as indicated by
the arrow in Figure 20. The emulator and device selection dialog shown in Figure
21 will appear. Since we have created a Nexus
5 emulator before, it is automatically selected as shown inside the rectangle. If we
had connected a real Android device via USB cable to the computer, it would also
show up in this dialog. However, since there is no real device connected for now,
the dialog gives a warning at the top shown inside the ellipse in the figure. Please
click “Next” and then the emulator will boot like a real device. It takes some time
depending on your computer speed to completely start the emulator (something like
20 secs).
When the emulator starts running, you‟ll see a Nexus 5 screen as shown in Figure
22. You can use it like a real device (apart from calling and SMS features of
course ), and you can also use the controls on the right bar for changing general
properties of the emulator if you want to.
Figure 21. Selecting the target for running our first app

Figure 22. The Nexus 5 emulator

The emulator started but we cannot see our app running on it. Don‟t panic! If we
check the main Android Studio window, we can see that it has given a warning as
shown below:

Figure 23. Instant Run warning

Android Studio asks us if we want to utilize a component called Instant Run. Instant
Run is a system introduced in Android Studio 2.0 and it shortens the Code Build
Run cycle. When we use Instant Run, Android Studio pushes code updates to the
emulator without the need of building a new executable. Therefore, viewing the
effects of the changes of the code can be seen on the emulator in a shorter time. In
summary, Instant Run is a good thing so let‟s install it by clicking the “Install and
Continue” button shown in Figure 23. Android Studio will download the required
files in a short time, and then we need to install these updates by the usual next-
next procedure. After the tiny installation, Android Studio will build our project as
indicated inside the rectangle in Figure 24.
After the building process, the emulator will run our first app as in Figure
25. If you see the emulator screen shown in this figure, congratulations. You’ve
successfully created your first Android app.
We can make any change in our app, and then press the “Re-Run” button indicated
by the arrow in Figure 26. The emulator will install the updated app for emulating.
As you can see from your very first project, Android Studio offers vast number of
possibilities and a user–friendly interface for transforming your ideas into Android
apps.
Figure 24. Android Studio in the process of building our project

Figure 25. Emulator running our “Hello World” app

 Figure 26. The “Re-Run” button in Android Studio
I changed the text to “Hello Android!” from the TextView properties pane (shown
in Figure 19) and pressed the Re-Run button. Android Studio built the project again
and the updated app is displayed on the emulator screen as below:

Figure 27. The emulator running the updated app

You can stop the emulator running the app using the square red “Stop” button which
is just at the right of the “Re-Run” button. When you stop the app, the emulator will
not shut down completely and wait for the next run.
3.7. Running on a Real Device
It is also easy to try our app on a real Android device.
Things to be done on the device: Before running/debugging apps on the real
device, we have to enable the Developer Mode on the device. For this, on your real
device please navigate to Settings About Build number or Settings About
Software information Build number. Depending on your device and Android
version, the place of the “Build number” may be different however I‟m sure you
can find it easily in the Settings About section. Once you find the Build number,
tap on it seven times and then your device will show a dialog box saying “You‟re
now a developer.”
After you‟ve enabled the Developer Mode, you‟ll find a new section called
“Developer options” under the Settings of your device. Please tap on it and then
check “USB debugging” to enable debugging via the USB connection. You can
now install apps from Android Studio to your device over the usual USB
connection.
Things to be done in Android Studio: First of all, please enable “ADB
Integration” from Tools Android ADB Integration as shown below:

Figure 28. Enabling ADB Integration in Android Studio

Now, we need to make our app “debuggable”. For this, open the
AndroidManifest.xml file by double-clicking on it and add the text

android:debuggable="true"
Code 3.1
inside the <application> element as shown in Figure 29.
 Figure 29. Adding the “debuggable” property to our app

We are now ready to test our “Hello World” app on the real device. When we hit
the “Run” button in Android Studio, the following device selection window will
appear:

Figure 30. Selecting the real device

I have connected my Asus Zenfone 6 hence its name is written in the device
selection window; it will obviously be different if the device you connected is
different. After the device selection, click on the “OK” button and then the app
screen of Figure 25 should appear on your actual device. If you see the “Hello
World!” text on the real device, it‟s excellent. You now know how to install your
apps on real Android devices. Running an app on a real hardware is sometimes
essential because some operations like SMS sending and calling can only be done
on real devices.
We have developed out test drive app, “Hello World”, and learned
Creating an Android Studio project,
Using user interfaces and widgets,
Creating emulators,
Building the app,
Running our app on the emulator,
Running our app on a real device.
But as you may have noticed, we didn‟t have any interaction with our app. It just
writes a text on the screen and that‟s it. In order to make an app to do something,
we need to program it. Java is the main programming language used for
developing Android apps. We‟ll learn the basics of Java in the next chapter which
will enable us to transform our ideas to working Android apps. Let‟s have a
coffee break (a 3in1 coffee is recommended since we‟ll need glucose) before
starting our Java lecture.