Android Bab3 UserInterface1

8/13/2019 Android Bab3 UserInterface1

1/37

Tujuan

1. Mengetahui dan Memahami Views pada Android

2. Mengetahui dan Memahami Layouts pada Android

3. Mengetahui dan Memahami Date and Time Picker

4. Mengetahui dan Memahami Anaog !ock

". Mengetahui dan Memahami Digita !ock

#. Dapat Mem$uat Autoink pada Android

%. Mengetahui dan Dapat Mengu$ah &ont pada Android

'. Mengetahui dan Memahami !ara Menampikan (am$ar

Materi Pembelajaran

3. 1. VIEWS

Ada $er$agai macam common Views yang digunakan daam pem$angunan Android.

)erikut ini yang termasuk kategori View *

Basic View

List View

ProgressBar View

Picker View

nalog !lock an" #igital !lock View

#is$la% Image View

Menu

. Basic ViewDi $agian ini+ kita akan mempea,ari )asic Views di Android yang memungkinkan Anda

untuk menampikan in-ormasi teks serta meakukan $e$erapa piihan dasar. ecara khusus+

Anda akan $ea,ar tentang macam / macam View $erikut*

Versi 1.0 Created by Meruvian Education 1


2/37

Te0tView

Auto!ompeteTe0tView

dit Te0t

)utton

mage)utton

!heck)o0

Toogge )utton

adio)utton

1. Te&t View

)ia Anda mem$uat se$uah proyek Android $aru+ cipse seau mem$uat -ie main.0m

teretak di res 5 -oder ayout6 yang mengandung unsur 7Te0tView8

'(&ml9ersion:;1.width:;-i>parent;

android*ayout>height:;-i>parent;

)

'Te&tView

android*ayout>width:;-i>parent;

android*ayout>height:;wrap>content;

android*te0t:;?string5heo;

*)

'*LinearLa%out)



3/37

Te0tView digunakan untuk menampikan teks ke pengguna. ni adaah View yang

paing dasar yang pasti ada di saat anda mengem$angkan apikasi Android. @ika anda ingin

mengedit teks yang ditampikan+ anda harus menggunakan su$cass dari Te0tView yaitu

ditTe0t+ yang di$ahas daam $agian $erikutnya.

+. uto!om$leteTe&tView

Auto!ompeteTe0tView mirip dengan ditTe0t karena Auto Auto!ompeteTe0tView

su$cass dari ditTe0t6. Per$edaannya adaah Auto!ompeteTe0t $isa menun,ukkan ist yang

tersedia secara otomatis ketika pengguna sedang mengetik.

3. E"it Te&t, Button, ImageButton, Tooggle Button, -a"ioButton, !eckBo&,

eain Te0tView+ anda akan sering menemui $e$erapa kontro dasar ain seperti

adio)utton )utton+ mage)utton+ ditTe0t+ kotak centang+ Togge)utton++ dan adio(roup.



4/37

ekarang mari kita $ahas mengenai View yang ada di -ie 0m di atas *

E"itTe&t

se$uah su$cass dari Te0tView yang $er-ungsi untuk mengedit te0t.

Button

merupakan se$uah widget tom$o=tom$o

ImageButton

mirip dengan View )utton

ToggleButton

Lampu indikator akan menyaa ketika )utton ditekan.

!eckBo&

adaah eemen antarmuka pengguna gra-is widget6 yang memungkinkan pengguna

untuk mem$uat $e$erapa piihan dari se,umah piihan.

-a"io/rou$ "an -a"ioButton

adaah widget yang memungkinkan pengguna untuk memiih hanya saah satu set opsi

yang sudah ditetapkan. e$uah adio(roup digunakan untuk grup $ersama satu atau

e$ih adio)utton+ sehingga hanya satu adio)utton yang akan dicheck oeh

adio(roup

3. +. L02TS

Layout adaah eemen container daam user inter-ace. etiap kai kita mende-inisikan

-ie 0m dengan user inter-ace tertentu+ kita peru menggunakan eemen ini untuk mem$uat

hierarky 9iew. Ada $e$erapa ,enis ayout+ yaitu *



5/37

LinearLayout

A$souteLayout

Ta$eLayout

eati9eLayout

&rameLayout

croView

1.LinearLa%out

uatu Layout yang mengatur !hid View 9iew anak6 ke daam se$uah $aris horisonta

atau 9ertika tungga. Linear Layout ini $isa menciptakan scro$ar ,ika pan,ang window

mee$ihi pan,ang screen atau ayar.

+. Table La%out

Bita dapat mengatur posisi widget di $aris dan koom. Ta$eLayout ini memiiki unsur=

unsur Ta$eows. etiap Ta$eows ini dapat menyimpan satu atau e$ih koom.



6/37

3. -elatie La%out

Daam eati9eLayout+ anda dapat menentukan posisi !hid View agar reati- terhadap satu

sama ain. Perhatikan -ie $erikut main.0m*



7/37

4. bsolute La%out

Di A$soute Layout ini anda menentukan sendiri etak !hid View. (am$ar di$awah

menun,ukkan dua tom$o atau )utton View teretak pada posisi tertentu dengan

menggunakan android>ayout>0 dan atri$ut android>ayout>y.

5. 6rame La%out

&rame Layout adaah Layout yang $ertindak se$agai -rame 9iew $ingkai tampian6untuk menampikan suatu o$,ek.. Daam gam$ar ini kita menggunakan imageView yang

ditaruh di res5drawa$e.



8/37

@ika anda menam$ahkan 9iew ain seperti )utton 9iew6 daam &rame Layout+ maka

9iew tadi akan menindih o9erap6 9iew se$eumnya.

7. Scroll View

cro View digunakan untuk men=scro ist yang pan,ang. croView hanya dapat

$erisi satu !hid View atau View(roup+ yang $iasanya adaah se$uah LinearLayout.



9/37

3. 3. #ate an" Time Picker

TimePicker memungkinkan pengguna untuk memiih waktu $aik daam mode 24 ,am

atau mode AM 5 PM. Date Picker memungkinkan pengguna untuk memiih tangga

main.&ml

7C0m 9ersion:;1.


10/37

#ateTimePicker.jaa

$ackageandroid.dateTimePickerE

im$ort,a9a.uti.!aendarE

im$ortandroid.app.Acti9ityE

im$ortandroid.app.DatePickerDiaogE

im$ortandroid.app.DiaogE

im$ortandroid.app.TimePickerDiaogE

im$ortandroid.os.)undeE

im$ortandroid.9iew.ViewE

im$ortandroid.widget.)uttonE

im$ortandroid.widget.DatePickerE

im$ortandroid.widget.TimePickerE

im$ortandroid.widget.ToastE

$ublicclassDateTimePickere&ten"sActi9ityF

$riateintmyGear+myMonth+myDay+myHour+myMinuteE

static8inalintID_DATEPICKER:


11/37

$riate)utton.In!ickListenerdatePicker)uttonIn!ickListener

:new)utton.In!ickListener6F

$ublicoi"on!ickView96F

55 T#Auto=generated method stu$

8inal!aendarc:!aendar.getInstance6E

myGear:c.get!aendar.YEAR6E

myMonth:c.get!aendar.MONTH6E

myDay:c.get!aendar.DAY_O_MONTH6E

showDiaogID_DATEPICKER6E

J

JE

$riate)utton.In!ickListenertimePicker)uttonIn!ickListener

:new)utton.In!ickListener6F

$ublicoi"on!ickView96F


8inal!aendarc:!aendar.getInstance6E

myHour:c.get!aendar.HO!R_O_DAY6E

myMinute:c.get!aendar.MIN!TE6E

showDiaogID_TIMEPICKER6E

J

JE

?I9erride

$rotecte"Diaogon!reateDiaogintid6F


switcid6F

caseID_DATEPICKER*

Toast.makeTe"tDateTimePicker.tis+



12/37

;= on!reateDiaogD>DATP!B6 =;+

Toast.#EN$TH_#ON$6.show6E

returnnewDatePickerDiaogtis+

myDateetListener+

myGear+myMonth+myDay6E

caseID_TIMEPICKER*

Toast.makeTe"tDateTimePicker.tis+

;= on!reateDiaogD>TMP!B6 =;+


returnnewTimePickerDiaogtis+

myTimeetListener+

myHour+myMinute+8alse6E

"e8ault*

returnnullE

J

J

$riateDatePickerDiaog.InDateetListenermyDateetListener

:newDatePickerDiaog.InDateetListener6F

$ublicoi"onDateetDatePicker9iew+intyear+

intmonthI-Gear+intdayI-Month6F


tringdate:;Gear* ;tring.%a&ueO'year6;Kn;

;Month* ;tring.%a&ueO'monthI-Gear16;Kn;

;Day* ;tring.%a&ueO'dayI-Month6E

Toast.makeTe"tDateTimePicker.tis+date+


J

JE



13/37

$riateTimePickerDiaog.InTimeetListenermyTimeetListener

:newTimePickerDiaog.InTimeetListener6F

$ublicoi"onTimeetTimePicker9iew+inthourI-Day+intminute6F


tringtime:;Hour* ;tring.%a&ueO'hourI-Day6;Kn;

;Minute* ;tring.%a&ueO'minute6E

Toast.makeTe"tDateTimePicker.tis+time+


J

JE

J

3. 4. nalog !lock



14/37

Anaog !ock View untuk menampikan ,am anaog

7C0m 9ersion:;1.


15/37

3. 5. #igital !lock

Digita !ock untuk menampikan ,am digita

7C0m 9ersion:;1.


16/37

3. 7. n"roi" uto Link

Auto Link ini $er-ungsi untuk mengu$ah tuisan $iasa men,adi se$uah Link.

main.&ml

7C0m 9ersion:;1.


17/37


android*te0t:;emai isC;

58

7ditTe0t

android*id : ;?id5emais;



58

7Te0tView



android*te0t:;we$ ite isC;

58

7ditTe0t

android*id : ;?id5we$sites;



58

7Te0tView



android*te0t:;address isC;

58

7ditTe0t

android*id : ;?id5addresss;



58

7LinearLayout

android*orientation:;horionta;



18/37



android*gra9ity:;rightN$ottom;

8

7)utton

android*id : ;?id5ok;

android*ayout>width:;wrap>content;


android*te0t:;IB; 58

7)utton

android*id : ;?id5cance>1;

android*ayout>width:;wrap>content;


android*te0t:;!ance; 58

75LinearLayout8

75LinearLayout8

utoLink.jaa

$ackageandroid.autoLinkE



im$ortandroid.widget.)uttonE

im$ortandroid.widget.Te0tViewE

im$ortandroid.widget.ditTe0tE


$ublicclassAutoLink e&ten"sActi9ity F

$riate

)utton ok)uttonE

)utton cance1)uttonE

ditTe0t te0tOameE



19/37

ditTe0t te0tPhonenum$ersE

ditTe0t te0tmaisE

ditTe0t te0te$sitesE

ditTe0t te0tAddresssE

)utton $ack)uttonE

)utton cance2)uttonE

Te0tView name&iedE

Te0tView phonenum$er&iedE

Te0tView emai&iedE

Te0tView we$site&iedE

Te0tView address&iedE

5!aedwhentheacti9ityis-irstcreated.5

?I9erride

$ublicoi"on!reate)unde sa9ednstancetate6 F

su$er.on!reatesa9ednstancetate6E

startLayout16E

J

$riate)utton.In!ickListener okIn!ickListener:

new)utton.In!ickListener6F

$ublicoi"on!ickView 96 F

te0tOame: ditTe0t6 -indView)yd.id.()oare*ou6E

!hareuence te0tOame>9aue : te0tOame.getTe0t6E

te0tPhonenum$ers:

