Membuat List View di Android dengan Eclipse

TUGAS 4 “Membuat List View”

Oleh: I Putu Edi Puspayasa 1304505095 Pemrograman Mobile C

JURUSAN TEKNOLOGI INFORMASI FAKULTAS TEKNIK - UNIVERSITAS UDAYANA BUKIT JIMBARAN

Membuat List View pada Andorid dengan Eclipse

List View merupakan suatu widget pada android dimana widget tersebut dapat menampung data dalam berupa array dan menampilkannya ke dalam sebuah daftar atau list yang dapat di-scroll. Karena ukuran layar smartphone terbatas, listview merupakan salah satu widget terpenting dan paling sering digunakan untuk menampilkan kelompok informasi. Disini akan membahas pembuatan list view pada android dengan menggunakan eclipse. 1.

Langkah – langkah Pembuatan List View Terdapat langkah-langkah dalam pembuatan list view adalah sebagai

berikut : a.

Pertama buatlah project android baru dengan cara File => New => Android Application Project, lalu berikan nama project dan target project sesuai keinginan anda lalu beri nama Main Class-nya dengan nama : MainActivity.java dan main Layout-nya activity_main.xml.

b.

Kemudian buka activity_main.xml yang terletak pada folder res/layout, buatlah listview yang berada di Palette => Composite pada Graphical Layout lalu ganti id-nya dengan listview1, atau bisa dengan ketikkan sintaks seperti Kode Program 1.1. Kode Program 1.1 Sintaks actifity_main.xml

c.

Kemudian 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, atau juga bisa dilakukan dengan cara klik kanan Project => New => Android XML File. Pilih resource type “Layout”. Beri nama file misal : 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. d.

Pada row.xml yang baru dibuat tambahkan widget LargeText dan dua TextView. Ganti Id semua komponen itu. LargeText dengan tvJudul, TextView dengan tvSubJudul dan tvKeterangan, atau bisa dengan ketikkan sintaks seperti Kode Program 1.2. Kode Program 1.2 Sintaks row.xml

e.

Selanjutnya, buat class untuk menampung data judul, sub judul dan keterangan. Class dapat dibuat dengan cara, pada Project Explorer => pilih /src/[package] => klik kanan => New => Class. Beri nama class

tersebut, misal : DataList. Sintaks pada class DataList dapat dilihat pada Kode Program 1.3. package com.example.list_view; public class DataList { public String judul; public String SubJudul; public String Keterangan; public DataList(String judul, String SubJudul, String Keterangan){ this.judul = judul; this.SubJudul = SubJudul; this.Keterangan = Keterangan; } } Kode Program 1.3 Sintaks Class DataList (DataList.java)

f.

Selanjutnya membuat adapter untuk list dari listview yang berfungsi untuk “mengisi” setiap row dengan isi objek DataList. Buat class dengan cara yang sama seperi sebelumnya (klik /src/[package], klik kanan, new class), beri nama class, misal : DataAdapter, jadikan class DataAdapter ini turunan dari class ArrayAdapter. Sintaks dari class DataAdapter dapat dilihat pada Kode Program 1.4. public class DataAdapter extends ArrayAdapter { private ArrayList alData; public DataAdapter(Context con, int textViewResourceId, ArrayListalData){ super (con,textViewResourceId,alData); this.alData = alData; } public View getView(int pos, View convertView, ViewGroup parent){ View v = convertView; if (v==null){ LayoutInflater li = (LayoutInflater)getContext().getSystemService(Context.LAYOU T_INFLATER_SERVICE); v = li.inflate(R.layout.row, null); } DataList dl = alData.get(pos); if (dl!=null){ TextView tvJudul = (TextView) v.findViewById(R.id.tvJudul);

TextView tvSubJudul = (TextView) v.findViewById(R.id.tvSubJudul); TextView tvKeterangan = (TextView) v.findViewById(R.id.tvKeterangan); tvJudul.setText(dl.judul); tvSubJudul.setText(dl.SubJudul); tvKeterangan.setText(dl.Keterangan); } return v; } } Kode Program 1.4 Sintaks Class DataAdapter (DataAdapter.java)

Kode Program 1.4 merupakan sintaks dari class DataAdapter, dimana pada sintaks tersebut terdapat method getView yang berisi parameter pos yang merupakan indeks baris. Pada Kode Program 1. 4 terdapat sintaks seperti :

