By   May 11, 2014

In my talk about options for development for google glass, I briefly discussed about Android studio to be an option. In this post, we will not be discussing about glassware development though. We will be focusing on creating a simple android app. Since this would be our first one, we would like to keep the discussion as simple and straight as possible.

The App should just have a button and a number. Clicking the number each time should increment the number on the screen.

Let’s open our Android Studio and create a new project. Let’s name this project as IncrementerApp. Let’s keep the default options selected here. If you have a .net development background, like me, this first screen does confuse us. There are so many platform versions asked. In our .net experience, we just have one version to care about. That is the version we develop against, and that is the version we expect our customer to be running our application against. But don’t be confused, just get in the water, it will be just fine.

IncrementerApp

Now let’s move to the next stage of the project creation wizard. Here we are adding a blank activity. We don’t want any additional features added to the activity here.

ActivityDefinition

Hitting the Finish button would create the activity with default definition. Now for our activity, we should specially be careful about two files. They are IncrememntActivity.java and activity_increment.xml files. It has picked up the name for xml file from the casing of the name of the activity. Here you should know that all the activities should have these two files. The java file defines the behavior of the activity, while the xml one defines the activity layout. Since each activity is something that we want to show to the screen, it must have a layout, generally only one.

ProjectWindow

Let’s add a Framelayout the activity layout. We add a TextView and a button to the layout as follows:

layout_app

You might have noticed the button’s content as Increment. Now Android is very good at providing a framework for resources from the ground-up. There are already existing resource files for different purposes. Here we have introduced the “Increment” text in strings resource file. It should be available for selection as follows:

increment_button

Here the resource file has already been updated as follows:

stringsxml

You can directly go to the definition of these resource definitions by CTRL + MOUSE OVER over the resource usage. It transforms into a hyperlink then which can be used to traverse to the definition site. You can also notice that we have updated the text of TextView as 0.

controlMouseOver_001

The similar is not true for the Ids. We define Ids here in the layout definitions with + sign. They are then compiled into a new class type R, which can be used from rest of the application. They are added to a final class in R called id. You might need to rebuild the project if you have just updated an id. So

IncrementTextViewInR

Now add the following code to IncrementActivity java class. This would define an event handler our Increment button. It accesses the TextView using the id discussed above using findViewById method. The method is defined in the parent class of the Activity. Since it returns a View type, we need to typecast the result to TextView. After getting the contents of the text view, we are just parsing it to an integer, incrementing it and assigning it back to the same TextView.

Now we need to hook-up this handler to our button. We can simply achieve this using the property definition window of the button. It lists the assignable methods defined in the activity associated with this layout definition. Let’s select buttonOnClick here.

2014-05-11_1735

Mapping Between Activity and Layout

Before running the project, let’s just take a moment to discuss a few things. First of all, we have just discussed that behaviors and layout of an activity is defined in its corresponding java and xml files. Now how they are mapped to each other. Actually, it is a two-way mapping. In the java file, we generally add the layout mapping in the onCreate() method. In the xml layout definition we set the context of the layout to be the specific activity.

TwoWayMapping

Android View & Layout Components

All the UI components in Android are derived from View type. Here we have used a TextView and Button. Both of them are derived from View type. In addition to these we have used FrameworkLayout. Layouts are also specialized views. All layouts are derived from ViewGroup which inherits from View. These view groups are containers for other view objects.

ViewGroupLayout

Running Project

An android app can be run on a real or a virtual device. Here virtual devices are emulators available to test an app. As we run the project, the following dialog is available for selecting the device we want to test it on. It includes all the devices connected to the system used for development which have debugging enabled. We can also launch emulators for testing on virtual devices. Since I have previously added a virtual device for Galaxy Nexus, this is available in the list for selection.

RunningProject_ChooseDevice

We can manage the list of virtual devices (emulators) from AVD (Android Virtual Devices) manager.

AVD_Manager

As we start debugging the project, the IDE provides us a list of running devices. We can select either of them to run our app. We can also start a new device for this purpose.

RunningApp

Code Inspections

Android Studio is amazing in helping us determine the code issues. In the code editor it shows help based on the code inspection settings. We can update the inspection settings from Code Inspection window.

CodeInspections

Debugging Apps

It must be remembered that breakpoints are hit only in the case when we debug the app. If we just run it, no breakpoints are hit. So make sure that we select a debug option from the menu drop down.

DebugAppsBreakPoints

Although this is not recommended but we can always set an application to be debug-able in the android manifest.

android_debugable

You can see that the code inspection has highlighted this. Actually this flag is automatically set when an application is debugged from the editor. Setting this here explicitly also sets it in the apk generated for the app, which is not recommended.

Let’s Debug Incrementer App

Now let’s run the project. It installs and debugs application on that device. This is remote debugging on that device provided by ADB. We can discuss it later. All the messages are added to the console so that you might have an idea what’s going on here.

DebugConsoleMessage

As the application is running and the button is being clicked, you can set breakpoint in the onClick handler for the button. It provides a comprehensive view of the current application state. We can also step through the code here.

Breakpoints

You can notice that as we are hitting the button, it is incrementing the number in the view, which is as per our original requirement.

RunApp

Download Code

You can download the app’s code from Github:

IncrementerAndroidApp