Cara Membuat ListView Android Modifikasi

Cara Membuat ListView Android Modifikasi – Listview adalah komponen android yang digunakan untuk menampilkan daftar dari satu atau lebih nilai array dalam bentuk list. Listview sering kita lihat bahkan hampir di setiap aplikasi yang ada di google play store. Namun dari banyaknya aplikasi yang beredar kenapa memiliki tampilan listview yang berbeda dari yang disediakan oleh android ? Jawabannya adalah listview tersebut telah di modifikasi sesuai keinginan sang pengembang aplikasi. Setiap komponen dalam android sebenarnya dapat dimodifikasi sesuai kemauan sang pengembang aplikasi. Dan pada artikel ini saya akan menunjukan bagaimana cara memodifikasi listview pada android sesuai keinginan. Mari simak bagaimana cara merubah tampilan listview android.

Membuat ListView Android

Modifikasi ini akan mengubah listview menjadi memiliki gambar, judul dan subjudul. Seperti ini :

icaksama listview

Ikuti langkah-langkah dibawah ini :

  1. Buat new project maka akan terbuat satu activity dengan nama MainActivity dan layoutnya.
  2. Buat satu activity baru dengan nama TampilanKeDua maka akan terbentuk 1 file TampilanKeDua.java dalam package dan activity_tampilan_ke_dua.xml di folder res/layout.
  3. Buat file .xml di res/layout dengan nama listview_layout.xml. File ini adalah design layout yang akan kita masukan pada listview.
  4. Buat satu folder di dalam res dengan nama drawable (Huruf kecil semua). Tujuannya adalah untuk mengelompokan file-file yang akan kita gunakan dalam memodifikasi listview.
  5. Buat file .xml dengan nama berikut di folder drawable yang telah kita buat. File : gradient_bg_hover.xml, gradient_bg.xml, image_bg.xml, list_selector.xml
  6. Masukan 2 file gambar berikut di folder drawable yang telah kita buat. Gambar : arrow.png dan icaksama.jpg
  7. Buat file .java dengan nama Tampung.java dan ListAdapter.java

Setelah semuanya siap, sekarang saatnya memasukan programnya ke file yang telah kita buat. Perlu diingat, sesuaikan nama packagenya di dalam file .java yaitu package icaksama.com.icaksamalistviewmod; dengan nama package aplikasi kamu.

gradient_bg_hover.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
<!-- Gradient BgColor for listrow Selected -->
<gradient
  android:startColor="#18d7e5"
  android:centerColor="#16cedb"
  android:endColor="#09adb9"
  android:angle="270" />
</shape>

gradient_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
<!-- Gradient Bg for listrow -->
<gradient
  android:startColor="#f1f1f2"
  android:centerColor="#e7e7e8"
  android:endColor="#cfcfcf"
  android:angle="270" />
</shape>

image_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <shape
      android:shape="rectangle">
      <stroke android:width="1dp" android:color="#dbdbdc" />
      <solid android:color="#FFFFFF" />
    </shape>
  </item>
</layer-list>

list_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Selector style for listrow -->
  <item
    android:state_selected="false"
    android:state_pressed="false"
    android:drawable="@drawable/gradient_bg" />
  <item android:state_pressed="true"
    android:drawable="@drawable/gradient_bg_hover" />
  <item android:state_selected="true"
    android:state_pressed="false"
    android:drawable="@drawable/gradient_bg_hover" />
</selector>

activity_tampilan_ke_dua.xml

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/LinearLayout1"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  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=".TampilanKeDua" >
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <TextView
      android:id="@+id/textView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Judul :"
      android:textAppearance="?android:attr/textAppearanceLarge" />
    <TextView
      android:id="@+id/txtJudul"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Judul"
      android:textAppearance="?android:attr/textAppearanceLarge" />
  </LinearLayout>
  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <TextView
      android:id="@+id/textView2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Sub Judul :"
      android:textAppearance="?android:attr/textAppearanceLarge" />
    <TextView
      android:id="@+id/txtSubJudul"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Large Text"
      android:textAppearance="?android:attr/textAppearanceLarge" />
  </LinearLayout>
  <ImageView
    android:id="@+id/imgFromList"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/icaksama" />
</LinearLayout>

listview_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#FFF"
  android:orientation="horizontal"
  android:padding="5dip" >
  <!-- ListRow Left sied Thumbnail image -->
  <LinearLayout android:id="@+id/thumbnail"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="3dip"
    android:layout_alignParentLeft="true"
    android:background="@drawable/image_bg"
    android:layout_marginRight="5dip">
    <ImageView
      android:id="@+id/icon"
      android:layout_width="50dip"
      android:layout_height="50dip"/>
  </LinearLayout>
  <!-- Title Of Song-->
  <TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/thumbnail"
    android:layout_toRightOf="@+id/thumbnail"
    android:text="icaksama.com judul"
    android:textColor="#000"
    android:textSize="20sp"
    android:textStyle="bold"
    android:typeface="sans" />
  <!-- Artist Name -->
  <TextView
    android:id="@+id/subtitle"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/title"
    android:layout_marginTop="1dip"
    android:layout_toRightOf="@+id/thumbnail"
    android:text="icaksama.com subjudul"
    android:textColor="#343434"
    android:textSize="10dip" />
  <!-- Rightend Duration -->
  <!-- Rightend Arrow -->
  <ImageView android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/arrow"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"/>
