Blog‎ > ‎

Android Webapp Guide

posted Jan 18, 2011, 9:41 PM by Leo - -   [ updated Feb 5, 2011, 2:31 AM by Louisa - - ]

The Basics

This is the demo project. We are going to create a new project based on this one. 

The directory ~/prj/android is essential.

Make A Copy of WebDemo

cd ~/prj/android/WebDemo
ant clean
cp -r ~/prj/android/WebDemo ~/prj/android/cvhod

*"cvhod" stands for Castlevania: Harmony of Dissonance, キャッスルヴァニア 白夜の協奏曲.

Changing Strings (URI, App Name, Package Name, etc.)

Rename source file

~/prj/android/cvhod$ mv src/org/superarts/android/webapp/WebDemo src/org/superarts/android/webapp/cvhod

Modify URI

~/prj/android/cvhod$ vim AndroidManifest.xml
  3     package="">
  3     package="">

Modify package name

~/prj/android/cvhod$ vim src/org/superarts/android/webapp/cvhod/ 
  1 package;
  1 package;

~/prj/android/cvhod$ vim res/layout/main.xml
  3     xmlns:myapp=""
  3     xmlns:myapp=""

Modify App Name

~/prj/android/cvhod$ vim res/values/strings.xml 
  4     <string name="app_name">演示程序</string>
  4     <string name="app_name">恶魔城——白夜的协奏曲完全解说</string>

Modify build script

~/prj/android/cvhod$ vim m
  4 adb uninstall
  6 # adb -s emulator-5554 install bin/WebDemo-debug.apk
  7 adb install bin/WebDemo-debug.apk
  4 adb uninstall
  6 # adb -s emulator-5554 install bin/cvhod-debug.apk
  7 adb install bin/cvhod-debug.apk

Project Update

~/prj/android/cvhod$ android update project --name cvhod --path .
File build.xml is too old and needs to be updated.
Updated file ./build.xml
Updated file ./proguard.cfg

After run ~/prj/android/cvhod/m, you should be able to see the app as above. Now we can start our actual work.

Working with Web Page

Editing Contents

~/prj/android/cvhod$ vim assets/demo.html 

 25 <div class="demo">
 26 <div id="accordion">
 27     <h3><a href="#">Section 1</a></h3>
 28     <div>
 29         <p>
 30         Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
 31         ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
 32         amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
 33         odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
 34         </p>
 35     </div>
 25 <div class="demo">
 26 <div id="accordion">
 27     <h3><a href="#">释名</a></h3>
 28     <div>
 29         <p>
 30         Concerto,便是所谓的“协奏曲”,词源是意大利语“Concert”(音乐会,同时有“协调”之意)。它的读法应该是[ken'cheatou],颇有
 31         <br>
 32         <br>
 33         “协奏曲”指的是这样一种音乐:它由一个交响乐队和一个(或几个)独奏乐器组成,通常分为三个乐章。在游戏中,杰斯特·贝尔蒙>
 34         <br>
 35         <br>
 36         而本作的名称如果直译成英文,显然应是“Concerto of the White Night”;日版的英文如果直译的话,意思应该是“午夜太阳的协奏
 37         <br>
 38         <br>
 39         另外,“白夜”的非官方英文翻译乃是“White Night Concerto”。有必要说明,在英文中White Night和Midnight Sun都是确有其词,>
 40         </p>
 41     </div>

Changing Theme

~/prj/android/cvhod$ vim assets/demo.html 

  3     <link type="text/css" href="jquery/css/ui-darkness/jquery-ui-1.8.8.custom.css" rel="Stylesheet" />
  3     <link type="text/css" href="jquery/css/THEME-NAME/jquery-ui-1.8.8.custom.css" rel="Stylesheet" />

Checking Available Themes

~/prj/android/cvhod$ ls assets/jquery/css
le-frog     smoothness  ui-darkness

Downloading New Theme

Changing Background Color

 16     <body style="background-color:black">

*Always run ./m to check your progress.

Preparing Materials

res/drawable/icon.png - Maker:
artwork.png: 512x512
At least 2 screenshots: 320w x 480h, 480w x 800h, or 480w x 854h 

Making Release APK

Making Release APK
/home/louisa/Downloads/apache-ant-1.8.2/bin/ant release
<input passwords twice>
~/prj/android/cvhod$ adb uninstall
~/prj/android/cvhod$ adb install bin/cvhod-release.apk 
Test Release Build
# adb uninstall <- your name here
# adb install bin/XXXXXXX-release.apk

Publishing App