Android AutoCompleteTextview Using Kotlin With Example




Target

Hello Readers! In this post, we are going to learn about how to use android autoCompleteTextView using kotlin in any android application. We will also learn about different attributes of android autoCompleteTextView that can be used to customise this widget.

Output

Tutorialwing Android AutoCompletetTextView Output Android AutoCompleteTextView Using Kotlin

Tutorialwing Android AutoCompletetTextView Output

Getting Started

Android AutoCompleteTextView widget can be defined as below –

AutoCompleteTextView is an editable textView that shows completion suggestions while user is typing in the view i.e. When user starts typing in the view, as soon as entered character crosses thresold character limit, user sees some available suggestions based on the entered character.

Different Attributes of Android AutoCompleteTextView Widget

Some of the popular attributes of AutoCompleteTextView are –

Sr. XML Attributes Description
1 android:completionHint Specifies hint to show in the dropdown menu
2 android:completionHintView Specifies hint view to show in the dropdown menu
3 android:completionThreshold Specifies number of character that user must type before suggestion is displayed in drop down menu
4 android:dropDownAnchor View to anchor the auto-complete dropdown to
5 android:dropDownHeight Sets basic height of the dropdown
6 android:dropDownHorizontalOffset Sets amount of pixel by which dropdown is to be offset horizontally
7 android:dropDownSelector It specifies selector in dropdown list
8 android:dropDownWidth Defines basic width of the dropdown

Some of the popular attributes of android AutoCompleteTextview inherited from TextView are –

Sr. XML Attributes Description
1 android:height Defines height of the view
2 android:width Defines width of the view
3 android:textStyle Defines style of the text. For example, bold, italic or bolditalic etc.
4 android:textSize Defines size of the text

Some of the popular attributes of android autoCompleteTextview inherited from View are –

Sr. XML Attributes Description
1 android:alpha Defines alpha of the view
2 android:background Defines Background of the view
3 android:clickable Defines whether view is clickable or not
4 android:focusable Defines whether view can take focus or not



Example of Android AutoCompleteTextView Using Kotlin

At first, we will create android application. Then, we will use autoCompleteTextView widget in the application.

1. Creating New Project in Kotlin

Follow steps below to create new project. Please ignore the steps if you have already created the project.

Step Description
1. Open Android Studio.
2. Go to File => New => New Project. Write application name as AutoCompleteTextView. Then, check Include Kotlin Support and click next button.
3. Select minimum SDK you need. However, we have selected 17 as minimum SDK. Then, click next button
4. Then, select Empty Activity => click next => click finish.
5. You will get a newly created project successfully if you have followed steps properly.

Since we have an android application, we will modify xml and other file to use autoCompleteTextview using kotlin in the application.

2. Modify values folder

Open res/values/strings.xml file. Then, add below code into it.

<resources>
	<string name="app_name">AutoCompleteTextView</string>
	<string name="hint">Please type something...</string>
	<string name="submit">Submit</string>
	<string name="entered_text">Entered text:</string>

	<string-array name="countries_array">
		<item>India</item>
		<item>Albania</item>
		<item>Algeria</item>
		<item>American Samoa</item>
		<item>Andorra</item>
		<item>Angola</item>
		<item>Anguilla</item>
		<item>Antarctica</item>
	</string-array>

</resources>

In strings.xml file, we have also defined an array (i.e. countries_array) that will act as suggestions list to show when user starts typing in the autoCompleteTextview.

3. Use AutoCompleteTextview Widget in xml file

Open src/main/res/layout/activity_main.xml file and add below code into it.

<?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:gravity="center"
	android:orientation="vertical">

	<AutoCompleteTextView
		android:id="@+id/autoCompleteTextView"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_margin="20dp"
		android:hint="@string/hint"/>

	<Button
		android:id="@+id/button"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="@string/submit"/>

</LinearLayout>

In activity_main.xml file, we have defined AutoCompleteTextView. Now, we will access this autoCompleteTextview using kotlin file to perform some operations on it.

4. Access AutoCompleteTextView Using Kotlin file

Open src/main/java/com.tutorialwing.autocompletetextview/MainActivity.kt file and add below code into it.

package com.tutorialwing.autocompletetextview

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

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView = findViewById<AutoCompleteTextView>(R.id.autoCompleteTextView)
        // Get the string array
        val countries = resources.getStringArray(R.array.countries_array)
        // Create the adapter and set it to the AutoCompleteTextView
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, countries)
        textView.setAdapter(adapter)

        val button = findViewById<Button>(R.id.button)
        if (button != null) {
            button.setOnClickListener(View.OnClickListener {
                val text = getString(R.string.entered_text) + " " + textView.getText()
                Toast.makeText(this@MainActivity, text, Toast.LENGTH_SHORT).show()
            })
        }
    }
}

In MainActivity.kt file, we have accessed AutoCompleteTextView defined in xml file. Then, we have defined an adapter using the array (i.e. countries_array) defined in strings.xml. After that, we have set this adapter in AutoCompleteTextView. This adapter is responsible to display completion suggestions as list in the dropdown of autoCompletion while user is typing in the view. At last, we have set click listener to button, defined in xml file, to display a toast message, containing the text entered in autoCompleteTextView.

Since AndroidManifest.xml file is very important in any android application, we are also going to see the content inside this file.

AndroidManifest.xml file

Code inside main/AndroidManifest.xml file is as below.

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.tutorialwing.autocompletetextview"
		  xmlns:android="http://schemas.android.com/apk/res/android">

	<application
		android:allowBackup="true"
		android:icon="@mipmap/ic_launcher"
		android:label="@string/app_name"
		android:roundIcon="@mipmap/ic_launcher_round"
		android:supportsRtl="true"
		android:theme="@style/AppTheme">
		<activity android:name=".MainActivity">
			<intent-filter>
				<action android:name="android.intent.action.MAIN"/>

				<category android:name="android.intent.category.LAUNCHER"/>
			</intent-filter>
		</activity>
	</application>

</manifest>

When we run the program, we will get output as shown above.

That’s end of our tutorial on Android AutoCompleteTextView using Kotlin.