Selamat Pagi Readers! Salam Semangat.

Pada postingan sebelumnya sudah saya jelaskan tentang Bagaimana Cara Membuat ListView Sederhana di Android , bagi yang belum berkesempatan menyimak bisa di klik disini  dan sebenarnya wajib hukumnya mempelajari tutorial tersebut sebelum melangkah ke tahap selanjutnya 🙂

Perlu saya review ulang bahwa listview adalah suatu widget pada android dimana widget tersebut dapat menampung data dalam berupa Array dan menampilkannya kedalam sebuah daftar atau list. Peranan listview dalam sebuah aplikasi android sangat penting terutama dalam penyajian data  dan kelompok informasi.

Gambar di atas merupakan contoh implementasi dari sebuah listview dan edisi kali ini kita akan membahas pembuatan list seperti gambar pada pada urutan pertama dari kiri :). Lets Code Readers!

1. Petama buat dulu sebuah project di Eclipse dengan cara File ⇒ New Project ⇒ Application Project dan beri nama Main Class-nya dengan nama : MainActivity.java dan main Layoutnya activity_main.xml. Tutorial Pembuatan Project Android bisa di Lihat Disini
2. Kemudian buka activity_main.xml yang terletak di folder res/layout selanjutnya ketik atau paste code di bawah ini. Pada layout activity_main.xml ini ada memiliki ListView yang akan menampilkan text dan gambar(icon).
   activity_main.xml :

<!-- Create by @The_Heran | www.theheran.com -->
<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=".MainActivity" >

 <!-- Komponen List View -->
 <ListView android:id="@+id/list" android:layout_width="wrap_content" android:layout_height="wrap_content" >
 </ListView>
</RelativeLayout>

• Tahap Selanjutnya adalah membuat sebuah layout untuk daftar item yang akan di tampilkan dalam ListView.  Caranya klik kanan pada Layout [res/layout] dan pilih New ⇒ Android XML File dan pada name filenya ketik list_single_data.xml. layout ini memiliki komponen TextView guna menampilkan data dalam bentuk Array dan icon untuk masing – masing list data. Keduanya ini berada di dalam TableLayout. 
  list_single_data.xml :

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >
 <TableRow>
 <ImageView android:id="@+id/imgIcon" android:layout_width="50dp" android:layout_height="50dp"/>

 <TextView android:id="@+id/txtList" android:layout_width="wrap_content" android:layout_height="50dp" />

</TableRow>
</TableLayout>
<!-- Create by @The_Heran | www.theheran.com -->

• Sebelum editing code MainActivity maka kita harus membuat class baru untuk mengatus costumListview yang akan dibuat. Caranya klik kanan pada Package Project  pilih New  ⇒ Class dan beri nama CustomListView kemudian ketik code di bawah ini.
  CustomListView.java :

  package com.theheran.listviewicon;
  
  import android.app.Activity;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.ArrayAdapter;
  import android.widget.ImageView;
  import android.widget.TextView;
  
  /**
   *
   * @author @The_Heran
   * www.theheran.com
   */
  
  public class CustomListView extends  ArrayAdapter<String> {
  	//Declarasi
  	private final Activity context;
  	private final String[] web;
  	private final Integer[] imageId;
  
  	public CustomListView(Activity context,String[] web, Integer[] imageId) {
  		super(context, R.layout.list_single_data, web);
  		this.context = context;
  		this.web = web;
  		this.imageId = imageId;
  
  	}
  
  	@Override
  	public View getView(int position, View view, ViewGroup parent) {
  			LayoutInflater inflater = context.getLayoutInflater();
  			//Load Custom Layout untuk list
  			View rowView= inflater.inflate(R.layout.list_single_data, null, true);
  			//Declarasi komponen
  			TextView txtTitle = (TextView) rowView.findViewById(R.id.txtList);
  			ImageView imageView = (ImageView) rowView.findViewById(R.id.imgIcon);
  
  			//Set Parameter Value
  			txtTitle.setText(web[position]);
  			imageView.setImageResource(imageId[position]);
  
  			return rowView;
  		}
  }
  
  

• Tahap selanjutnya adalah code pada MainActivity. Disini ada declarasi sebuah array bernama “menu” yang akan di tampilkan pada ListView, kemudian ada declarasi sebuah array “imageId”. Gambar ini akan di tampilkan bersebelahan dengan text dan semua icon tersebut harus di simpan pada folder /res/drawable. kemudian custum list adapter akan di tampilkan dan ketika salah satu item di klik maka akan menampilkan sebuah toast.
  MainActivity.java :

  package com.theheran.listviewicon;
  import android.os.Bundle;
  import android.app.Activity;
  import android.view.View;
  import android.widget.AdapterView;
  import android.widget.ListView;
  import android.widget.Toast;
  /**
   *
   * @author @The_Heran
   * www.theheran.com
   */
  
  public class MainActivity extends Activity {
  	//Declarasi Array Menu dan gambar
  	ListView list;
  	String[] menu = {
  		    "@The_Heran",
  			"www.theheran.com",
  			"Add",
  			"Delete",
  			"Next",
  			"Back",
  			"Find",
  			"Warning"
  	} ;
  	Integer[] imageId = {
  			R.drawable.ic_launcher,
  			R.drawable.signal,
  			R.drawable.add,
  			R.drawable.trash,
  			R.drawable.next,
  			R.drawable.back,
  			R.drawable.find,
  			R.drawable.warning
  	};
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
        //Load main Layout
  		setContentView(R.layout.activity_main);
  		CustomListView adapter = new
  		CustomListView(MainActivity.this, menu, imageId);
  		//get Id List
  		list=(ListView)findViewById(R.id.list);
  		//Set adapter to list
  		list.setAdapter(adapter);
  		//Set ketika salah satu list di pilih(klik)
  		list.setOnItemClickListener(new AdapterView.OnItemClickListener() {
              @Override
              public void onItemClick(AdapterView<?> parent, View view,int position, long id) {
                  Toast.makeText(MainActivity.this, "Anda Memilih" +menu[+ position], Toast.LENGTH_SHORT).show();
  
              }
          });
      }
  
  }
  
  

• Terakhir adalah editing file AndroidManifest.xml sesuai code di bawah ini.

  <?xml version="1.0" encoding="utf-8"?>
  <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.theheran.listviewicon" android:versionCode="1" android:versionName="1.0" >
  
   <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="18" />
  
   <application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" >
   <activity android:name="com.theheran.listviewicon.MainActivity" android:label="@string/app_name" >
   <intent-filter>
   <action android:name="android.intent.action.MAIN" />
  
   <category android:name="android.intent.category.LAUNCHER" />
   </intent-filter>
   </activity>
   </application>
  
  </manifest>
  
  

• Yupps… terakhir adalah jalankan project yang sudah di buat dengan cara klik kanan pada Project⇒ Run As ⇒ 1 Android Application. 
  

  Screenshoot ListView with icon	Screenshoot Listview with icon
  Password file zip: www.theheran.com….	Password file zip: www.theheran.com
  Password file zip? Follow and mention @The_Heran	Password file zip? Follow and mention @The_Heran

Bagaimana Readers? Sudah Jelas? Yang belum jelas bisa mention ke @the_heran. Nah Sekarang sekian dulu ya pembahasan Cara membuat ListView dengan kombinasi Icon dan text . Sampai jumpa 

Salam Hangat

@the_heran | @ade_girie