Cara Membuat CustomListView dengan SearchBox Android

  • Post
    codeorayo
    Keymaster
    none
    ListView adalah Sebuah tampilan daftar atau juga disebut daftar list dari sebuah konten atau data yang memungkinkan kalian bisa melihatnya secara berurutan ke bawah dengan gaya vertikal di  tampilan Aplikasi Android. ListView berguna jika kita membuat Aplikasi Android dan ingin menampilkan suatu list misal daftar nama,nomor hp,nama-nama binatang dll. 

    ListView adalah versi deprecated  (versi lama ) dari ReyclerView. ListView menggunakan ArrayList yang berguna untuk menyimpan data ke dalam list obyek dalam bentuk array ,yang ukuranya tergantung dengan jumlah data yang akan diinput. Serta menggunakan Adapter untuk mengatur akses dan resource view dari item data atau Dataset(kumpulan data) ,yang akan ditampilkan pada screen(layar)

    [img]https://4.bp.blogspot.com/-vg6Ju60l6jc/VvfWbSWPARI/AAAAAAAAFLI/MnHlLSNuEm4DwLTyBlhw2oO1-TTP7zyQw/s1600/android-studio-tutorial-development-apps-by-okedroid.png[/img]

    Mekipun versi lama , pada tutorial belajar andorid kali ini kita akan mencoba membuat CustomListView yang dikombinasikan dengan SearchBox(Kotak Pencari). Search Box disini kita akan menggunakan widget EditText. serta tidak menggunakan Actionbar atau toolbar.

    1. Pertama buka Android Studio 

    2. Pilih Start a New Android Studio Project 

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=298]https://2.bp.blogspot.com/-UuGKl7Vgb3k/Vr_PQGoghiI/AAAAAAAAEqU/bymLc7Evl4U/s320/buat-new-project-android-studio-2.0.png[/img][/td]
    [td]Start a New Android Studio Project[/td]

                                            

    3.Kedua pada bagian Create New Project, sesuaikan dengan nama dan package serta lokasi file yang akan kalian gunakan. Untuk contoh saya menggunakan seperti yang ada di gambar di bawah. Jika sudah pilih Next.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=262]https://2.bp.blogspot.com/-UIg-xWlTykM/VzaRQNKUtBI/AAAAAAAAFcc/pnxE_xvBJscspIBCRZlrQI86aE4dtizWgCLcB/s320/CustomListview-dengan-SearchBox-android-project.png[/img][/td]
    [td]Configure New Project[/td]

    4. Selanjutnya tentukan Target Android Devices dari Aplikasi kalian , secara default saya menggunakan API 15 untuk minimumnya. Jika sudah pilih Next.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=209]https://4.bp.blogspot.com/-T8vfh3frTms/Vr_Q-RuWMhI/AAAAAAAAEqk/k60bbG3fC8U/s320/target-android-devices.png[/img][/td]
    [td]Target Android Devices


    [/td]

    5. Pada bagian Add an Activity to Mobile , kita bisa memilih Empty Activity lalu pilih Next.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=202]https://4.bp.blogspot.com/-PM62ys3R2CA/VsZUBFJY5HI/AAAAAAAAErs/I1Q5eBBisJI/s320/Add-An-Activity-to-Mobile.png[/img][/td]
    [td]Empty Activity


    [/td]

    6. Selanjutnya di bagian Customize the Activity kita hanya perlu memilih tombol Finish.

    [table]

    [tr]

    [/tr]

    [tr]

    [/tr]

    [/table]

    [td][img width=320,height=205]https://1.bp.blogspot.com/-DIE9lYCnsC8/VsZUiT8IV8I/AAAAAAAAErw/wNg-DKUDDEo/s320/Customize-the-Activity.png[/img][/td]
    [td]Customize the Activity[/td]

    7.Setelah itu kita tunggu sampai proses building project gradle selesai .

    8. Setelah selesai proses building , kita akan mencoba CustomListView dengan SearchBox  berikut langkah-langkahnya: 

    1) Layout

    Pada bagian layout kalian terapkan baris instruksi (codingan) dibawah pada file activity_main.xml dan daftar_barang.xml. Kalian bisa membuat file layout baru dengan  nama  contoh daftar_barang.xml atau yang lainya.

    activity_main.xml  = untuk menerapkan widget ListView dan SearchBox dengan wiget EditText

    daftar_barang.xml. = untuk menerapkan isi konten atau data dari ListView seperti icon dan text (ImageView dan TextView).

    activity_main.xml 


  • http://schemas.android.com/apk/res/android“

  •               android:orientation=”vertical”

  •               android:layout_width=”fill_parent”

  •               android:layout_height=”fill_parent”>

  •     

  •         android:id=”@+id/kotakpencari”

  •         android:layout_width=”fill_parent”

  •         android:layout_height=”wrap_content”

  •         android:hint=”KOTAK PENCARI..”

  •         android:layout_margin=”5dp”

  •         android:padding=”10dp” />

  •     

  •         android:id=”@android:id/list”

  •         android:layout_width=”fill_parent”

  •         android:layout_height=”0dp”

  •         android:layout_weight=”1″/>



  • daftar_barang.xml


  • http://schemas.android.com/apk/res/android“

  •                 android:layout_width=”match_parent”

  •                 android:layout_height=”match_parent”>

  •     

  •         android:id=”@+id/icon”

  •         android:layout_width=”55dp”

  •         android:layout_height=”70dp”

  •         android:layout_margin=”3dp”

  •         android:layout_alignParentLeft=”true”

  •         android:scaleType=”fitXY”/>

  •     

  •         android:id=”@+id/namabarang”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:layout_toRightOf=”@id/icon”

  •         android:textStyle=”bold”

  •         android:layout_marginTop=”5dp”

  •         android:textSize=”18sp”/>

  •     

  •         android:id=”@+id/hargabarang”

  •         android:layout_width=”wrap_content”

  •         android:layout_height=”wrap_content”

  •         android:layout_toRightOf=”@id/icon”

  •         android:layout_below=”@id/namabarang”

  •         android:layout_marginBottom=”5dp”/>



  • 2) Activity

    Pada file Activity kalian bisa menerapkan baris instruksi (codingan) dibawah pada file class MainActivity.java

    MainActivity.java

  • package com.okedroid.customlistviewdengansearchbox;

  •  

  •  

  • import android.app.ListActivity;

  • import android.content.Context;

  • import android.os.Bundle;

  • import android.text.Editable;

  • import android.text.TextWatcher;

  • import android.view.LayoutInflater;

  • import android.view.View;

  • import android.view.ViewGroup;

  • import android.widget.ArrayAdapter;

  • import android.widget.EditText;

  • import android.widget.ImageView;

  • import android.widget.ListView;

  • import android.widget.TextView;

  • import android.widget.Toast;

  • import java.util.ArrayList;

  • import java.util.HashMap;

  •  

  • public class MainActivity extends ListActivity {

  •  

  •     //Aray list akan di simpan di dalam searchResults

  •     ArrayList> searchResults;

  •  

  •     //ArrayList akan menyimpan data asli dari originalValues

  •     ArrayList> originalValues;

  •     LayoutInflater inflater;

  •  

  •     @Override

  •     public void onCreate(Bundle savedInstanceState) {

  •         super.onCreate(savedInstanceState);

  •  

  •         setContentView(R.layout.activity_main);

  •         final EditText kotakpencari=(EditText) findViewById(R.id.kotakpencari);

  •         ListView playersListView=(ListView) findViewById(android.R.id.list);

  •  

  •         //mengambil LayoutInflater untuk inflating thcustomView

  •         //disini akan menggunakan custom adapter

  •         inflater=(LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

  •  

  •         //disini data aray akan di deklarasikan

  •         //dan akan disimpan ke dalam Arraylist

  •         //tipe data string untuk textview integer untuk gambar icon

  •         String namabarangs[]={“TV”,”SMARTPHONE”,”KULKAS”,”MEJA”};

  •         String hargabarangs[]={“Harga barang TV”,”Harga barang Smartphone”,”Harga barang Kulkas”,”Harga barang Meja”};

  •         Integer[] icons ={R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher};

  •  

  •         originalValues=new ArrayList>();

  •  

  •         //hasmap akan menyimpan data sementara dalam listview

  •         HashMap temp;

  •  

  •         //jumlah baris dalam ListView

  •         int noOfPlayers=namabarangs.length;

  •  

  •         //pengulangan dalam Arraylist

  •         for(int i=0;i

  •         {

  •             temp=new HashMap();

  •  

  •             temp.put(“namabarang”, namabarangs);

  •             temp.put(“hargabarang”, hargabarangs);

  •             temp.put(“icon”, icons);

  •  

  •             //menambah kan baris ke dalam  ArrayList

  •             originalValues.add(temp);

  •         }

  •         //searchResults sama dengan OriginalValues

  •         searchResults=new ArrayList>(originalValues);

  •  

  •         //membuat adapter

  •         //first param-the context

  •         //second param-the id of the layout file

  •         //you will be using to fill a row

  •         //third param-the set of values that

  •         //will populate the ListView

  •         final CustomAdapter adapter=new CustomAdapter(this, R.layout.daftar_barang,searchResults);

  •  

  •         //menset adapter di dalam listview

  •         playersListView.setAdapter(adapter);

  •         kotakpencari.addTextChangedListener(new TextWatcher() {

  •  

  •             public void onTextChanged(CharSequence s, int start, int before, int count) {

  •                 //mengambil text di dalam  EditText

  •                 String searchString=kotakpencari.getText().toString();

  •                 int textLength=searchString.length();

  •                 searchResults.clear();

  •  

  •                 for(int i=0;i

  •                 {

  •                     String playerName=originalValues.get(i).get(“namabarang”).toString();

  •                     if(textLength<=playerName.length()){

  •                         //membandingkan data String didalam EditText dengan namabarangs  di dalam ArrayList

  •                         if(searchString.equalsIgnoreCase(playerName.substring(0,textLength)))

  •                             searchResults.add(originalValues.get(i));

  •                     }}

  •                 adapter.notifyDataSetChanged();

  •             }

  •  

  •             public void beforeTextChanged(CharSequence s, int start, int count,

  •                                           int after) {}

  •  

  •             public void afterTextChanged(Editable s) {}

  •         });

  •     }

  •  

  •     //mendefinisikan custom adapter

  •     private class CustomAdapter extends ArrayAdapter>

  •     {

  •         public CustomAdapter(Context context, int textViewResourceId,

  •                              ArrayList> Strings) {

  •  

  •  

  •             super(context, textViewResourceId, Strings);

  •         }

  •  

  •         //class untuk menyimpan baris konten (cacheview) di listview

  •         private class ViewHolder

  •         {

  •             ImageView icon;

  •             TextView namabarang,hargabarang;

  •         }

  •  

  •         ViewHolder viewHolder;

  •  

  •         @Override

  •         public View getView(int position, View convertView, ViewGroup parent) {

  •  

  •             if(convertView==null)

  •             {

  •                 convertView=inflater.inflate(R.layout.daftar_barang, null);

  •                 viewHolder=new ViewHolder();

  •  

  •                 //isi konten (cache the views)

  •                 viewHolder.icon=(ImageView) convertView.findViewById(R.id.icon);

  •                 viewHolder.namabarang=(TextView) convertView.findViewById(R.id.namabarang);

  •                 viewHolder.hargabarang=(TextView) convertView.findViewById(R.id.hargabarang);

  •  

  •                 //menghubungkan cached views ke dalam convertview

  •                 convertView.setTag(viewHolder);

  •             }

  •             else

  •                 viewHolder=(ViewHolder) convertView.getTag();

  •             int iconId=(Integer) searchResults.get(position).get(“icon”);

  •  

  •             //menset data untuk ditampilkan

  •             viewHolder.icon.setImageDrawable(getResources().getDrawable(iconId));

  •             viewHolder.namabarang.setText(searchResults.get(position).get(“namabarang”).toString());

  •             viewHolder.hargabarang.setText(searchResults.get(position).get(“hargabarang”).toString());

  •             //mengembalikan view untuk ditampilkan

  •             return convertView;

  •         }

  •     }

  •     protected void onListItemClick(ListView l, View v, int position, long id) {

  •         // TODO Auto-generated method stub

  •         super.onListItemClick(l, v, position, id);//menggunakan method onliistitemclick dan mencarinya

  •         //berdasarkan posisi

  •         String str = searchResults.get(position).get(“namabarang”).toString();

  •         try{

  •             if(str==”TV”){

  •                 Toast.makeText(getApplicationContext(), “Harga Tv”, Toast.LENGTH_SHORT).show();

  •                 //menampilkan pesan text toast saat nama barang diklik kalian bisa mengganti intent di baris ini

  •             }

  •             if(str==”SMARTPHONE”){

  •                 Toast.makeText(getApplicationContext(), “Harga Smartphone”, Toast.LENGTH_SHORT).show();

  •             }

  •             if(str==”KULKAS”){

  •                 Toast.makeText(getApplicationContext(), “Harga Kulkas”, Toast.LENGTH_SHORT).show();

  •             }

  •             if(str==”MEJA”){

  •                 Toast.makeText(getApplicationContext(), “Harga Meja”, Toast.LENGTH_SHORT).show();

  •             }

  •         }

  •         catch(Exception e){

  •             e.printStackTrace();

  •         }

  •  

  •     }

  • }


    Quote:

     Kalian bisa mereplace atau mengganti pesan text Toast.makeText(getApplicationContext(), “Harga Tv”, Toast.LENGTH_SHORT).show();  menjadi intent untuk menghubungkan antar Activity    Intent intent = new Intent(this, MainActivity2.class);                startActivity(intent);

Setelah itu kita coba jalankan Aplikasinya di Android Studio

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com
  • You must be logged in to reply to this topic.