PERTEMUAN 2:

DESAIN USER INTERFACE

A. TUJUAN PEMBELAJARAN
Pada bab ini akan dijelaskan mengenai kegunaan user interface dan membuat
project baru dalam aplikasi Android.Melalui praktikum, Anda harus mampu:
2.1 Menjelaskan kegunaan User Interface.
2.2 Membuat Project Baru Dengan Komponen User Interface
2.3 Mengatur Proses Aplikasi
2.4 Mengeksekusi Aplikasi

B. URAIAN MATERI
Tujuan Pembelajaran 2.1:
Menjelaskan Kegunaan User Interface

User interface (antarmukapengguna) merupakanbentuktampilan yang

berfungsiuntukmenghubungkanantarapengguna (user) denganaplikasiatausistemoperasi,
sehinggapengguna (user) dapatmengertidanberkomunikasi. User
interfacedapatberupateksmaupungrafis. Untukaplikasi yang menekankanpadakecepatan
proses danditujukanuntukpangguna (user) denganpengetahuanlebihbaik,
biasanyadibuatbentukteks. Sedangkanuntukaplikasi yang ditujukanuntukpenggunaakhir
(end user) danlebihmenekankanuser friendly, makadigunakanbentukgrafis.
Dalampembuatanaplikasi android menggunakan eclipse,
kitadapatmembuatdesainuser interfacemelalui mode grafismaupun mode teks. Untuk mode
grafis, dapatkitalakukandengandrag and dropmelaluijendelapalette.
Sedangkandesainmelalui mode teksdapatkitalakukanmenggunakankode XML.
Tampilanjendela palette dapatdilihatpadagambar 2.1 berikutini:

24
 Gambar 2.1 Jendelapalette

Tujuan Pembelajaran 2.2:

Membuat Project BaruDengan Komponen User Interface

Untukmembuat project baru, klik menu File >> New

>>Other...sehinggatampilkotak dialog sepertigambar 2.2 berikutini:

25
 Gambar 2. 2 Kotak dialog membuat project baru

PilihAndroid Application Project di dalam folder Android, kemudiankliktombol

Next. Setelahtampilkotak dialog pengaturansepertigambar 2.3, berinamaaplikasi
“UserInterface”, danpadanama package ubah “example”menjadi “unpam”. Tentukanversi
android SDK untukaplikasi yang akandibuatpada menu dropdown Build SDK, danminimum
required SDK.

26
 Gambar 2. 3 Kotak dialog pengaturan project

Setelahpengaturannamaaplikasi, nama project, nama package, dan SDK

dariaplikasi, kliktombo next untukmelanjutkansehinggatampilkotak dialog sepertigambar
2.4. Atur icon dariaplikasi yang akandibuat, bisamenggunakan image, clipart, maupun text.
Aturbentukdanwarnadari icon jikadiperlukan,
jikasudahselesailanjutkandenganmengkliktombol Next.

27
Gambar 2. 4 Pengaturan icon aplikasi

Gambar 2. 5 Memilihjenis Activity

28
 PilihBlank ActivityuntukjenisActivitydariaplikasi yang akandibuat.
Lanjutkandenganmengkliktombol Next. Ubahjudul (Title) aplikasimenjadi “User
Interface”.

Gambar 2. 6 Mengaturnamadanjudul activity

KliktombolFinishuntukmengakhiripengaturanpembuatanaplikasi.
Tunggubeberapasaatsampaitampildesainaplikasisepertigambar 2.7. Jikajendela yang
tampiltidaksama, dapatdiaturdari menu Window >> Show Viewdanpilihjendela yang
inginditampilkan. Jikainginmengubahtampilankebentukstandar, dapatdilakukanmelalui
menu Window >> Reset Perspective.

29
 Gambar 2. 7 Tampilan IDE aplikasi android

HapusTextView (teks “Hello Word!”), tambahkanLinearLayout (Horizontal) di

sudutkiriatas, kemudian di dalamnyatambahkanMedium,
atursehinggatampilsepertiberikutini:

Gambar 2. 8 Menambahkankomponen layout dantextview

LanjutkandenganmenambahkankomponenTextView, EditText, danButton,

janganlupamenggunakanLinearLayout (Horizontal),
kecualiuntuknilaiakhirmenggunakanLinearLayout (Vertical).
Aturdesaintampilanmenjadisepertigambar 2.9 dandesainoutlinemenjadisepertigambar 2.10.

