Table Layout? Tell me more!

Table Layout does exactly what it says on the tin, it arranges items into rows and columns just like a regular table layout in HTML for example. See this link for further information.

Figure 1: Table Layout

Step 1:

Create a new Android Project in Eclipse and name it Application8. Name the main activity ApplicationActivity8. (Note I’m using build target 2.3.3 to run my app on)

Step 2:

Copy and paste this code into your string.xml file:

Listing 1: string.xml file

[code] <?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Application8 - Table Layout</string> </resources> [/code]

Step 3:

Copy and paste this code into your Application8Activity (i.e. your main activity). Remember not to copy over your package name at the top of your file.

Listing 2: Application8Activity

[code] import android.app.Activity; import android.os.Bundle; public class Application8Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } [/code]

Step4:

Copy and paste this code into your main.xml file:

Listing 3: main.xml file.

[code] <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <TableLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:shrinkColumns="*" android:stretchColumns="*" android:orientation="vertical" > <TableRow android:id="@+id/tableRow1" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:padding="10dip" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Row 1" android:gravity="center" android:textSize="24sp" android:layout_span="3" android:background="#FF260A" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dip"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Row 2, Column 1" android:gravity="center" android:textSize="15sp" android:background="#1DA43F" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Row 2, Column 2" android:gravity="center" android:textSize="15sp" android:background="#F03D19" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Row 2, Column 3" android:gravity="center" android:textSize="15sp" android:background="#0A2BE9" /> </TableRow> <TableRow android:id="@+id/tableRow3" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:padding="5dip" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Row 3" android:gravity="center" android:textSize="15sp" /> </TableRow> <TableRow android:id="@+id/tableRow4" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="5dip" > <TextView android:layout_width="match_parent" android:layout_height="100dp" android:text="Row 4, Column 1 spanning 2 columns" android:gravity="center" android:textSize="15sp" android:layout_span="2" android:background="#81726F" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Row 4, Column 2" android:gravity="center" android:textSize="15sp" /> </TableRow> <TableRow android:id="@+id/tableRow5" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#FFFFFF" android:padding="5dip" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Image:" android:gravity="center" android:textSize="15sp" android:textColor="#000000" android:background="#F0E031" /> <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:background="#31F0E7" android:gravity="center"/> <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:background="#CE0AFF" android:gravity="center"/> </TableRow> </TableLayout> <TextView android:id="@+id/space1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="" /> ...

Relative Layout? What’s this then?

Put simply relative layout organises items on the screen relative to something else. Like linear layout, relative layout is commonly used by android developers. I myself do like this layout and have used in the development of my applications before. See http://developer.android.com/reference/android/widget/RelativeLayout.html and http://developer.android.com/guide/topics/ui/layout/relative.html for more information on relative layouts.

In this tutorial

In this tutorial I will give you some examples of how relative layout works. Feel free to experiment with the code to get an idea of what relative layout is all about. Ok here we go.

Step 1:

Create a new Android Project in Eclipse and name it Application7. Name the main activity ApplicationActivity7. (Note I’m using build target 2.3.3 to run my app on)

Step 2:

Copy and paste this code into your string.xml file:

Listing 1: string.xml file

[CODE]<?xml version="1.0" encoding="utf-8"?> <resources> <string name="title"><b><u>Relative Layout</u></b></string> <string name="app_name">Application7</string> </resources>[/CODE]

Step 3:

Copy and paste this code into your Application6Activity (i.e. your main activity). Remember not to copy over your package name at the top of your file.

Listing 2: Application6Activity

[CODE]import android.app.Activity; import android.os.Bundle; public class Application7Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } } [/CODE]

Step4:

Ok I will have an ImageView onscreen and I’d like a button below it to the left and also a button below it to the right. We achieve this like so: Copy and paste this code into your main.xml file:

Listing 3: main.xml file

[CODE]<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/textView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/title" android:gravity="center" android:textSize="24sp" /> <ImageView android:id="@+id/imageView1" android:layout_width="150dp" android:layout_height="150dp" android:layout_below="@+id/textView1" android:layout_centerHorizontal="true" android:layout_marginTop="70dp" android:src="@drawable/ic_launcher" /> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageView1" android:layout_marginTop="37dp" android:layout_toLeftOf="@+id/imageView1" android:text="Below and to left of Image" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/button1" android:layout_toRightOf="@+id/imageView1" android:text="Below Image, right of button1" /> </RelativeLayout> [/CODE]

