ANDROID APP DEVELOPMENT: AN INTRODUCTION CSCI /19/14 HANNAH MILLER

Size: px

Start display at page:

Download "ANDROID APP DEVELOPMENT: AN INTRODUCTION CSCI 5115-9/19/14 HANNAH MILLER"

Claude Woods
10 years ago
Views:

1 ANDROID APP DEVELOPMENT: AN INTRODUCTION CSCI /19/14 HANNAH MILLER

2 DISCLAIMER: Main focus should be on USER INTERFACE DESIGN Development and implementation: Weeks 8-11 Begin thinking about targeted platforms and associated technical effort

3 PROJECT GOAL Design, implement, and evaluate an application for the Android* mobile operating system Development Options: Native Android Development Cross-Platform Development (HTML5)

4 HTML5 KEY MOBILE FEATURES Offline Support Canvas Drawing Video and Audio Streaming GeoLocation API Advanced Forms

5 HTML5 MOBILE WEB FRAMEWORKS Provide more consistent and comprehensive HTML5 support across mobile browsers Many frameworks to choose from

6 HYBRID MOBILE APP (1/2) Mostly HTML, JavaScript, and CSS Run inside native container device s web browser Locally-hosted files

7 HYBRID MOBILE APP (2/2) Frameworks (PhoneGap) provide native code Exposed by JavaScript API PhoneGap API handles communication with native OS Application container technology

8 NATIVE VS. HYBRID MOBILE APP Code reuse across platforms vs. single platform code Learning curve JavaScript vs. specialized dev tools Interface speed native vs. abstraction layers Native functionality strength vs. framework subset

9 NATIVE ANDROID DEVELOPMENT Download Android Development Tools ADT Bundle Eclipse IDE + Android SDK + ADT plugin, JRE Already have Eclipse? Android SDK Android Studio

10 NATIVE ANDROID DEVELOPMENT

11 PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects

12 PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects

13 PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects

14 PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects

15 ANDROID UI ViewGroup and View hierarchy View UI widgets ViewGroup invisible view containers XML vocabulary WYSIWYG vs. XML editor

16 ANDROID UI <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.demoapp.mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>

com/apk/res/android" xmlns:tools=com/tools" android:layout_width="match_parent" android:layout_height="match_parent"

17 ANDROID UI <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.demoapp.mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>

18 ANDROID UI <RelativeLayout xmlns:android=" xmlns:tools=" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.demoapp.mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>

ANDROID UI + RESOURCES = @type/name <RelativeLayout xmlns:android=

19 ANDROID UI + RESOURCES <RelativeLayout xmlns:android=" xmlns:tools=" <resources> android:layout_width="match_parent" <string name="app_name">demo App</string> android:layout_height="match_parent" <string name="hello_world">hello world!</string> android:paddingbottom="@dimen/activity_vertical_margin" <string name="action_settings">settings</string> android:paddingleft="@dimen/activity_horizontal_margin" </resources> android:paddingright="@dimen/activity_horizontal_margin" android:paddingtop="@dimen/activity_vertical_margin" tools:context="com.example.demoapp.mainactivity" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_world" /> </RelativeLayout> <resources>  <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> </resources>

com/apk/res/android" xmlns:tools=com/tools" <resources> android:layout_width="match_parent" <string name="app_name">demo App</string> android:layout_height="match_parent" <string

20 ACTIVITIES & APP CODE Activity single focused thing user can do oncreate implementation Interact Window for you to display UI setcontentview(layout)

21 ACTIVITIES & APP CODE Code Resource/UI Reference R.java R.type.name findviewbyid(r.type.name)

22 TESTING On Device Connect via USB cable Enable USB debugging (7 clicks!) Run code, installs app on device Emulator and starts it Android Virtual Device Device configuration for Android

23 HTML5 & PHONEGAP APP DEMO App HTML5, JavaScript, and CSS code Use of web framework JQuery Mobile PhoneGap Build deploy to device

24 PHONEGAP BUILD Cloud Service for compiling PhoneGap applications No native SDK management Easy team collaboration Quick development cycle

25 DISCLAIMER: FOCUS ON UI DESIGN Begin thinking about targeted platforms and associated technical effort OK Use what you know OK Wizard of OZ approach NOT OK Focus on implementation details

By sending messages into a queue, we can time these messages to exit the cue and call specific functions.

By sending messages into a queue, we can time these messages to exit the cue and call specific functions. Mobile App Tutorial Deploying a Handler and Runnable for Timed Events Creating a Counter Description: Given that Android Java is event driven, any action or function call within an Activity Class must