Program Studi Teknik Informatika pdf

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

P11
Bab 10 – Android (User Interface)

10.1 Tujuan
Mahasiswa memahami tipe sistem operasi android dan konsep pembuatan aplikasi di
Android.

10.2 Materi
1.
2.
3.

User Interface Component
AndroidManifest.xml
Widget


10.3 User Interface Component






Secara umum User Interface (UI) pada aplikasi berbasis Android adalah user interface yang
terdiri dari :
◦ Activity
◦ User Interface (komponen)
Semua yang berhubungan dengan user interface tersebut pada aplikasi Android :
◦ user interface :
▪ eclipse
: /res/layout/activity_main.xml
▪ netbeans
: /Reseources/layout/main.xml
◦ Source code Java untuk memanggil user interface :
▪ eclipse
: src/Package Name/MainActivity.java

▪ netbeans
: Sources Package/Package Name/MainActivity.java
Source code main.xml secara umum mempunyai struktur sebagai berikut :
main.xml (netbeans) / activity_main.xml (eclipse)
1
2
3
4
5
6
7
8
9
10
11













Keterangan (Element) :

◦ Kumpulan view yang dapat digunakan untuk menentukan tata letak komponen
view secara berbeda (seperti : LinearLayout, RelativeLayout, FrameLayout, dan
Tabulasi).
◦ Atribut dari ViewGroup terdiri dari :
▪ android:id
resource id → berisi variable unik dari elemen tersebut.
▪ android:layout_width
dimensi value-nya (width) → diikuti opsi “fill parent” atau “wrap content”
▪ android:layout_height
dimensi value-nya (height) → diikuti opsi “fill parent” atau “wrap content”


◦ Sama seperti tetapi lebih dikenal dengan “individual UI
Component”,
◦ Atributnya sama dengan ViewGroup.

◦ Element kosong yang bisa kita definisikan di dalam

◦ Untuk memasukkan file layout ke dalam layout. Atribute sama dengan
dan
◦ Tetapi ada satu penambahan atribut lagi yaitu yang berfungsi untuk
menentukan file layout-nya.

10.4 AndroidManifest.xml






File AndroidManifest.xml diperlukan oleh setiap aplikasi yang berbasis Android, file ini
terletak di directory root aplikasi :

◦ eclipse
: /AndroidManifest.xml
◦ netbeans
: /Important files/Android manifest file/AndroidManifest.xml
File AndroidManifest.xml :
◦ Mendeskripsikan variable global dari paket aplikasi yang akan digunakan.
◦ Berisi semua pendefinisian hal-hal yang dibutuhkan oleh aplikasi yang berbasis
Android.
Contoh file AndroidManifest.xml :
SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 2

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

AndroidManifest.xml (netbeans) / AndroidManifest.xml (eclipse)
1
2
3

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

24
25
26
27














Keterangan (Element) :


◦ Merupakan titik root utama dari AndroidManifest.xml
◦ Berisi atribute package aplikasi dan package activity






◦ Menjelaskan tentang user permission/security permission yang harus diberikan,
agar aplikasi dapat berjalan.
◦ Contoh uses-permission dalam penggunaan resources yang disediakan oleh
sistem, yang digunakan pada saat pengiriman SMS :





◦ Menjelaskan batasan tentang user permission/security permission.
SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 3


Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703






◦ Mendeklarasikan instrument yang disediakan untuk menguji fungsionalitas dari
paket aplikasi yang digunakan dalam aplikasi Android.

◦ Element root untuk mendeklarasikan aplikasi Android.





◦ Mendeklarasikan intent yang dibutuhkan aplikasi Android.

◦ Atribut-atribut digunakan untuk menyuplai label, icon, data, dan informasi yang
digunakan dalam aplikasi Android.



















◦ Berisi action type yang didukung oleh komponen-komponen yang berada dalam
aplikasi Android.

◦ Mendeklarasikan kategori-kategori yang didukung oleh aplikasi Android.

◦ Mendeklarasikan type MIME, URL, authority penggunaan URL serta penentuan
PATH yang digunakan dalam URL.

◦ Mendeklarasikan meta data yang dibutuhkan sebagai tambahan data yang
digunakan dalam aplikasi Android.

◦ Memberikan informasi mengenai aksi yang terjadi (ex : menerima SMS)

◦ Mendeklarasikan komponen-komponen yang berjalan seperti service (berjalan di
background)

◦ Mendeklarasikan
komponen-komponen
yang
mengolah
data
dan
mempublikasikan untuk dikelola/digunakan oleh aplikasi lain.


SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 4

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

10.5 Widget
Text View
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android1
: fti.umby.Android1
: Android1
: Android 2.3.3

b) File 1 : Android1.java
Android1.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package fti.umby.android1;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class Android1 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android1);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android1, menu);
return true;
}
}

c) File 2 : activity_android1.xml (layout)
activity_android1.xml
1
2
3
4
5
6
7
8
9
10
11
12
13







d) File 3 : string.xml (values)
string.xml
1
2
3
4
5
6
7
8
9
10



Settings



e) Execution

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 6

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

Button
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android2
: fti.umby.Android2
: Android2
: Android 2.3.3