Notice in our button1 attributes we have:

[CODE] android:layout_below="@+id/imageView1" android:layout_toLeftOf="@+id/imageView1"[/CODE]

And in our button2 attributes we have:

[CODE]android:layout_alignBottom="@+id/button1" android:layout_toRightOf="@+id/imageView1"[/CODE]

When you have the code pasted in you will get this when the application is run:

Figure 1: Relative Layout at work.

Right now you have an idea. Let’s have some fun to showcase what we can do.

Experimenting with the attributes a bit further:

Step 1:

We are going to modify the existing project so first we will copy and paste this code into your string.xml file:

Listing 4: Updating string.xml file

[CODE]<?xml version="1.0" encodin ...

Layouts you say?

There are several layouts that can be used when designing your android application. Layouts are used to organise things on your screen like organising your buttons and images etc. Essentially they are there to help you organise where things will go and where they will be displayed on your application. Linear layout, relative layout, table layout, absolute layout etc. are all types of layouts used in android development. When you first set up any project you will notice that the layout is LinearLayout in your main.xml file:

Listing 1: main.xml

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

For more information on this specific layout check out http://developer.android.com/reference/android/widget/LinearLayout.html. Basically Linear layout is the simplest and most common layout used in android development. Notice above the orientation is set to vertical. Orientation can be set to horizontal or vertical.

In this tutorial

For this tutorial I will show you how linear layout works and will point out some of its attributes and show you how to use them.

Orientation

Ok let’s experiment with the orientation attribute:

Step 1:

Create a new Android Project in Eclipse and name it Application6. Name the main activity ApplicationActivity6. (Note I’m using build target 2.3.3 to run my app on)

Step 2:

Copy and paste this code into your string.xml file:

Listing 2: string.xml code

[CODE]<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Application6 - Linear Layout</string> </resources>[/CODE]

Step 3:

Copy and paste this code into your Application6Activity (i.e. your main activity). Remember not to copy over your package name at the top of your file.

Listing 4: Application6Activity

[CODE]import android.app.Activity; import android.os.Bundle; public class Application6Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } }[/CODE]

Step4:

Copy and paste this code into your main.xml file:

Listing 5: main.xml updated

[CODE]<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:layout_weight=".20" android:background="#FFFFFF" /> <ImageView android:id="@+id/imageView2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:layout_weight=".20" android:background="#A49D9D" /> <ImageView android:id="@+id/imageView3" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:layout_weight=".20" android:background="#FFFFFF"/> <ImageView android:id="@+id/imageView4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:layout_weight=".20" android:background="#A49D9D" /> <ImageView android:id="@+id/imageView4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:layout_weight=".20" android:background="#FFFFFF" /> </LinearLayout> [/CODE]

Here I use LinearLayout and assigned it’s width and height to fill_parent and assign the orientation to vertical. I have 5 ImageViews, all of which I h ...

What is GridView in android?

GridView is a layout used in android to display items in a grid. It is a ViewGroup. For a GridView we use an adapter to automatically insert items into the layout

Figure 1: GridView

In this tutorial

For this tutorial I will show you how to create a gridview of ImageViews within a LinearLayout. I will also have an Exit ImageButton and we will put a picture as our screen background.

Coding the application

Create a new Android Project in Eclipse and name it Application4. Name the main activity ApplicationActivity4.

Figure 2: Project Structure

Step 1:

As seen from the project structure above I have three images in the drawable-hdpi folder. For this tutorial you will have to obtain 2 extra images. The ic_launcher.png image will already be in the folder. You will need a mars.png image and a ufo1.png image. I used a ufo1.png 88 x 88 pixels. Save the images as .png and put them in drawable-hdpi folder. Note for beginners: If you have trouble finding your folders to save these images, an easy way to put the images in that folder is to copy them from where you have them saved then right click on the drawable-hdpi folder in the Eclipse folder structure as seen above and select paste.

Step 2:

Copy and paste this code into your string.xml file(located in the values folder within the res folder):

Listing 1: string.xml code

[CODE]<?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello"><u>Grid View</u></string> <string name="app_name">Application4</string> </resources>[/CODE]

