UTS (Ulangan Tengah Semester) Mobile Programing II

Assalamualaikum Warahmatullahi Wabarakatuh.

ListView adalah salah satu widget yang digunakan untuk menampilkan data atau nilai dalam bentuk daftar/list, nilai atau data yang ditampilkan pada ListView tersebut didapat dari sebuah Array atau Database yang sudah ditentukan. ListView pada saat ini sudah tergantikan dengan RecyclerView yang memiliki konsep Material Design, karena lebih custom dan juga dapat mengatur tampilan layoutnya.

Walaupun begitu, ListView masih banyak digunakan oleh programmer untuk membuat list/daftar item yang sederhana pada aplikasi mereka. Tutorial kali ini saya akan mengajarkan pada kalian bagaimana cara membuat widget ListView pada aplikasi android menggunakan Android Studio. 

Membuat ListView pada Android Studio

Buatlah proyek baru pada Android Studio. Berikan nama proyek tersebut. lalu buat Empty Activity. Setelah membuat proyek.

Disini kita akan menambahkan Widget ListView pada Activity yang telah kalian buat, buka file activity_main.xml kalian, untuk membuat ListView, masukan kode xml berikut ini:

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context=".MainActivity">     <TextView         android:id="@+id/Text"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:padding="10dp"         android:textStyle="bold"         android:textAlignment="center"         android:text="UTS Dexsa Muliana Ghazali 187200043"         app:layout_constraintBottom_toBottomOf="parent"         tools:ignore="MissingConstraints" />       <ListView         android:id="@+id/list_view"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:dividerHeight="0dp"         app:layout_constraintBottom_toBottomOf="parent"         app:layout_constraintHorizontal_bias="0.0"         app:layout_constraintLeft_toLeftOf="parent"         app:layout_constraintRight_toRightOf="parent"         app:layout_constraintTop_toBottomOf="@+id/Text"         app:layout_constraintVertical_bias="1.0"></ListView>   </android.support.constraint.ConstraintLayout>

Atau kalian bisa langsung mendrag/drop widget tersebut yang berada didalam Pellete pada layout kalian, seperti ini:

Data pada ListView tersebut masih kosong, disini kita akan menambahkan data pada ListView, menggunakan sebuah Array dan juga ArrayList, data tersebut akan kita implementasikan secara static, yaitu langsung pada codingannya.

Selanjutnya buka file MainActivity.java pada project kalian, lalu masukan source code berikut ini beserta penjelasannya:

package com.example.list_view;   import android.app.Activity; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.ListView; import java.util.ArrayList; import java.util.List;     public class MainActivity extends AppCompatActivity {       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           ListView list = findViewById(R.id.list_view);         ListAdapter adapter = new ListAdapter(this,createPersons());         list.setAdapter(adapter);     }       private List<Person> createPersons(){         List<Person>data = new ArrayList<>();         data.add(new Person(R.drawable.photo_1, "Dexsa Muliana Ghazali","Fakultas Teknik Informatika","Semester 8"));         data.add(new Person(R.drawable.photo_2, "Dexsa Muliana Ghazali","Fakultas Teknik Informatika","Semester 8"));         data.add(new Person(R.drawable.photo_3, "Dexsa Muliana Ghazali","Fakultas Teknik Informatika","Semester 8"));           return data;     }     }

Penjelasan:

Pada program tersebut, kita membuat sebuah variable Array, yaitu mahasiswa, data-data pada variable tersebut yang akan kita tampilkan pada ListView, lalu data tersebut akan kita masukan kedalam ArrayList.

Pada method getData, kita memasukan semua data mahasiswa kedalam ArrayList, menggunakan fungsi Collection.addAll().

ArrayAdapter digunakan untuk mengatur, bagaimana item pada ListView akan tampil, didalam adapter, kita memasukan data ArrayList, selanjutnya kita memanggil adapter pada ListView dengan menggunakan fungsi setAdapter().

Demo:

Untuk mengubah tampilan default atau design layout, seperti ukuran text, warna, style, dsb. kalian dapat mengubahnya dengan cara mengganti support_simple_spinner_dropdown_item yang terpasang pada adapter dengan file xml kalin.

Sekarang, buatlah file XML baru pada direktori res/layout dan berikan nama gaya_baru.xml. Ini bertujuan untuk memberikan style pada data yang akan ditampilkan. Kemudian berikan TextView pada file tersebut, contoh sederhananya seperti sintak di bawah ini.

 

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android"     android:id="@+id/gaya"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:padding="10dip"     android:textSize="17dip"     android:textStyle="bold" > </TextView>

Selanjutnya kalian ubah layout pada adapternya menjadi seperti ini:

ArrayAdapter adapter = new ArrayAdapter<>(this, R.layout.gaya_baru, data);

Menambahkan OnItemClickListener untuk Membuat Aksi pada ListView

Untuk menambahkan aksi pada ListView pada saat salah satu item di klik, kita perlu mengimplementasi OnItemClickListener, lalu kita mengset listenet pada ListView, contohnya seperti berikut ini:

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener {

Set listener pada ListView kita, didalam method onCreate():

listView.setOnItemClickListener(this);

Selanjutnya, kita harus mengimplementasikan method onItemClick(), jika tidak maka akan terjadi error.

@Override     public void onItemClick(AdapterView adapterView, View view, int position, long l) {         String getMahasiswa = data.get(position);         Toast.makeText(this, "Mahasiswa Yang Saya Ambil "+getMahasiswa, Toast.LENGTH_SHORT).show();     }

Didalam method tersebut, variable getMahasiswa, akan mengambil data dari ArrayList, sesuai dengan posisinya, lalu menampilkannya pada Toast, saat salah satu Item di Klik.