Google Android Experiences

Slide 1: An d r o i d Ex p e r i e n c e s To mi Mi c k e l s s o n S e n i o r Te c h n o l o g y S p e c i a l i s t @ I d e a n h t t p : //o v e r t h e a i r . o r g / Ap r i l 4 , 2 0 0 8

Slide 2: Ag e n d a • An d r o i d I n t r o • F r a me wo r k • S DK a n d t o o l s • UI , c o mp o n e n t s , l a y o u t s • UI g o o d i e s • Cu s t o m UI • S a mp l e P r o t o t y p e s – Co n t a c t s & S p l a s h • Go o d a n d B a d • W s hl i s t i 2 / 30

Slide 3: I de a n • Us e r - c e n t r i c mo b i l e de s i g n – Us e r e x p e r i e n c e d e s i g n – Us e r a n d ma r k e t r e s e a r c h – I nt e r a c t i on de s i gn – Vi s u a l d e s i g n • Pr o t o t y p i n g a n d d e v e l o p me n t o f us e r i nt e r f a c e s – Lo w- t e c h a n d h i g h - t e c h • S t r o n g f o c u s o n mo b i l e • F i n l a n d , He l s i n k i 3 / 30

Slide 4: W y Pr o t o t y p e ? h • Ge t u s e r f e e d b a c k a t a n e a r l y s t a g e • Ve r i f y t h a t t h e d e s i g n me e t s t h e s e t r e q u i r e me n t s • Ge t t o k n o w t e c h n o l o g y l i mi t a t i o n s • Ev a l u a t e t e c h n o l o g i e s • Re d u c e r i s k s , c o s t s • Gr e a t c o mmu n i c a t i o n me d i u m, b e a t s d o c s 4 / 30

Slide 5: An d r o i d • “ Ho t b l o n d e t h a t e v e r y b o d y wa n t s t o b e wi t h " • Bu z z : L i n u x , J a v a , Go o g l e , o p e n - s o u r c e • F i r s t p h o n e s 2 H2 0 0 8 ? • S DK o p e n s o u r c e d e v e n t u a l l y – t r u l y o p e n - s o u r c e : Ap a c h e - l i c e n s e • Ba c k e d b y OHA, Op e n Ha n d s e t Al l i a n c e – mo b i l e o p e r a t o r s , d e v i c e ma n u f a c t u r e r s , S W/HW c o mp a n i e s 5 / 30

Slide 6: An d r o i d J u s t No w • P r e - Al p h a ! • Go o g l e i s t h e a r c h i t e c t – Ga t h e r s f e e d b a c k , i mp r o v e s – Av o i d d e s i g n b y c o mmi t t e e • No t y e t o p e n • P l a y wi t h e mu l a t o r a n d d i s c o v e r . . . • Bi g c h a n g e s b e t we e n S DKs – m3 v s m5 S DKs • An d r o i d De v e l o p e r Ch a l l e n g e , ADC – 1 0 M$ 6 / 30

Slide 7: An d r o i d Ar c h i t e c t u r e • Li n u x • J a va a s a na t i v e l a ngua g e – s a f e b e t : mi l l i o n s o f d e v e l o p e r s – J a v a b u t n o t J 2 ME – n o J VM, a n e w Da l v i k Ru n t i me • Cu r r e n t l y n o n a t i v e a c c e s s t o OS • OS i s c u s t o mi z a b l e – r e p l a c e s y s t e m a p p s , e v e n h o me s c r e e n • A wh o l e n e w UI • S QL i t e d a t a b a s e 7 / 30

Slide 8: An d r o i d J a v a F r a me wo r k • An a t o my o f a n a p p l i c a t i o n : – Ac t i v i t y – I n t e n t Re c e i v e r – Ser vi ce – Co n t e n t Pr o v i d e r • A n e w, i n n o v a t i v e wa y t o c o n s t r u c t a p p s – Le a r n i t , d o n ' t f i g h t a g a i n s t • Bu i l d i n g s c r e e n s a n d s e r v i c e s , n o t mo n o l i t h i c bl a c k- boxe s – Lo o s e l y c o u p l e d , a d d r e s s a b l e p a r t s – I s n ' t t h i s l i k e t h e we b ? Ba c k - b u t t o n t o o ! – Ra p i d p r o t o t y p i n g • OS o r a n e c o s y s t e m? 8 / 30

Slide 9: S DK ( m5 - r c 1 5 ) • W n d o ws , i OS X, L i n u x ! • 1 2 4 MB o f HTML - d o c s • 183 J a va s a mp l e s o u r c e f i l e s • Ne w UI s i n c e m3 – f r o m QVGA t o HVGA • De c e n t a n d s i mp l e – j us t unz i p t o a f ol de r – Do c s , s a mp l e s , b i n a r i e s i n c l u d e d 9 / 30

Slide 10: S DK To o l s • Emu l a t o r • Ec l i p s e – ADT: An d r o i d De v e l o p me n t To o l s p l u g i n – DDMS : Da l v i k De b u g Mo n i t o r S e r v e r t o o l • Co mma n d l i n e t o o l s • No u s e r i n t e r f a c e e d i t o r – Ed i t , c o mp i l e , t e s t c y c l e t a k e s 1 0 s – www. d r o i d d r a w. o r g 10 / 30

