Android Introduction

Hello Views Part 1

@2011 Mihail L. Sichitiu

Goal
Familiarize with the main types of components #oncepts$

!"

Layouts %i&'ets Menus

Linear Layout
)*+ml ,ersion-.1.0. enco&in'-.utf/0.*1 )LinearLayout +mlns$an&roi&-.http$22schemas.an&roi&.com2ap32 res2an&roi&. an&roi&$orientation-.,ertical. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent.1 )LinearLayout an&roi&$orientation-.horizontal. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent. an&roi&$layout4wei'ht-.1.1 )5e+tView an&roi&$te+t-.re&. an&roi&$'ra,ity-.center4horizontal. 677777777.8 )2LinearLayout1 )LinearLayout an&roi&$orientation-.,ertical. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent. an&roi&$layout4wei'ht-.1.1 )5e+tView an&roi&$te+t-.row one. an&roi&$te+tSize-.19pt. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.wrap4content. an&roi&$layout4wei'ht-.1.21 )5e+tView an&roi&$te+t-.row two. an&roi&$te+tSize-.19pt. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.wrap4content. an&roi&$layout4wei'ht-.1.21 67777777777777..8 )2LinearLayout1 )2LinearLayout1

http$22&e,eloper.an&roi&.com2resources2tutorials2,iews2hello/linearlayout.html

One Layout, two views

;ML File ,s Layout Pre,iew

Relative Layout

)*+ml ,ersion-.1.0. enco&in'-.utf/0.*1 )<elati,eLayout +mlns$an&roi&-.http$22schemas.an&roi&.com2ap32res2an&roi&. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent.1 )5e+tView an&roi&$i&-.@=i&2la>el. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.wrap4content. an&roi&$te+t-.5ype here$.21 )?&it5e+t an&roi&$i&-.@=i&2entry. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.wrap4content. an&roi&$>ac3'roun&-.@an&roi&$&rawa>le2e&it>o+4>ac3'roun&. an&roi&$layout4>elow-.@i&2la>el.21 )@utton an&roi&$i&-.@=i&2o3. an&roi&$layout4wi&th-.wrap4content. an&roi&$layout4hei'ht-.wrap4content. an&roi&$layout4>elow-.@i&2entry. an&roi&$layout4ali'nParent<i'ht-.true. an&roi&$layout4mar'inLeft-.10&ip. an&roi&$te+t-.AB. 21 )@utton an&roi&$layout4wi&th-.wrap4content. an&roi&$layout4hei'ht-.wrap4content. an&roi&$layout4toLeftAf-.@i&2o3. an&roi&$layout4ali'n5op-.@i&2o3. an&roi&$te+t-.#ancel. 21 )2<elati,eLayout1

Table Layout
)*+ml ,ersion-.1.0. enco&in'-.utf/0.*1 )5a>leLayout +mlns$an&roi&-.http$22schemas.an&roi&.com2ap32res2an&roi&. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent. an&roi&$stretch#olumns-.1.1 )5a>le<ow1 )5e+tView an&roi&$layout4column-.1. an&roi&$te+t-.Apen.... an&roi&$pa&&in'-.(&ip. 21 )5e+tView an&roi&$te+t-.#trl/A. an&roi&$'ra,ity-.ri'ht. an&roi&$pa&&in'-.(&ip. 21 )25a>le<ow1 )5a>le<ow1 )5e+tView an&roi&$layout4column-.1. an&roi&$te+t-.Sa,e.... an&roi&$pa&&in'-.(&ip. 21 )5e+tView an&roi&$te+t-.#trl/S. an&roi&$'ra,ity-.ri'ht. an&roi&$pa&&in'-.(&ip. 21 )25a>le<ow1 )5a>le<ow1 )5e+tView an&roi&$layout4column-.1. an&roi&$te+t-.Sa,e Ds.... an&roi&$pa&&in'-.(&ip. 21 )5e+tView an&roi&$te+t-.#trl/Shift/S. an&roi&$'ra,ity-.ri'ht. an&roi&$pa&&in'-.(&ip. 21 )25a>le<ow1 )View an&roi&$layout4hei'ht-.2&ip. an&roi&$>ac3'roun&-.EFFF0F0F0. 21 67777777778 )25a>leLayout1

TabLayout
Ane acti,ity per ta> #reate new ProHect Hello5a>s

Create three new activities

<i'ht clic3 on Hello5a>s Pac3a'e Iame /1 Iew /1 #lass <i'ht clic3 on the new classJ Source /1 A,erri&e2"mplement Metho&s /1 #hec3 An#reateKLM

Fill in the OnCreate() method

pu>lic class DrtistsDcti,ity e+ten&s Dcti,ity N pu>lic ,oi& on#reateK@un&le sa,e&"nstanceStateL N super.on#reateKsa,e&"nstanceStateLM 5e+tView te+t,iew - new 5e+tViewKthisLM te+t,iew.set5e+tK.5his is the Drtists ta>.LM set#ontentViewKte+t,iewLM

Puic3 an& &irty Q>y han&R li3e in Hello%orl&

#opy an& Paste DrtistsDcti,ity into two more acti,ities$ Dl>umsDcti,ity an& Son'sDcti,ity

Co y the icons
<i'ht clic3 /1 Sa,e DsJ Ma3e .2res2&rawa>le mo,e the icons into .2res2&rawa>le

Create !"res"drawable"ic#tab#artists!$ml
)*+ml ,ersion-.1.0. enco&in'-.utf/0.*1 )selector +mlns$an&roi&-.http$22schemas.an&roi&.com2ap32res2an&roi&.1 )S// %hen selecte&J use 'rey //1 )item an&roi&$&rawa>le-.@&rawa>le2ic4ta>4artists4'rey. an&roi&$state4selecte&-.true. 21 )S// %hen not selecte&J use white//1 )item an&roi&$&rawa>le-.@&rawa>le2ic4ta>4artists4white. 21 )2selector1

StateListTrawa>le o>Hect that &isplays &ifferent ima'es for &ifferent states of a View

%a&e co ies or the $ml 'iles 'or the other two tabs(

#opy the +ml file$

ic4ta>4artists.+ml /1
ic4ta>4al>ums.+lm /1 ic4ta>4son's.+ml

%ain Layout

)*+ml ,ersion-.1.0. enco&in'-.utf/0.*1 )5a>Host +mlns$an&roi&-.http$22schemas.an&roi&.com2a p32res2an&roi&. an&roi&$i&-.@an&roi&$i&2ta>host. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent.1 )LinearLayout an&roi&$orientation-.,ertical. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent. an&roi&$pa&&in'-.9&p.1 )5a>%i&'et an&roi&$i&-.@an&roi&$i&2ta>s. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.wrap4content. 21 )FrameLayout an&roi&$i&-.@an&roi&$i&2ta>content. an&roi&$layout4wi&th-.fill4parent. an&roi&$layout4hei'ht-.fill4parent. an&roi&$pa&&in'-.9&p. 21 )2LinearLayout1 )25a>Host1

OnCreate() 'or )elloTabs (main activity)

pu>lic ,oi& on#reateK@un&le sa,e&"nstanceStateL super.on#reateKsa,e&"nstanceStateLM set#ontentViewK<.layout.mainLM <esources res - 'et<esourcesKLM 22 <esource o>Hect to 'et Trawa>les 5a>Host ta>Host - 'et5a>HostKLM 22 5he acti,ity 5a>Host 5a>Host.5a>Spec specM 22 <esusa>le 5a>Spec for each ta> "ntent intentM 22 <eusa>le "ntent for each ta> 22 #reate an "ntent to launch an Dcti,ity for the ta> Kto >e reuse&L intent - new "ntentKL.set#lassKthisJ DrtistsDcti,ity.classLM 22 "nitialize a 5a>Spec for each ta> an& a&& it to the 5a>Host spec - ta>Host.new5a>SpecK.artists.L.set"n&icatorK.Drtists.J res.'etTrawa>leK<.&rawa>le.ic4ta>4artistsLL .set#ontentKintentLM ta>Host.a&&5a>KspecLM 22 To the same for the other ta>s 67777777778 ta>Host.set#urrent5a>K2LM

Main Dcti,ity is a 5a>Dcti,ity U has a 5a>Host

@uil&er mappin' the resources to the ta>

Select 5a> 2

Run it*

List +iew

List of scrolla>le items Dpplication will inherit from ListDcti,ity rather than Dcti,ity #reate .2res2layout2list4item.+ml

Layout for each item

Override the OnCreate method

public class HelloListView extends ListDcti,ity N 2VV #alle& when the acti,ity is first create&. V2 @A,erri&e public void on#reateK@un&le sa,e&"nstanceStateL N super.on#reateKsa,e&"nstanceStateLM

Setup the list for this applicationJ with this layout an& this content

setListD&apterKnew DrrayD&apter)Strin'1KthisJ <.layout.list_itemJ #A!I5<"?SLLM ListView l, - 'etListViewKLM l,.set5e+tFilter?na>le&KtrueLM

O O

l,.setAn"tem#lic3ListenerKnew An"tem#lic3ListenerKL N public void on"tem#lic3KD&apterView)*1 parentJ View ,iewJ int positionJ long i&L N 22 %hen clic3e&J show a toast with the 5e+tView te+t 5oast.makeTextK'etDpplication#onte+tKLJ KK5e+tViewL ,iewL.'et5e+tKLJ 5oast.LENGTH_SHORTL.showKLM O OLM

?na>les filterin' >y 3ey>oar&

Small 5oast showin' the te+t in the clic3e& item for a short time

Run it*

,ate -ic&er

%ill &isplay a &ialo'>o+ allowin' to chan'e the &ate

Layout
)*+ml ,ersion-.1.0. enco&in'-.utf/0.*1 )LinearLayout +mlns$an&roi&-.http$22schemas.an&roi&.com2ap 32res2an&roi&. an&roi&$layout4wi&th-.wrap4content. an&roi&$layout4hei'ht-.wrap4content. an&roi&$orientation-.,ertical.1 )5e+tView an&roi&$i&-.@=i&2&ateTisplay. an&roi&$layout4wi&th-.wrap4content. an&roi&$layout4hei'ht-.wrap4content. an&roi&$te+t-..21 )@utton an&roi&$i&-.@=i&2pic3Tate. an&roi&$layout4wi&th-.wrap4content. an&roi&$layout4hei'ht-.wrap4content. an&roi&$te+t-.#han'e the &ate.21 )2LinearLayout1

OnCreate( )
protecte& ,oi& on#reateK@un&le sa,e&"nstanceStateL N super.on#reateKsa,e&"nstanceStateLM set#ontentViewK<.layout.mainLM 22 capture our View elements mTateTisplay - K5e+tViewL fin&View@y"&K<.i&.&ateTisplayLM mPic3Tate - K@uttonL fin&View@y"&K<.i&.pic3TateLM 22 a&& a clic3 listener to the >utton mPic3Tate.setAn#lic3ListenerKnew View.An#lic3ListenerKL N pu>lic ,oi& on#lic3KView ,L N showTialo'KTD5?4T"DLA 4"TLM O OLM 22 'et the current &ate final #alen&ar c - #alen&ar.'et"nstanceKLM mWear - c.'etK#alen&ar.W?D<LM mMonth - c.'etK#alen&ar.MAI5HLM mTay - c.'etK#alen&ar.TDW4AF4MAI5HLM 22 &isplay the current &ate Kthis metho& is >elowL up&ateTisplayKLM

u date,is lay( )
22 up&ates the &ate in the 5e+tView pri,ate ,oi& up&ateTisplayKL N mTateTisplay.set5e+tK new Strin'@uil&erKL 22 Month is 0 >ase& so a&& 1 .appen&KmMonth = 1L.appen&K./.L .appen&KmTayL.appen&K./.L .appen&KmWearL.appen&K. .LLM O

,ate-ic&er,ialo.!On,ate/etListener( )
22 the call>ac3 recei,e& when the user .sets. the &ate in the &ialo' pri,ate TatePic3erTialo'.AnTateSetListener mTateSetListener new TatePic3erTialo'.AnTateSetListenerKL N pu>lic ,oi& onTateSetKTatePic3er ,iewJ int yearJ int monthAfWearJ int &ayAfMonthL N mWear - yearM mMonth - monthAfWearM mTay - &ayAfMonthM up&ateTisplayKLM O

OM

onCreate,ialo.( )
@A,erri&e protecte& Tialo' on#reateTialo'Kint i&L N switch Ki&L N case TD5?4T"DLA 4"T$ return new TatePic3erTialo'KthisJ mTateSetListenerJ mWearJ mMonthJ mTayLM O return nullM O

Run it*