ANDROID APP DEVELOPMENT: AN INTRODUCTION CSCI 5115-9/19/14 HANNAH MILLER
DISCLAIMER: Main focus should be on USER INTERFACE DESIGN Development and implementation: Weeks 8-11 Begin thinking about targeted platforms and associated technical effort
PROJECT GOAL Design, implement, and evaluate an application for the Android* mobile operating system Development Options: Native Android Development Cross-Platform Development (HTML5)
HTML5 KEY MOBILE FEATURES Offline Support Canvas Drawing Video and Audio Streaming GeoLocation API Advanced Forms
HTML5 MOBILE WEB FRAMEWORKS Provide more consistent and comprehensive HTML5 support across mobile browsers Many frameworks to choose from
HYBRID MOBILE APP (1/2) Mostly HTML, JavaScript, and CSS Run inside native container device s web browser Locally-hosted files
HYBRID MOBILE APP (2/2) Frameworks (PhoneGap) provide native code Exposed by JavaScript API PhoneGap API handles communication with native OS Application container technology
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
NATIVE ANDROID DEVELOPMENT Download Android Development Tools ADT Bundle Eclipse IDE + Android SDK + ADT plugin, JRE Already have Eclipse? Android SDK Android Studio
NATIVE ANDROID DEVELOPMENT https://developer.android.com/training/index.html
PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects
PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects
PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects
PROJECT STRUCTURE AndroidManifest.xml app config/setup src Source Code res Resources Drawable objects Layout UI Values - Resources gen Resource objects
ANDROID UI ViewGroup and View hierarchy View UI widgets ViewGroup invisible view containers XML vocabulary WYSIWYG vs. XML editor
ANDROID UI <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" 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>
ANDROID UI <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" 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>
ANDROID UI <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingbottom="@dimen/activity_vertical_margin" android:paddingleft="@dimen/activity_horizontal_margin" 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>
ANDROID UI + RESOURCES = @type/name <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/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> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</dimen> </resources>
ACTIVITIES & APP CODE Activity single focused thing user can do oncreate implementation Interact Window for you to display UI setcontentview(layout)
ACTIVITIES & APP CODE Code Resource/UI Reference R.java R.type.name findviewbyid(r.type.name)
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
HTML5 & PHONEGAP APP DEMO App HTML5, JavaScript, and CSS code Use of web framework JQuery Mobile PhoneGap Build deploy to device
PHONEGAP BUILD Cloud Service for compiling PhoneGap applications No native SDK management Easy team collaboration Quick development cycle
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