Belajar Membuat AutoCompleteTextView di Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

AutoCompleteTextView adalah widget yang data menampilkan rekomendasi hasil pencarian dari Database, AutoCompleteTextView, akan menampilkan rekomendasi hasil pencarian berdasarkan kata kunci yang kita ketikan. Contohnya pada aplikasi penyimpanan barang, kita dapat menggunakan widget ini untuk mencari nama barang yang Spesifik.

Materi yang akan kita pelajari kali ini adalah cara implementasi AutoCompleteTextView dan juga contoh program dengan menggunakan widget AutoCompleteTextView, Untuk lebih jalasnya mari kita simak tutorial berikut ini.

Materi lainnya yang direkomendasikan:

• Belajar Membuat Aplikasi CRUD SQLite Database di Android Studio
• Tutorial Membuat TextInputLayout Material Design
• Belajar Cara Membuat ListView pada Android Studio

Belajar Membuat AutoCompleteTextView di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Buka file activity_main.xml kalian, disini kita akan menambahkan widget AutoCompleteTextView dan TextView untuk menampilkan outputnya.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_margin="8dp"
    android:orientation="vertical"
    android:background="#FFF5F5F5"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <AutoCompleteTextView
        android:id="@+id/search"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Cari Seusatu ....." />

    <TextView
        android:id="@+id/output"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginTop="4dp"
        android:text="Output Data :"
        android:textSize="15sp"
        android:textStyle="bold" />
</LinearLayout>

View:

3) Selanjutnya buka file MainActivity.java, pada source code berikut ini, kita akan menggunakan sebuah Array untuk menyimpan item, lalu item tersebut akan ditampilakn pada widge AutoCompleteTextView saat user minimal mengetik 2 huruf.

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity implements TextWatcher {

    private TextView Output;
    private AutoCompleteTextView Pencarian;

    //Daftar Item Menggunakan Array
    private String[] listItem = {"Laptop", "Komputer", "Televisi", "Android", "Pensil", "Tas",
                                 "Helm", "Sendal", "Buku", "Gelas", "Penggaris", "Masker", "Mainan",
                                 "Celana", "Baju", "Topi", "Jaket", "Sepeda", "Mobil", "Sepatu",
                                 "Flashdisk", "Hardisk", "Bantal", "Kasur", "Meja", "Kursi", "Kamera",
                                 "Kulkas", "Foto", "Jas", "Jaket", "Spidol", "Makanan", "Minuman"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Output = findViewById(R.id.output);
        Pencarian = findViewById(R.id.search);

        //Membuat Listener untuk menangani kejadian pada AutoCompleteTextView
        Pencarian.addTextChangedListener(this);
        //Membuat Adapter untuk mengatur bagaimana Item/Konten itu tampil
        Pencarian.setAdapter(new ArrayAdapter<>(this, android.R.layout.simple_expandable_list_item_1, listItem));
    }

    @Override
    public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        //Method ini dipanggil sebelum edittext selesai diubah
        Toast.makeText(getApplicationContext(),"Text Belum Diubah", Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
        //Method ini dipanggil saat text pada edittext sedang diubah
        Output.setText("Data Output : "+Pencarian.getText());
    }

    @Override
    public void afterTextChanged(Editable editable) {
        //Method ini dipanggil setelah edittext selesai diubah
        Toast.makeText(getApplicationContext(),"Text Selesai Diubah", Toast.LENGTH_SHORT).show();
    }
}

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Berbagi :