by Tuan Tuong Dang @ Multinc with guidance from Huy Zing BarCamp Saigon 1 November 15, 2008
echo-o <ul><li>“ simple  real-time  feedback” </li></ul><ul><li>From:  </li></ul><ul><li>To:  </li></ul>
echo-o architecture <ul><li>Web Application </li></ul><ul><li>Multiple clients: </li></ul><ul><ul><li>Web browser </li></u...
Android Mobile
This presentation <ul><li>Structure  of an Android application </li></ul><ul><li>Building blocks  of an Android applicatio...
 
 
HelloWorld.java <ul><li>public class HelloWorld extends Activity {  </li></ul><ul><li>public void onCreate(Bundle instance...
 
 
4 Android Building Blocks <ul><li>Activity </li></ul><ul><li>Service </li></ul><ul><li>BroadcastReceiver </li></ul><ul><li...
Building Blocks for echo-o <ul><li>Activity  – to show screens and respond to user </li></ul><ul><li>Service  – to create ...
Other APIs <ul><li>Intent </li></ul><ul><li>Views </li></ul><ul><li>Notifications </li></ul>
Other APIs for echo-o <ul><li>Intent  – messages such as invoking a sound </li></ul><ul><li>Views   – display web pages </...
 
UI Screens <ul><li>Each screen has views </li></ul>
View Layouts <ul><li>FrameLayout </li></ul><ul><li>LinearLayout </li></ul><ul><li>RelativeLayout </li></ul><ul><li>TableLa...
View Components <ul><li>Button </li></ul><ul><li>TextView </li></ul><ul><li>WebView   – displays our web application </li>...
WebView <ul><li>Problem: JavaScript is disabled by default. </li></ul><ul><li>Solution: </li></ul><ul><ul><li>browser.getS...
WebView <ul><li>Problem: Communication between Android app and web app: </li></ul><ul><li>Solutions: </li></ul><ul><ul><li...
WebView <ul><li>Problem: Zoom picker is disabled by default </li></ul><ul><li>Solution: </li></ul><ul><ul><ul><li>LinearLa...
WebView <ul><li>Problem: clicking links are sent to system web browser. </li></ul><ul><li>Solution: clicking links stay in...
WebView <ul><li>Problem: changing orientation resets emulator </li></ul><ul><li>Solution: </li></ul><ul><ul><li>test on re...
http://multinc.com/ http://code.google.com/android/
Upcoming SlideShare
Loading in...5
×

echo-o & Android App Dev - BarCamp Saigon 1

2,098

Published on

For BarCamp Saigon 1, Multinc describes their experiences developing an Android app for http://echo-o.com

Also see the accompanying presentation "iPhone & Android App Dev - BarCamp Saigon 1"

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,098
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
117
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "echo-o & Android App Dev - BarCamp Saigon 1"

  1. 1. by Tuan Tuong Dang @ Multinc with guidance from Huy Zing BarCamp Saigon 1 November 15, 2008
  2. 2. echo-o <ul><li>“ simple real-time feedback” </li></ul><ul><li>From: </li></ul><ul><li>To: </li></ul>
  3. 3. echo-o architecture <ul><li>Web Application </li></ul><ul><li>Multiple clients: </li></ul><ul><ul><li>Web browser </li></ul></ul><ul><ul><li>Adobe AIR </li></ul></ul><ul><ul><li>iPhone mobile </li></ul></ul><ul><ul><li>Android mobile </li></ul></ul>
  4. 4. Android Mobile
  5. 5. This presentation <ul><li>Structure of an Android application </li></ul><ul><li>Building blocks of an Android application </li></ul><ul><li>User Interface of the echo-o application </li></ul>
  6. 8. HelloWorld.java <ul><li>public class HelloWorld extends Activity { </li></ul><ul><li>public void onCreate(Bundle instanceState) { </li></ul><ul><li>super.onCreate(instanceState); </li></ul><ul><li>TextView tv = new TextView(this); </li></ul><ul><li>tv.setText(&quot;Hello World!!!&quot;); </li></ul><ul><li>this.setContentView(tv); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  7. 11. 4 Android Building Blocks <ul><li>Activity </li></ul><ul><li>Service </li></ul><ul><li>BroadcastReceiver </li></ul><ul><li>ContentProvider </li></ul>
  8. 12. Building Blocks for echo-o <ul><li>Activity – to show screens and respond to user </li></ul><ul><li>Service – to create a re-usable sound object </li></ul><ul><li>BroadcastReceiver </li></ul><ul><li>ContentProvider </li></ul>
  9. 13. Other APIs <ul><li>Intent </li></ul><ul><li>Views </li></ul><ul><li>Notifications </li></ul>
  10. 14. Other APIs for echo-o <ul><li>Intent – messages such as invoking a sound </li></ul><ul><li>Views – display web pages </li></ul><ul><li>Notifications – send vibrate notifications </li></ul>
  11. 16. UI Screens <ul><li>Each screen has views </li></ul>
  12. 17. View Layouts <ul><li>FrameLayout </li></ul><ul><li>LinearLayout </li></ul><ul><li>RelativeLayout </li></ul><ul><li>TableLayout </li></ul><ul><li>AbsoluteLayout </li></ul>
  13. 18. View Components <ul><li>Button </li></ul><ul><li>TextView </li></ul><ul><li>WebView – displays our web application </li></ul><ul><li>EditText </li></ul><ul><li>ListView </li></ul><ul><li>CheckBox </li></ul><ul><li>Radio </li></ul>
  14. 19. WebView <ul><li>Problem: JavaScript is disabled by default. </li></ul><ul><li>Solution: </li></ul><ul><ul><li>browser.getSettings().setJavaScriptEnabled( true ); </li></ul></ul>
  15. 20. WebView <ul><li>Problem: Communication between Android app and web app: </li></ul><ul><li>Solutions: </li></ul><ul><ul><li>Set up handler for JavaScript alerts/prompt/confirms: </li></ul></ul><ul><ul><ul><li>browser. setWebChromeClient (new WebChromeConfirm()); </li></ul></ul></ul><ul><ul><ul><li>private class WebChromeConfirm extends WebChromeClient {…} </li></ul></ul></ul><ul><ul><li>Web app invokes method on native app: </li></ul></ul><ul><ul><ul><li>MainActivity.java </li></ul></ul></ul><ul><ul><ul><ul><li>AndroidManipulation am = new AndroidManipulation(this); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>browser. addJavascriptInterface (am, “am&quot;); </li></ul></ul></ul></ul><ul><ul><ul><li>WebApp.js: </li></ul></ul></ul><ul><ul><ul><ul><li>am. doVibrate(); </li></ul></ul></ul></ul>
  16. 21. WebView <ul><li>Problem: Zoom picker is disabled by default </li></ul><ul><li>Solution: </li></ul><ul><ul><ul><li>LinearLayout zoomLayout = (LinearLayout)findViewById(R.id. basic_map_zoom ); </li></ul></ul></ul><ul><ul><ul><li>settingWebView(); </li></ul></ul></ul><ul><ul><ul><li>View zc = browser. getZoomControls (); </li></ul></ul></ul><ul><ul><ul><li>zoomLayout. addView (zc, new ViewGroup.LayoutParams(ViewGroup.LayoutParams. WRAP_CONTENT , ViewGroup.LayoutParams. WRAP_CONTENT )); </li></ul></ul></ul>
  17. 22. WebView <ul><li>Problem: clicking links are sent to system web browser. </li></ul><ul><li>Solution: clicking links stay in the WebView </li></ul><ul><ul><ul><li>browser. setWebViewClient (new Callback()); </li></ul></ul></ul><ul><ul><ul><li>private class Callback extends WebViewClient { </li></ul></ul></ul><ul><ul><ul><ul><li>public boolean shouldOverrideUrlLoading(WebView view, String url) { </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>loadUrl(url); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>return(true); </li></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>} </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul>
  18. 23. WebView <ul><li>Problem: changing orientation resets emulator </li></ul><ul><li>Solution: </li></ul><ul><ul><li>test on real mobile device </li></ul></ul><ul><ul><li>on emulator: </li></ul></ul><ul><ul><ul><li>protected void onSaveInstanceState ( Bundle outState ) { </li></ul></ul></ul><ul><ul><ul><ul><li>super.onSaveInstanceState(outState); </li></ul></ul></ul></ul><ul><ul><ul><ul><li>outState. putString (&quot;address&quot;, txt.getText().toString()); </li></ul></ul></ul></ul><ul><ul><ul><li>} </li></ul></ul></ul><ul><ul><ul><li>.... </li></ul></ul></ul><ul><ul><ul><li>String address = savedInstanceState != null ? savedInstanceState. getString (&quot;address&quot;) : </li></ul></ul></ul><ul><ul><ul><li>&quot;http://www.google.com.vn&quot;; </li></ul></ul></ul><ul><ul><ul><li>loadUrl(address); </li></ul></ul></ul>
  19. 24. http://multinc.com/ http://code.google.com/android/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×