Step 3:

Copy and paste this code into your main.xml file:

Listing 2: main.xml code

[CODE]<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="@drawable/mars" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" android:gravity="center" android:textColor="#23B52F" android:textSize="36sp" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="(Click UFO to exit)" android:layout_gravity="center" android:textColor="#000000" android:textSize="18sp" /> <ImageButton android:id="@+id/ufo1" android:layout_width="66dp" android:layout_height="72dp" android:src="@drawable/ufo1" android:layout_gravity="center" /> <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:verticalSpacing="8dp" android:horizontalSpacing="8dp" android:columnWidth="70dp" android:stretchMode="columnWidth" android:gravity="center" /> </LinearLayout> [/CODE]

Notice here I put the GridView within the LinearLayout (inside the LinearLayout tags in other words). Notice LinearLayout’s background is android:background="@drawable/mars" and the ImageButton drawable is set to ufo1 android:src="@drawable/ufo1". Notice our GridView’s width and height is set to fill_parent. Also numColumns is set to auto_fit. Note vertical spacing, horizontal spoacing, column width, stretch mode and gravity.

You’ll end up with this in the Graphical Layout:

Figure 3: Graphical Layout

Step 4:

Copy and paste this code into Application4Activity (i,e, your main activity). Remember not to copy over your package name at the top of your file.

Listing 4: Application4Activity code

[CODE]import android.R.color; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.BaseAdapter; import android.widget.GridView; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.Toast; import android.widget.AdapterView.OnItemClickListener; public class Application4Activity extends Activity { //---the images to display--- Integer[] imageIDs = { R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, R.drawable.ic_launcher, ...

So what exactly is an activity?

An activity is basically a screen for the user to interact with and do stuff on. See http://developer.android.com/guide/components/activities.html for a better explanation.

In this tutorial

For this tutorial I will show you how to create multiple activities and go from one activity to another and how to close all activities above the main one and return to the main activity. In this tutorial we will need to the AndroidManifest file among other things to achieve our goals. So here we go, we better get to it.

Figure 1: Andy Android activities

Creating and handling multiple activities.

Create a new Android Project in Eclipse and name it Application3. Name the main activity ApplicationActivity3.

Figure 2: Project Structure

Step 1:

As seen from the project structure above we create 2 more activities. Right click on your package name under src and select New then Class then enter Application3Activity2. Repeat the process for creating Application3Activity3. So now you have 3 java files. Now right click on layout in the res folder. Select New then select File then type activity2.xml. Repeat the process naming your activity activity3 for the final xml we need.

Step2:

Copy and paste this code into your string.xml file:

Listing 1: string.xml code

[CODE] Activity1 Application3 [/CODE]

Step3:

Copy and paste this code into your main.xml file:

Listing 2: main.xml code

[CODE] [/CODE]

You’ll end up with this:

Figure 3: main.xml Graphical Layout

Step 4:

Copy and paste this code into your activity2.xml file:

Listing 3: activity2.xml code

[CODE] [/CODE]

You’ll end up with this:

Figure 4: activity2.xml Graphical Layout

Step 5:

Copy and paste this code into your activity3.xml file:

Listing 4: activity3.xml code

[CODE] [/CODE]

You’ll end up with this:

Figure 5: activity3.xml Graphical Layout

Step 6:

Copy and paste this code into Application3Activity (i,e, your main activity). Remember not to copy over your package name at the top of your file.

Listing 6: Application3Activity code

[CODE]import android.R.color; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import a ...

Image Buttons and Toast

Now toast has nothing to do with toasted bread, it is in fact a popup. It’s a popup of information. For example if you click on a button it may tell you an operation has occurred. A good example of a toast would be when you’re on Xbox live and a message pops up telling you your friend is online. See http://developer.android.com/guide/topics/ui/notifiers/toasts.html for an explanation from the Android Developers site.

Figure 1: Image Buttons and Toast

The Application

Ok for this tutorial I will create 5 image buttons. 4 will change the background of the screen and also pop up a toast and the remaining image button will exit the application. Without further ado, let’s start the project.

Open Eclipse and create a new Project. Name it Application2. Name your main Activity Application2Activity.

Figure 2: Project Structure

Notice I have placed several images into the drawablw_hdpi folder. For this tutorial you will have to obtain 09 images. You will need an empty room image, 4 different living room images, an exit sign image and also an image of the number two, three and four. The ic_launcher image will already be in that folder when the project is created. Save the images as .png and put them in drawable-hdpi folder. Note for beginners: If you have trouble finding your folders to save the images, an easy way to put the images in that folder is to copy them from where you have saved then right click on the drawable-hdpi folder in the Eclipse folder structure as seen above and select paste. Right we are ready to get coding.

Step 1:

Copy and paste this code into you main activity: (Remember not to copy over your project name at the top of your main activity)

Listing 1: Main Activity

[CODE]import android.R.color; import android.app.Activity; import android.os.Bundle; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageButton; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; public class Application2Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final ImageButton Btn_living_room1 = (ImageButton) findViewById(R.id.Btn_living_room1); Btn_living_room1.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click v = findViewById(R.id.laidout); v.setBackgroundResource(R.drawable.living_room1); Toast toast = Toast.makeText(getApplicationContext(), "Living Room 1 Selected", Toast.LENGTH_SHORT); toast.show(); toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0); } }); final ImageButton Btn_living_room2 = (ImageButton) findViewById(R.id.Btn_living_room2); Btn_living_room2.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click v = findViewById(R.id.laidout); v.setBackgroundResource(R.drawable.living_room2); //get your custom_toast.xml layout LayoutInflater inflater = getLayoutInflater(); View layout = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.custom_toast_layout_id)); // set a dummy image ImageView image = (ImageView) layout.findViewById(R.id.image); image.setImageResource(R.drawable.two); // set a message TextView text = (TextView) layout.findViewById(R.id.text); text.setText("Living Room 2 Selected"); // Toast... Toast toast = new Toast(getApplicationContext()); toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0); toast.setDuration(Toast.LENGTH_SHORT); toast.setView(layout); toast.show(); } }); final ImageButton Btn_living_room3 = (ImageButton) findViewById(R.id.Btn_living_room3); Btn_living_room3.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click v = findViewById(R.id.laidout); v.setBackgroundResource(R.drawable.living_room3); //get your custom_toast.xml layout LayoutInflater inflater = getLayoutInflater(); View layout = inflater.inflate(R.layout.custom_toast, (ViewGroup) findViewById(R.id.custom_toast_layout_id)); // set a dummy image ImageView image = (ImageView) layout.findViewById(R.id.image); image.setImageResource(R.drawable.three); // set a message TextView text = (TextView) layout.findViewById(R.id.text); text.setText("Living Room 3 Selected"); // Toast... Toast toast = new Toast(getApplicationContext()); toast.setGravity(Gravity.CENTER_VERTICAL, 0, 0); t ...

