Lecture 1 - Introduction

< CS193A Android Programming Here we walk through the most basic parts of an Android app. Also, homework 1 is at the end of this page.

Step 0 - Installing the Android SDK

Everything below assume the Android SDK is installed and an AVD (Android Virtual Device) set up so the emulator can work -- there are links for those first steps below for homework 1 at the end of this doc.

First Android Project

In class I'll create the android default project, and look around to see the important components. In Eclipse, New - Other... Android Project Name like "hello", package like "edu.stanford.LELANDID", select an SDK level such as 2.3.x. Leave everything else at its default setting. Run with the run menu: Run as ... Android Application. See what this trivial application looks like in the phone emulator -- it's just some text sitting on the screen. (The emulator takes long as a few minutes time to boot up the first time. Do not exit the emulator; once it's running, it gets re-used again and again to run your app.)

Manifest
Now we'll look at the sources behind this simple app; then we'll add some features to it. Look at default manifest.xml -- there's one Application and it can contain any number of Activities. Lots of other information about an application is declared in its manifest.xml, so this is just our first simple example.
< ? x m lv e r s i o n = " 1 . 0 "e n c o d i n g = " u t f 8 " ? > < m a n i f e s tx m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " p a c k a g e = " e d u . s t a n f o r d . n i c k " a n d r o i d : v e r s i o n C o d e = " 1 " a n d r o i d : v e r s i o n N a m e = " 1 . 0 " >

< u s e s s d ka n d r o i d : m i n S d k V e r s i o n = " 1 0 "/ > < a p p l i c a t i o na n d r o i d : i c o n = " @ d r a w a b l e / i c o n "a n d r o i d : l a b e l = " @ s t r i n g / a p p _ n a m e " > < a c t i v i t ya n d r o i d : n a m e = " . H e l l o A c t i v i t y " a n d r o i d : l a b e l = " @ s t r i n g / a p p _ n a m e " > < i n t e n t f i l t e r > < a c t i o na n d r o i d : n a m e = " a n d r o i d . i n t e n t . a c t i o n . M A I N "/ > < c a t e g o r ya n d r o i d : n a m e = " a n d r o i d . i n t e n t . c a t e g o r y . L A U N C H E R "/ > < / i n t e n t f i l t e r > < / a c t i v i t y > < / a p p l i c a t i o n > < / m a n i f e s t >

"@string/app_name" forms refer to data in the res part of the project. The Activity "android:name" refers to the class name that implements the activity -- ".HelloActivity" (the . means in the current package). The MAIN/LAUNCHER intent provides the app icon to launch this activity. Later we'll see many more examples of intents as a way to invoke an activity.

Activity Source Code

p a c k a g ee d u . s t a n f o r d . n i c k ; i m p o r ta n d r o i d . a p p . A c t i v i t y ; i m p o r ta n d r o i d . o s . B u n d l e ; p u b l i cc l a s sH e l l o A c t i v i t ye x t e n d sA c t i v i t y{ / * *C a l l e dw h e nt h ea c t i v i t yi sf i r s tc r e a t e d .* / @ O v e r r i d e p u b l i cv o i do n C r e a t e ( B u n d l es a v e d I n s t a n c e S t a t e ){ s u p e r . o n C r e a t e ( s a v e d I n s t a n c e S t a t e ) ; s e t C o n t e n t V i e w ( R . l a y o u t . m a i n ) ; } }

The one interesting line at this point is the setContentView() call which installs the UI defined in res/layout/main.xml

main.xml Layout
< ? x m lv e r s i o n = " 1 . 0 "e n c o d i n g = " u t f 8 " ? > < L i n e a r L a y o u tx m l n s : a n d r o i d = " h t t p : / / s c h e m a s . a n d r o i d . c o m / a p k / r e s / a n d r o i d " a n d r o i d : o r i e n t a t i o n = " v e r t i c a l " a n d r o i d : l a y o u t _ w i d t h = " f i l l _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " f i l l _ p a r e n t " > < T e x t V i e w a n d r o i d : l a y o u t _ w i d t h = " f i l l _ p a r e n t " a n d r o i d : l a y o u t _ h e i g h t = " w r a p _ c o n t e n t " a n d r o i d : t e x t = " @ s t r i n g / h e l l o " / > < / L i n e a r L a y o u t >

Linear layout, vertical and horizontal fill_parent = fill out to the size of the parent wrap_content = just big enough to hold our own contents @string/hello = refer to data centralized in res/values/strings.xml. Change some strings there and run again to see how the UI gets those values dynamically. Copy/paste to create a second TextView in the layout and give it some text Note the extensive error-check and auto-complete in xml (ctrl-space to auto-complete)

Graphical Layout
This is a new SDK feature -- neat! Widget types used today: LinearLayout, TextView (text without editing), EditText, Button Use the Graphical Layout button at lower left to switch between the Graphical/XML views of the layout Click on a widget, see its properties below, right click on a widget also accesses properties Need to set the phone screen size and the SDK level in the graphical view (such as Nexus S and SDK 2.3) Add EditText and Button inside the vertical layout By default get ids of the form "@+id/editText1" -- gives the element an id which is available in the source code with the form R.id.exitText1 The point: compile time checking that all the various IDs line up right. Eliminates an easy and tedious form of bug.

Now Add Activity Code

p u b l i cc l a s sH e l l o A c t i v i t ye x t e n d sA c t i v i t y{ / /S t o r ep o i n t e rt oE d i t T e x tw i d g e t p r i v a t eE d i t T e x te d i t T e x t 1 ; / * *C a l l e dw h e nt h ea c t i v i t yi sf i r s tc r e a t e d .* / @ O v e r r i d e p u b l i cv o i do n C r e a t e ( B u n d l es a v e d I n s t a n c e S t a t e ){ s u p e r . o n C r e a t e ( s a v e d I n s t a n c e S t a t e ) ; s e t C o n t e n t V i e w ( R . l a y o u t . m a i n ) ;

/ /S t o r eap o i n t e rt oe d i t T e x t 1 .S e tu pb u t t o n 1t oa d da! . e d i t T e x t 1=( E d i t T e x t )f i n d V i e w B y I d ( R . i d . e d i t T e x t 1 ) ; B u t t o nb u t t o n=( B u t t o n )f i n d V i e w B y I d ( R . i d . b u t t o n 1 ) ; b u t t o n . s e t O n C l i c k L i s t e n e r ( n e wO n C l i c k L i s t e n e r ( ){ p u b l i cv o i do n C l i c k ( V i e wv ){ / /L i n e si n s i d et h i so n C l i c k ( )m e t h o da r er u n / /w h e nt h eb u t t o ni sc l i c k e d . e d i t T e x t 1 . s e t T e x t ( e d i t T e x t 1 . g e t T e x t ( )+" ! " ) ; } } ) ; . . .

findViewbyId -- get pointer to something. Cast the pointer to its real type Demo compile errors if ids etc. do not match button.setOnClickListener(... -- put in code to run when button is clicked. This is a Java "anonymous inner class" -- sorry the syntax is kind of nasty, but at least the format is fixed, so you can get used it. There is also an alternative way to wire some code to button we'll later.

Seeing Crash Trace - LogCat

If the app crashes.. (or you can put in a Null Pointer exception to force a crash) Switch to Debug view (upper right of Eclipse). See the LogCat at lower right (double click it to make it big) Click the "E" in LogCat to see just errors vs. the many other info messages Double clicking a line in the stack trace goes to that line in the source code

This is as far as we got in lecture 1, so skip down to homework 1 below to try that.

Add Image Resource and ImageView

Add a foo.jpg in the location res/drawable/foo.jpg In code, the image is known as R.drawable.foo Drag out an ImageView into the vertical layout, set it to use your image. Maybe adjust its max size. It works in the preview .. you don't really have to run to see it.

Nested Surf LinearLayout

Goal here is to have an "open url" button Add a horizontal LinearLayout Inside place a Button "Surf" and an EditText "http://news.google.com"

Surf Code
/ /S t a r ta" w e bu r l "i n t e n tw i t he d i t T e x t 2 e d i t T e x t 2=( E d i t T e x t )f i n d V i e w B y I d ( R . i d . e d i t T e x t 2 ) ; B u t t o nb u t t o n 2=( B u t t o n )f i n d V i e w B y I d ( R . i d . b u t t o n 2 ) ; b u t t o n 2 . s e t O n C l i c k L i s t e n e r ( n e wO n C l i c k L i s t e n e r ( ){ p u b l i cv o i do n C l i c k ( V i e wv ){ I n t e n ti n t e n t=n e wI n t e n t ( I n t e n t . A C T I O N _ V I E W ) ;/ /m o s tc o m m o n i n t e n t . s e t D a t a ( U r i . p a r s e ( e d i t T e x t 2 . g e t T e x t ( ) . t o S t r i n g ( ) ) ) ; H e l l o A c t i v i t y . t h i s . s t a r t A c t i v i t y ( i n t e n t ) ; } } ) ;

Intents -- the mechanism by which various screens/components invoke each other. This is just a first, simple example. Intent has an action and data. Here we specify the "open url" intent .. which will launch the appropriate new activity for that. The "back button" from there comes back to us.

Dial Code

Here is the intent code to invoke the dialer. As above, add a button/EditText in a nested horizontal layout to dial the number in the text field.
I n t e n ti n t e n t=n e wI n t e n t ( I n t e n t . A C T I O N _ D I A L ) ;/ /v s ._ C A L L i n t e n t . s e t D a t a ( U r i . p a r s e ( " t e l : "+e d i t T e x t 3 . g e t T e x t ( ) . t o S t r i n g ( ) ) ) ; / /u r if o r ms h o u l db e" t e l : 5 5 5 5 5 5 5 5 5 5 " H e l l o A c t i v i t y . t h i s . s t a r t A c t i v i t y ( i n t e n t ) ;

Homework 1
The official android developer site is http://developer.android.com, and that's a good first place to look for instructions, docs, examples etc. Install the Android SDK, Eclipse, and ADK Eclipse plugin. See Android SDK Install docs Before running, you also have to set up an Android Virtual Device (AVD) for the emulator -- see AVD setup Now for homework 1: create an app somewhat similar to the demo app (as far as we got in lecture). In general, we expect homework to be done before the next class, although in this case we're not going to collect the homework; it's just for you to get some practice. Have at least one LinearLayout nested in another LinearLayout Have at least one each of: Button, EditText, TextView You should have at least one button that does something when clicked -- it could manipulate the text as in lecture, or try something else, like changing the color or size of one of the widgets. As shown in lecture, you can practice putting in a Null Pointer bug of some sort, so you can look at the exception trace using LogCat in the Debug view in Eclipse. The exact appearance and function of your app is up to you. We're not going to ask you to turn this one in .. so just go through the steps so you see how it works.