Tutorial Membuat ListView Sederhana

TheHeran.com/ August 31, 2014/ Download, Java Android, ListView, Slide/ 2 comments

Pagi Readers…! Salam Semangat!

Edisi kali ini akan membahas bagaimana cara menampilkan teks pada daftar list atau lebih populer di sibut listview. Disni juga akan membahas tentang parsing sebuah string dari satu activity ke activity yang lain. Parsing biasanya di gunakan jika ingin mengirim sebuah text atau string dari satu layar ke layar yang lain. Untuk lebih jelasnya langsung saja terjun ke TKP (Tempat Pembuatan Program) 🙂

Pertama – tama buka eclipsenya.

    1. Buat project baru di Eclipse dengan cara File ⇒ New Project ⇒ Application Project dan beri nama main classnya ListViewActivity.  Yang belum jelas bisa klik disni
    2. Kemudian untuk menampilkan daftar String yang akan di tampilkan bisa harcode di kodingnya atau bisa juga di buatkan file khusus yang menampung String tersebut dalam bentuk String Array.
    3. Buatlah Sebuah file list_data.xml dengan cara klik kanan pada res/values ⇒ New ⇒ Android XML File dan paste code di bawah ini
      <resources>
          <string-array name="theHeranList">
          	<item>Java Documentation</item>
          	<item>Java Programming</item>
          	<item>Android Programing</item>
          	<item>Swing Programming</item>
          	<item>News Java</item>
          	<item>The Heran</item>
          </string-array>
      </resources>
      </strong>
    4. Buatlah satu file list_item.xml pada folder res/layout ⇒ New ⇒ Android XML File
       <?xml version="1.0" encoding="utf-8"?>
      <TextView xmlns:android="http://schemas.android.com/apk/res/android"
      	android:id="@+id/label"
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:padding="10dip"
          android:textSize="16dip"
          android:textStyle="bold" >
      </TextView>
       
    5. Nah sekarang buka file class ListViewActivity yang sudah di buat tadi dan ketik/copy code di bawah ini. Pada bagian ini akan mengambil semua data dari resource file xml yang sudah di buat sebelumnya. Data – data tersebut kemudian di simpan dalam bentuk array yang selanjutnya akan di kaitkan pada method ListAdadapter.
      package com.theheran.listview;
      
      import com.theheran.listview.R;
      
      import android.app.ListActivity;
      import android.content.Intent;
      import android.os.Bundle;
      import android.view.View;
      import android.widget.AdapterView;
      import android.widget.AdapterView.OnItemClickListener;
      import android.widget.ArrayAdapter;
      import android.widget.ListView;
      import android.widget.TextView;
      
      public class ListViewActivity extends ListActivity {
          @Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
      
              // Ambil Data dan di simpan dalam bentuk Array
              String[] adobe_products = getResources().getStringArray(R.array.theHeranList);
      
              // Konversi array ke adalam listAdapter
              this.setListAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.label, adobe_products));
              
    6. Kemudian buatlah satu buah class yang akan menampung String dari main class. src/package folder ⇒ New ⇒ Class Dan beri nama SingleList. (SingleList.java). Setelah itu tambahkan kode di bawah ini pada main class ListViewActivity sehinggga kode lengkapnya menjadi seperti di bawah ini
      package com.theheran.listview;import com.theheran.listview.R;import android.app.ListActivity;
      import android.content.Intent;
      import android.os.Bundle;
      import android.view.View;
      import android.widget.AdapterView;
      import android.widget.AdapterView.OnItemClickListener;
      import android.widget.ArrayAdapter;
      import android.widget.ListView;
      import android.widget.TextView;
      
      public class ListViewActivity extends ListActivity {
      @Override
      public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      
      // Ambil Data dan di simpan dalam bentuk Array
      String[] adobe_products = getResources().getStringArray(R.array.theHeranList);
      
      // Konversi array ke adalam listAdapter
      this.setListAdapter(new ArrayAdapter(this, R.layout.list_item, R.id.label, adobe_products));
      
      ListView lv = getListView();
      
      // Fungsi klik pada list
      lv.setOnItemClickListener(new OnItemClickListener() {
      public void onItemClick(AdapterView parent, View view,
      int position, long id) {
      
      // Memilih item
      String product = ((TextView) view).getText().toString();
      
      //memanggil aktivity baru ketika salah satu list di pilih
      Intent i = new Intent(getApplicationContext(), SingleList.class);
      // mengirim data ke ke aktivity baru dengan kata kunci "kategori"
      i.putExtra("kategori", product);
      startActivity(i);
      
      }
      });
      }
      }

       

    7. Selanjutnya activity yang sudah di panggil tersebut tentu harus dapat menerima dan menampilkan data oleh karena itu tahap selanjutnya adalah membuat design atau layout untuk menerima data . buatlan file single_list_view.xml dan ketik kode di bawah ini:
       <?xml version="1.0" encoding="utf-8"?>
      <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TextView android:id="@+id/kategori_label"
        			android:layout_width="fill_parent"
        			android:layout_height="wrap_content"
        			android:textSize="25dip"
        			android:textStyle="bold"
        			android:padding="10dip"
        			android:textColor="#ffffff"/>
      </LinearLayout>
      
    8. Tahap berikutnya setelah layout untuk menerima sebuah data sudah di buat maka buka kembali class SingleList dan ketik kode di bawah ini
      package com.theheran.listview;
      import com.theheran.listview.R;
      
      import android.app.Activity;
      import android.content.Intent;
      import android.os.Bundle;
      import android.widget.TextView;
      
      public class SingleList extends Activity{
      	@Override
          public void onCreate(Bundle savedInstanceState) {
              super.onCreate(savedInstanceState);
              this.setContentView(R.layout.single_list_view);
      
              TextView txtProduct = (TextView) findViewById(R.id.kategori_label);
      
              Intent i = getIntent();
              //Menerima data yang di kirim.
              String product = i.getStringExtra("kategori");
              // Menampilkan data yang sudah di pilih
              txtProduct.setText(product);
      
      	}
      }
      
    9. Tahap terakhir adalah melakukan konfigurasi pada file AndroidManifest.xml.modifikasi file tersebut sehingga menjadi seperti di bawah ini.
      <?xml version="1.0" encoding="utf-8"?>
      <manifest xmlns:android="http://schemas.android.com/apk/res/android"
            package="com.theheran.listview"
            android:versionCode="1"
            android:versionName="1.0">
          <uses-sdk android:minSdkVersion="8" />
      
          <application android:icon="@drawable/icon" android:label="@string/app_name">
              <activity android:name="com.theheran.listview.ListViewActivity"
                        android:label="Android List View">
                  <intent-filter>
                      <action android:name="android.intent.action.MAIN" />
                      <category android:name="android.intent.category.LAUNCHER" />
                  </intent-filter>
              </activity>
      
              <activity android:name="com.theheran.listview.SingleList"
              			android:label="Single Item Selected"></activity>
      
          </application>
      </manifest>
    10. Finally jalankan project dengan cara Klik kanan pada project⇒ Run As ⇒ 1 Android Application

 Screen Shoot 1

  Screen Shoot 2

 Screenshot_listview1 Screenshot_listview2
  

Password file.zip : www.theheran.com

Sekian dulu readers pembahasan Tutorial Membuat ListView Sederhana . Sampai jumpa :)

Salam Hangat

@the_heran | @ade_girie

2 Comments

  1. om bikinnnya pake eclipse? kenapa breaking down atau twilight??

    #abaikan :mrgreen:
    aku taunya cuma delphi om 🙁

    1. heee:) ayak2 wae neng,…

Leave a Reply