An Introduction to Android development

2012-02-18T15:53:00.000-08:00

Hello all, this article is the first of the series of articles that I intend to write in future.

Note: For the purpose of this tutorial, I assume that you have working knowledge of Java programming language.

So what is Android?

"Android is a software stack for mobile devices that includes an operating system, middleware and key applications."

This is the quote which you will find at Android developers page which Google tells us what android is. You can read the theory of Android on their developers site.

Android applications are written by using Java and its UI (User interface) is written in XML.

In order to start writing Android applications you would have to download, JDK (Java development kit), Eclipse (A simple and good IDE), Android SDK and ADT plugin.

You can click on the following links to download these, remember these are individual components and all of them are necessary to write apps for Android.

1. Firstly download JDK, as of now Java 7 is not compatible with Android so you would have to settle down with Java 6, click the appropriate link, i.e if your Desktop OS is Windows 7 64 Bit select "jdk-6u31-windows-x64.exe" as your option, if it is not, then find it here

2. Download Eclipse, eclipse is an IDE which stands for Integrated Development Environment, it is helpful when you program as it helps you in organizing your code, it provides you with hints while you type your code and they are many more benefits of using it, to download eclipse visit this page

3. Install Android SDK using this link.

4. Finally install the ADT plugin which can be done if you follow the steps shown here.

This link will provide you with the detailed instructions of how to set up the Android development platform.

After setting up the platform open eclipse.exe and you should be good to start, your eclipse window will look something like this

Click on File -> New -> Project -> Android Project and you should see this.

Type the name of the project in the Project Name text box and check Create new project in workspace option, I named my project as Counter click next and you will see this.

Select the SDK that you want your app to be built for. I am selecting Android 4.0. Click next.

Next you will see this.

The first field is your Application's name, in my case Counter, next field is package name, the naming convention that all Android developers follow is com.yourname.packagename, your package name must have two identifiers, I had named my project as com.arif.SimpleCounter, remember it is a convention to name packages starting with com.

Next field specifies your Activity's name, now an activity is the single screen which the user sees when he interacts with your application. An example to illustrate this is, when you look at your contacts in your phone, you are looking at one particular screen, that is called as an activity which is a term we use in Android development, become familiar with it as it is what you probably will call it the rest of your life, for more on Activity refer to Android developers site. The first activity is named automatically by Eclipse.

The last field is the API level which corresponds to your SDK, it is 14 in case of Android 4.0.
Click finish when you are done and you will see a project created under package explorer.

It is important that you understand the folder structure of an Android application in order to be a good application developer, here is where your code and other resources are organised, beware it is very tricky, but with practice you will be fine, now expand your project and you will see this.

The first folder src that you see is where you write your java code, it can contain many packages, in our case it is just one i.e. com.arif.SimpleCounter, but in practical app development scenarios they can be dozens of packages. The package themselves contain Java classes, again in practical scenario each package may contain hundreds of Java Classes. For now just remember that we write our programs in "src" folder.

Next is gen folder, this is generated automatically as you write the code and build it, DO NOT MAKE ANY MODIFICATIONS TO R.Java class, your compiler does this automatically for you.

Next folder is Android 4.0, it contains all the Android libraries that you will need in your app development.

Folder bin contains your .apk, .dex and resources.ap_ files, these are all important so that your app can be installed on android devices, we will see what .dex and .apk files are in future.

Next folder res is where we place all our project resources like images, audio files, styling xml files etc. It contains five folders drawables (hdpi, mdpi, ldpi), layout and values. Drawable folders are used to place images that can be set as say background for our activity.

Folder layout contains all the xml files which we use to create our UI. In our case we see a main.xml file in which we will create a layout of our application.

Folder values contain xml file called strings.xml, this is a way android developers use to refer to static strings that will be utilized by the app, you can write names for e.g. say your app's name, or your button's name etc. The advantage of writing names in this folder is that they will be localized automatically depending on the users location, for e.g. consider that you have written your app in English and you used strings.xml to name your app or your UI components, now if a person in France downloads your app he would see that names in French. So it is a good practice to use strings.xml to name your components.

Next file is the AndroidManifest.xml file, this is an important part, this tells as of what activities you use, Ill tell you more about activities in my next blog, manifest file holds record of all the activities contained in your application. It also tells as of what permissions you app uses for user to grant it, for e.g. your app may contain
permission to access gps or internet etc. It also tells on which version of Android can your app be installed on.
Android market reads Manifest file to determine whether the app can be installed on your device.

This was pretty much about the folder structure of an Android app.

Now let us dive straight into writing our first app...

Open main.xml which is under the layout folder, you will see two perspectives one is the graphical design of the view and other is the xml code.

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

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />

</LinearLayout>