Slide 11: Te c h n o l o g i e s f o r p r o t o t y p i n g o n An d r o i d • J ava – b u t n o t MI DP, t h e r e ' s a n e w UI • W b Ki t e – s t a n d a l o n e b r o ws e r – e mb e d d e d c o mp o n e n t – b u t n o a c c e s s t o t h e s y s t e m? • Op e n GL ES • No C++ • No F l a s h / L i t e ( y e t ) • No P y t h o n ( y e t ? ) – b u t Gu i d o wo r k s a t Go o g l e … – u s e d i n S DK t o o l s : a c t i v i t y Cr e a t o r . p y 11 / 30

Slide 12: Ap p l i c a t i o n De s i g n P h i l o s o p h y • " S u c c e s s f u l a p p l i c a t i o n s wi l l o f f e r a n o u t s t a n d i n g e nd- us e r e xpe r i e nc e " – Fa s t – Re s p o n s i v e – S e a ml e s s • Th e i n d u s t r y t a k e s u s e r e x p e r i e n c e s e r i o u s l y ! 12 / 30

Slide 13: Us e r I n t e r f a c e • Ri c h UI mo d e l , h u g e n u mb e r o f c o mp o n e n t s • Do n o t c o d e , u s e XML – De c l a r a t i v e p r o g r a mmi n g a l a we b , Ad o b e F l e x , Mo z i l l a XUL • Ne w AP I s , n o J 2 ME, AW T, S wi n g , L CDUI • No o t h e r UI s : a s i n g l e UI a g o o d t h i n g • Bo t h k e y p a d a n d t o u c h mo d e s • L a y o u t s a n d c o mp o n e n t s 13 / 30

Slide 14: UI c o mp o n e n t s , b a s i c • Bu t t o n , I ma g e Bu t t o n , Ch e c k Bo x , Ch r o n o me t e r , Co mp o u n d Bu t t o n , Ed i t Te x t , I ma g e Vi e w, P r o g r e s s Ba r , S u r f a c e Vi e w, Te x t Vi e w, Zo o mS l i d e r , Ex p a n d a b l e L i s t Vi e w, L i s t Me n u I t e mVi e w, L i s t Vi e w, Ra d i o Bu t t o n , Ra d i o Gr o u p , S c r o l l Vi e w, S p i n n e r , To a s t 14 / 30

Slide 15: UI c o mp o n e n t s , h i g h - l e v e l • Au t o Co mp l e t e Te x t Vi e w, An a l o g Cl o c k , Di g i t a l Cl o c k , Ma p Vi e w, Da t e P i c k e r , Ga l l e r y , Ta b W d g e t , i Te x t S wi t c h e r , Ti c k e r , Ti me P i c k e r , Two L i n e L i s t I t e m, Vi d e o Vi e w, W b Vi e w e 15 / 30

Slide 16: UI c o mp o n e n t s , Ma p Vi e w • L o c a t i o n - b a s e d a p p s wi l l b e h o t • An d r o i d ma k e s l o c a t i o n - s t u f f e a s y – Ma p - c o mp o n e n t b u i l t - i n • Ba s e d o n Go o g l e Ma p s 16 / 30

Slide 17: UI c o mp o n e n t s , W b Vi e w e • Es s e n t i a l c o mp o n e n t – S o mu c h i s i n we b – Ma s h u p l a y o u t s • I n d u s t r y s t a n d a r d W b Ki t e – S a f a r i , S 6 0 b r o ws e r , Ad o b e AI R, QT. . . • J a v a s c r i p t , AJ AX • Emb e d d e d a s s e t s – <i mg s r c =" f i l e : ///a n d r o i d _a s s e t /my i ma g e . p n g " > 17 / 30

Slide 18: UI L a y o u t s • Go o d s e t o f l a y o u t s – Ab s o l u t e La y o u t , F r a me La y o u t , Ga l l e r y , Gr i d Vi e w, Li n e a r La y o u t , Li s t Vi e w, Re l a t i v e La y o u t , S c r o l l Vi e w, S p i n n e r , S u r f a c e Vi e w, Ta b Ho s t , Ta b l e La y o u t , Vi e wF l i p p e r , Vi e wS wi t c h e r • Yo u s h o u l d u n d e r s t a n d l a y o u t s we l l – ” wr a p _c o n t e n t ” , ” f i l l _p a r e n t ” , ” l a y o u t _we i g h t ” • Us e r e l a t i v e l a y o u t s , f i t s i n t o ma n y s c r e e n s • Ma r g i n s , p a d d i n g s a l a CS S 18 / 30