30
 Gambar 2. 9 DesainTampilan

Gambar 2. 10 Desainoutline

31
Gambar 2. 11 KlikkananpadaMedium Text

Gambar 2. 12 Jendelapengaturanteks

32
 Gambar 2. 13 Membuatvariabel reference

Gambar 2. 14 Mengisinilaiteksdenganvariabel reference

33
Gambar 2. 15 Lokasistrings.xml di dalamproject

24
 Gambar 2. 16 Halamanresources strings.xml

Kliktombol Add untukmenambahkannilaibaru, sehinggatampilkotak dialog

sepertigambar 2.17 berikutini:

Gambar 2. 17 Menentukanjenis element

25
 Pilih String dankliktombol Ok untukmelanjutkan. Berinilai “uts” untuk name dan “UTS”
untuk value sepertigambar 2.18.

Gambar 2. 18 Memberinilai element

Untukmeng-update nilai element, klik String di kotaksebelahkiri,

sehinggatampilanmenjadisepertiberikutini:

26
 Gambar 2. 19 Update nilai element

Untukmembuat/mengubah/menghapus element dapatdilakukanmelalui source code

XML dengancaramengklik tab strings.xml di bagianbawah. Ubah source code XML
menjadisepertiberikutini:

<resources>

<stringname="app_name">UserInterface</string>
<stringname="hello_world">Hello world!</string>
<stringname="menu_settings">Settings</string>
<stringname="title_activity_main">User Interface</string>
<stringname="judul">MenghitungNilai</string>
<stringname="uts">UTS</string>
<stringname="uas">UAS</string>
<stringname="nilai_akhir">NilaiAkhir</string>
<stringname="hitung">Hitung</string>
<stringname="tutup">Tutup</string>

<colorname="merah">#FF0000</color>
<colorname="hijau">#00FF00</color>
<colorname="biru">#0000FF</color>

</resources>

27
 Kemudiansimpansemuaperubahanmelalui menu File >> Save All, ataudari toolbar Save
All. Bukakembali activity_main.xml, danubahteksdariTextViewdan Button
sehinggasepertigambar 2.21.

Gambar 2. 20 Memilihnamavariabel reference

28
 Gambar 2. 21 Desainaplikasi

Ubah ID dariEditTextdanButtondengancaraklikkanan>>EditID,
sehinggaoutlinemenjadisepertiberikutini:

Gambar 2. 22 Outline aplikasi

29
 Untukmengatur alignment darijudul, sehinggatampil di tengah, klikkanan>> Other
Properties >> All By Name >>Grafity>> Center. Ubah juga aligmentdarinilaiAkhirEditText
agar rata kanandengancaraklikkanan>> Other Properties >> All By Name >>Grafity>> Right.
Ubahpropertilayout_widthdaninputTypedariEditText, clickable
danfucosabledarinilaiAkhirEditText, danlayout_weightdari button melalui source code XML
sehinggamenjadisepertiberikutini:

<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"android:layout_width="matc
h_parent"android:layout_height="match_parent">

<LinearLayout
android:id="@+id/linearLayout1"android:layout_width="wrap_content"and
roid:layout_height="wrap_content"android:layout_alignParentLeft="true
"android:layout_alignParentRight="true"android:layout_alignParentTop=
"true">

<TextView
android:id="@+id/textView1"android:layout_width="match_pare
nt"android:layout_height="wrap_content"android:gravity="cen
ter"
android:text="@string/judul"
android:textAppearance="?android:attr/textAppearanceMedium"/>

</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout2"android:layout_width="wrap_content"andro
id:layout_height="wrap_content"android:layout_alignParentLeft="true"and
roid:layout_alignParentRight="true"android:layout_below="@+id/linearLay
out1"android:layout_marginTop="14dp">

<TextView
android:id="@+id/textView2"android:layout_width="wrap_content"and
roid:layout_height="wrap_content"android:text="@string/uts"/>

<EditText
android:id="@+id/utsEditText"

android:layout_width="0dp"

30
 android:layout_height="wrap_content"android:layout_weight="1"

android:inputType="numberDecimal">

<requestFocus/>
</EditText>
</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout3"android:layout_width="wrap_content"android:layo
ut_height="wrap_content"android:layout_alignParentLeft="true"android:layout_al
ignParentRight="true"android:layout_below="@+id/linearLayout2">

