Cara membuat ListView dengan kombinasi Icon dan text

TheHeran.com/ September 4, 2014/ Download, Java Android, Java Programming, ListView, Slide/ 3 comments

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&lt;String&gt; {
    	//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&lt;?&gt; 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. 

    listview with icon android

    Screenshoot ListView with icon

    Listview with icon

    Screenshoot Listview with icon

    Password file zip: www.theheran.comDownload Source Code Splash Screen Android…. Password file zip: www.theheran.comDownload File Apk Splash Screen Android
    ListView with icon and custom bacground ListView with icon and custom bacground
    Password file zip? Follow and mention @The_Heran
    Download Source Code Splash Screen Android
    Password file zip? Follow and mention @The_HeranDownload File Apk Splash Screen Android

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

 

Comments

comments

  • Waah mantap nih ilmunya.. Saya belum pernah nyoba coding untuk apps Android! Biasa main template blogger.

    Kayaknya seru untuk dipelajari yaa. ^_^

    • TheHeran.com

      Sip… gan.. nhe masih dalam tahap merintis 🙂 mohon masukan dan kritiknya.. #TheHeran.com

  • Menyimak bari keteteran… Sukses selalu masbro…