Android Application Development: Day 1-2: Getting to Know the Android Project
Rather than starting off by throwing a bunch of files for you to download so that you can create a "Hello Android" application, I thought it would be better if I gave you a quick tour around an Android project.
We will be downloading the necessary files and setting up our virtual device soon enough, but let's start with some fun, interesting stuff.
Note: I would really appreciate it if you could provide me with some feedback on this lesson. I am writing this tutorial with the novice programmer with a basic Java exposure in mind, and I do not want to leave anyone behind! At the end of the lesson, there will be a survey. If you could quickly fill it out for me, it will be great help in writing a lesson that is approachable to beginners.
If you are a beginner and get confused in this unit, send me an email with suggestions on what I can explain better! I'd be happy to rewrite this lesson to better meet your needs. jamescho7@kilobolt.com
First things first:
1. This course requires that you have a basic knowledge of Java. If you have never written Java before, I highly suggest that you bookmark this page and return to it after completing a short Unit on Java. You can find it here.
2. We will be using Eclipse in this tutorial series when building our application. No need to grab the download right now. I will show you the easiest way to get set up for Android development in the next lesson.
For those of you who are new to IDE's, Eclipse is an integrated development environment that will organize your Android project, let you test it, export an installable .APK file (android application package file) that you can upload to Google's Play Store, and allow you to do some in-depth debugging.
Eclipse looks like this:
We will be downloading the necessary files and setting up our virtual device soon enough, but let's start with some fun, interesting stuff.
Note: I would really appreciate it if you could provide me with some feedback on this lesson. I am writing this tutorial with the novice programmer with a basic Java exposure in mind, and I do not want to leave anyone behind! At the end of the lesson, there will be a survey. If you could quickly fill it out for me, it will be great help in writing a lesson that is approachable to beginners.
If you are a beginner and get confused in this unit, send me an email with suggestions on what I can explain better! I'd be happy to rewrite this lesson to better meet your needs. jamescho7@kilobolt.com
First things first:
1. This course requires that you have a basic knowledge of Java. If you have never written Java before, I highly suggest that you bookmark this page and return to it after completing a short Unit on Java. You can find it here.
2. We will be using Eclipse in this tutorial series when building our application. No need to grab the download right now. I will show you the easiest way to get set up for Android development in the next lesson.
For those of you who are new to IDE's, Eclipse is an integrated development environment that will organize your Android project, let you test it, export an installable .APK file (android application package file) that you can upload to Google's Play Store, and allow you to do some in-depth debugging.
Eclipse looks like this:
The Eclipse IDE
A Quick Tour - Refer to the above screenshot
On the very left side, we have our package explorer, where all of our projects (like the Day 1 application shown in the AndroidTut folder).
In the center, files that we open in the package explorer will be opened in tabs. We can edit the code directly here.
As you can tell, there are many more buttons on the ribbon and sidebar, but we will get to those one at a time. For now, let's examine what an Android application project entails by examining the package explorer in some detail.
On the very left side, we have our package explorer, where all of our projects (like the Day 1 application shown in the AndroidTut folder).
In the center, files that we open in the package explorer will be opened in tabs. We can edit the code directly here.
As you can tell, there are many more buttons on the ribbon and sidebar, but we will get to those one at a time. For now, let's examine what an Android application project entails by examining the package explorer in some detail.
Look at the Day1 Project folder. It contains many sub-directories, such as src and res.
To put simply, you can think of an Android project as a machine with several components.
Here are some important ones that we will be dealing with.
1. The SRC (source) Folder:
This folder is where all of our Java classes will be placed. The heavy lifting in an Android application will be done by the code that we place into our src folder.
2. The res (resources) folder:
Images, layouts (visual layouts for applications written in XML), various files, and data will be stored in the res folder. For example, in the values sub-folder inside the res folder, we could save a data file holding information. For example, we can save a file that will store the name of our application in various languages. If we were to point to this data file whenever we want our application's name to appear, Android will automatically select the proper String (text) to represent the name of the application. No need to go through your Java classes and .XML files to rewrite everything if you want to localize for a new region. More on that later!
3. AndroidManifest.xml:
Think of this as a map for your application. Here, you can change the application's name, determine which activities (screens) belong to your application along with the 'Main' activity (the activity that will start first), define the minimum version of Android you want users to have, and much more.
The other folders and files are also important, but we spend a little or no amount of time with those folders, so I will address them as they arise.
One important note: Do not mess with the gen folder. These files are automatically generated based on the files that you place into your Android project, and will handle resource management for you - making your job easier. Don't play with it!
Enough with the introductions. Let's see exactly what an Android application can do. I will be running the application by pressing the "Run" button on Eclipse.
To put simply, you can think of an Android project as a machine with several components.
Here are some important ones that we will be dealing with.
1. The SRC (source) Folder:
This folder is where all of our Java classes will be placed. The heavy lifting in an Android application will be done by the code that we place into our src folder.
2. The res (resources) folder:
Images, layouts (visual layouts for applications written in XML), various files, and data will be stored in the res folder. For example, in the values sub-folder inside the res folder, we could save a data file holding information. For example, we can save a file that will store the name of our application in various languages. If we were to point to this data file whenever we want our application's name to appear, Android will automatically select the proper String (text) to represent the name of the application. No need to go through your Java classes and .XML files to rewrite everything if you want to localize for a new region. More on that later!
3. AndroidManifest.xml:
Think of this as a map for your application. Here, you can change the application's name, determine which activities (screens) belong to your application along with the 'Main' activity (the activity that will start first), define the minimum version of Android you want users to have, and much more.
The other folders and files are also important, but we spend a little or no amount of time with those folders, so I will address them as they arise.
One important note: Do not mess with the gen folder. These files are automatically generated based on the files that you place into your Android project, and will handle resource management for you - making your job easier. Don't play with it!
Enough with the introductions. Let's see exactly what an Android application can do. I will be running the application by pressing the "Run" button on Eclipse.
Wow! That was amazing-ly boring. But there's much we can learn from this app alone!
We will "reverse engineer" it to see what makes it tick.
Remember that I mentioned three important components of an Android app (scroll up if you need a reminder!)? Let's see how each component played a part in getting this application to display "Hello world!"
Reverse Engineering
1. Examining the SRC folder:
We open up the SRC folder and there's only one file:
MainActivity.java.
We will "reverse engineer" it to see what makes it tick.
Remember that I mentioned three important components of an Android app (scroll up if you need a reminder!)? Let's see how each component played a part in getting this application to display "Hello world!"
Reverse Engineering
1. Examining the SRC folder:
We open up the SRC folder and there's only one file:
MainActivity.java.
package com.kilobolt.day1; import android.os.Bundle; import android.app.Activity; import android.view.Menu; public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true; } }
The first thing you should know is that this class (MainActivity) extends Activity, which for now you can simply visualize as a page of an application. An activity is a window that you can interact with - such as the Inbox page of the Gmail app or the texting page of your messaging app.
Okay. So this MainActivity class represents a page of an application. Referring to the screenshot above of our application, this must be the entire page labeled "Day 1" containing "Hello World."
What are the two overridden methods: onCreate and onCreateOptionsMenu?
If you need a reminder, "@Override" indicates that the method that follows it is taking the place of the method of the same name/parameters that belongs in the superclass. Since MainActivity extends Activity, the superclass is the Activity class.
To elaborate, the Activity class has an onCreate and onCreateOptionsMenu, and we would be able to invoke those two methods from MainActivity without "Overriding" (re-writing) the two methods in this class. However, we can re-define what these two methods do by implementing our own versions of the two methods.
So, we have an onCreate method in our MainActivity. The first thing that this method does is call the onCreate method that belongs to the superclass - Activity. This is followed by another line of code:
setContentView(R.layout.activity_main);
This means that whenever we call the onCreate method on the MainActivity, it will begin by calling the onCreate method in its superclass, and then run one more line of code: setContentView.
setContentView - What does it do?
Let's step away from the code and look at the big picture. Recall that this MainActivity class file represents the window - an Activity. It's what you see here:
Okay. So this MainActivity class represents a page of an application. Referring to the screenshot above of our application, this must be the entire page labeled "Day 1" containing "Hello World."
What are the two overridden methods: onCreate and onCreateOptionsMenu?
If you need a reminder, "@Override" indicates that the method that follows it is taking the place of the method of the same name/parameters that belongs in the superclass. Since MainActivity extends Activity, the superclass is the Activity class.
To elaborate, the Activity class has an onCreate and onCreateOptionsMenu, and we would be able to invoke those two methods from MainActivity without "Overriding" (re-writing) the two methods in this class. However, we can re-define what these two methods do by implementing our own versions of the two methods.
So, we have an onCreate method in our MainActivity. The first thing that this method does is call the onCreate method that belongs to the superclass - Activity. This is followed by another line of code:
setContentView(R.layout.activity_main);
This means that whenever we call the onCreate method on the MainActivity, it will begin by calling the onCreate method in its superclass, and then run one more line of code: setContentView.
setContentView - What does it do?
Let's step away from the code and look at the big picture. Recall that this MainActivity class file represents the window - an Activity. It's what you see here:
Nowhere in our MainActivity does it say anything about a "Hello world!" So where does it come from? The answer is in onCreate.
onCreate() defined:
When an Activity starts, its onCreate method will be called by the system. So by including setContentView... inside the onCreate method, we can tell the system to set the contents ("Hello world" in this case) of our Activity by calling:
setContentView(layout);
The layout in this case is R.layout.activity_main. This is a pointer to a resource stored in the res folder!
Are you beginning to see how an Android application is a multi-component machine?
Let's ignore the onCreateOptionsMenu for now, as that will show up again.
Finding our 'activity_main' Layout
onCreate() defined:
When an Activity starts, its onCreate method will be called by the system. So by including setContentView... inside the onCreate method, we can tell the system to set the contents ("Hello world" in this case) of our Activity by calling:
setContentView(layout);
The layout in this case is R.layout.activity_main. This is a pointer to a resource stored in the res folder!
Are you beginning to see how an Android application is a multi-component machine?
Let's ignore the onCreateOptionsMenu for now, as that will show up again.
Finding our 'activity_main' Layout
The name of our layout: R.layout.activity_main, seems to suggest that we can find our Activity's layout by going to the following directory:
res > layout > activity_main.xml
Let's check it out!
res > layout > activity_main.xml
Let's check it out!
There it is! So we found the file that is the "content" of our MainActivity. Let's open it up.
activity_main.xml
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/hello_world" /> </RelativeLayout>
This is a simple XML file. You will quickly become familiar with how to use XML even if you have had no past experience.
The important things here are:
1. RelativeLayout
2. TextView
You can think of a layout as a container. We have a RelativeLayout (explored further later), a type of a layout, with the width and height of "match_parent", which will make it take up space that is given by the parent, in this case this is the whole screen.
This layout contains a TextView, one of the simplest Views -- which are basic UI components of an Android application.
It has a width and height of "wrap_content", meaning that it will take up as much space as needed by the string and the text. It is centered horizontally and vertically, meaning that it will be placed in the center of its parent (the RelativeLayout).
Let's have a look at the screenshot one more time:
The important things here are:
1. RelativeLayout
2. TextView
You can think of a layout as a container. We have a RelativeLayout (explored further later), a type of a layout, with the width and height of "match_parent", which will make it take up space that is given by the parent, in this case this is the whole screen.
This layout contains a TextView, one of the simplest Views -- which are basic UI components of an Android application.
It has a width and height of "wrap_content", meaning that it will take up as much space as needed by the string and the text. It is centered horizontally and vertically, meaning that it will be placed in the center of its parent (the RelativeLayout).
Let's have a look at the screenshot one more time:
Everything's coming together nicely. We have a lone TextView inside an otherwise empty RelativeLayout, and this TextView is centered horizontally and vertically and has the value of "@string/hello_world" (these "relative" locations are possible because we are inside a RelativeLayout).
Okay, we found something that resembles "hello world!" but it is still not the same thing.
The @string is a clue as to where we might be able to find the actual text.
Let's check out the folder:
res > values
Okay, we found something that resembles "hello world!" but it is still not the same thing.
The @string is a clue as to where we might be able to find the actual text.
Let's check out the folder:
res > values
There is a strings.xml! Let's open it.
<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Day1</string> <string name="hello_world">Hello world!</string> <string name="menu_settings">Settings</string> </resources>
There it is: @string/hello_world. It has a value of Hello world. This suggests that if we change the value of hello_world, it will change what our app displays!
I will change it like so:
<string name="hello_world">I can modify TextView values!</string>
Now let me run the app one more time:
Success! I have just found out how the application gets its contents.
Let's finish our study by having a look at the third component of an Android application:
3. The AndroidManifest.xml
Let's finish our study by having a look at the third component of an Android application:
3. The AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.kilobolt.day1" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" /> <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.kilobolt.day1.MainActivity" android:label="@string/app_name" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
More XML! Let's see what this one does.
1. <manifest> </manifest>
These tags seem to contain the entire manifest file. We can see the package of our Application, its version name (which is the typical version numbers you see on software/games), and the version code (an incremented value that goes up by 1 with each release. This is the first edition of our app, so it is 1).
2. <uses-sdk>
This tells us that our application will need a minSdkVersion of 8 (Android 2.2 - Froyo), and will targetSdkVersion = 17 (Android 4.2 - Jelly Bean). This means that the minimum version of Android you would need to see this application on the Play Store is Froyo, and you would have access to all the features available to Jelly Bean devices when developing your application. Always target the highest version of Android.
(Refer to: http://developer.android.com/guide/topics/manifest/uses-sdk-element.html for more version numbers).
3. <application>
Within this tag, we define a couple of attributes for our application. We allow users to back up our application using ADB, define where in the application the app icon can be found, the name of or application in the app drawer, and the basic theme of our app.
4. <activity>
Here, we create an activity. For EACH activity - or a separate page - in our app, we must define this activity inside the Manifest file. Otherwise your app will crash when you try to navigate to it. This is a very common mistake and you will probably encounter this somewhere along your development career.
<activity
android:name="com.kilobolt.day1.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Here, we also use the <intent-filter> to say that this activity: MainActivity will be the Main Activity - the activity that starts when the application is launched.
Only one activity should have this.
1. <manifest> </manifest>
These tags seem to contain the entire manifest file. We can see the package of our Application, its version name (which is the typical version numbers you see on software/games), and the version code (an incremented value that goes up by 1 with each release. This is the first edition of our app, so it is 1).
2. <uses-sdk>
This tells us that our application will need a minSdkVersion of 8 (Android 2.2 - Froyo), and will targetSdkVersion = 17 (Android 4.2 - Jelly Bean). This means that the minimum version of Android you would need to see this application on the Play Store is Froyo, and you would have access to all the features available to Jelly Bean devices when developing your application. Always target the highest version of Android.
(Refer to: http://developer.android.com/guide/topics/manifest/uses-sdk-element.html for more version numbers).
3. <application>
Within this tag, we define a couple of attributes for our application. We allow users to back up our application using ADB, define where in the application the app icon can be found, the name of or application in the app drawer, and the basic theme of our app.
4. <activity>
Here, we create an activity. For EACH activity - or a separate page - in our app, we must define this activity inside the Manifest file. Otherwise your app will crash when you try to navigate to it. This is a very common mistake and you will probably encounter this somewhere along your development career.
<activity
android:name="com.kilobolt.day1.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
Here, we also use the <intent-filter> to say that this activity: MainActivity will be the Main Activity - the activity that starts when the application is launched.
Only one activity should have this.
Well that was a quick tour of an Android application. I hope it was interesting for you. Although you only saw a few components of Android, you should now understand that an Android application is a machine of several parts.
We will discuss each of these parts as we progress through this series.
Thanks for reading, fill out this very quick survey for me (it will help a lot!), and Like us on Facebook to stay updated!
We will discuss each of these parts as we progress through this series.
Thanks for reading, fill out this very quick survey for me (it will help a lot!), and Like us on Facebook to stay updated!