ditTe0t6 -indView)yd.id.p)onenumberIs6E

!hareuence te0tPhonenum$ers>9aue :

te0tPhonenum$ers.getTe0t6E

te0tmais: ditTe0t6 -indView)yd.id.emai&Is6E



20/37

!hareuence te0tmais>9aue : te0tmais.getTe0t6E

te0te$sites: ditTe0t6 -indView)yd.id.(ebsiteIs6E

!hareuence te0te$sites>9aue : te0te$sites.getTe0t6E

te0tAddresss: ditTe0t6 -indView)yd.id.addressIs6E

!hareuence te0tAddresss>9aue : te0tAddresss.getTe0t6E

startLayout26E

name&ied: Te0tView6 -indView)yd.id.name6E

name&ied.setTe0t;Heo ;te0tOame>9aue6E

phonenum$er&ied: Te0tView6 -indView)yd.id.p)onenumber6E

phonenum$er&ied.setTe0t;Phone Oum$er* ;

te0tPhonenum$ers>9aue6E

emai&ied: Te0tView6 -indView)yd.id.emai&6E

emai&ied.setTe0t;mai* ;te0tmais>9aue6E

we$site&ied: Te0tView6 -indView)yd.id.(ebsite6E

we$site&ied.setTe0t;e$site* ;te0te$sites>9aue6E

address&ied: Te0tView6 -indView)yd.id.address6E

address&ied.setTe0t;Address* ;te0tAddresss>9aue6E

J

JE

$riate)utton.In!ickListener $ackIn!ickListener:





21/37

startLayout16E

J

JE

$riate)utton.In!ickListener canceIn!ickListener:



-inish6E

J

JE

$riateoi"startLayout16F

set!ontentView.ayout.main6E

ok)utton: )utton6 -indView)yd.id.ok6E

ok)utton.setIn!ickListenerokIn!ickListener6E

cance1)utton: )utton6 -indView)yd.id.cance&_+6E

cance1)utton.setIn!ickListenercanceIn!ickListener6E

JE

$riateoi"startLayout26F

set!ontentView.ayout.main,6E

$ack)utton: )utton6 -indView)yd.id.back6E

$ack)utton.setIn!ickListener$ackIn!ickListener6E

cance2)utton: )utton6 -indView)yd.id.cance&_,6E

cance2)utton.setIn!ickListenercanceIn!ickListener6E

JE

J



22/37

3. 9. n"roi" 6ont

Badangkaa kita mem$utuhkan -ont atau ,enis tuisan untuk apikasi yang kita $uat.

Anda $isa mengam$i dari -ont yang disediakan oeh Android de-aut -ont6 atau

menggunakan -ont e0terna yang kemudian dimasukkan ke daam Android.

1. #e8ault 6ont

Android hanya menyediakan 3 de-aut -ont+ yaitu Monoscape+ ans+ dan eri-.

7C0m 9ersion:;1.


23/37

android*te0t:;seri- * Android Programming;

android*id:;?id5seri-T0t;

android*$ackground:;Q424242;8

75Te0tView8

75LinearLayout8

+. E&ternal 6ont

eain de-aut -ont+ anda dapat menggunakan e0terna -ont daam apikasi Android.

Langkah pertama+ anda peru downoad -ont -ie .tt-6 kemudian $uat -oder $aru di daam

package assets dan copy kan -ont tadi kedaamnya. eteah itu $eri id untuk masing = masing

-ont dengan nama te0t1 dan te0t2 daam se$uah Te0tView di -ie 0m main.0m6 *

7C0m 9ersion:;1.


24/37

8

7Te0tView

android*id:;?id5te0t1;



58

7Te0tView




58

7Te0tView




58

7Te0tView




58

7Te0tView

android*id:;?id5te0t";



58

7Te0tView

android*id:;?id5te0t#;




25/37


58

75LinearLayout8

mport android graphics Type-ace kedaam cass Main. Type-ace digunakan untuk

