Auto Complete Text View | Android Beginner Dev Tutorial

This is a very simple tutorial on using Auto Complete Text View provided by Android SDK.


It consists of a single text box which can show suggestions based on a list of data that I provide as a source for this field. Just like Google Suggest, this also shows the nearest matches to the string that is being input by the end user.

So, here is the layout xml file:

<AutoCompleteTextView
android:id="@+id/AndroidBooks"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></AutoCompleteTextView>

Nothing special. It just consists of one element.

Now in the main activity, I create an array of android books:

String[] androidBooks =
{
"Hello, Android - Ed Burnette",
"Professional Android 2 App Dev - Reto Meier",
"Unlocking Android - Frank Ableson",
"Android App Development - Blake Meike",
"Pro Android 2 - Dave MacLean",
"Beginning Android 2 - Mark Murphy",
"Android Programming Tutorials - Mark Murphy",
"Android Wireless App Development - Lauren Darcey",
"Pro Android Games - Vladimir Silva",
};

Then in the onCreate(..) method, I create an ArrayAdapter that I can pass to this AutoCompleteTextView as the data Source.

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,android.R.layout.simple_dropdown_item_1line,androidBooks);

Then, I get a handle to the AutocompleteTextView, and set the arrayAdapter to it along with the Threshold. The Threshold defines the number of charaters a user should type before the suggestions start showing up.

AutoCompleteTextView acTextView = (AutoCompleteTextView)findViewById(R.id.AndroidBooks);
acTextView.setThreshold(3);
acTextView.setAdapter(adapter);

That is it. Now execute and see it work. 

This is the way it would look:

The example code can be downloaded here.

Date and Time Picker Views | Android Developer Tutorial (Part 20)

Continuing my tutorials on some UI related stuff… In Part 16 & 17, I spoke about Simple ListView and Custom ListView. In Part 18, though it seems like a tutorial on Threads and Handlers, I have touched upon ProgressDialog, another view.


Here I would like to talk on the DatePicker and TimePicker that are bundled with the SDK. Both are very similar. So, I will talk only about DatePicker, but the sample code will have both.

Typically, we would want an end user to be able to set a date though a DatePickerDialog that pops-up on some user action. So, I have a button “Set Date” on the click of which a DatePickerDialog pops-up. Once the user selects a date and “sets” it, it is displayed back in a TextView field.

So, the code associated with the button is:

pickDate.setOnClickListener( new OnClickListener() {
@Override
    public void onClick(View v) {
        showDialog(DATE_DIALOG_ID);
    }
});

showDialog(…) is a method available on an Activity Itself. It just takes an integer to help decide which dialog should actually be shown. This is decided in the onCreateDialog(…) method that gets automatically invoked when showDialog(…) is called.

Here is the code for the same:

protected Dialog onCreateDialog(int id){
    switch(id) {
        case DATE_DIALOG_ID:
            return new DatePickerDialog(this, dateListener, year, month, day);
        case ….
    }
    return null;
}

In this method, when the int passed is DATE_DIALOG_ID, a new DatePickerDialog is passed along with the values for year, month and day. Where did I set values for these? In the onCreate(…) method itself, I have done this:

final Calendar cal = Calendar.getInstance();
year = cal.get(Calendar.YEAR);
month = cal.get(Calendar.MONTH);
day = cal.get(Calendar.DAY_OF_MONTH);

Also note that a handle to a listener is expected to be given to the DatePickerDialog. I will come to this listener a little later.

I have also updated the Date - TextView with these values in the updateDate() method which is invoked in the onCreate(…) method itself.

private void updateTime() {
    timeDisplay.setText(new StringBuilder().append(hours).append(':')
    .append(min));
}

So far, what I have done is shown how to create a Dialog and set the date.

Once the dialog shows up, when a user sets the date and clicks ‘set’, the listener that is invoked in on the DatePickerDialog. The method is onDateSetListener whose handle is passed during the creation of the DatePickerDialog itself.

private DatePickerDialog.OnDateSetListener dateListener =
    new DatePickerDialog.OnDateSetListener() {
        @Override
        public void onDateSet(DatePicker view, int yr, int monthOfYear, int dayOfMonth) {
            year = yr;
            month = monthOfYear;
            day = dayOfMonth;
            updateDate();
     }
};

In this method, on the click on the dialog, we are setting the day, month, year values to the new values that the user selected and also calling the updateDate() method to refresh the TextView with what the user selected.

It is this simple.

Same thing can be done with the TimePicker as well. The only difference is that you can pass a Boolean variable to say whether you want the time in 24 hour or 12 hour pattern.

Here is the complete code for the same.