Sunday, April 28, 2013

Android Tutorial : Click Event pada ListView Item

Seorang teman bertanya kepada saya cara membuat item-item menu pada tampilan ListView Android seperti gambar di bawah ini
jika nama perusahaan yang ditampilkan pada ListView tersebut diklik akan ditampilkan Activity baru.
Saya akan membagi sedikit pengalaman saya dalam menangani kasus sejenis itu.
Saya membuat project Android sederhana yang mendekati kasus tersebut.
Saya buat MainActivity yang menampilkan nama-nama operating system, saya extends class MainActivity dari ListActivity untuk membuat tampilan ListView sederhana.
Source code class MainActivity adalah sebagai berikut
package tutorial.listview;

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

public class MainActivity extends ListActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" };
      ArrayAdapter adapter = new ArrayAdapter(MainActivity.this,
android.R.layout.simple_list_item_1, values);
      setListAdapter(adapter);
 }
}
Jika project dijalankan, kita akan mendapatkan sebuah program yang menampilkan list operating system seperti gambar di bawah ini

Kemudian, saya ingin agar jika nama operating system di list tersebut diklik akan ditampilkan Intent baru, caranya adalah dengan menambahkan method berikut di class MainActivity
public void onListItemClick(ListView l, View v, int position, long id) {
//New Intent Here
}
Di bagian //New Intent Here dari method di atas tersebut nanti kita akan mencoding Activity baru yang akan muncul.
Source code class MainActivity akan menjadi seperti berikut
package tutorial.listview;

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

public class MainActivity extends ListActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  String[] values = new String[] { "Android", "iPhone", "WindowsMobile",
          "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X",
          "Linux", "OS/2" };
      ArrayAdapter adapter = new ArrayAdapter(MainActivity.this,
android.R.layout.simple_list_item_1, values);
      setListAdapter(adapter);
 }
 
 public void onListItemClick(ListView l, View v, int position, long id) {
     //New Intent Here
 }
}
Kemudian buat sebuah Activity baru yang nantinya akan muncul setelah nama operating system di tampilan ListView diklik. Saya beri nama class NewActivity untuk Activity tersebut dengan source code berikut
package tutorial.listview;

import android.app.Activity;
import android.os.Bundle;

public class NextActivity extends Activity {
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.next_activity);
 }
}
Kemudian buat layout untuk NextActivity, saya beri nama layoutnya next_menu.xml dengan isi sebagai berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="nama_OS"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</LinearLayout>
Terakhir, kita lengkapi method untuk menampilkan NewActivity, ganti baris //New Intent Here yang ada di class MainActivity dengan code berikut
Intent i = new Intent(MainActivity.this, NextActivity.class);
startActivity(i);
sehingga class MainActivity lengkapnya akan menjadi
package tutorial.listview;

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

public class MainActivity extends ListActivity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" };
      ArrayAdapter adapter = new ArrayAdapter(MainActivity.this,
android.R.layout.simple_list_item_1, values);
      setListAdapter(adapter);
 }
 
 public void onListItemClick(ListView l, View v, int position, long id) {
  Intent i = new Intent(MainActivity.this, NextActivity.class);
  startActivity(i);
 }
}
Pastikan NextActivity sudah ditambahkan sebagai activity di AndroidManifest.xml
<activity
   android:name="tutorial.listview.NextActivity"
   android:label="@string/app_name">
</activity>
Selanjutnya coba jalankan program.
Saat salah satu nama operating system diklik, misalnya Android

Setelah itu akan muncul Activity baru

[postingan ini masih akan diupdate lagi setelah mendapat feedback]
Kita bisa juga melempar parameter dari satu Activity ke Activity berikutnya, insya Allah akan saya bahas di kesempatan lain

sumber:
http://www.vogella.com/articles/AndroidListView/article.html


UPDATE
Karena ada yang menanyakan source code main.xml saya, ini saya tambahkan gan
<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=".MainActivity" >

    <ListView
        android:id="@+id/ls_lvMenu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </ListView>

</LinearLayout>


14 comments:

ardhi wijayanto said...

ada baris < /string > < /string > di source code itu bug dari syntaxhighlighter

ardhi wijayanto said...

syntaxhighlighter sudah saya ganti dengan yang lebih enteng

Surya Adhi Kuncoro said...

ayo link exchange, wes tak pasang link blogmu... :v

ardhi wijayanto said...

wis tak cantumke ki

Unknown said...

main.xml nya mana gan ?

ardhi said...

main.xml ga ada penambahan dari source code defaultnya gan, sudah saya tambahkan ke postingan

Unknown said...

mas ardhi saya mw nanya .. gmn cara nya di setiap select row nya di pindah ke activity yang berbeda ... misalnya string android ke next.activity , string Iphone ke next2.activity ... mohon pencerahannya :)

alteredo said...

idem mas, saya juga mau nanya soal ini, cara membuat onlistitemclick berbeda-beda, jadi ga cuma bikin satu activity saja, thanks
rootandroidmu.blogspot.com

Anonymous said...

kalo kil yang lain pindah ke activity yang lain gimana ?
jadi ga pindeh ke 1 activity aja, tiap listview yang dipilih ganti nya beda beda activity,
makasih ya

ardhi said...

ada caranya sih, maaf belum sempat update, nanti saya kasih tahu kok :)

Anonymous said...

iya. selasa besok mau dikumpulin tugas android saya, trimakasih ya sebelumnya (semoga apdet nya cepet) hehe

ardhi wijayanto said...

maaf belum update sampai sekarang

bumbled26.blogspot.com said...

mas mulainya gimana ya maklum baru belajar mohon petunjuknya ... project sudah aku buat teruss gimana yaa

Unknown said...

bro2 kalo dari listview pindah ke listview lagi ketika di klik gmn ya?

Post a Comment

ardhi.web.id. Powered by Blogger.