menentukan ,enis huru- dan stye intrinsik dari se$uah -ont. Bemudian $uat o$,ect -ont1 dan

-ont2 untuk mengam$i -ont yang kita simpan daam -oder assets tadi dengan menggunakan

method create&romAssets6.

$ackageandroid.e0terna&ontE


im$ortandroid.graphics.Type-aceE


im$ortandroid.widget.Te0tViewE

$ublicclassMain e&ten"sActi9ity F

5!aedwhentheacti9ityis-irstcreated.5

?I9erride

$ublicoi"on!reate)unde sa9ednstancetate6 F



Type-ace -ont2 : Type-ace.createromAssetgetAssets6+ ;-ont5-ont2.tt-;6E



Type-ace -ont" : Type-ace.createromAssetgetAssets6+ ;-ont5-ont".tt-;6E

Type-ace -ont# : Type-ace.create&romAssetgetAssets6+ ;-ont5-ont#.tt-;6E

)uat o$,ect customTe0t daam Te0tView untuk mengam$i id -ont yang sudah kita

dekarasikan daam main.0m

Te0tView customTe0t2 : Te0tView6-indView)yd.id.te"t,6E

Te0tView customTe0t3 : Te0tView6-indView)yd.id.te"t-6E

Te0tView customTe0t4 : Te0tView6-indView)yd.id.te"t.6E



26/37

Te0tView customTe0t" : Te0tView6-indView)yd.id.te"t/6E

Te0tView customTe0t# : Te0tView6-indView)yd.id.te"t06E

Anda dapat menentukan ,enis -ont yang akan digunakan dengan -ungsi setType-ace6+

mengu$ah ukuran te0t de-aut dengan method setTe0tie6+ dan mende-inisikan te0t yang

akan ditampikan meaui method setTe0t6.

customTe0t2.setType-ace-ont26E

customTe0t2.setTe0tie3


27/37

3. :. #is$la% Image

1./ri"View

