Learn Android: Hello World App – Making it Personal

Last tutorial focussed on setting up Android Development Tools (ADT) and getting a simple Hello World application running on an Android Virtual Device. This time we will look at how the Hello World App works by looking at the layouts and some code. We will learn about Activities, what they are for and how we can get them talking to each other to make more than one screen in the application. We will look at how to get input from the user and how to link a button to an action.

This is quite a big leap up from the first tutorial, but I think it’s achievable with the right explanations so brace yourself and take it slow. There’s no need to rush through and the longer you take thinking about it the easier it will be to absorb.

Assuming that you followed the previous tutorial in this series (if not, catch up by visiting here) you should have ADT installed and will have set up an Android Virtual Device which you can start via the Android Virtual Device Manager. Alternatively you have an Android device connected and enabled for app development in its settings.

By the end of this tutorial, you will have a functioning app with a primary screen which asks for your name and a transition to a second screen will have your app say hello to you by using your name.

Setting Up a New Project

With ADT open, you should be able to see in the list of projects the previous project we were working on, Hello World. Right click anywhere in the white space in the Projects list and choose New and then Android Application Project as shown in the screenshot.

hello world app

 

A dialog will appear asking for the Application settings. Use the settings shown in the screenshot for this dialog, press Next throughout all other screens in this dialog before clicking Finish.

java hello world example

The new project will then appear in ADT and the file activity_main.xml will be shown. At this point, the project is almost exactly the same as the Hello World application we developed in the last tutorial and we can investigate what ADT has provided for us.

Investigating the Hello World App

hello world app
Take a look at the Package Explorer as shown in the screenshot. I’ve opened up some of the folders in our project to show the files we will be looking at. The files are as follows:

  • MainActivity.java – this is the Java code which makes the Hello World screen work. Every screen in an app has a .java file associated with it.
  • ic_launcher.png – this is the image used as the icon for the app. This is displayed on the apps screen on the Android device. There are four folders for app images (drawables), but for now you shouldn’t worry about any other than the mdpi one – more on this in another tutorial.
  • activity_main.xml – this is a file which describes the layout of the main activity in the app. Just like the .java file, it is usual for every screen in an app to have a layout XML.
  • strings.xml – this file contains all the strings used in your app. A string is programming speak for text. The reason these are in a separate file is so that if you decide to go international, it is easier to translate all the text used in the application all at once.
  • AndroidManifest.xml – this is the most important XML file in the whole app as it lists out all the Activities your app uses and defines things like which one should be the first one to be shown.

android hello world appAny of these files can be opened by just double-clicking them. Let’s have a look at activity_main.xml since that should already be open. ADT gives you a graphical editor and you can see the text “Hello world” written in the middle of the design. This is a TextView and lets you display text in your screens to the user. The text shown in this design is only what it will initially say and you can change the text whilst the screen is showing by writing code in the corresponding .java file for this screen (In this case MainActivity.java).

The XML layout file should only be used as a means of laying out your screen so that it looks the way you initially want it to look. You can also layout your designs by writing XML directly. If you click the tab below the graphical editor labelled “activity_main.xml” then you get to see the XML that draws what you see in the screenshot. The code should read as shown here.


What this code specifies is that the whole screen is covered by a RelativeLayout. This type of layout lets you arrange things like text boxes and buttons so that they line up with other things in the layout or with the edges and centre of the layout itself. Some of the attributes of the RelativeLayout state that it should match the parent (in this case the screen) for width and height, therefore filling the screen.

Inside the RelativeLayout is a TextView which has been told to set its width and height just big enough to contain its contents. It has also been told to centre itself horizontally and vertically in the RelativeLayout, therefore placing it in the centre of the screen. The text is defined as @string/hello_world which is a special way of saying that the actual text is in the strings.xml file and has the name hello_world.