</RelativeLayout>

File listview_layout.xml digunakan untuk mendesign tampilan listview. Tampilan listview nantinya akan sesuai dengan design di file xml ini. Jadi sebenarnya terserah kamu  mau mendesign bentuknya seperti apa, karena intinya design yang berada pada file listview_layout.xml akan di ulang menjadi per item data di listview android. Namun design dalam file xml ini harus disesuaikan dengan file ListAdapter.java dibawah ini.

ListAdapter.java

package icaksama.com.icaksamalistviewmod;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

//class ini digunakan untuk mengubah tampilan listview tidak seperti bawaan Android pada umumnya
public class ListAdapter extends ArrayAdapter < String > {
 private final Context context;
 private final String[] valuestitle;
 private final String[] valuessubtitle;
 private final int[] valuesimage;

 public ListAdapter(Context context, String[] valuestitle,
  String[] valuessubtitle, int[] valuesimage) {
  super(context, R.layout.listview_layout, valuestitle);
  this.context = context;
  this.valuestitle = valuestitle;
  this.valuessubtitle = valuessubtitle;
  this.valuesimage = valuesimage;
 }

 @Override
 public View getView(int position, View convertView, ViewGroup parent) {
  LayoutInflater inflater = (LayoutInflater) context
   .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  // tampilan listview di atur dalam listview_layout.xml yang berada dalam
  // res/layout
  View rowView = inflater
   .inflate(R.layout.listview_layout, parent, false);
  TextView title = (TextView) rowView.findViewById(R.id.title);
  TextView subtitle = (TextView) rowView.findViewById(R.id.subtitle);
  ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);

  //Mengisi item listview
  title.setText(valuestitle[position]);
  subtitle.setText(valuessubtitle[position]);
  imageView.setImageResource(valuesimage[position]);

  return rowView;
 }
}

Program diatas digunakan untuk mengontrol file listview_layout.xml yang akan dimasukan ke dalam setiap item pada listview.

Tampung.java

package icaksama.com.icaksamalistviewmod;

public class Tampung {
  public static String Judul;
  public static String subJudul;
  public static int Gambar;
}

Program diatas digunakan untuk menyimpan nilai saat listview dipilih kemudian akan ditampilkan pada activity TampilanKeDua.java. Pengambilan nama variabel dalam kelas Tampung.java tanpa membuat object kelas terlebih dahulu karena variable dalam kelas Tampung.java bersifat static dan nilai yang telah dimasukan pada activity sebelumnya tidak akan menghilang pada activity selanjutnya. Ini teknik yang mempermudah kita dalam pengiriman data antar activity.

TampilanKeDua.java

package icaksama.com.icaksamalistviewmod;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class TampilanKeDua extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_tampilan_ke_dua);
  TextView txtJudul = (TextView) findViewById(R.id.txtJudul);
  TextView txtSubJudul = (TextView) findViewById(R.id.txtSubJudul);
  ImageView imgFormList = (ImageView) findViewById(R.id.imgFromList);
  // Proses pengisian
  txtJudul.setText(Tampung.Judul);
  txtSubJudul.setText(Tampung.subJudul);
  imgFormList.setImageResource(Tampung.Gambar);

 }
}

Program pada kelas activity di atas mengambil data dari kelas Tampung.java tanpa harus membuat object terlebih dahulu.

MainActivity.java

package icaksama.com.icaksamalistviewmod;

import android.app.ListActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ListView;

public class MainActivity extends ListActivity {

 private String[] Judul = new String[10];
 private String[] subJudul = new String[10];
 private int[] Gambar = new int[10];

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  prosesIsiData();
  ListAdapter adapter = new ListAdapter(getBaseContext(), Judul,
   subJudul, Gambar);
  setListAdapter(adapter);
 }

 private void prosesIsiData() {
  for (int i = 0; i < Judul.length; i++) {
   Judul[i] = "Judul ke " + (i + 1);
   subJudul[i] = "Sub Judul ke " + (i + 1);
   Gambar[i] = R.drawable.icaksama;
  }
 }

 // Method untuk mengeluarkan event saat list di click
 @Override
 protected void onListItemClick(ListView l, View v, int position, long id) {
  Tampung.Judul = Judul[position];
  Tampung.subJudul = subJudul[position];
  Tampung.Gambar = Gambar[position];
  startActivity(new Intent(getBaseContext(), TampilanKeDua.class));
 }
}

Oke demikian tutorial kali ini tentang mengubah tampilan ListView Android. Tunggu penjelasan lengkapnya pada tutorial video di channel icaksama.COM.
Download sample projectnya IcaksamaListViewMod.
Baca juga artikel Mengambil Data MySQL ke Android Menggunakan PHP

Ayo! Segera daftarkan email kamu untuk berlangganan!

Leave a comment