ANDRIOD APP #1: RED/BLUE LIGHTHEAD

We‟ll develop a simple strobe light app in this project. We‟ll go through accessing the button in Java code, getting the screen background color, setting this color and sensing button taps to change the background color.

Our aim is to develop an Android app where the background color of the app is varied as in a red/blue strobe light. The background color of the app will change from red to blue or vice versa each time we click a button located in the middle of the screen. This is a very simple app but will teach the basics steps of visual programming.

Watch the video below:

Creating a New Android Project
Firstly, please select “Create a new project”. If Android Studio is already running select File > New > New Project from the top menu

I named the app as “Lighthead app” as shown in Figure Below, but you can give any name you‟d like to.

Naming the app

Then, I selected the app to be compatible with phones and tablets having Android 4.0.3 (Ice Cream Sandwich) or later:

Selecting app compatibility

We‟ll have a simple screen therefore “Empty Activity” does the job in the next dialog:

Finally, leave the name of the activity as “MainActivity” and then click “Finish” to create the project files:

After the project is successfully created, the default view of the Android Studio will appear in which the middle pane will show the “MainActivity.java” file as shown below:

Default view in Android Studio

Developing the User Interface

Let‟s open the user interface layout file activity_main.xml where we will place the button on the screen. As we can see from the figure above, the left pane shows the folders and files of our project. Make sure that the view type is Android and select the folders res > layout and then double-click on the file activity_main.xml there as shown in Figure 1.

When the activity_main.xml file is opened, the layout it contains will be shown in the middle pane as shown in Figure 2. This file and other xml files contain the layout information of an Android app in Android Studio. In fact, xml files are not only used in Android app development but also in other areas of computing. xml files are good to express the relations among different entities in a hierarchical way therefore is a good choice to use in layout design. xml files are text files but Android Studio interprets them as layouts as long as they are in the correct format. We can also view the text file representation of activity_main.xml in Android Studio by selecting the Text tab as indicated by the arrow in Figure 2

Figure 1: Finding activity_main.xml file in project explorer

Figure 2. Viewing activity_main in Android Studio

TEST DRIVE: THE HELLO WORLD APP

General Procedure for Developing an 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:

1. Creating an Android Studio project,

2. Setting up the User Interface (UI) of the app,

3. Connecting the UI components such as buttons, textboxes, etc. to the Java code,

4. Coding in Java – the actual programming part

5. 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,

6. Trying the app on an emulator,

7. Running the app on a real Android device (optional),

8. 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 below

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 below. 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 the basics), 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.

New project settings

After clicking “Next”, the Target Android Devices window shown in Figure Above 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”.

Selecting target devices

The template of the user interface is selected in the following dialog. As you can see from Figure 1, 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 1. 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 2. 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 3.

1 .Adding an activity template to the app

2. 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 3.

3. 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 3 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, 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.

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:

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 below appears from which we can add all possible user interface objects and layout templates to the activity

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 above.

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 above, Android Studio already placed a “Hello World” text at the top left of the view.

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.

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 above. The emulator and device selection dialog shown in Figure below 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 3.15. 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.

Selecting the target for running our first app

Android Studio in the process of building our project

Emulator running our “Hello World” app

Running on a Real Device

1. 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.

2. Things to be done in Android Studio: First of all, please enable “ADB Integration” from Tools > Android > ADB Integration as shown below:

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"

inside the <application> element as shown in Figure Below.

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:

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

i) Creating an Android Studio project,

ii) Using user interfaces and widgets,

iii) Creating emulators,

iv) Building the app,

v) Running our app on the emulator,

vi) 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.

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 below.

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:

Creating a new AVD

AVD Manager will show a detailed window as in above. 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 below.

Creating a new AVD – selecting the device

The recommended targets start from Android 5.1. We can Android 7.0 with Google 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 behavior 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 tutorial.

Selecting the Android version of the AVD

Final settings of the AVD

Newly created AVD shown in the AVD Manager

Nexus 5 emulator window

INTRODUCTION TO ANDROID APPLICATION DEVELOPMENT

INTRODUCTION

Welcome to your guide to Android™ app development!

This blog aims to teach the basics of Android app development in Android Studio using Java programming language. I assume that you don‟t have any Java® or Android programming experience. I am going to explain every bit of app development in simple terms. You‟ll start from scratch and will be able to convert your ideas to your own apps after completing this tutorial.

SETTING UP YOUR DEVELOPMENT ENVIRONMENT

We‟ll use Android Studio, which is the official IDE for Android app development; therefore we need to install it with the required plugins.

Installation of Android Studio

Android Studio runs on Java Runtime Environment (JRE). JRE can be installed on Windows, Mac and Linux computers. We need to follow the steps given below for the installation of Android Studio independent of our operating system:

1. Installation of Java: Java is developed by Oracle Inc. There are basically two Java packages: Java Runtime Environment (JRE) and Java Software Development Kit (JDK). JRE is used for running software written in Java programming language whereas JDK is utilized for developing Java software. Therefore, installing JRE is adequate for running Android Studio because we will not develop Java software here.

Please navigate to the following website to download the JRE: http://www.oracle.com/technetwork/java/javase/downloads/jre8-downloads-2133155.html. Just select the version compatible with your operating system, download it and install it with the usual installation procedure (Next, next, …).

2. Installation of Android Studio and Android SDK

Android Studio is bundled with Android Software Development Kit (SDK). Please navigate to the official download site located at: https://developer.android.com/studio/index.html . The download link for the Windows version is shown at the top of this site but if you scroll down, you can find the setup files available for download for other operating systems as shown below

When you download and install Android Studio, Android SDK will also be automatically installed.3. Installation of SDK updates: After the installation of Android Studio, it is better to check SDK updates. For this, run Android Studio and open the SDK manager from Tools  Android  SDK Manager as shown below:

The SDK Manager window will appear as shown in below

Please open the standalone SDK Manager by clicking the link indicated in Figure 2.4. In the standalone SDK Manager, click on the “Install … packages” as shown below:

After you install the packages, you‟ll have the latest SDK and be ready to develop apps. However, before our test drive app one more step is needed: setting up the emulators.