Android Tutorial for Beginners: Part 3

An Intent to Show the Detail Activity

Now that you’ve set up your manifest to be aware of your DetailActivity, you need to send it an Intent to start it! This Intent is going to originate from the MainActivity, when the user selects a book from the list.

If you recall, the method that executes when a cell is selected from the ListView is onItemClick in MainActivity.java. It used to log information originally but now is empty. Add the following code to it:

// 12. Now that the user's chosen a book, grab the cover data
JSONObject jsonObject = (JSONObject) mJSONAdapter.getItem(position);
String coverID = jsonObject.optString("cover_i","");

// create an Intent to take you over to a new DetailActivity
Intent detailIntent = new Intent(this, DetailActivity.class);

// pack away the data about the cover 
// into your Intent before you head out
detailIntent.putExtra("coverID", coverID);

// TODO: add any other data you'd like as Extras

// start the next Activity using your prepared Intent
startActivity(detailIntent);

Here, you create an Intent to take you from where you are now (this) to an instance of DetailActivity. But before you fire off the command using startActivity, there’s one more thing to remember to pack away.

As you’ve previously seen when you created setShareIntent, you can pack “extras” into an Intent in the form of key-value pairs. Since your DetailActivity needs to know the cover ID to display, you extract that ID from the book’s JSON data and send it along.

Build and run your app, and you will be able to click on a list item from your search results to see your new DetailActivity! You can also navigate back to the main screen using either the Up or Back button.

Right now, you only see the placeholder image, but you know where this is headed :]

Add the following variables at the beginning of DetailActivity.java (right after the class definition line):

	private static final String IMAGE_URL_BASE = "http://covers.openlibrary.org/b/id/"; // 13
	String mImageURL; // 13

This sets the base URL for cover images on the Open Library API. You also create mImageURL to hang onto any specific URL so that different methods within your Activity can use it without needing to create the image URL all over again each time.

Next, add the following code to the end of onCreate:

// 13. unpack the coverID from its trip inside your Intent
String coverID = this.getIntent().getExtras().getString("coverID");

// See if there is a valid coverID
if (coverID.length() > 0) {

    // Use the ID to construct an image URL
    mImageURL = IMAGE_URL_BASE + coverID + "-L.jpg";

    // Use Picasso to load the image
    Picasso.with(this).load(mImageURL).placeholder(R.drawable.img_books_loading).into(imageView);
}

The above code digs into the Intent that brought you to this Activity and sees if it contains a String with the name coverID. If so, the Picasso Library will download the image, just as you did in all the row cells. You display a “loading” image until the desired image is ready.

Build and run, and you’ll see the actual cover for the book you chose from the list!

Sharing the Image

The last thing to do is allow your users to share these cover images. You’ve already seen sharing in action and the code is almost identical here.

First, add another variable to the top of DetailActivity.java:

ShareActionProvider mShareActionProvider; // 14

This is just another variable to hold a reference to the ShareActionProvider for your Activity. Make sure you import the right ShareActionProvider. It should match the import in your MainActivity.java class.

Next, add this new method to the class:

private void setShareIntent() {

    // create an Intent with the contents of the TextView
    Intent shareIntent = new Intent(Intent.ACTION_SEND);
    shareIntent.setType("text/plain");
    shareIntent.putExtra(Intent.EXTRA_SUBJECT,
            "Book Recommendation!");
    shareIntent.putExtra(Intent.EXTRA_TEXT, mImageURL);

    // Make sure the provider knows 
    // it should work with that Intent
    mShareActionProvider.setShareIntent(shareIntent);
}

This should look very familiar, as it is nearly the same as the method added to MainActivity earlier. The only difference is the use of mImageURL as the text to be shared.

One final thing left to do – adding the share button to the Action Bar. You can again reuse code from MainActivity. Add this method to DetailActivity.java:

@Override
public boolean onCreateOptionsMenu(Menu menu) {

    // Inflate the menu
    // this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);

    // Access the Share Item defined in menu XML
    MenuItem shareItem = menu.findItem(R.id.menu_item_share);

    // Access the object responsible for 
    // putting together the sharing submenu
    if (shareItem != null) {
        mShareActionProvider
                = (ShareActionProvider) MenuItemCompat.getActionProvider(shareItem);
    }

    setShareIntent();

    return true;
}

Here, you could potentially use different menu XML files to populate the Action Bar on different screens/activities. But for your purposes, the same menu/menu_main.xml file will do.

Build and run your app, and you’ll have a pretty powerful app! Your app now takes in your search query, returns a list of books,allows you to take a closer look at a book cover, and share that cover image with friends!

Where to Go From Here?

Congratulations on putting together your app! This tutorial has introduced you to a variety of Android capabilities and techniques, and I hope you feel comfortable with the basics of development on the Android platform.

You can get the full source code for this app on GitHub or as a zip.

If you’re looking for a few more challenges, how about trying some of these?

• Add a contentDescription attribute to your ImageViews for accessibility. Here’s an explanation.
• Display more details about the book in the Detail View, like more information about the book or even the first few lines of the book.
• Reposition some of the views to a different layout structure.
• Investigate android:background and add background colors to your layouts and views.
• Add a hashtag to the share text.

Thank you for following this tutorial series. Please leave any comments or questions below!

The Android robot is reproduced or modified from work created and shared by Google and used according to terms described in the Creative Commons 3.0 Attribution License.