Creating the Android Activity Project

Android Activities: 1 2 3 4 5 6 7 8

In this tutorial, you will create an app with two Activities. A button on the first Activity will be used to launch the second one. You will then learn how you can get back to the first Activity.

Start a new project in Android Studio by clicking File from the menu bar at the top. From the File menu, select New > New Project. If you have closed down all your projects in Android Studio, however, you'll see this screen:

The Welcome to Android Studio screen

On the left, is a list of projects you have created previously. You can click one of these to reopen that project. Click Start a new Android Studio project, though, to launch the following screen:

New Android Studio Project dialogue box

Type TwoActivities as the Application name. Click the Next button at the bottom. Leave the selections on the Target Android Devices screen on their defaults:

The TArget Android Devices screen

Click Next. When you get to the next screen, which is Add an Activity to Mobile, make sure that Empty Activity is selected. When you click Next on this screen, you'll then see this:

Customize the Activity screen

Make sure that Generate Layout File and Backwards Compatibility are selected, then click Finish.

Clicking Finish will create a new Android Project the same as the previous one you created. The project has a Java class file called MainActivity, and a Layout file called activity_main. As before, the Java file points to the layout file that you want to load when the app starts:

setContentView( R.layout.activity_main );

Select the activity_main file in the editor so that it is displayed rather than the Java file. You should see a screen like this one:

Android Studio design view

The Activity showing has a TextView with the text Hello World. You can also see a blueprint of the layout. You can show and hide the blueprint by clicking the icon in the toolbar:

Design View Icons

Clicking the first of the three hides the blueprint; clicking the second one shows the blueprint, and hides the white design; clicking the third icon shows the blueprint and design side-by-side. Click the left icon to show just the white design surface.

Incidentally, you can zoom in and out of your design by clicking the zoom buttons in the top right of the toolbar:

The zoom icons

Now turn on AutoConnect in the toolbar: (In the previous section, we had this turned off.)

The AutoConnect icon in the Android Studio toolbar

The AutoConnect icon is the one to the right of the eye. Make sure there is no line through the little magnet. You should see a caption appear saying "Turn Off AutoConnect". When AutConnect is turned on, Android Studio will add the constraints we need. It does a god job for simple designs like this one.

Click your TextView to select it, and you'll see the jaggy lines, indicating that constraints have been added to it:

A TextView with constraints

There is a constraint from the top of the TextView to the top edge of the screen. There are also constraint from the left, right and bottom of the TextView to the sides. This will keep the TextView in the middle.

Now locate the Palette on the left of the Design View. Select the Button view:

The palette showing the Button widget highlighted

Hold down your left mouse button on the Button View. Kept it held down and drag a button on to your white design surface. Drag your button to just below the Text View, which is included by default when you create a new project:

A button widget being dragged into position

Let go of your left mouse button and the designer will look like this:

A button in design view

Notice the new jaggy lines around the button. These are showing you were the constraints are. Because AutoConnect is turned on, Android has guessed that this is where you want the constraints.

If you need to increase or decrease the size of your button, you can use the blue sizing-handle squares. (But this gives you a hardcoded value for the size. We like to avoid doing this as it doesn't get you a responsive design. A responsive design will adapt itself no matter what the screen size is.)

We can change the text on the button. With the button selected, have a look at the properties area on the right:

Properties for the button widget

Locate the TextView > text property (the first one). Just like in the previous section, we want to use a string value from the strings.xml file. Click the small button just to the right of the textbox:

The Resources button

This brings up the Resources dialogue box you met in the previous section. In the top right, click Add new resource > New string value. For the Resource name, type activity_one_button. For the Resource value, type Show Activity Two:

Adding a new string resource

Click OK on the dialogue boxes to return to Android Studio. The button in your designer will then look like this:

A button with a string resource

Exercise
Add a new string value for the Text View, just like you did for the button. For the Resource name, type first_activity_label. As the Resource value, type First Activity. When you're done, your TextView will look like this:

A TextView with a string resource added

One thing you may have noticed is the red square in the top right. Click the red square to reveal the warnings:

A warning in Android Studio

The warning is for the button. It's telling us that it is not constrained properly in the vertical. To fix that, make sure your button is selected. Locate the Infer Constraints icon in the design toolbar:

The Infer Constraints icon

Click on the yellow plus symbol, just to the left of the 8. Your designer will then look like this:

Letting Android Studio infer the constraints

You may be left with only 1 warning now, something about an obsolete version of the constraint library. You might not want to upgrade to the new library just yet, as this caused some issues for us when we attempted it.

OK, now let's get some coding done. In the next lesson, you'll learn how to code for Android button clicks.