Getting Started with Android Development

Constructing a Detail Page

Next we want to extend our app a bit so you can tap a quote to see it in full detail. It will show a large size picture and the quote written at the bottom.

Step 1: Creating the UI

Lets begin with creating the layout for this screen. Create a new xml file in the res/layout directory and name it “quote_detail.xml”. Add the following lines to the file:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
    <RelativeLayout 
        android:layout_width="fill_parent" 
        android:layout_height="fill_parent">        
        <ImageView
            android:id="@+detail/image"
            android:layout_alignParentTop="true"
            android:layout_width="fill_parent"
            android:layout_height="350dip"
            android:layout_marginLeft="5dip"
            android:src="@drawable/steve_1" />        
        <TextView 
            android:id="@+detail/quote"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@detail/image"
            android:textSize="24dip"
            />        
    </RelativeLayout> 
</ScrollView>

Here notice that the root view is a scroll view and it has only one child, which is a relative layout. This relative layout contains our image view for the picture and text view for the quote.

The reason why a scroll view is used is since the quote could be long there is a possibility that it might go of the screen. A scroll view is smart enough to understand when its child view is bigger than the screen size and will automatically give you a scroll bar to scroll down.

Step 2: Adding the Quote Detail activity

Lets add the Quote detail activity this is responsible for presenting the quote_detail.xml layout to the user.

First create a new class and name is QuoteDetail, make sure that it extends Activity. Override the onCreate function and set the content of the activity to quote_detail.xml. At this point QuoteDetail.java should look like the following:

public class QuoteDetail extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.quote_detail);
    }

}

Step 3: Connecting two activities

An activity in android is instantiated with an Intent, the details of an intent are not in the scope of this tutorial. But all you need to know is that an Intent is used to start an activity.

In QuoteReaderActivity.java add the following at the end of your onCreate function.

mListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override
public void onItemClick(AdapterView arg0, View arg1, int position,
					long arg3) {
	Intent i = new Intent(QuoteReaderActivity.this, QuoteDetail.class);
	i.putExtra("position", position);
	startActivity(i);
	}
});

What we are doing here is fairly straightforward. We are setting an item click listener and every time an item is clicked we create an Intent.

Notice that we pass the position variable to the intent, this is used to represent the position in the data source for the item clicked.

Next add the following lines in QuoteDetail.java:

private ImageView mImageView;
private TextView mQuote;
private int mPosition;
private DataSource mDataSource;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.quote_detail);

	Intent i = getIntent();
	mPosition = i.getIntExtra("position", 0);

	mDataSource = new DataSource();
	mImageView = (ImageView) findViewById(R.detail.image);
	mQuote = (TextView) findViewById(R.detail.quote);

	mImageView.setImageResource(mDataSource.getmPhotoHdPool().get(mPosition));
	mQuote.setText(getResources().getString(mDataSource.getmQuotePool().get(mPosition)));
}

As you can see we retrieve the position sent by the QuoteReader activity from the intent and use that to fill in the image view and the text view.

One last thing we need to do before you can run the application is to add an entry for this activity in your manifest. Lets not get into the details of the manifest but take it as a thumb rule to always add any new activity to the manifest.

So add this line to the manifest (AndroidManifest.xml):

<activity android:name=".QuoteDetail" 
    android:screenOrientation="portrait">            
</activity>

Now its time to finally run the application. You should have a complete working app with both a master and detail view!

Uploading to the Android Market

Before I end the tutorial, I wanted to write down the steps to follow to upload an application to the android market. Here is a brief step-by-step guide:

• First you need to get yourself a developer license by signing up here. Its costs an affordable $25 to get one.
• Next you need to obtain a suitable private key. This key will be used to sign your application. To do this use the keytool command, enter the following command in a terminal:

keytool -genkeypair -v -keystore YOUR_KEY_NAME.keystore -alias YOUR_ALIAS_NAME 
    -keyalg RSA -keysize 2048 -validity 10000

• Running the example command as above, Keytool prompts you to provide passwords for the keystore and key, and to provide the Distinguished name fields for your key. It then generates the keystore as a file called YOUR_KEY_NAME.keystore. The keystore and the key are protected by passwords you entered.
• Now you need to compile our application in release mode. In eclipse right click on the project and select Android Tools\Export Signed Application Package. Then specify the keystone and password information you set up previously.
• That’s all; your APK is ready to upload to the android market!

More information on Android

• Here are a few blogs that I think have real solid content:
  • Android developer blog
  • Romain guy’s blog
  • Daniel lews coding thoughts
• Videos: Once you think that you have a basic grasp on android, the Google I/O videos are a great source.
• Books: I personally started off with Professional Android Application Development by Retro Meier and I strongly recommend it for any beginner. Another highly recommended option is the set of books by CommonsWare, such as this one.

Where to go from here

Here is the complete example project with all the code from the above tutorial.

At this point, you should have a very basic understanding of how things work in the Android world. This should give you a good start to explore and create amazing apps.

You’re ready to move on to the next part in this series on Android development, which will take you through some major improvements to the QuoteReader project. Along the way, you’ll learn more key Android concepts.

If you have any questions, comments, or suggestions, please join in the forum discussion below!

Note from Ray: If you enjoyed this tutorial and/or want more Android tutorials here in the future, please let us know in the comments for this post!

This is a blog post by iOS Tutorial Team member Ali Hafizji, an an iOS and Android developer living in India.