Animation

Animation is basically the quick display of a number of pictures which represent movement. A common example of this would be a cartoon animation or motion pictures. I thought it would be interesting to introduce you to animation as it can be used in many ways in apps. You could make your own little cartoon or animated figure etc.

There are many applications on Google Play that use animation. Check out https://play.google.com/store/search?q=animation&c=apps . I’m sure you’ll find an app that tickles your fancy. Here’s one called StickDraw: https://play.google.com/store/apps/details?id=com.bingzer.android.stickdraw&feature=search_result. Also there are some cracked screen apps that use animations to portray the cracking of your screen. See https://play.google.com/store/apps/details?id=net.gnomemade.apps.crackedscreen&feature=search_result for an example. Ok now onto my tutorial, what am I going to do in this tutorial? Let’s find out;

In this tutorial

For this tutorial I will show you how to create a simple animation using 6 images of Sonic the Hedgehog. He will do the classic waiting and looking at his watch pose which he used to do if you left him doing nothing for too long. Any Sega fans out there? I’m a fan so hence the choice of images. I will have a TextView at the top, a stop/start button and also an exit button. Note: I am using build target 2.3.3 for running this application

Figure 1: Sonic animation images.

Creating the Application

Step 1:

Create a new Android Project in Eclipse and name it Application5. Name the main activity ApplicationActivity5.

Figure 2: Project Structure.

Step 2:

