Android Development #1: First Things

First posted on 22/11/2013

Since this is my first tutorial, let's just make a Hello World app. Let's call it "Assalamualaikum Dunia".

Tools I need:

  1. A computer
  2. An IDE called Eclipse
  3. Internet connection (optional)
  4. An Android device (optional)
  5. A USB cable (optional)

Those optionals are mandatory in this tutorial. I will be using an Android device called Samsung Galaxy SII which is a smartphone, because that is all I have right now. I will be using USB cable to plug in the device to my computer to do the compiling process. Nope, I'm not gonna use Android Virtual Device (AVD) because my computer is super slow. If I have any technical problems along the way, I'd be using the internet to troubleshoot it. So, option number 3 is critical for me.

Setup

  1. Download Eclipse IDE for Windows.
  2. Extract.
  3. Download Android SDK for Eclipse.
  4. Install it.
  5. Run Eclipse IDE.
  6. Go to Window > Android SDK Manager.
  7. Download the latest Android version.

Assalamualaikum Dunia

Goto New > Android Application Project

1

Provide a name for your new App. I'm naming it Salam Dunia. Don't touch the Project Name because I think it is a best practice to have a Project Name same as your App Name. For Package Name, it is where the source code will be stored. In other words, it will stored in com/aiman/salamdunia directory. Click Next.

2

Just untick it. I can deal with this later. Next.

3

Yes. Create Activity. Or else my app won't work. Make it blank, because I don't even know what I'm doing if I choose something else. Next.

4

First Activity of the app is called SalamDuniaActivity. It is a best practice to give a meaningful name for the first Activity and a best practice to name it the same as our app name. For Navigation Type, I'll be using None for this tutorial. Finish.

5

My app will look like this if I start compiling it now. Bbbbut, I don't want the text to be Hello World!, I want something Syaria compliant. Let's go to a more technical part, the codes.

Codes

You can view the code at the bottom tab of the preview. I'll explain what this code does by commenting each line.

res/layout/activity_salam_dunia.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent" <!-- defines the width of this Activitys layout -->
    android:layout_height="match_parent" <!-- defines the height of this Activity's layout -->
    android:paddingBottom="@dimen/activity_vertical_margin" <!-- padding, same definition as the HTML one, ha -->
    android:paddingLeft="@dimen/activity_horizontal_margin" <!-- same as above, but what is @dimen? See below -->
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".SalamDuniaActivity" >

    <!-- TextView is just a layout component for text viewer -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" /> <!-- @string explanation is below -->

<!-- I like RelativeLayout because you can move any components freely -->
</RelativeLayout>

So, that is how Android roll its layout. In HTML, we just do it in a .html file and view it in the browser. In Android, every piece of components need us position specified by the programmer. Tedious, but... fun. There are other layout types other than RelativeLayout, I guess I'll cover this one in another tutorial.

The reason they have this kind of layout model is because it is a template. The use of variables is to make editing values easier in one place.

What is @dimen and @string?
It's a variable. Yes, Android uses variable inside its layout.

Where do I see the variable values?
It is in res/values folder in your app project. If you open strings.xml, it actually captures the tag of the content. For example, <string> and <dimen> is for @string and @dimen respectively. It will also refer to a tag 'name' to get the value of the tag.

Example of strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <string name="app_name">Salam Dunia</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
 
</resources> 

In order to change the text "Hello World", I have to edit strings.xml and find an attribute 'name="hello_world"' because that is what our layout is referring to. So Hello world! would then be Assalamualaikum Dunia!

This is just an example. "Salam Dunia" string is used for the app name, so this should be clear by now.


This is the real code for Android native development.

src/com/aiman/salamdunia/SalamDuniaActivity.java

public class SalamDuniaActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_salam_dunia);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.salam_dunia, menu);
		return true;
	}

}

void onCreate() function
You'll see this a lot in tutorials out there. To use this method, you have to extend the class to Activity. This is the first method Android would find in an Activity and will be executed first.

setContentView(R.layout.activity_salam_dunia) method
Defines that this Activity alone uses our layout previously, activity_salam_dunia.xml

boolean onCreateOptionsMenu() function
This will create a menu when you tap Settings button on your Android device. Inflate means Create, at least for me.

getMenuInflater().inflate(R.menu.salam_dunia, menu) method
It will refer to a menu file called salam_dunia.xml located in res/menu folder.


See it now? Android uses a lot of relation between files. This is their framework we have to follow. Unless you have your own idea managing folders and stuff. Not only it creates a string of text from the layout, but it can be manipulated in the Activity.java itself. We'll be learning this later on.

There is still a lot to explore in Android framework. Like the AndroidManifest.xml file, drawables folder, libs folder, assets folder and how to use external libraries. I guess I'll just leave that to you to learn in Android Documentation. But nevermind, I'll give a quick glance on what those things are.

AndroidManifest.xml
Your app settings. Permission to use device's components (Camera, GPS, Phone etc) are all specified here.

res/drawables folder
Put your damn bitmaps in here. Supports multiple dimensions and resolution for different screen sizes of Android device. For scalability's sake.

libs folder
External libraries to be put here. Eg Picasso Image Viewer

assets folder
Put any media such as fonts, images, videos here. Well, you can put anywhere you like. But the framework had ready this for you, just fucking use it.

Show Comments

Get the latest posts delivered right to your inbox.