android-jelly-bean-150x150

Getting Started With SDK And Building Your First Android App

Hello aspiring programmers! How cool would it be to write an app in Android? The great thing about Android programming is its freedom and portability. When I say freedom, I’m talking about its zero cost and open source nature. All the tools will be provided. You won’t even be needing an Android phone. A virtual machine is included to run your apps. Of course you can also run your app on your phone, your aunt’s phone, or on anyone’s you like. Maybe you’d like to try and strike it rich and publish your own brilliant app in the Google Play Market. What do you want to make? The hottest game? A cool productivity app? Something that could save lives? Ideas like these will fuel your learning. So think of something you might actually want to build beyond these tutorials. Are you ready? Through the rabbit hole we go.

First things first. We want to download the Android SDK and (ADT) Android Developer Tools. Head on over to http://developer.Android.com/sdk/ and hit the big blue button. It says “Download the SDK ADT Bundle for Windows”. Ah yes, we will be using a Windows machine to do our programming. You can also use a Mac or Linux machine.

Download Developer SDK
Download Developer SDK

On the next page agree to the terms, choose 32-bit or 64-bit to match your operating system and click “Download the SDK ADT Bundle for Windows”.

We will get a zip file called “adt-bundle-windows-x86_64.zip” for Windows 64 bit users. Your file may be similar depending on your operating system.

Extract this file to C: It’s a nice easy place to get to. You should have a directory structure like this: C:adt-bundle-windows with “Eclipse” and “sdk” folders inside. I don’t like the name “adt-bundle-windows” so I’m going to rename that to Android.

Then dive into the “Eclipse” folder. You should see an Eclipse.exe icon there. That is what we want, so start it up.

3

Now we will see the Workspace Launcher, which is a way to organize projects.  The default location is C:UsersUSERNAMEworkspace, which I don’t like either.  Let’s change that to C:Androidworkspace, check “Use this as the default and do not ask again” and click OK.

The Launcher of Workspaces
The Launcher of Workspaces

We will be greeted with a friendly Welcome! Screen.  It has some great links to other tutorials, but that is what you have me for.  Plus I am nicer.  So close it now!  Close the welcome screen by hitting the X next to the “Android IDE” tab.  Then let’s:

Click File > New > Android Application Project

A wizard will show up giving us many options to configure our Application.  There are quite a few options here but don’t panic.  We will breeze through them all.

New Android Application
New Android Application

 

  • Application Name:  The name of your Android application, as it will appear in the Google Play Market.  Put “Hello YOURNAME” here.
  • Project Name:  Name of project in Eclipse.  A project contains all the files that make up your application.
  • Package Name:  Usually the reverse of your website plus the name of your application.  It should automatically fill in “com.example.applicationname”.
  • Minimum Required SDK:  This is the lowest Android version that will work with our program.  The lower this is set, the more devices will be supported.  Set it higher and you will gain more features.  It is best to set it low.  More users are better.
  • Target SDK:  This is the highest Android version that your app is known to work with.  It should be well tested.
  • Compile With:  Keep as the most recent version.  It should support all previous versions.
  • Theme:  Ooo!  Well there seems to be only a few right now, so I’ll keep it as the default.

On the Configure Project screen we’ll just keep the defaults and hit next.

On the Configure Launcher Icon screen we will configure our app icon with a photo or with some other options.  I’m not going to make a photo for each of my tutorial apps, so I’ll play with the text option.

Configure Launcher
Configure Launcher

On the Create Activity Screen we see a couple templates we can use for our apps.  An activity is like a screen on your Android app.

8

Choose Blank Activity and click Next.
On the New Blank Activity Screen we are going to keep the defaults.  Think of MainActivity as the first activity that will be shown by our app.

MainActivity
MainActivity

 

Finally, let’s hit finish.

Now we will be greeted with our work space.  There is a lot here so for now I will go over a few important things.

Inside Eclips
Inside Eclipse

 

  1. Package explorer – all the files that make up our project
  2. Document view – here we see tabs for all of our open documents.  We can already see the activity_main.xml activity.
  3. Outline Panel –  keeps track of our objects and shows properties
  4. Properties Panel – shows properties of the objects we select.
  5. Info Panel – shows info-like errors in our code like errors and debugging info.

Let’s checkout the activity_main.xml document that was created for us.

What is this hello word text in the middle?  How did that get there?  Well for our confusion, every time we make a new blank activity in Eclipse it will add “Hello World” text.  A text object is called a TextView.  We can delete it but let’s keep it for now.  I’m going to show you how to change it in a few ways.