As seen from the project structure above we create an animation.xml file. Right click on layout in the res folder. Select New then select File then type animation.xml. Also I have placed 6 sonic images into the drawable -hdpi folder: sonic1.png, sonic2.png, sonic3.png, sonic4.png, sonic5.png and sonic6.png. If you’d like to use the same images as me, you can use print screen to copy figure 1 (above) into paint then cut the images of sonic and save them as .png files into the drawable.hdpi folder. (Note for beginners: If you have trouble finding your folders to save these images, an easy way to put the images in that folder is to copy them from where you have them saved then right click on the drawable-hdpi folder in the Eclipse folder structure as seen above and select paste.)

Step 3:

Copy and paste this code into your string.xml file:

Listing 1: string.xml file code

[CODE]<?xml version="1.0" encoding="utf-8"?> <resources> <string name="title"><b><u>Animation</u></b></string> <string name="app_name">Application5</string> <string name="start">Start</string> <string name="stop">Stop</string> <string name="animation_image">Animation Image Goes here</string> </resources>[/CODE]

Step4:

Copy and paste this code into your main.xml file:

Listing 2: main.xml file code

[CODE]<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:id="@+id/space1" android:layout_width="wrap_content" android:layout_height="20dp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/title" android:gravity="center" android:textSize="24sp" /> <TextView ...

Your first Application

Ok, firstly I will show you how to get your first application running, then how we can edit it to create a label change application. From my previous article ‘Developing your first Android App’ see (http://mrbool.com/developing-your-first-android-app/24309), you should have Eclipse set up and know the basics of what’s involved in creating an android application. I’m sure you’ve had a look on the Android Developer’s site (http://developer.android.com/index.html ) and have also searched the Internet for what you needed to know to get started. Also check out http://developer.android.com/guide/components/fundamentals.html for Application Fundamentals if you think you need a quick recap or an overview of what’s involved.

Figure 1: Researching the Basics.

For this article and for future articles I will show you how to code a few applications and we will learn something new each time. We will learn about different components of an app, Activities, layouts etc.

Getting Started

OK I’ll describe how to set up the project. If you’re used to setting up projects you should have no difficulty doing this. I’ll just go through everything though just to give beginners an idea and example to work from. First things first we will create a new project in Eclipse.

Figure 2: How to start a new Project

Select Android Project.

Figure 3: Select Android Project.

Name your project Application1

Figure 4: Naming your project.

Select your build target i.e. what version of android you would like your application to be runnable on.

Figure 5: Selecting you’re build target.

Edit the package name. See http://developer.android.com/training/basics/firstapp/creating-project.html# for a brief explanation on how to name your package. In my example I named my package: sc.applications.app1 which is basically my two initials (sc) followed by .applications followed by .app1 to describe our first app. Also note here the Application name and the Activity name. The Activity name is the name of your main activity.

Figure 6: Naming your application, package and activity.

Ok once you click finish you will notice the Application1 folder to the left hand side. Expand it by hitting the black arrow to its left. Then expand the src folder and you will see your package name, expand this and then you can see the name of your activity.

Double click on the name of your Activity to open up the code. Now expand the res folder and under the res folder expand the layout folder to see your main.xml file. Double click on this to open it. Notice when the main.xml file is open there are two tabs on the bottom of the screen, Graphical Layout and main.xml. Click on the Graphical Layout tab. You can take a moment to familiarise yourself with all the graphical components etc. available to you but we’ll cover that in more detail at a later stage. Don’t worry too much about them.

Figure 7: Project in Eclipse.

To run the project as is without any editing thus far click on Run at the top of Eclipse or click the run arrow . Alternatively you can run it by hitting Ctrl + F11 or right click on your project/application (i.e. Application1) to the left hand side and select Run As and then select Android Application. See figure 8.

Figure 8: Running your project.

The Emulator will load up, may take a minute or two. Unlock the screen and your application will run, easy as that.

Figure 9: Running Application on Emulator.

Right now we have gone through the setting up of your project. Was pretty easy eh? Now I will help you add all the fun stuff to the project like images buttons, text etc. Ok let’s waste no more time and get to it :-).

The Code

Now the project is set up and running I’ll give you some code to copy and paste into the files then go through the code in more detail with you. Essentially we will cover labels, TextViews, underlining, putting text in bold, adding an image, the EditText component, clearing text, changing a label and exiting the application on the click of a button. So we will learn a bit of everything to start you off the bat. Don’t be too alarmed, it’s not as daunting as it seems.