Double-click the strings.xml file and we will see how this is formatted. Again, you can edit this file graphically which is the default setting, but if we click the strings.xml tab at the bottom of the editor, in the same location as the tab which revealed the code above, we will see the actual XML which will be as shown here. There are three strings currently defined. app_name is used for the application icon name and the title in the application. hello_world is the text we saw in the layout above and menu_settings is what is shown on the menu for the application. We will add a little more to this file later.


 

Let’s take a look at the contents of the AndroidManifest.xml – start by double-clicking the file in the project. As with other XML files, you’ll need to choose the filename again at the bottom of the editor to see the actual XML. Whilst the graphical editors are nice, they can be a burden and slow you down and they are hard to explain in full here.


 

This is quite a large file and it gets a lot bigger in larger applications. The most important features to note are that our app uses the ic_launcher drawable as the icon (line 13), uses the app_name string for the icon label (line 14) and has one activity called com.alychidesigns.helloyou.MainActivity (lines 17 to 25). Notice how the name of the activity also has the whole package name in front of it.

This is to tell the manifest that we mean the activity in our application, not another activity by the same name in another application. The intent filter is particularly important because it tells Android that this is the activity we want the application to start with. This will become even more important when we have two activities.

Finally let’s take a look at the Java code behind the Hello World screen by double-clicking MainActivity.java.


 

Focussing on the important parts, line 10 is the start of a method called onCreate. Methods are pieces of code which perform a function. In this case the function of this method is to put together the screen for this activity. Ignoring the first list which has the word super in it, the line after tells Android to use the layout.xml file called activity_main.xml that we were looking at earlier and to load the contents of that XML file as the contents in the view. In simple English, we ask it to load the XML file and put it on the screen for us. We won’t concentrate on the code elsewhere in this file just yet. Let’s get on with making our improved app.

Making the Hello You application

First things first, we should add a new activity which will be shown before the one that says “Hello world” and will ask for your name. For this, right click the layout folder in the Package Explorer and choose New then Android XML File. In the dialog that appears, enter a filename for the XML layout file. We will use activity_name.xml and then press Finish. The new XML file will be shown (if not in code view, switch using the tab below the graphical editor). Type the XML out so that it is the same as the code below.


 

Here we have used a LinearLayout which lays views out in a row or column. We have chosen vertical (line 6) so that the text box will sit above the button. By setting the gravity for the LinearLayout to center_horizontal (line 5) we are telling the views to sit in the centre of the screen horizontally.

The EditText view is a text box to accept the user’s name. We give the text box an ID (line 9) so that we can access it later. The @+id/ at the beginning of this ID tells Android to create a new ID for this view. The width is set to 200dp (line 10) – dp stands for density independent pixels, but more on this in another tutorial. The height (line 11) is set to wrap the contents, or in other words to only be as tall as necessary to show the text box properly. The hint (line 12) is a special link to the strings.xml file which we will update next. A hint shows in the box until the user starts typing in it.

The Button view is a simple button which will perform an action when touched. We set the ID to be continue_button, the width the same as the EditText view and the height to wrap the contents of the button. The onClick attribute (line 18) sets which method should be called in the .java file when the button is touched – more on this in a moment. The text on the button is defined by the string named button_continue in the strings.xml file.
In order for the strings to work, we need to update the strings.xml file, so double click it now. Change the string named hello_world so that it reads:

1
<string name="hello_world">Hello,</string>

This prepares the first part of a string for us to use once the user has entered their name. Then add the following two lines below the line for the string named menu_settings:

1
2

 

hello world app
This provides the strings for our new layout file. If you look at the graphical version of our layout XML file now, it will look like the screenshot shown here. The textbox and the button are centred horizontally, but otherwise are placed one after the other because of the LinearLayout. The hint text we placed in the strings file is shown and the button shows the text from the strings file as well.