Tampian (ridView menampikan item daam dua dimensi scroing grid. Anda dapat

menggunakan tampian (ridView $ersama=sama dengan mageView untuk menampikan

serangkaian gam$ar.

7C0m 9ersion:;1.


28/37

$ackageandroid.dispaymageE


im$ortandroid.content.!onte0tE



im$ortandroid.9iew.View(roupE

im$ortandroid.widget.AdapterViewE

im$ortandroid.widget.)aseAdapterE

im$ortandroid.widget.(ridViewE

im$ortandroid.widget.mageViewE

im$ortandroid.widget.ToastE

im$ortandroid.widget.AdapterView.Intem!ickListenerE

$ublicclassDispaymagee&ten"sActi9ity

F

55===the images to dispay===

ntegerSimageDs:F

.drawa$e.pic++

.drawa$e.pic/+

.drawa$e.pic0+

.drawa$e.pic1+

.drawa$e.pic+++

.drawa$e.pic+-+

.drawa$e.pic+.+

.drawa$e.pic+/+

.drawa$e.pic+1+

.drawa$e.pic+2+ .drawa$e.pic+3+

.drawa$e.pic,,+

.drawa$e.pic,-+

.drawa$e.pic,.+



29/37

.drawa$e.pic,0+

.drawa$e.pic,1+

.drawa$e.pic,3+

.drawa$e.pic-4+

.drawa$e.pic-++

.drawa$e.pic-,+

.drawa$e.pic--+

.drawa$e.pic-.+

.drawa$e.pic-/+

.drawa$e.pic-0

JE

?I9erride

$ublicoi"on!reate)undesa9ednstancetate6

F



(ridViewgridView:(ridView6-indView)yd.id.grid%ie(6E

gridView.setAdapternewmageAdaptertis66E

gridView.setIntem!ickListener newIntem!ickListener6

F

$ublicoi"ontem!ickAdapterViewparent+

View9+intposition+longid6

F

Toast.makeTe"tget)ase!onte0t6+

;pic;position16; seected;+

Toast.#EN$TH_5HORT6.show6E

J

J6E

J



30/37

$ublicclassmageAdaptere&ten"s)aseAdapter

F

$riate!onte0tconte0tE

$ublicmageAdapter!onte0tc6

F

conte0t:cE

J

55===returns the num$er o- images===

$ublicintget!ount6F

returnimageDs.engthE

J

55===returns the D o- an item===

$ublicI$,ectgettemintposition6F

returnpositionE

J

$ubliclonggettemdintposition6F

returnpositionE

J

55===returns an mageView 9iew===

$ublicViewgetViewintposition+Viewcon9ertView+View(roupparent6

F

mageViewimageViewE

i8con9ertView::null6F

imageView:newmageViewconte0t6E

imageView.setLayoutParams new(ridView.LayoutParams'"+ '"66E

imageView.setcaeTypemageView.caeType.CENTER_CROP6E

imageView.setPadding"+ "+"+"6E



31/37

JelseF

imageView:mageView6con9ertViewE

J

imageView.setmageesource imageDsSposition6E

returnimageViewE

J

J

J

+.ImageSwitcer

Pada awanya magewitcher akan menampikan serangkaian gam$ar daam ukuran

keci+ namun ketika saah satu gam$ar dipiih gam$ar akan ditampikan pada tampian

mageView sehingga ukuran gam$ar men,adi -u screen.



32/37

main.&ml

7C0m 9ersion:;1.


33/37

im$ortandroid.9iew.animation.AnimationUtisE

im$ortandroid.widget.AdapterViewE

im$ortandroid.widget.)aseAdapterE

im$ortandroid.widget.(aeryE

im$ortandroid.widget.(aery.LayoutParamsE

im$ortandroid.widget.Viewwitcher.View&actoryE

im$ortandroid.widget.magewitcherE

im$ortandroid.widget.mageViewE

im$ortandroid.widget.AdapterView.Intem!ickListenerE

$ublicclassmagee&ten"sActi9ity

im$lementsView&actory

F

55===the images to dispay===

ntegerSimageDs:F

.drawa$e.pic++

.drawa$e.pic,+

.drawa$e.pic-+

.drawa$e.pic.+

.drawa$e.pic/+

.drawa$e.pic0+

.drawa$e.pic1+

.drawa$e.pic2+

.drawa$e.pic3+

.drawa$e.pic+4+

.drawa$e.pic+++

.drawa$e.pic+,+

.drawa$e.pic+.+

.drawa$e.pic+0+

.drawa$e.a+

.drawa$e.e+

.drawa$e.'+

.drawa$e.g



34/37

JE

$riatemagewitcherimagewitcherE

?I9erride

$ublicoi"on!reate)undesa9ednstancetate6

F



imagewitcher:magewitcher6-indView)yd.id.s(itc)er+6E

imagewitcher.set&actorytis6E

imagewitcher.setnAnimationAnimationUtis.&oadAnimationtis+

android..anim.'ade_in66E

imagewitcher.setIutAnimationAnimationUtis.&oadAnimationtis+

android..anim.'ade_out66E

(aerygaery:(aery6-indView)yd.id.ga&&er*+6E

gaery.setAdapternewmageAdaptertis66E

gaery.setIntem!ickListener newIntem!ickListener6

F

$ublicoi"ontem!ickAdapterViewparent+

View9+intposition+longid6

F

imagewitcher.setmageesourceimageDsSposition6E

J

J6E

J

$ublicViewmakeView6

F

mageViewimageView:newmageViewtis6E



35/37

imageView.set)ackground!oor


36/37

$ubliclonggettemdintposition6

F

returnpositionE

J

55===returns an mageView 9iew===

$ublicViewgetViewintposition+Viewcon9ertView+View(roupparent6

F

mageViewimageView:newmageViewconte0t6E

imageView.setmageesource imageDsSposition6E

imageView.setcaeTypemageView.caeType.IT_6Y6E

imageView.setLayoutParams new(aery.LayoutParams1"


37/37

Documents

Android Bab3 UserInterface1