Pada lingkaran no 1, merupakan penulisan untuk jadikan class DataAdapter ini turunan dari class ArrayAdapter. Lingkaran no 2, 3, dan 4 merupakan pembacaan id dari widget LargeText dan dua buah widget TextView pada layout row.xml yang dibuat sebelumnnya. g.

Kemudian langkah terakhir, pada class utama (MainActivity.java) dapat ditambahkan sintaks seperti Kode Program 1.5.

public class MainActivity extends ActionBarActivity { ArrayList alData = new ArrayList(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); alData.add(new alData.add(new "Keterangan 2")); alData.add(new "Keterangan 3")); alData.add(new "Keterangan 4")); alData.add(new "Keterangan 5")); alData.add(new "Keterangan 6")); alData.add(new "Keterangan 7"));

DataList("Judul 1", "Keterangan1", "")); DataList("Judul 2", "Sub Judul 2", DataList("Judul 3", "Sub Judul 3", DataList("Judul 4", "Sub Judul 4", DataList("Judul 5", "Sub Judul 5", DataList("Judul 6", "Sub Judul 6", DataList("Judul 7", "Sub Judul 7",

ListView listview = (ListView) findViewById(R.id.listview1); DataAdapter adapter = new DataAdapter (this,R.layout.row,alData); listview.setAdapter(adapter); } } Kode Program 1.5 Sintaks Class Utama (MainActivity.java)

Kode Program 1.5 merupakan sintaks dari class utama dari program. Pada Kode Program 1.5 terdapat sintaks seperti :

Lingkaran no 1 merupakan pembacaan layout, dimana layout yang dibaca merupakan layout untuk menampilkan program, atau layout tempat dari tampilan list view. Lingkaran no 2 merupakan sintaks untuk memberikan nilai array kepada DataList, perhatikan lingkaran hitam yang terdapat pada lingkaran no 2, akan menyebabkan baris listview pertama terdapat perbedaan atau lebihjelasnya dapat dilihat pada uji coba. Lingkaran no 3 merupakan pembacaan dari id listview yang dibuat atau dituliskan sebelumnya pada activity_main.xml. Sedangkan lingkaran no 4 merupakan sintaks pembacaan id layout row.xml dan pengiriman nilai array kepada DataAdapter. Pada baris terakhir terdapat sintaks listview.setAdapter(adapter) yang berfungsi untuk menampilkan nilai array ke listview.

2.

Uji Coba Uji coba dari program list view dengan menggunakan Android Virtual

Device. Uji coba dapat dilihat pada Gambar 2.1.

Gambar 2.1 Uji Coba List View

Gambar 2.1 merupakan uji coba dari program list view. Kita dapat memodifikasi warna background dari program dengan cara seperti berikut : 1.

Tambahkan sintaks pada layout activity_main.xml. Sintaks tambahan dari layout activity_main.xml dapat dilihat pada Gambar 2.2.

Gambar 2.2 Screenshoot Sintaks activity_main.xml

Perhatikan lingkaran merah pada Gambar 2.2, sintaks yang dilingkari tersebut merupakan penambahan background dari tampilan program list view yang berwarna hitam yang dimana warna hitam tersebut diambil pada value color.xml. 2.

Buat value baru untuk menyimpan nilai warna background, berikan nama value tersebut color.xml. Sintaks dari value color.xml dapat dilihat pada Kode Program 2.1. #000000 Kode Program 2.1 Sintaks Color.xml

3.

Karena warna tulisan dari listview sama dengan warna background maka tulisan tidak dapat dilihat, agar tulisan dari listview dapat dilihat dapat dilakukan dengan cara memberikan warna dari listview. Untuk memberikan warna pada listview dapat menambahkan sintaks pada kelas utama (MainActivity.java) agar lebih jelas dapat dilihat pada Gambar 2.3.

Gambar 2.3 Screenshoot Sintaks Class Utama (MainActivity.java)

Pada Gambar 2. terdapat sintaks untuk memberikan warna dari listview yang dilingkari warna merah. 4.

Tampilan dari program listview yang warna background-nya sudah diubah dapat dilihat pada Gambar 2.4

Gambar 2.4 Uji Coba List View dengan Warna Background Berbeda

Membuat List View di Android dengan Eclipse

Recommend Documents