Contoh Android AutocompleteTextView pada Android Studio

Pada tutorial Android Studio kali ini, kita akan mempelajarai bagaimana cara mengcreate AutocompleteTextView pada sebuah aplikasi Android.

Pada saat kita mengetikkan sesuatu hanya beberapa karakter, akan muncul beberapa rekomendasi kalimat lengkap yang menjadi tujuan kita, itulah yang dikatakan AutocompleteText.

Dalam pembuatan AutocompleteTextView kali ini, kita akan mencoba beberapa alternatif cara pembuatannya.

Cara Pertama

1. Create sebuah project 
Berinama My Autocomplete pada Application name. Kemudian pada Target Android Device centang Phone and Tablet, kemudian set Minimum SDK : API 10 : Android 2.3.3 (Gingerbread). Lalu pilih Blank Activity, dan biarkan default untuk Activity Name : MainActivity.

2. Buka file values/strings.xml
Dalam file strings.xml, kita akan memberikan item-item untuk nama bulan. Kode lengkap untuk file strings.xml adalah sebagai berikut :

<resources>
    <string name="app_name">My Autocomplete</string>
    <string name="action_settings">Settings</string>
    <string-array name="daftar_bulan">
        <item>Januari</item>
        <item>Februari</item>
        <item>Maret</item>
        <item>April</item>
        <item>Mei</item>
        <item>Juni</item>
        <item>Juli</item>
        <item>Agustus</item>
        <item>September</item>
        <item>Oktober</item>
        <item>November</item>
        <item>Desember</item>
    </string-array>
</resources>

3. Buka file res/layout/content_main.xml
Dalam file ini kita akan menambahkan AutocompleteTextView. Berikut ini kode lengkap untuk file content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.myautocomplete.MainActivity"
    tools:showIn="@layout/activity_main">

    <AutoCompleteTextView
        android:id="@+id/autocompleteView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Cari Bulan..." />
</RelativeLayout>

4. Buka file MainActivity.java
Copy paste koding berikut dalam file MainActivity.java anda :

package com.ilmudetil_blogspot.myautocomplete;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

import java.util.Arrays;
import java.util.List;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        int layoutItemId = android.R.layout.simple_dropdown_item_1line;
        String[] namaBln = getResources().getStringArray(R.array.daftar_bulan);
        List<String> dftBulan = Arrays.asList(namaBln);
        ArrayAdapter<String> adapter = new ArrayAdapter<>(this, layoutItemId, dftBulan);

        AutoCompleteTextView autocompleteView = (AutoCompleteTextView) findViewById(R.id.autocompleteView);
        autocompleteView.setAdapter(adapter);

    }
}

Output dari percobaan pertama ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Cara Kedua

1. Create sebuah project 
Berinama My AutocompleteText pada Application name. Kemudian pada Target Android Device centang Phone and Tablet, kemudian set Minimum SDK : API 10 : Android 2.3.3 (Gingerbread). Lalu pilih Blank Activity, dan biarkan default untuk Activity Name : MainActivity.

2. Buka file res/layout/content_main.xml
Koding pada file content_main.xml dalam project ini sama seperti pada percobaan pertama :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.ilmudetil_blogspot.myautocompletetext.MainActivity"
    tools:showIn="@layout/activity_main">

    <AutoCompleteTextView
        android:id="@+id/autocompleteView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Cari Bulan..." />
</RelativeLayout>

3. Buka file MainActivity.java
Pada file ini, kita akan mendefinisikan nama-nama bulang ke dalam tipe data String dalam bentuk Array. Kemudian kita akan memberikan pada karakter berapa dilakukan proses autocomplete, jika kita gunakan syntax setTreshold(1) , maka proses autocomplete dimulai dari karakter pertama. Koding lengkap untuk MainActivity.java adalah sebagai berikut :

package com.ilmudetil_blogspot.myautocompletetext;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.graphics.Color;



public class MainActivity extends AppCompatActivity {
    String[] Bulan = {"Januari", "Februari", "Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.select_dialog_item, Bulan);
        AutoCompleteTextView actv = (AutoCompleteTextView) findViewById(R.id.autocompleteView);
        actv.setThreshold(1);//akan dibaca dari karakter pertama
        actv.setAdapter(adapter);
        actv.setTextColor(Color.RED);

    }
}

Output dari percobaan kedua ditunjukkan oleh Gambar.2 dibawah ini :

Gambar.2

Tweet

Subscribe to receive free email updates: