Page| 61

MATERI AJAR 7
LISTVIEW (WIDGET LANJUTAN)

2.1. Materi Pembelajaran

Listview dan custom listview

2.2. Kemampuan Akhir Pembelajaran

Sub CPMK 6: Mahasiswa di harapkan dapat mengetahui dan memahami
tentang widget lebih lanjutan (listview)

2.3. Materi Ajar

Listview
ListView adalah user interface pada Android Studio yang menampilkan item-item
dari sekumpulan daftar yang tersusun berbaris ke bawah atau kesamping dengan
tampilan yang dapat scroll. ListView dapat menampilkan item-item atau data dari
suatu Array List atau Query Database yang di jadikan data model sebagai item dari
List View.
Memulai Bekerjan dengan Listview
Step 1: Create ListviewActivity pada project ygn telah ada, untuk layout dapat
gunakan LinearLayout.

Gambr 7.1 Buat Listview Activity

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 62

Code untuk listview_main.xml

<?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">

<ListView
android:id="@+id/simpleListView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="@color/material_blue_grey_800"
android:dividerHeight="1dp" />
</LinearLayout>

Gambar 7.2 Desain Listview

Bekerja dengan Adapters untuk listview
Adapters adalah jembatan antara komponen UI dan sumber data (data source)
yang membantu kita mengisi data dalam komponen UI. Ini memegang data dan
mengirim data ke adapter view kemudian tampilan dapat mengambil data dari
tampilan adapter dan menampilkan data pada tampilan yang berbeda seperti
listview, gridview, spinner dll.
ListView adalah subkelas dari AdapeorView dan dapat diisi dengan mengikat ke
Adapter, yang mengambil data dari sumber eksternal dan menciptakan view yang
mewakili setiap entri data.
Di android adapter yang biasa digunakan adalah:
1. Array Adapter
2. Base Adapter\

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 63

1. Listview Dengan Array Adapter

Setiap kali Anda memiliki daftar item tunggal yang didukung oleh array, Anda dapat
menggunakan ArrayAdapter. Misalnya, daftar kontak telepon, negara atau nama.

Catatan Penting: Secara default, ArrayAdapter mengharapkan Layout dengan

TextView tunggal, Jika Anda ingin menggunakan tampilan yang lebih kompleks
berarti lebih banyak penyesuaian pada item daftar, harap hindari ArrayAdapter dan
gunakan Custum Adapter.

Di bawah ini adalah kode Array Adapter :

Step 2: buat layouy baru listview.xml

Gambar 7.3 buat layout baru

Listview.xml
<?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/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="5dp"
android:text="Teks"
/>
</LinearLayout>

Step 3: step terakhir kita akan menggunakan ArrayAdapter untuk menampilkan

daftar nama negara. Berikut code untuk ListviewActivity.java

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 64

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ListviewActivity extends AppCompatActivity {

// Array of strings...
ListView simpleList;
String countryList[] = {"India", "China", "Australia", "Portugal", "USA", "New
Zealand","Indonesia"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_listview);
simpleList = (ListView)findViewById(R.id.simpleListView);
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<String>(this,
R.layout.activity_listview, R.id.textView, countryList);
simpleList.setAdapter(arrayAdapter);
}
}

Step 4 : Run Project :

Gambar 7.4 run aplikasi

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 65

2. Base Adapter
BaseAdapter adalah kelas dasar umum dari implementasi umum dari Adapter yang
dapat digunakan di ListView. Setiap kali Anda membutuhkan daftar yang dapat
disesuaikan Anda membuat adapter Anda sendiri dan memperluas adapter dasar
di dalamnya. Adapter Dasar dapat diperluas untuk membuat Custom Adapter untuk
menampilkan item daftar khusus. ArrayAdapter juga merupakan implementasi dari
BaseAdapter.

Example of list view using Custom adapter(Base adapter):

Pada project berikut akan ditampilkan negara dengan bendera masing masing
negara, kita akan menggunakan custom adapter untuk menyelesaikannya

Step 1: Create CustomListviewActivity pada project ygn telah ada, untuk layout
dapat gunakan LinearLayout.

Gambar 7.6 buat layout custom listview

Activity_custom_lsitview.xml
<?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">

<ListView
android:id="@+id/simpleListView"
android:layout_width="fill_parent"

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 66

android:layout_height="wrap_content"
android:divider="@color/material_blue_grey_800"
android:dividerHeight="1dp" />
</LinearLayout>

Step 2: buat layouy baru custom_listview.xml

Custom_listview.xml
<?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="horizontal">

<ImageView
android:id="@+id/icon"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="@mipmap/ic_launcher" />

<TextView
android:id="@+id/textView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="16dp"
android:text="Teks"
android:textColor="@color/colorPrimaryDark" />
</LinearLayout>

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 67

Step 3 Masukkan gambar bendera pada folcer drawable project

Step 4 : buat class baru sebagai Custom Adapter CustomAdapter.java which will
extend BaseAdapter.

CustomAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {

Context context;
String countryList[];
int flags[];
LayoutInflater inflter;

public CustomAdapter(Context applicationContext, String[] countryList, int[]

flags) {
this.context = context;
this.countryList = countryList;

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 68

this.flags = flags;
inflter = (LayoutInflater.from(applicationContext));
}

@Override
public int getCount() {
return countryList.length;
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
view = inflter.inflate(R.layout.custom_listview, null);
TextView country = view.findViewById(R.id.textView);
ImageView icon = view.findViewById(R.id.icon);
country.setText(countryList[i]);
icon.setImageResource(flags[i]);
return view;
}
}

Step 5 : Code untuk CustomListActivity.java

import android.os.Bundle;
import android.widget.ListView;

public class CustomListviewActivity extends AppCompatActivity {

ListView simpleList;
String countryList[] = {"Indonesia","India", "China", "australia", "Portugle",
"America", "NewZealand"};
//Sebelumnay kita telah memasukkan gambar bendera pada folder drawable yg
terdapat pada pada project
int flags[] = {R.drawable.indonesia,R.drawable.india, R.drawable.china,
R.drawable.ic_launcher_background, R.drawable.portugal, R.drawable.usa,
R.drawable.newzealand};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_custom_listview);
setTitle("CUSTOM LIST");

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native
 Page| 69

simpleList = findViewById(R.id.simpleListView);
CustomAdapter customAdapter = new
CustomAdapter(getApplicationContext(), countryList, flags);
simpleList.setAdapter(customAdapter);
}
}

Step 6 : Run Project

Agility, Encourage, Materi Ajar

Excellence And Humanity
Pemrograman Mobile Native