MODUL PERKULIAHAN

MOBILE
PROGRAMMING
ANDROID (LAB)
Lingkungan Runtime pada
Android

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

Mobile Programming Android (Lab) Pusat Bahan Ajar dan eLearning

2019 Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id

 Ilmu Komputer Sistem Informasi F061700010 Suhendra, S.Kom., M.Kom

04

Abstrak Kompetensi

Lingkungan Runtime pada Android. Mahasiswa mampu menggunakan

lingkungan Runtime Android di Java.

Mobile Programming Android (Lab) Pusat Bahan Ajar dan eLearning

2019 Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id

Daftar Istilah
Istilah Pengertian

Mobile Programming Proses pembuatan aplikasi untuk peralatan computer mobile

SDK Software Development Kit merupakan perangkat yang disiapkan

untuk merancang aplikasi

Activity Semua tampilan yang memungkinkan interaksi dengan user

Intent Proses pemanggilan activity

Service serangkaian proses yang tidak memiliki tampilan, tidak dapat

berinteraksi dengan user, dan berjalan di-background

Life Cycle Tahapan tahapan yang dijalankan oleh aplikasi. Dalam konsep
pemgrograman berorientasi objek, life cycle didefinisikan dalam
bentuk abstraks, harus diterapkan oleh semua aplikasi, sehingga
operating system dapat mejalankan proses spesifik yang sudah
ditentukan dalam tahapan tahapan aplikasi tersebut

2019 Mobile Programming Android (Lab)

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id

ListView
List view adalah widget untuk menampilkan data dalam bentuk list yang dapat di-scroll. Karena
ukuran layar smartphone terbatas, listview merupakan salah satu widget terpenting dan paling
sering digunakan untuk menampilkan kelompok informasi.

ListView dapat berbentuk sederhana sampai kompleks. Beberapa contoh

Kita akan mulai dengan membuat list sederhana seperti gambar di bawah:

1. Pertama, buat project baru lalu pilih Composite dan tambahkan ListView di
activity_main.xml

Mobile Programming Android (Lab) Pusat Bahan Ajar dan eLearning

2019 Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id

 2. Ganti id list view dengan “listAngka”

Mobile Programming Android (Lab)

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
 3. Di activity utama, tambahkan code sebagai berikut:

4. Coba jalankan.

Pada code di atas, dibuat adapter berisi string untuk mengisi list. Sedangkan
R.layout.simple_expandable_list_item1 adalah layout standard yang disediakan Android.

Bagaimana mengupdate isi listview saat program sedang berjalan?

Untuk mengupdate data pada contoh diatas, nilai array dapat langsung diubah lalu panggil method
adapter.notifyDataSetChanged()untuk merefresh tampilan. Sebagai contoh, kita akan membuat
button yang saat diklik akan mengubah item pertama:

Tambahkan button diatas listview

Mobile Programming Android (Lab)

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
Tambahkan event onClick bernama klikButton dan kode seperti berikut:

Composite ListView
Listview juga dapat digunakan untuk menampilkan struktur yang lebih rumit. Contoh berikut
memperlihatkan listview dengan isi yang kita tentukan sendiri.

Untuk membuatnya, pertama buat project baru. Tambahkan ListView seperti pada contoh
sebelumnya. Ganti id dengan listJudul.

2019 Mobile Programming Android (Lab)

Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
Kemudian kita akan buat layout untuk setiap baris pada ListView yang berisi judul dan keterangan.
Pilih project pada project explorer, lalu klik kanan 🡪 Android Tools 🡪 New Resources File (gambar
bawah)

Catatan: alternatif lain membuat layout XML, klik kanan project 🡪 new 🡪 Android XML File.

Mobile Programming Android (Lab)

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
Pilih resource type “Layout”. Beri nama file row.xml, pilih root element LinearLayout, XML akan
dibuat di dalam direktori /res/layout. File row.xml ini akan menentukan layout dari setiap baris pada
listview.

Pada row.xml yang baru digenerate tambahkan widget LargeText dan TextView (gambar bawah).
Ganti Id kedua komponen itu. LargeText dengan tvJudul dan TextView dengan tvKeterangan.

Pada contoh di atas hanya digunakan dua widget (LargeText dan TextView), tapi sebenarnya apapun
dapat dimasukkan di dalam layout ini. Misalnya Button, ImageView dan lainnya. Ini memungkinkan
kita membuat ListView dengan isi yang kompleks.

Sekarang buat class untuk yang menampung data judul dan keterangan. Pada project explorer,
pilih /src/[package], klik kanan 🡪 new 🡪 Class

