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:
Screen shot of page 1
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.
To start of the process I cut the pieces and basted them together to see if the fit was even close. In the bodice it was. I would need to adjust the yoke, the sleeves, and the neck. The instructions showed where to add fabric for the sleeves. I am on my own for the neck and yoke. More about those adjustments later.
Step 1 shows the following:
The Results:
