Android Tutorial for Beginners: Part 3

Note: We have a more up-to-date version of this tutorial here. We recommend you check that out instead. Enjoy!

This tutorial is the third and final part of the series devoted to helping you make your first Android app! Check out Part One to get started with Android and Part Two to learn more about Android UI and project structure.

In this final part of the tutorial, you’ll learn how to leverage the powerful capabilities of the web to search and display data and images. More specifically, you’ll make an app that searches the Open Library API — a database of over 20 million books —, displays information and cover images of the books it finds, and allows you to recommend books to friends!

When you’re done, you’ll know how to:

• Add powerful third-party libraries to your app via Gradle;
• Access a typical RESTful API;
• Understand JSON format and parse JSON results;
• Responsibly download web images without affecting your UI performance;
• Customize list cells with multiple views; and
• Build intuitive native app navigation between activities.

These are very useful and transferable skills for all sorts of Android apps you’ll want to make in the future.

To begin this part of the tutorial, you should be at the point where you have an app that takes user input, lists names, and shares messages through social networks. Your app should also ask for your name when you first open the app and greet you by name thereafter. The final version of the source from Part 2 is also available on GitHub or as a .zip.

So the personal part is done — now it’s time to interwebify!

Getting Started

It’s time to do a bit of rebranding. No longer is this just a little demo app — it is a book search and recommendation engine!

The default Android icon can only take you so far. Download the following files and drag them onto the src/main/res/drawable-hdpi directory to add them to your project:

• ic_books.png
• img_books_large.png
• img_books_loading.png

Click OK when asked to confirm the move.

Your src/main/res/drawable-hdpi directory should now look something like this:

Only the hdpi assets are provided here. For future projects, it is a good idea to add assets for the other dpi values as well.

If you have trouble finding the hdpi folder in the drawables folder. Studio may be defaulting to it’s “Android” project view structure. Change this to “Project” by clicking on the large button to the left just above the project hierarchy on the left. Once you have imported the images you can change back if you prefer

Open AndroidManifest.xml. As you recall, this is “the boss” of your app. If you want to change the app’s icon, you need to talk to the boss.

Find the opening application tag and change the icon attribute line from:

android:icon="@drawable/ic_launcher"

To:

android:icon="@drawable/ic_books"

From now on, the app icon will be a stack of books instead of the default Android icon. Depending on your Studio version (and/or SDK version) you may also see that the application has an attribute for setting the application name. You’re going to update the application name as well, but not in the manifest.

First, while you’re still looking at the manifest, you need to let the manifest know that you plan to start accessing the Internet. Between the uses-sdk and application tags, add the following:

<!-- NEED TO ADD TO BE ABLE TO GO ONLINE AND GET DATA -->
<uses-permission android:name="android.permission.INTERNET"/>

If you don’t let “the boss” know your plans, it won’t file the appropriate paperwork with Android to make the web call happen. But now you’re good to go.

Now it’s time to change your app’s name. Open res/values/strings.xml and replace the strings for everything except action_settings with the following new values:

<string name="app_name">Bookmaster General</string>
<string name="textview">Search For Books!</string>
<string name="button">Search</string>
<string name="hint">Title and/or Author</string>

That’s right — I used the title Bookmaster General.

Finally, remove this line from onCreate in MainActivity.java:

mainTextView.setText("Set in Java!");

Run your app, your device or emulator’s home screen should reflect the name and icon updates. For example:

Now that you’ve rebranded your app, it’s time to start adding the web interactions!

Networking Considerations

There are a lot of things to keep in mind when adding networking capabilities to your app.

For example, you need to consider how to keep all the network interactions off the UI thread, so that the user can continue to use your app without everything locking up until a download completes. If you were using an app and it became completely unresponsive for lengths of time, you’d get pretty frustrated!

You will also find Android will ask your user if they would like to quit an unresponsive App, which isn’t great for your App if people are scrambling to leave it as quick as they can.

Thankfully, you can solve issues such as this by simply using third-party libraries. These have been specially designed and supported by Android experts to facilitate networking. Some of the most well-regarded include Retrofit, Volley, and Android Async Http. For the purposes of this tutorial, you’ll use Android Async Http.

Image downloads are also a consideration since each image takes time to download. Also, in the case of a list of books, if you have your list set to download images as needed, you might find that you end up downloading the same image over and over as your user scrolls through the list of items. You really don’t want that type of behavior. You’ll use another third-party library called Picasso to manage image downloads for you.

A way to easily manage your project’s dependencies would sure be great! That leads us to Gradle.