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.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="com.example.list_view.MainActivity" > <ListView android:id="@+id/listview1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentStart="true" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" > </ListView> </RelativeLayout>

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.

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:id="@+id/tvJudul" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:textAppearance="?android:attr/textAppearanceLarge" /> <TextView android:id="@+id/tvSubJudul" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> <TextView android:id="@+id/tvKeterangan" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="TextView" /> </LinearLayout>

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<DataList> { private ArrayList<DataList> alData; public DataAdapter(Context con, int textViewResourceId, ArrayList<DataList>alData){ 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.LAYOUT_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<DataList> alData = new ArrayList<DataList>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); alData.add(new DataList("Judul 1", "Keterangan1", "")); alData.add(new DataList("Judul 2", "Sub Judul 2", "Keterangan 2")); alData.add(new DataList("Judul 3", "Sub Judul 3", "Keterangan 3")); alData.add(new DataList("Judul 4", "Sub Judul 4", "Keterangan 4")); alData.add(new DataList("Judul 5", "Sub Judul 5", "Keterangan 5")); alData.add(new DataList("Judul 6", "Sub Judul 6", "Keterangan 6")); alData.add(new DataList("Judul 7", "Sub Judul 7", "Keterangan 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.

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="black">#000000</color> </resources>

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