<TextView
android:id="@+id/textView3"android:layout_width="wrap_content"android:layout_h
eight="wrap_content"android:text="@string/uas"/>

<EditText
android:id="@+id/uasEditText"

android:layout_width="0dip"
android:layout_height="wrap_content"android:layout_weight="1"

android:inputType="numberDecimal"/>

</LinearLayout>

<LinearLayout
android:id="@+id/linearLayout4"android:layout_width="wrap_content"androi
d:layout_height="wrap_content"android:layout_alignParentLeft="true"andro
id:layout_alignParentRight="true"android:layout_below="@+id/linearLayout
3"android:layout_marginTop="22dp"
android:orientation="vertical">

<TextView
android:id="@+id/textView4"android:layout_width="wrap_content"android:layout_h
eight="wrap_content"android:text="@string/nilai_akhir"/>

<EditText
android:id="@+id/nilaiAkhirEditText"android:layout_width="match_par
ent"android:layout_height="wrap_content"
android:gravity="right"

31
 android:clickable="false" android:focusable="false"
android:inputType="numberDecimal"/>

</LinearLayout>

<LinearLayout
android:layout_width="wrap_content"android:layout_height="wrap_content"android
:layout_alignParentLeft="true"android:layout_alignParentRight="true"android:la
yout_below="@+id/linearLayout4"android:layout_marginTop="20dp">

<Button
android:id="@+id/hitungButton"android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:layout_weight="3"
android:text="@string/hitung"/>

<Button
android:id="@+id/tutupButton"android:layout_width="wrap_content"android:layout
_height="wrap_content"
android:layout_weight="1"
android:text="@string/tutup"/>

</LinearLayout>

</RelativeLayout>

Sehinggadesainaplikasimenjadisepertiberikutini:

32
 Gambar 2. 23 Desainaplikasi

Tujuan Pembelajaran 2.3:

Mengatur Proses Aplikasi

Selanjutnya double klik MainActivity.java untukmengubah source code java yang

digunakanuntukmengatur proses aplikasi. Lokasi MainActivity.java berada di folder src>>nama
package aplikasi, sepertipadagambar di bawahini:

Gambar 2. 24 LokasiMainActivitydalam project

Ubahsource codemenjadisepertiberikutini:

33
 packagecom.unpam.userinterface;

importandroid.os.Bundle;
importandroid.app.Activity;
importandroid.view.Menu;
importandroid.view.View;
importandroid.view.View.OnClickListener;
importandroid.widget.EditText;

publicclassMainActivityextends Activity implementsOnClickListener{

privateEditTextutsET, uasET, nilaiAkhirET;

@Override
publicvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

= (EditText) findViewById(R.id.utsEditText); uasET

= (EditText) findViewById(R.id.uasEditText);
nilaiAkhirET = (EditText) findViewById(R.id.nilaiAkhirEditText);

findViewById(R.id.hitungButton).setOnClickListener(this);
findViewById(R.id.tutupButton).setOnClickListener(this);
}

@Override
publicbooleanonCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
returntrue;
}
publicvoidonClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()){
caseR.id.hitungButton:
doubleuts=0, uas=0, nilaiAkhir;

try {
uts =
Double.parseDouble(utsET.getText().toString());
} catch (Exception ex) {}

34
 try {
uas =
Double.parseDouble(uasET.getText().toString());
} catch (Exception ex) {}

nilaiAkhir = (uts + uas)/2;

if (nilaiAkhir>= 60){

nilaiAkhirET.setBackgroundResource(R.color.hijau);
} else {

nilaiAkhirET.setBackgroundResource(R.color.merah);
}

nilaiAkhirET.setText(Double.toString(nilaiAkhir));
break;
caseR.id.tutupButton:
System.exit(0);
}
}
}

Tujuan Pembelajaran 2.4:

Mengeksekusi Aplikasi

Untukmengeksekusi, klikkananpadanama project ataupilih menu Run, kemudianpilihRun

As >> Android Application.

35
Gambar 2. 25 Tampilanaplikasidalam AVD (Android Virtual Device)

36
C. SOAL LATIHAN/TUGAS
Buatlah project untukmenghitungluassegitiga!

37
D. DAFTAR PUSTAKA
Allen, Grant. 2012.Beginning Android 4. New York :Apress.

Safaat, H. Nazruddin. 2015.ANDROID PemrogramanAplikasi Mobile Smartphone

danTablet PC Berbasis Android. Bandung: Informatika

38