b) File 1 : Android2.java
Android2.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package fti.umby.android2;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class Android2 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android2);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android2, menu);
return true;
}
}

c) File 2 : activity_android2.xml
activity_android2.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17









d) File 3 : string.xml
string.xml
1
2
3
4
5
6
7
8
9
10



Settings



e) Execution

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 8

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

Check Box
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android3
: fti.umby.Android3
: Android3
: Android 2.3.3

b) File 1 : Android3.java
Android3.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package fti.umby.android3;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class Android3 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android3);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android3, menu);
return true;
}
}

c) File 2 : activity_android3.xml
activity_android3.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17






d) File 3 : string.xml
string.xml
1
2
3
4
5
6
7
8
9



Settings



e) Execution

Radio Button / Radio Group
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android4
: fti.umby.Android4
: Android4
: Android 2.3.3

b) File 1 : Android4.java
Android4.java
1
2
3
4
5

package fti.umby.android4;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 10

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

public class Android4 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android4);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android4, menu);
return true;
}
}

c) File 2 : activity_android4.xml
activity_android4.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35













d) File 3 : string.xml
string.xml
1
2
3
4
5
6
7
8
9
10
11



Settings



e) Execution

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 12

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

List View
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android5
: fti.umby.Android5
: Android5
: Android 2.3.3

b) File 1 : Android5.java
Android5.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

package fti.umby.android5;
import
import
import
import
import
import
import

android.os.Bundle;
android.app.ListActivity;
android.view.View;
android.widget.ArrayAdapter;
android.widget.ListView;
android.widget.TextView;
android.view.Menu;

public class Android5 extends ListActivity {
TextView selection;
String[] items={"Islam", "Protestant", "Catholic", "Confucian", "Buddhist",
"Hindu"};
@Override
protected void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_android5);
setListAdapter(new ArrayAdapter(this,
android.R.layout.simple_list_item_1,
items));
selection=(TextView)findViewById(R.id.txt02);
}
public void onListItemClick(ListView parent, View v, int position, long id) {
selection.setText(items[position]);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android5, menu);
return true;
}
}

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 13

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

c) File 2 : activity_android5.xml
activity_android5.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26







d) File 3 : string.xml
string.xml
1
2
3
4
5
6
7
8



List View
List View Sample
Settings


SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 14

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

e) Execution

Spinner / Combo List
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android6
: fti.umby.Android6
: Android6
: Android 2.3.3

b) File 1 : Android6.java
Android6.java
1
2
3
4
5
6
7
8
9
10
11
12
13

package fti.umby.android6;
import
import
import
import
import
import
import
import

android.os.Bundle;
android.app.Activity;
android.view.View;
android.widget.AdapterView;
android.widget.ArrayAdapter;
android.widget.Spinner;
android.widget.TextView;
android.view.Menu;

public class Android6 extends Activity implements AdapterView.OnItemSelectedListener
{

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 15

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

TextView selection;
String[] items={"Islam", "Protestant", "Catholic", "Confucian", "Buddhist",
"Hindu"};
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.activity_android6);
selection=(TextView)findViewById(R.id.txt02);
Spinner spin=(Spinner)findViewById(R.id.spinner01);
spin.setOnItemSelectedListener(this);
ArrayAdapter dnd=new ArrayAdapter(this,
android.R.layout.simple_spinner_item,items);
dnd.setDropDownViewResource(
android.R.layout.simple_spinner_dropdown_item);
spin.setAdapter(dnd);
}
public void onItemSelected(AdapterView parent, View v, int position,
long id) {
selection.setText(items[position]);
}
public void onNothingSelected(AdapterView parent) {
selection.setText("");
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android6, menu);
return true;
}

}

c) File 2 : activity_android6.xml
activity_android6.xml
1
2
3
4
5
6
7
8
9
10
11
12
13







d) File 3 : string.xml
string.xml
1
2
3
4
5
6
7
8



Spinner
Spinner Sample
Settings


e) Execution

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 17

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

Edit Text
a) Project Configuration

Project Name
Package Name
Activity Name
Target Platform

: Android7
: fti.umby.Android7
: Android7
: Android 2.3.3

b) File 1 : Android7.java
Android7.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

package fti.umby.android2;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class Android2 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android7);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_android7, menu);
return true;
}
}

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 18

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

c) File 2 : activity_android7.xml
activity_android7.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22







d) File 3 : string.xml
string.xml
1
2
3
4
5
6
7
8



Edit Text
Edit Text Sample
Settings


e) Execution

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 19

Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Mercu Buana Yogyakarta
Kampus II, Jl. Jembatan Merah, Nomor 84.C. Gejayan, Yogyakarta 55283, Telp: (0274) 584922, Fax (0274) 550703

10.6 Tugas
1. Buatlah program dengan menggunakan komponen-komponen widget seperti berikut ini :

Selanjutnya, buatlah sebuah aksi dengan button :
• View : akan menampilkan inputan yang dituliskan di dalam komponen Text View
• Exit : akan keluar dari aplikasi Tugas1 dan kembali ke menu utama

SQ – http://sidiq.mercubuana-yogya.ac.id – dnd_07june07@live.com – 20