Slide 19: Cu s t o m UI c o mp o n e n t s • Fi r s t t r y us e e xi s t i ng – Ex i s t i n g c o mp o n e n t s a l r e a d y c u s t o mi z a b l e • F r a me wo r k v e r y o p e n f o r e x t r a c u s t o mi z a t i o n • St r at egi es : – I n h e r i t a n d o v e r r i d e a b a s e c o mp o n e n t – Re u s e a n d c o mb i n e e x i s t i n g c o mp o n e n t s – F u l l y d r a w y o u r s e l f - o n Dr a w( Ca n v a s c a n v a s ) • Ho we v e r , a v o i d o v e r k i l l c u s t o mi z a t i o n – Va r i a n c e a mo n g d e v i c e s ! – S ma l l s c r e e n v s b i g s c r e e n 19 / 30

Slide 20: UI g o o d i e s • To u c h ( s i n g l e , n o t mu l t i ) • Li s t f a d i n g a t e n d s • Sc r ol l ba r on of f , f a nc y s ki ns • Co n t e x t me n u wi t h t o u c h • Sc r ol l i ng • Ro u n d e d c o r n e r s • Th e me s • F o c u s ma n a g e me n t • P r o g r e s s b a r , p r i ma r y , s e c o n d a r y , i n t i t l e t o o 20 / 30

Slide 21: UI g o o d i e s : An i ma t i o n • Fl a s h- a l i ke s t uf f ! • Twe e n e d a n i ma t i o n : c o n t r o l l e d b y XML - f i l e s • F r a me - b y - f r a me a n i ma t i o n : c o n t r o l l e d b y c o d e • Sha de r s , s ha pe s , gr a di e nt s , pi vot , pa t h e f f e c t s • Dr a wi n g c a c h e s • Op e n GL t o o 21 / 30

Slide 22: UI g o o d i e s : 9 - P a t c h St r et c ha bl e • For c us t om l ook' n' f e e l • I nnov a t i ve , no c ode r e qui r e d • I mp r o v e s d e s i g n e r - d e v e l o p e r - c o - o p e r a t i o n 22 / 30

Slide 23: S a mp l e P r o t o t y p e : Co n t a c t s • Ta b s • Cu s t o m v i e w wi t h r e l a t i v e l a y o u t • W b Ki t b r o ws e r c o mp o n e n t e • Te x t s h a d o w 23 / 30

Slide 24: S a mp l e P r o t o t y p e : S p l a s h An i m • F l a s h - l i k e a n i ma t i o n – S c a l e , r ot a t e , a l pha • P NG- g r a p h i c s wi t h a l p h a • Dy n a mi c l a y o u t – Vi e w. GONE, Vi e w. VI S I BLE 24 / 30

Slide 25: P r o t o t y p i n g o n An d r o i d - Go o d • J a v a a n d Ec l i p s e – F a mi l i a r l a n g u a g e , f a mi l i a r t o o l s • Ri c h UI mo d e l , c u s t o mi z a t i o n f e a t u r e s • De c l a r a t i v e p r o g r a mmi n g , XML s • Ap p l i c a t i o n s e x p o s e a n e c o s y s t e m o f c o mp o n e n t s – Re u s e e x i s t i n g , ma s h u p s c r e e n s ( a c t i v i t i e s ) • S DK r u n s o n a l l ma i n s t r e a m p l a t f o r ms • Ac t i v e s u p p o r t f o r u m 25 / 30

Slide 26: P r o t o t y p i n g o n An d r o i d - Ba d • J us t pr e - a l pha : – S DK a mo v i n g t a r g e t • Ne e d t o l e a r n a b i g n e w UI AP I • No i n t e r f a c e e d i t o r y e t • No r e a l p h o n e s , j u s t a n e mu l a t o r • No t y e t o p e n s o u r c e 26 / 30

Slide 27: P r o b l e ms / Cr i t i q u e : • Bu g s – " Th i s i s a b u g t h a t wi l l b e f i x e d i n a n f u t u r e S DK. " – " I j u s t wa s t e d 5 d a y s f o r t h e c h a l l e n g e b a n g i n g my h e a d t r y i n g t o f i g u r e o u t wh y . . . " • De p r e c a t e d o r n o t ? • Mi s s i n g f u n c t i o n a l i t y • An i ma t i o n b u g s • Ne s t e d l a y o u t s b r o k e n • S a mp l e s wi t h n o c o d e – Ho w t o r e a l l y p r o g r a m t a bs ? 27 / 30

Slide 28: De t e c t i v e W r k o • Pl a y i n g She r l oc k, d i g g i n g S DK i nt e r na l s . . . 28 / 30

Slide 29: W s hl i s t i • P e r f e c t t h e UI , ma k e i t c o h e r e n t a n d s i mp l e – F i n e t u n e API , d r o p o d d c l a s s e s – Ha v e a c l e a r MVC • UI e d i t o r • An i ma t i o n b e t we e n a c t i v i t i e s • An i ma t i o n t o c h a n g e l a y o u t s – Li k e Ad o b e F l e x s t a t e t r a n s i t i o n s … • Dr a g ' n ' d r o p • Ap p l y t h e me s d y n a mi c a l l y • I n t u i t i v e t o u c h , mu l t i - t o u c h • Ha n d l e l a y o u t s c a l i n g , s ma l l t o b i g s c r e e n s • Fi x bugs 29 / 30

Slide 30: Th e En d • Th a n k Yo u ! 30 / 30