An android App in one day (Under construction)

This blog will document my creation of an app in  2 days  one sitting. I will be using my notes on upcoming presentation that I will be giving in a UNCC student Club (C-Programming Union).

9:45 - I started a bit too late due to homework and lots of house shores. I need to work on my time planning better.

What you need:
Set up your enviorment:
I am cheating with this a bit since I have the IDE setup. But none of the steps are hard. Eclipse takes care of lots of the hard work. Use this link to have your up running and build on it.
http://developer.android.com/resources/tutorials/hello-world.html

I say follow the tutorial to get something running. My tutorial will follow the same steps but for another project as I think it would be a waste of time to write the tutorial again.

===
THE PROJECT!
For this project, I will do a greeting card app. The app will be the greeting card and I will just send it to my friend to tell him happy birthday. He is a nerd so he will understand.

Quick sketch of the final result!

LETS GET STARTED!
Create a new Android project following the steps on the hello world sitehttp://developer.android.com/resources/tutorials/hello-world.html#create
These are the Fields that I used ( withg comments //javastyle)

Project name: Greeting Cards //Name of the project
Target: Select a platform version that is equal to or lower than the target you chose for your AVD. (what version to work with. I just put 7 which is the same as 2.1. It doesn't matter much)
Application name:  Greeting Cards // The application name
name: com.cola.greetingcards // this is complicated. think of it as making your own package for use later. 
Create Activity: Main // your main class name


Once you fill up everything, Click on "Finished" and you will be directed to the main class.



package com.cola.GreetingCard;


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


public class main extends Activity  //I made a mistake with the name of the class. Can you guess it?
{
    /** Called when the activity is first created. 
     * You will put in your code inside it. Think of it
     * As a constructor
     * */
@Override
    public void onCreate(Bundle savedInstanceState) 
    {
//inherit the onCreate from the on in the Activity class    
        super.onCreate(savedInstanceState);   
        //Show 
        setContentView(R.layout.main);
    }


}





Run your code and it would ask you where do you want to show the application. I use the emulator (if it is your first time, It would ask you to create an emulator environment. Just choose a 2.1 one or follow the instructions on the wiki website).

WORKING WITH XML!
Using XML can come pretty handy when creating the UI for android apps as it frees the programmer from the annoyance that comes with dealing with positioning. Separating the layout and display from the behind the scenes can save a lot of time. I hated having to deal with XML at the start but now I will never go back.


Jump to the main.xml file and change the values to make the app display what you want.


<?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="Happy Birthday Enrique"
    />
</LinearLayout>


Now run your application and it will display the new changes.

YES!

Now Lets try adding more resources( like text and images) on the canvas

Adding an image:
We need to put the image in the project somehow. We need to put the image in the drawable folder (there are 3 of them, for HD, small display and very small display. Just paste the image in all).

I added an image named android to the HD folder. Then I changed the main.XML by adding this after the text view


<ImageView android:layout_width="wrap_content"
android:layout_height="600px" 
android:src="@drawable/android" 
/>




Run your program and you will see this magic

THIS IS SOME CUTE STUFF

Adding interactivity
I tried adding sound but it doesn't seem as straight forward as I hoped to put in a tutorial. Instead, I will add a button and a toast.
And just to get it out of the way. Toast is a notification that appears to let the user know something. It looks like this:








So to add a button, We should go to the XML and add this part of the code under the ImageView block

<Button 
     android:id="@+id/button" 
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text = "Random Fact"
/>


You can compile your code. The button will be added. I will go and add the Toast before I compile.


So back to the main.java (man it have been a while. We didn't do anything in java for a while).

Insert this code in the toCreate block (under the part where you load the R.layout.main)


        //Code to handle what happens when we click on the buttons
        Button randomFact = (Button) findViewById(R.id.button);  //Create the button class
        
        //Create a listener that would detect any clicks and preform action
        randomFact.setOnClickListener(new View.OnClickListener() 
        {
        public void onClick(View v)
        {
        //This 1 line will display the toast
        Toast.makeText(getBaseContext(), "Enrique rocks!", Toast.LENGTH_LONG).show();
        }
        });

AND DONE!

It took 4 hours. I ran into a bug that I didn't understand with the button that just worked magically as well as a half hour or so trying to look into adding audio by using the XML but decided to not bother adding it here. Documenting also took some time with all the screen shots getting organized. I need to come back and clean up this blog a bit more.

Edit: I am aware that the "random fact" button is not really random. I think anyone who knows how to code in java would be able to do it. Let me know in the comments if you want me to add that code.

The app is located here:
http://dl.dropbox.com/u/6446381/android/GreetingCard.apk