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.

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.

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

packagecom.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;

publicclassMainActivityextendsActivity{

Button button;

@Override

protectedvoidonCreate(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(newOnClickListener(){

publicvoidonClick(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

publicbooleanonCreateOptionsMenu(Menu menu){

// Inflate the menu; this adds items to the action bar if it is present.

getMenuInflater().inflate(R.menu.main,menu);

returntrue;

}

}

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

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

1

2

3

4

5

6

7

8

<resources>

<stringname="app_name">Android Text Image Tutorial</string>

<stringname="action_settings">Settings</string>

<stringname="hello_world">Hello world!</string>

<stringname="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).