Our First Useless Application – Hurray!

*** Wait – Quick Update ***
When I started writing this guide it was 2/2/2011 and we are at 2/23/2011, just too much travel and more….
I promise this will not happen again….

*** Wait Again ***
When I started this site I thought it would be simple for someone with basic development skills to write applications and guide other people, now I belive it’s not really the case… am I going to stop? no, not at all, I think you can still pick it up without a problem if you know some and uderstand the basics and if not you will learn as we progress, the only difference is that I don’t this my project here is a two month thing but more like a lifetime few months… now let’s move on

So after our first guide of setting up the project we will start developing on (if you didn’t read that start there – Linky) we are going to create our first useless application.
I’m going to skip the whole Hello World! Hello Android and move on if that’s ok with y’all to something a little less useless.

So what is the most important thing and priceless and most useless thing at the same time in the world?
I’m going to say time…. (correct me if i’m wrong but windows 7 was my idea and bare with me here)
So our first application is going to be a clock πŸ™‚
Now that we have Eclipse open we will start in an odd way but after you learn you can take the lead on how and what.

First thing we are going to do is open our res/values/Strings.xml file

You have two options to view the file in Eclipse As a visual resource or the code itself
In the screen shot below you will see both… i’m going to skip the visual part for now as 1. you can figure it out by yourself 2. lest take the hard route…
UselessClockApp1

This is how your code would look like

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World!</string>
    <string name="app_name">InRim.Net Useless Clock App</string>
</resources>

So what’s this res/values/Strings.xml file?
Here you will hold you string values as you can see app_name has a large value and we can use this string anywhere in our application quick and easy.
We will get into type of strings later on but let’s move on and add some strings

** NOTE ** Strings ARE case sensitive when you call upon them!!!
I’m going to add the following string values to the res/values/Strings.xml file
Analog Clock
Digital Clock
About this App
InRim.Net, Our first useless app
And a few more as you can see in the xml file below

And my XML file should look like this
You can use whatever strings you wish to build your first application

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World!</string>
    <string name="app_name">InRim.Net Useless Clock App</string>
    <string name="icon_app_name">Useless Clock #1</string>
    <string name="analogc">Analog Clock</string>
    <string name="digitalc">Digital Clock</string>
    <string name="about">About this App</string>
    <string name="aboutApp">InRim.Net, Our first useless clock app</string>
    <string name="about_title">About This Useless Clock App</string>
	<string name="about_text">\
	This application is a part of Android Development Guide.
	You can see more at www.inrim.net
	Please do not give a bad raiting for something that is useless.
	And I hope the time is correct on your phone</string>
	<string name="clock_title">This application is a part of an Android Development Guide</string>
</resources>

So now that we have all our strings let’s open res/layout/main.xml what is this file? actually you will eventually use two main.xml files the one that we just opened and another one under res/layout-land/main.xml (for landscape) wait I didn’t say anything about the file itself… this file contains our main layout for our application…

Ok in Eclipse we have again two options for editing this file 1. A graphical layout 2. code base
Let’s start with the code…
UselessClockApp2

This is how are code will look like and in this case you see two main sections
our As you can see in the

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

Now if you switch back to the Graphical Layout you will see a “Snap Shot” of how your application should look like.
UselessClockApp3

Lets change the code from android:text=”@string/hello” to android:text=”@string/app_name” and switch back to our graphical layout, this is what you should get if your copied my code before or something you wrote if you had your our string for app_name
UselessClockApp4

So now that you have some text let’s add some more things to our layout (if you want you can cheat and use the graphical layout but if you start writing in Eclipse you will see how tags close and open….)
I’m going to add two lines of text, two clocks, on digital and one analog and a button (remember you always have the back button on the device, not like an iPhone it will always be there unless it’s a Nook Color or something odd)

** NOTE ** i’m breaking down the layout lines your can write a full line or break them down

Now after my changes my as you can see from the code below we have our extra text, button and clocks

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/app_name"
    />
<TextView android:text="@string/analogc" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
	</TextView>
<AnalogClock 
	android:id="@+id/AnalogClock01" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
	</AnalogClock>
<TextView 
	android:text="@string/digitalc" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
	</TextView>
<DigitalClock 
	android:text="@+id/DigitalClock01" 
	android:id="@+id/DigitalClock01" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
	</DigitalClock>
