Saturday 6 April 2013

Demonstrating AutoCompleteTextView


In this post, I will demonstrate AutoCompleteTextView.
In AutoCompleteTextView, when we type something , we get the suggestions matching the text we entered.
Let's get started.

Create a New Android Application.

If you want to change the application name, go to Package Explorer --> Expand AutoCompleteTextViewDemo --> Expand res --> Expand values --> Open strings.xml

Change the app_name as mentioned in the below diagram. Save the file.

Drag one AutoCompleteTextView from the palette on to the UI. Set its Text and ID. In this case, it is at_Input.

Right click on the AutoCompleteTextView. Select Layout Width --> Other...
Give the value 0dp.
It will automatically add android:layout_weight="1" in the XML.


activity_demo.xml

<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: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=".DemoActivity" >

    <AutoCompleteTextView
        android:id="@+id/at_Input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:ems="10"
        android:completionThreshold="1" >

        <requestFocus />
    </AutoCompleteTextView>

</LinearLayout>


In Package Explorer, go to layout folder. Right click on it. Select New --> Android XML File. Give File name.
 

Click Next. Then Finish.
Drag a text view on our new UI. Give it name tv_Item.

list_item.xml

<?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/tv_Item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@android:color/black" />

</LinearLayout>


Go to Package Explorer --> Expand the AutoCompleteTextViewDemo --> Expand src --> Expand com.samples.autocompletetextviewdemo
Open DemoActivity.java


package com.samples.autocompletetextviewdemo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;

public class DemoActivity extends Activity {
    // AutoComplete TextView
    private AutoCompleteTextView mInputAT;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo);
       
        // Load Values
        loadValues();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.demo, menu);
        return true;
    }

    /** Load values into the AutoCompleteTextView */
    private void loadValues() {
        try {
            List<String> mValuesList = new ArrayList<String>();
            mValuesList.add("Item 1");
            mValuesList.add("Item 2");
            mValuesList.add("Item 3");
            mValuesList.add("Item 4");
            mValuesList.add("Item 5");
           
            mInputAT = (AutoCompleteTextView) findViewById(R.id.at_Input);
            mInputAT.setAdapter(new ArrayAdapter<String>(getApplicationContext(), R.layout.list_item, R.id.tv_Item, mValuesList));
        } catch (Exception e) {
            Log.e("Demo", e.getMessage());
        }
    }
}


Run the application.



No comments:

Post a Comment