Step 1:

In Application1Activity (or whatever your main activity is called) Paste and copy this code. Remember don’t delete or copy over your package name at the top.

Listnig 1: Application1Activity

[CODE]import android.app.Activity; import android.graphics.Color; import android.os.Bundle; import android.view.View; import android.widget.Button; import android.widget.EditText; import android.widget.ImageView; import android.widget.TextView; public class Application1Activity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final EditText editText1 = (EditText) findViewById(R.id.editText1); final Button clear = (Button) findViewById(R.id.clear); clear.setBackgroundColor(Color.CYAN); clear.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click editText1.setText(""); } }); final Button exit = (Button) findViewById(R.id.exit); exit.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click finish(); } }); final Button setLabel = (Button) findViewById(R.id.setLabel); setLabel.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // Perform action on click final TextView label = (TextView) findViewById(R.id.label); label.setText(editText1.getText()); } }); } }[/CODE] Step 2:

In your main.xml file copy and paste this code:

Listing 2: main.xml file code

[code] <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:background="#FFFFFF" > <TextView android:id="@+id/space1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textColor="#F02323" android:text="@string/welcome" android:textSize="24sp" /> <TextView android:id="@+id/space2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="" android:textSize="16sp"/> <I ...

So you have an app?

OK, you have just designed a killer application. What next? If not done already go to the android developers website to learn the ins and outs of publishing your Android app. Follow this link http://developer.android.com/guide/publishing/publishing.html to take you to the Publishing on Google Play page. Remember you’ll have to register as a Google Play Developer which costs about €20 (which is well worth it) and you’ll have to create a developer profile also.

Right, you’re all registered, your profile is all set and your app is on the Market, you’re delighted and you should be but wait, it’s not getting all the loving attention it should be? Your excitement is short lived. Don’t despair, there is still hope. We just have to get the app known. But how?

Making your app known

It’s great having the next big thing since slice pan but if no one knows about it, it’s no good to anyone right? Well there are many ways of getting your app known, it may take a bit of work or indeed money if advertising on other apps is concerned but if you’d like your app to be successful then this is what you can do.

There is the obvious one which is word of mouth but that only gets you so far. This way is useful though to get your app known in your locality. To get chins wagging on a larger scale you can go to your android developer profile and choose to ‘Advertise this app’ under the word ‘Published’ on the far right hand side of the Google Play Android app listings. It shows you a preview of what the app will look like on other apps on clicking. When you click get started you are taken to the ins and outs of the advertising campaign, budget per day ($10 min), Group type, Targeting etc. This is very useful but it does cost money. Remember not everything in life is free but you can get your app known in various other ways that don’t cost money.

Targeting your De ...

Where do I Start?

When starting your first Android Application, it’s important not to get too daunted. Take each step at a time and you’ll be fine. When starting my first Android app I first brainstormed all the ideas I had. I ended up with two pages of ideas. I then eliminated all the ones I didn’t like that much and eliminated ones that were already overdone.

Once you have it whittled down to a few app ideas, it’s best practice to choose one that you can actually do. Choose something that can be simple yet you can always make it more complex in the future. OK now you’re ready to go, you have your idea. Now it’s time for the Design!

Designing your first App

Now you have the idea, it’s time to make that idea a reality, i.e. a full functional app. I found it useful to draw out the screens and to draw in the layout for each screen. It’s good design practice to do this. It will serve you well when you actually start creating the app. Here is where you have to make some important design decisions.

Keep in mind the number of items on screen. Will it be too crammed? Will it look good? Does the look suit the target audience etc. Also keep in mind usability, functionality and if you can actually achieve what you set out to do. Choose what colour the screens will be, how many screens there will be, how will the menu screen look and work? It’s good practice to have the same theme throughout your app, e.g. white background throughout the app. See my Irish Tin Whistle App as an example here https://play.google.com/store/apps/details?id=fas.project.android&feature. I’m also a fan of the splash-screen/welcome screen. It’s a nice touch but not necessary.

Don’t worry too much about implementing positioning and layout, the software program we will be using has a graphical aid to help you design the layout of your screens, how good is that! You can decide where the items go on the screen etc. It’s a real handy tool to see how it will look like in the actual application. OK you got ...