Now we need to make the .java file to go with this layout. Right click the folder called com.alychidesigns.helloyou beneath the src folder (which stands for source by the way). Choose New and then Class which will open a dialog to create a new Java class file. In the name box, enter NameActivity and next to Superclass click Browse. A new dialog will appear and you should search for Activity by typing it in the text box at the top. Ensure that the entry called Activity – android.app is selected and choose OK then click Finish. The new file will be created and will be really simple. Change the contents of this file to read as shown.

Ignoring everything above line 9, line 10 tells Java that you are creating a new class called NameActivity (though it could be called anything so long as the filename matches) and that this class will use Activity as its superclass. This means that NameActivity is a more specific version of a generic Activity. Line 11 tells the class that we will want to remember an EditText box using a variable named nameBox that we can refer to in all methods in the class. We will use this to keep a track of the box for entering your name. In the onCreate method, starting on line 14, we load the activity_name.xml file we created and then we tell the nameBox variable from line 11 which EditText it will need to remember. We do this by using the findViewById method; a method of the Activity class we are extending which looks up the EditText view in the XML by the ID we give it. It then points the nameBox variable at that EditText view so that we can access that text box in methods other than just this onCreate method.

In the layout XML we told the button that when it is clicked it should call a method named buttonClicked. That method begins on line 21. The reason this method doesn’t have @Override written on the line before it is that whilst onCreate is part of the Activity class we are extending and so we have to override that method, this method called buttonClicked was just made up for this class so there is nothing to override. When that method runs, it creates something called an Intent. An Intent is a way of wrapping together the instructions needed to start a new Activity.

For this we need to pass the name of the user to the next activity so that it can make use of that information. Line 22 creates a new Intent and the two parameters in the brackets are the Activity which the intent is coming from (this) and the class of the Activity which the intent is going to (MainActivity.class). Line 23 puts the contents of the text box into the Intent under the keyword “Username”. Line 24 starts the activity using the intent. This causes the transition to begin.

In order to make use of the username once the MainActivity receives it, we need to tell it how to get to the Extra we put in the Intent. We need to also give an ID name to the TextView on the main activity screen. Open the activity_main.xml file and add an ID to the TextView by adding an extra attribute between existing lines 7 and 8:

1
android:id="@+id/hello_you"

Now open the MainActivity.java file and replace the contents so that it is the same as shown here.

Once the setContentView method has been performed on line 12, loading the XML layout into place, we work on accessing information in the Intent which caused this Activity to display. The extras bundle is extracted into a variable called extras on line 14 and then we call the method getString on the extras bundle using the same keyword we used in the previous Activity (In this case “Username”). This gets the text that was placed into the Intent which contains the user’s name and stores it in the variable username.

After we know the user’s name, it’s time to display it on the screen. We make a new variable helloYou on line 17 and point it at the TextView which usually displays “Hello world!” just like we did for the EditText view in NameActivity. Line 18 gets the prefix for the name from the strings.xml file using the method getString which is part of the Activity class that our class is extending. On line 19 we set the text on the helloYou TextView using its setText method and by putting together three strings in the brackets. prefix + " " + username takes the prefix string, adds a space to the end and then adds the user’s name.

Only one thing remains in the puzzle and that is to get the NameActivity to show before the MainActivity. We can do that by telling the AndroidMainfest.xml file that we have a new activity and we want it to be the launcher activity. Use the XML shown below to update your AndroidManifest.xml file and notice that we have moved the intent-filter away from MainActivity and into NameActivity instead.

Run your application using ADT’s Run menu and the Run command on that menu. You may be asked how you want to run your project and you can choose as an Android Application. After this, the Android Virtual Device or your own Android Phone should display the screen with a layout as we specified for entering your name. Give it a try! Put your name in and press the Continue button. You should find that your Android now welcomes you with a personal greeting.

Wrapping Up

I realise I may have gone a bit fast towards the end there but there’s only so much a tutorial can explain without making it hideously long. I hope that by being able to download the code from BitBucket as explained before and by re-reading the tutorial a second time you may grasp what’s going on.

Leave a Reply

Your email address will not be published. Required fields are marked *