Android Studio for beginners

Android Studio for beginners, Part 2: Explore and code the app

Write your first animated Android app with Android Studio's Project editor

1 2 Page 2
Page 2 of 2

You might recall that when we set up the app in Part 1, we selected the empty activity template. It turns out the XML layout this template provides isn't appropriate for our app. To choose a new layout, start by clicking the main.xml tab. Android Studio responds by displaying a user-friendly layout editor:

figure2 Jeff Friesen

Figure 2. Android Studio's layout editor (click to enlarge)

Before we move on, click the Text tab (the Design tab is shown by default) at the bottom of the main.xml tab. Replace the template XML with the code from Listing 2 (above), then save the contents of this window.

Coding the Android app's strings.xml

W2A relies on strings.xml to store string data that is referenced from other locations. Refer back to Listing 2 and you'll notice that the <Button> tag includes an android:text="@string/animate" attribute. This attribute references the button's text via @string/animate, which references a string resource named animate that's stored in strings.xml. Listing 3 presents this file's contents.

Listing 3. strings.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="app_name">W2A</string>
   <string name="animate">Animate</string>
</resources>

As well as animate, Listing 3 reveals a string resource identified as app_name. This resource ID identifies the app's name and is referenced from the app's AndroidManifest.xml file, typically from the label attribute of the application element start tag.

Save strings.xml

In your Project window, the values subbranch of the res subbranch includes a strings.xml subbranch. Double-click this subbranch to show the strings.xml tab, then replace its contents with Listing 3 and save the changes.

Coding the Android app's animate.xml

Finally, W2A relies on android_animate.xml, which stores an animation list of drawable items. Listing 4 presents the contents of this file.

Listing 4. android_animate.xml


<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
                android:oneshot="true">
   <item android:drawable="@drawable/android0" android:duration="500" />
   <item android:drawable="@drawable/android1" android:duration="500" />
   <item android:drawable="@drawable/android2" android:duration="500" />
   <item android:drawable="@drawable/android0" android:duration="500" />
</animation-list>

Listing 4 starts with an animation-list element that describes the drawable sequence. This element's oneshot attribute determines if the animation will cycle in a loop (when this attribute is assigned "false") or occur only once (when it's assigned "true"). When "true" is assigned to oneshot, you must invoke AnimationDrawable()'s stop() method before its start() method to generate another oneshot animation sequence.

Nested inside the animation-list element is a sequence of item elements. Each item element identifies one drawable in the animation sequence via its drawable attribute. The @drawable/androidx resource reference (where x ranges from 0 through 2) identifies an image file whose name starts with android. The duration attribute identifies the number of milliseconds that must elapse before the next item element's drawable is displayed.

Save animate.xml

In the Project window, right-click the drawable subbranch of the res subbranch. Figure 3 shows the resulting pop-up menu.

figure3 Jeff Friesen

Figure 3. Add android_animate.xml as a new drawable resource (click to enlarge)

Select New from the pop-up menu, followed by File. Figure 4 shows the resulting Choose Destination Directory dialog box.

figure4 Jeff Friesen

Figure 4. Choose between drawable and drawable-v24

Classic drawable resources such as images are stored in the drawable folder. In contrast, vector drawables are stored in drawable-v24. For this project, keep the drawable default and click OK. You should now see the New File dialog box.

figure5 Jeff Friesen

Figure 5. Enter android_animate.xml

Type android_animate.xml into the Enter a new file name text field and click OK. (You'll see an android_animate.xml subbranch under the drawable subbranch.) Then, replace the contents of the resulting android_animate.xml tab with the code from Listing 4 (above) and save the changes.

You'll also need to copy the android0.png, android1.png, and android2.png files (referenced in Listing 4) from the source code associated with this article to the drawable branch. Assuming you're working in Windows, select these files from Windows Explorer and paste them into the android_animate.xml branch (right-click the branch name and select Paste).

Conclusion to Part 2

In Part 2, you've had a first look at Android Studio's Project and editor windows. You've explored the general architecture of an Android application, and you've coded a simple, animated Android mobile app. Turn to Part 3 when you're ready to build and run the animated Android application.

1 2 Page 2
Page 2 of 2