How to create a storybook for android

Our first storybook, available in the iPhone App Store and in the Android Market, is “Gray Kitty Comes Home”. The app is free so download and enjoy.   In this post I will describe how to create a simple storybook app similar to “Gray Kitty Comes Home” for the android platform. In a later post I will describe how to create the same app on the iPhone.

All the code shown in this post is available in the following file:
Code for How to create a storybook on the Android platform

The model storybook app will have four pages of art. These are .png files with dimensions of 480wx275h with a resolution of 72ppi that will be the pages of the storybook.

The image files are available
abookpage1.png
abookpage2.png
abookpage3.png
abookpage4.png

Here is a screen shot of the first page:

The Process:

Step 1) Using Eclipse Create a new android project.  I used the name “StoryBook” and the package name  example.storybook.one

Step 2) Copy the art for your storybook into the “drawable-mdpi”

Setp 3) Create the four .xml   files for the pages.  My code for the first page is page1.xml  and  is:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:background="#CC0000" 

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <Button

        android:id="@+id/next"

        android:layout_width="80dip"

        android:layout_height="35dip"

        android:layout_alignParentBottom="true"

        android:layout_alignParentRight="true"

        android:text="Next" />
    <Button

        android:id="@+id/previous"

        android:layout_width="80dip"

        android:layout_height="35dip"

        android:layout_alignParentLeft="true"

        android:layout_alignTop="@id/next"

        android:text="Previous" />

 <ImageView

   		android:id="@+id/abookpage1"

   		android:layout_above="@id/next"

   		android:layout_centerHorizontal="true"

   		android:src="@drawable/abookpage1"

   		android:layout_width="wrap_content"

   		android:layout_height="wrap_content"   />

</RelativeLayout>

This code creates the layout for the image and the two buttons. You will need one layout for each page so
create 3 more files:  page2.xml, page3.xml and page4.xml changing the highlighted text as follows:

For page 2:  abookpage2  and #627F3A (the background color)

For page 3:  abookpage4  and #DCCD29  (the background color)

For page 4:  abookpage4  and #8A4C56  (the background color)

At this point you should have the four page .xml files in the layout folder and the four art pages in the drawable-mdpi  folder.  By clicking the layout tab in eclipse you can preview the layout.  You should see the art plus two buttons “Previous” and “Next”.

Step 4) Edit the StoryBook.java file  delete the default code and replace with the following:

package example.storybook.one;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.Window;

import android.view.WindowManager;

import android.view.View.OnClickListener;

import android.widget.Button;
public class StoryBook extends Activity {
    /** Called when the activity is first created. */

	private int index = 1;

    private Button nextButton;

    private Button previousButton;
	@Override

//=============================================================================
    public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,

        WindowManager.LayoutParams.FLAG_FULLSCREEN);  
        updateview();

    }   //end onCreate

//=============================================================================

private void updateview(){
	if (index>=5) index = 1;

	if (index<=0) index = 4;
	  if (index==1) {

		  this.setContentView(R.layout.page1);nextprocess();previousprocess();};

	  if (index==2) {

		  this.setContentView(R.layout.page2);nextprocess();previousprocess();};

	  if (index==3) {

			  this.setContentView(R.layout.page3);nextprocess();previousprocess();};

	  if (index==4) {

			  this.setContentView(R.layout.page4);nextprocess();previousprocess();};

}// end updateview

//=============================================================================

private void nextprocess(){
	this.nextButton = (Button)this.findViewById(R.id.next);

    this.nextButton.setOnClickListener(new OnClickListener() {

        @Override

        public void onClick(View v) {

        	index = index+1;

        	updateview();

        }

      });

}// end nextprocess

//=============================================================================

private void previousprocess(){
	this.previousButton = (Button)this.findViewById(R.id.previous);

    this.previousButton.setOnClickListener(new OnClickListener() {

        @Override

        public void onClick(View v) {

          index = index-1;

          updateview();

        }}

      );

} // end previouseprocess

//=============================================================================

}//end class  Story Book

Step 5) The last thing to do is to edit the manifest file  “AndroidManifest.xml”  and add the highlighted code  to provide a landscape orientation for the book.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

      package="example.storybook.one"

      android:versionCode="1"

      android:versionName="1.0">

    <application android:icon="@drawable/icon" android:label="@string/app_name">

        <activity android:name=".StoryBook"

        android:screenOrientation="landscape"

                  android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest> 

Step 6) Run the program and enjoy.

In a later post I will show how to add sound files.