Click on the “Hello Word!” TextView and notice the Properties on the right.  Choose the “Text Property”.  We can simply change what it says here.  I’m going to change it to “Hello klack”.

 

Hello Klack
Hello Klack

 

Ecilpse is going to list a warning in the info panel that we hardcoded a string.  What does that mean?  Well Android likes to keep all of its text in one file.  This makes it easier to convert your application into other languages.  We won’t be bothering with that for now.

Now that we have made a change to the text, we are almost ready to try out our app!  First we will need to create a new Android Virtual Device to test our app on.  A Virtual Device is the Android Operating System running right inside your computer.  It makes testing out our app fast and easy, and doesn’t require you to own an Android device.

Choose Window > Android Virtual Device Manger

There is nothing here yet so click on “New..”

Here you can see a bunch of settings for configuring your Virtual Device.  Enter the following settings to give us a mock Nexus S:

Virtual Device
Virtual Device

You may want to try “Use Host GPU” if you have a nice graphics card to make things run smoother.

Click OK and then Close the Android Virtual Device Manger

Now we can choose Run > Run from the menu to try out our app!  The first time it will take a while to boot up our Android emulator.  You’ll see the Android window as well as a few buttons used to emulate the hardware found on Android devices.

Run Android Emulator
Run Android Emulator

 

When it boots up (it may take a while), click OK to dismiss the introduction screen.  Now you should see our app!  How easy was that?  You can close the app using the back hardware button and relaunch it from the application tray.

Running Hello Klack App
Running Hello Klack App

 

We are not done just quite yet; we haven’t even done any programming!  Let’s switch back to Eclipse and use some Java to make that TextView say something else.  First we need to give our Text an ID so we can reference it later in our code.  Click on the “Hello World!” text and look at the Id Property.  Right now it is blank.  We are going to name it:

@+id/txtHello

Add Some Programming
Add Some Programming

This creates an id named “txtHello”.  Now choose File > Save to save activity_mail.xml.  Now let’s do something with it.

Check out the MainActivity.java file.  You will find it in the src folder in the project explorer panel.  It is here that our startup code lives.

Java Code
Java Code

Let’s take a moment to notice some things about how Java code is written.  Primarily parentheses   ()  curly braces {} and the semicolon;

Curly {} braces signify the start and end of a block of code.  Parentheses () signify other methods and may contain parameters that get passed into the method.  A double slash // signifies a code comment.  Use this to leave comments or put it in front of a line of code to disable it.  Finally we must end each statement with a semicolon;

Starting at the top of this code we see our package name.  After that some imports (use the little plus sign to see all the imports).  Imports are a way to access features of other packages.  The ones listed here are built into Android, but we could make our own and access them here.  Next we see a code block that defines our activity.  Within it we can see two methods.  onCreate and onCreateOptionsMenu.  The onCreate method is run right when the Main Activity is started.  So here is where we will put some code to change our txtHello TextView.

 

Add Some Code
Add Some Code

Add the 3 lines of code after the // Startup Code goes here section that I have marked.  After you have added these lines Eclipse seems to have a few complaints.  It doesn’t like when I write TextView.  That’s because we need to do an import at the top so reference TextViews in our code.

Add

import Android.widget.TextView;

Underneath the other imports at the top.

Now let’s take a look at our code line by line:

TextView t = new TextView(this);

Means we are going to create a variable t and of the TextView type and initialize it as new TextView.

t=(TextView)findViewById(R.id.txtHello);

Here is the bit of code that will access our txtHello TextView that we created earlier and assign it to the t variable.  This is done by the findViewById method.   As you can see it accepts the parameter R.id.txtHello

We would change the txtHello part to reference a different id to get a different object.

There seems to be one problem with the findViewById method.  It spits back a View type, when we want a TextView type to put in our t variable.  The (TextView) in front takes care of that by transforming or “Casting” our View into a TextView type.  Don’t worry too much about that now.

t.setText(“Hello Android!”);

Finally, see the magic that actually changes the text.

Remember t is a variable holding a reference our txtHello TextView.  setText is a method of TextView and accepts one parameter, the text we want to have.  Change it to something you like.

OK now let’s go to the menu and choose Run > Run

Done!
Done!

 

Did you make it this far without any problems?  What if something did throw you for a loop?  Post a comment below and we will try and spoon feed you some newb goodness.  It’s probably your first time ever right?

 

 

 

3 thoughts on “Getting Started With SDK And Building Your First Android App

Leave a Reply

Your email address will not be published. Required fields are marked *