Here lie two things of our interest, the first one is our LinearLayout, it is how your UI components be placed in your activity, in this case we tell android that we want to lay our UI elements linearly i.e. either horizontally or vertically. LinearLayout specifies some properties like android:layout_width="fill_parent", android:layout_height="fill_parent", android:orientation="vertical" etc.

Layout width property specifies as of how wide you want your layout to be, in our case we tell it to be as wide as the screen is, similar case is with layout height property, we tell it to cover up the entire height of the screen.

Every element in the xml file is enclosed within a starting and ending tag like this <LinearLayout></LinearLayout>

The second element in our xml file is a TextView, it is used for displaying text, in our case it displays @string/hello by default, look how TextView is enclosed in tags and in turned in sandwiched or nested between LinearLayout's starting and ending tag, this is how xml files are written.

I modify my main.xml as follows:

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

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:gravity="center"
android:id="@+id/ourTextView"
android:text="Your Count is 0"
android:textColor="#00FFFF"
android:textSize="26dp" />

<Button
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:gravity="center"
android:id="@+id/btnIncrement"
android:text="Increment"
android:textSize="22dp" />

<Button
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:id="@+id/btnDecrement"
android:gravity="center"
android:text="Decrement"
android:textSize="22dp" />

</LinearLayout>

I modified my TextView and included many properties like layout_gravity which tells it to center itself, then I changed the color and size of the text. The property layout_marginTop tells TextView to be at 40 dp from its top, the properties android:gravity="center", android:text="Your Count is 0", tells it to position the text at center and I set it text in android:text, I am hardcoding the text for now, in later tutorials I'll show you as of how to use strings.xml, but for now do it my way.

Next I include two buttons named "Increment" and "Decrement", which I had named on the operation which they are supposed to perform, have a closer look at the properties I have used, you can include many other properties, but for this demo I think those are enough. It is good if you investigate more properties.

The UI elements button and textview are derived from a class named View, every basic UI element is derived from view, generally speaking, every UI element that you see in Android can be termed as a View.

Your graphical layout of main.xml file should look something like this.

Now you are good enough to run you application, but wait, what will happen if I click the two buttons?
The answer is nothing, as we haven't written any logic to tell the buttons as of what to do when we click them.

This is an interesting aspect of Android platform, we design our UI differently in most of the cases and then write logic to tell those UI elements as of what to do when we interact with them, in our case we have designed our UI in main.xml file and now we want to tell the buttons to increment or decrement the value of count when we press them, this is done in CounterActivity.java file, double click to open it.

You will see this.

package com.arif.SimpleCounter;

import android.app.Activity;
import android.os.Bundle;

public class CounterActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}

Our class CounterActivity extends Activity, which is a base class that most apps use and derive from, it contains many predefined methods written by software developers at Google for our convenience.

In it is an overriden method onCreate, this method is called when your activity is first created, it is important to know the life-cycle of an android app which I hopefully will discuss in the next few tutorials.
The method setContentView(R.layout.main) sets UI that we created in main.xml file as the activity's View content.

I modify my code as follows

public class CounterActivity extends Activity {

/** Called when the activity is first created. */

Button btnIncrement, btnDecrement;
TextView tvOurTextView;
int count;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnIncrement = (Button) findViewById(R.id.btnIncrement);
btnDecrement = (Button) findViewById(R.id.btnDecrement);
tvOurTextView = (TextView) findViewById(R.id.ourTextView);

btnIncrement.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
count++;
tvOurTextView.setText("Your Count is " + count);
}
});

btnDecrement.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {
count--;
tvOurTextView.setText("Your Count is " + count);
}
});
}
}

I declared Button, TextView and count as global variables, doing so helps us in using them in different methods, next in onCreate method we would have to reference our buttons and textview with those in our xml file, that is why we had to use android:id property in our xml file, this is because we would have to reference back those views in our java code, consider this you might create a 100 views in your xml file but you would have to identify them uniquely so findViewById fulfills that purpose.

The next two methods are used to set on Click liseners to our buttons, as you would expect a user to click a button and see a result. In the setOnClickListener for btnIncrement, we increment count by one everytime the user clicks it and viceversa for btnDecrement.

Finally we use setText method on our TextView to set it text to what ever the value if the count is when you click the button.

Your final app will look like this:

Hurray! that is it. Now you can run your app and yes it fully functional, you can increase your count or decrease it. As a matter of fact you can deploy it to Android market if you have a developer account.

I hope you understood the basic mechanics of Android development.

But wait this app isn't complete yet, hit ctrl+F11 if you are on windows or ctrl+fn+F11 on Mac.

What do you see?

Alas the value of Count is lost, this is because the activity is refreshed when it is switched from Portrait mode to Landscape mode and vice-versa.

So how do you go about it? How would you save the application's state?

I will show you that in the next tutorial.

Stay Tuned.

Please leave your feedbacks.

Android - An Introduction

An Introduction to Android development