2019 Mobile Programming Android (Lab)

Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
 Mobile Programming Android (Lab) Pusat Bahan Ajar dan eLearning

10

2019 Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id

Beri nama DataList

Berikut isi dari DataList. Class ini akan berisi data yang akan muncul di setiap baris.

Selanjutnya kita akan buat adapter untuk list. Fungsinya untuk “mengisi” setiap row dengan isi objek
DataList.

Buat class dengan cara yang sama dengan sebelumnya (klik /src/[package], klik kanan, new class),
beri nama DataAdapter, jadikan class ini turunan dari kelas ArrayAdapter.

Klik browse di dialog saat membuat class di bagian superclass (gambar bawahh)

Ketik Array…, maka akan muncul ArrayAdapter, pilih item tersebut (gambar bawah)

Mobile Programming Android (Lab)

11

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
Isi class DataAdapter adalah sebagai berikut. Pada method getView, parameter pos adalah indeks
baris. Perhatikan pengisian tvJudul dan tvKeterangan dengan data sesuai indeks.

Mobile Programming Android (Lab)

12

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
public class DataAdapter extends ArrayAdapter<DataList> {
private ArrayList<DataList> d;
public DataAdapter(Context context, int resource,
ArrayList<DataList> d) {
super(context, resource, d);
this.d = d;
}

public View getView(int p, View v, ViewGroup vg){

if (v == null ){
LayoutInflater l = (LayoutInflater)
getContext().getSystemService
(Context.LAYOUT_INFLATER_SERVICE);
v = l.inflate(R.layout.row, null);
}
DataList dl = d.get(p);
if (dl != null){
TextView tvJudul =
(TextView) v.findViewById(R.id.tvJudul);
TextView tvKeterangan =
(TextView) v.findViewById(R.id.tvKeterangan);
tvJudul.setText(dl.judul);
tvKeterangan.setText(dl.keterangan);
}
return v;
}

Terakhir, di activity utama (MainActivity.java) tambahkan kode berikut:

ArrayList<DataList> data = new ArrayList<DataList>();

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

data.add(new DataList("Mobile Programming",

"Buku mengenai cara programming aplikasi " +
"android."));
data.add(new DataList("ASP.Net for Dummies",
"Mengupas cara membangun aplikasi ASP.Net " +
"untuk pemula"));
data.add(new DataList("Visual Basic",

Mobile Programming Android (Lab)

13

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
 "Membangun aplikasi dengan menggunakan " +
"Microsoft Visual Basic"));
data.add(new DataList("Mobile Database",
"Buku mengenai penerapan teknologi database yang " +
"dapat diaplikasikan dalam teknologi mobile"));
ListView lv = (ListView) findViewById(R.id.listJudul);
lv.setAdapter(new DataAdapter(this, R.layout.row, data));

Jika dijalankan, hasilnya akan seperti ini:

Latihan:

Buat program dengan tampilan seperti berikut, saat tombol diklik, maka isi list akan
bertambah sesuai dengan nim dan nama. Tip: gunakan
adapter.notifyDataSetChanged() untuk merefresh data.

Mobile Programming Android (Lab)

14

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
Penanganan Click pada ListView
Listview sering digunakan untuk menampilkan data master-detail yang jika di tap barisnya akan
menampilkan detil pada layar terpisah. Listview juga dapat digunakan untuk menampilkan menu.

Untuk menangani tap pada listview, gunakan method setOnItemClickListener

Contoh berikut akan menampilkan dialog singkat jika baris ditekan, judul pada baris juga akan
berubah menjadi warna merah. Berdasarkan kode pada contoh listview sebelumnya, tambahkan
kode berikut (bagian yang dilingkari). Penjelasan tentang Toast ada di sub bab berikutnya.

Mobile Programming Android (Lab) Pusat Bahan Ajar dan eLearning

15

2019 Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id

Ada empat parameter untuk onItemClick:

Parent AdapterView (view parent yang menampung semua row)

View View baris yang ditap

Position Posisi (indeks) dari view pada adapter

id Id dari row.

Praktekkan kode pada program anda!

2019
Mobile Programming Android (Lab)

16

Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id
Daftar Pustaka
1. Burd, B. (2012). Android Application Development All-in-One For Dummies. For Dummies.
2. Cinar, O. (2012). Android Apps with Eclipse (1 ed.). Appress.
3. Murphy, M. L. (2010). Android Programming Tutorials. United States of America:
CommonsWare, LLC.

Mobile Programming Android (Lab)

17

2019 Pusat Bahan Ajar dan eLearning

Suhendra, S.Kom., M.Kom http://www.mercubuana.ac.id