<Button 
	android:text="@string/about" 
	android:id="@+id/about_button" 
	android:layout_width="wrap_content" 
	android:layout_height="wrap_content">
	</Button>
</LinearLayout>

And if we switch to the graphical layout this is what we get
UselessClockApp5
As you can see we have a state of the art looking app (not really but we will get to the design in another guide to come as that’s a huge part)

So are we done? Not really now we have our “Design” and our basic strings but we need to tie it in to an application.
So we have one thing in our design that needs to do something.
In this case our about button when pressed will… hold on…. show us an about text A-Mazing!

Now we need to create our “About” Java file.
Right click your main package folder under SRC
In my case src/com.inrim.uselessclock
UselessClockApp6
Expand new and select Class

Let’s start with a basic clean file (down the road we will go through what can be imported)
In the Name give your file a name i’m going to use “About” take note that your first character must be an uppercase letter, a better selection here would have been “AboutClockApp” or something of sort but i’m going to roll with it.
UselessClockApp8

Your new created file will only have the following lines of code.

package com.inrim.uselessclock;

public class About {

}

We need to edit it to have the following code

package com.inrim.uselessclock;

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

public class About extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.about);
	}

}

So what did we just add above?
We basically defined an activity in our About.java file that can be called from our application.
But hold on we don’t even have a Main application file… you’re correct now we will go through the process again (of creating a java file Right click –> File –> New –> Class…) and create our “MainClock” java file.
And again our code in that file will look like this


package com.inrim.uselessclock;

public class MainClock {

}

Here is where we are going to tie in all of our “uselessclock” classes (under com.inrim.uselessclock, remember you have have multiple ones in your application)

So what do we have below? keep on reading an I’ll break it down for you

package com.inrim.uselessclock;

import com.inrim.uselessclock.R;

import android.app.Activity;
import android.os.Bundle;
import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;

public class MainClock extends Activity implements OnClickListener {
   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       
       View aboutButton = findViewById(R.id.about_button);
       aboutButton.setOnClickListener(this);       
   }
   
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.about_button:
		Intent i = new Intent(this, About.class);
		startActivity(i);
		break;
		}

	} 
}

So first we add a few imports that we need, we will get into this later on

import android.content.Intent;
import android.view.View;
import android.view.View.OnClickListener;

And we add our button connection
So we use the OnClickListener to tell us the button was pressed, but this is not enough.

       View aboutButton = findViewById(R.id.about_button);
       aboutButton.setOnClickListener(this);       

We need to add our our OnClickListener object

	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.about_button:
		Intent i = new Intent(this, About.class);
		startActivity(i);
		break;
		}

	} 

Now we are going to make sure that our application launches and works.
So let’s edit our AndroidManifest.xml file
It should look like so, but we are going to add some activities to it.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.inrim.uselesclockappparttwo"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">

    </application>
    <uses-sdk android:minSdkVersion="8" />

</manifest> 

We are basically going to add an activity that when the application is launched it will use our MainClock Java file
Show what icon it will have and when the application is launched show some text from our stings in it…
As you can see below we have added two activities and pointed the text for our icon

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.inrim.uselessclock"
      android:versionCode="1"
      android:versionName="1.0">
   <application android:icon="@drawable/icon" android:label="@string/icon_app_name">
        <activity android:name=".MainClock">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".About"
			android:label="@string/about_title">
		</activity>
</application>
    <uses-sdk android:minSdkVersion="4" />
</manifest> 

Well…. at this point we are kinda done with our first phase.
Let’s test our first useless application

Right Click on your application main package
UselessClockApp9

The open Run As and Select Android Application
UselessClockApp10

Your AVD (Android Virtual Device) will automatically launch if it’s not open and Eclipse will generate the APK and push and install it on the device and load the application right away.

Let’s exit it by hitting ESC on our keyboard or back on the AVD keyboard
And open our application list on the AVD
UselessClockApp11

As you can see our Useless Clock #1 application is install on our AVD with an amazing icon (not now people next guide)
Let’s run our application…. wait for it…. (well it’s kinda quick so it should be open)
Behold our amazing creation
UselessClockApp12

Now hit the about button, and our amazing about text will show
UselessClockApp13

Next guides
* Some design
* Enhancements
* Imports
* Classes