Building Your First Android App

In this tutorial, you will learn how to build your first Android application using Eclipse and run it on an Android Virtual Device (AVD). We will create a button, textview and imageview in your Android XML graphical layout and on button click will show a text and image on your Android Virtual Device (AVD). So lets begin…

Before we proceed, lets do a quick recap on what you have learned in our previous post.

1. Installed Android ADT Bundle
2. Installed Java SE Development Kit (JDK)
3. Installed SDK Tools and Platforms
4. Setup Android Virtual Device(AVD)

CREATE AN ANDROID PROJECT

To create your first Android project, click on the icon “Opens a wizard to help create a new Android Project” as shown on screenshot below or click on File > New > Android Application Project.

Fill in the form that appears, look at sample below.

Application Name : TextImageTutorial

Project Name : TextImageTutorial

Package Name : com.androidbegin.textimagetutorial

The next section allows you to change your project workspace location. Click Next to configure launcher icon for your application icon as shown on the screenshot below. Follow the guidelines provided by Android on how to create your own custom application icon. Check out this link for more information.

Click Next, and choose “BlankActivity” as shown on the screenshot below.

The next section allows you to change your activity name as shown on the screenshot below. By default the activity is named “MainActivity“. The navigation type drop down menu allows you to implement fixed tabs, scrollable tabs and drop down menu in your Android application. However, we are not implementing it in this tutorial. Proceed by clicking on the Finish button.

If you somehow encountered a pop up that looks like the screenshot below. Just click Install/Upgrade. It is part of Eclipse IDE to automatically detect any missing components or dependencies that are required for your application development.

When you done installing all the necessary components, you should see your Android application project in your Package Explorer named “TextImageTutorial“. To understand more regarding Eclipse IDE and its functionality, check out this link.

Brief explanation regarding the folders in your Android application project.

src – All activities, classes and source codes goes into this folder.

libs – Private library packages created by developers or contributors goes into this folder.

res > drawable – All images that are required to run with your application are stored into the drawable folder. Check out this link for more information regarding drawables.

res > layout – Layout customization for your application, such as texts, images, buttons and etc are stored as an XML file. Check out this link for more information regarding layouts.

res > menu – Your menus customization goes into this folder. Check out this link for more information regarding menus.

res > values – This folder contains an XML file called string.xml . Strings are referenced from the application or from other resource files such as XML. Check out this link for more information regarding string resources.

AndroidManifest.xml – An AndroidManifest.xml file is where we declare permissions and activities for our Android application. Check out this link for more information regarding AndroidManifest.xml.

CODING YOUR ANDROID APPLICATION

Open MainActivity.java in your src folder and paste the following code.

MainActivity.java

package com.androidbegin.textimagetutorial;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {
	Button button;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		// Get the view from activity_main.xml
		setContentView(R.layout.activity_main);

		// Locate Button in activity_main.xml
		button = (Button) findViewById(R.id.button);

		// Button Click Listener
		button.setOnClickListener(new OnClickListener() {
			public void onClick(View arg0) {

				// Locate TextView in activity_main.xml
				TextView text = (TextView) findViewById(R.id.textView);
				// Set text to the TextView
				text.setText("Welcome to");

				// Locate ImageView in activity_main.xml
				ImageView image = (ImageView) findViewById(R.id.imageView);
				// Set image to the ImageView
				image.setImageResource(R.drawable.androidbeginlogo);
			}
		});
	}

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

}

We have implemented a button click listener to capture button clicks and on button click will show the text and image. We used “setText” to set texts into the TextView and “setImageResources” to set an image into the ImageView. On click method are used along with the button click listener to perform tasks on button clicks.

We have prepared a sample image for this tutorial. Put your downloaded sample image into your res > drawable-hdpi.
Sample Image

[wpfilebase tag=file id=75 tpl=download-button /]

Next, create an XML graphical layout for your MainActivity. Go to res > layout > Right Click on layout > New > Android XML File
Name your new XML file activity_main.xml and paste the following code.
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" >

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true" 
        android:textStyle="bold"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true" />

    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView"
        android:layout_centerHorizontal="true"
        android:text="@string/Button" />

</RelativeLayout>

Next, change the application name and texts. Open your strings.xml in your res > values folder and paste the following code.
strings.xml

<resources>

    <string name="app_name">Android Text Image Tutorial</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="Button">Button</string>

</resources>

Now run your application into an Android Virtual Device (AVD). You can refer to our previous post to learn how to set up an Android Virtual Device(AVD). To run your Android application, select your project in project explorer and click on the Run button as shown on the screenshot below or use the shortcut key CTRL-F11.

You will be prompt to select an Android Device. You can either use an Android Virtual Device (AVD) or a physical Android Phone.
Select “Launch a new Android Virtual Device” and choose your Android Virtual Device(AVD).

Output:

Source Code  

[purchase_link id=”7797″ text=”TextImageTutorial Source Code” style=”button” color=”green”]