Till now, we have seen what is input or Entry Chip. We have also gone through different attributes that can be used to customize Input Chip. In this article, we will go through a real life example of Android Entry or Input Chip Application.

Have you seen ui like below ?

You may also noticed such ui in our gmail application. We are going to implement such ui in our application.

Let’s have a quick demo of things we want to cover in this tutorial –

Output

Getting Started

Here, we have used concepts of tutorial covered in –

1. Android Input Chip Using Kotlin With Example
2. Dynamic Input Chip in Kotlin With Example

Creating New Project

At first, we will create an application.
So, follow steps below to create any android project in Kotlin –

Newbie in Android ?

Some very important concepts (Recommended to learn before you move ahead)

• Install Android Studio
• Create New Project in Android Studio
• Android Project Structure
• Run / Debug / Test Android App

Before we move ahead, we need to setup for viewBinding to access Android WIDGET Using Kotlin file without using findViewById() method.

Setup ViewBinding

Add viewBinding true in app/build.gradle file.

 
 android { 
 	// OTHER CODE... 
 	buildFeatures { 
 		viewBinding true 
 	} 
 } 
 

Now, set content in activity using view binding.
Open MainActivity.kt file and write below code in it.

 
 class MainActivity : AppCompatActivity() { 
 	
 	private lateinit var binding: ActivityMainBinding 
 	
 	override fun onCreate(savedInstanceState: Bundle?) { 
 		super.onCreate(savedInstanceState) 
 		binding = ActivityMainBinding.inflate(layoutInflater) 
 		val view = binding.root 
 		setContentView(view) 
 	} 
 } 
 

Now, we can access view in Kotlin file without using findViewById() method.

Android Chip Application Example

Follow steps below to use Chip in newly created project –

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

  <resources>
      <string name="app_name">ChipApplication</string>
      <string name="to">To</string>
      <string name="enter_person_name">Enter person name...</string>
  </resources>
  

• We need drawable image for our application. You can either copy paste any image of your choice or create a new image using below link –
  1. Add Vector Image in Android Using Vector Asset Studio
  2. Add Image in Android Studio Using Image Asset Studio
• Open res/layout/activity_main.xml file. Then, add below code in it –

  <?xml version="1.0" encoding="utf-8"?>
  <androidx.constraintlayout.widget.ConstraintLayout 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:padding="16dp"
      tools:context=".MainActivity">
  
      <TextView
          android:id="@+id/label_to"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_margin="8dp"
          android:text="@string/to"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent" />
  
      <EditText
          android:id="@+id/messageTo"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_margin="8dp"
          android:hint="@string/enter_person_name"
          android:importantForAutofill="no"
          android:inputType="textPersonName"
          app:layout_constraintBaseline_toBottomOf="@+id/label_to"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toEndOf="@+id/label_to"
          app:layout_constraintTop_toTopOf="parent" />
  
      <com.google.android.material.chip.ChipGroup
          android:id="@+id/personList"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          app:layout_constraintEnd_toEndOf="@+id/messageTo"
          app:layout_constraintStart_toStartOf="@+id/messageTo"
          app:layout_constraintTop_toBottomOf="@+id/messageTo" />
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

• Now, we will access chip in Kotlin File, MainActivity.kt and perform some action as shown below –

  package com.tutorialwing.chipapplication
  
  import android.os.Bundle
  import android.text.Editable
  import android.text.TextWatcher
  import android.view.View
  import android.widget.Toast
  import androidx.appcompat.app.AppCompatActivity
  import androidx.core.content.ContextCompat
  import com.google.android.material.chip.Chip
  import com.tutorialwing.chipapplication.databinding.ActivityMainBinding
  
  class MainActivity : AppCompatActivity() {
  
  	private lateinit var binding: ActivityMainBinding
  
  	override fun onCreate(savedInstanceState: Bundle?) {
  		super.onCreate(savedInstanceState)
  
  		binding = ActivityMainBinding.inflate(layoutInflater)
  		setContentView(binding.root)
  
  		initSetup()
  	}
  
  	private fun initSetup() {
  		val etMsgTo = binding.messageTo
  		etMsgTo.addTextChangedListener(object : TextWatcher {
  			override fun afterTextChanged(s: Editable?) {
  				val text = s.toString()
  				if (text.isNotEmpty() && (text.last().toString() == ","))
  					etMsgTo.setText("")
  			}
  
  			override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
  			}
  
  			override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
  				if (!s.isNullOrEmpty()) {
  					if (s.length > 1 && s.last().toString() == ",") {
  						val text = s.toString().replace(",", "")
  						addChipToGroup(text)
  					}
  				}
  			}
  		})
  	}
  
  	private fun addChipToGroup(personName: String) {
  		val chip = Chip(this)
  		chip.text = personName
  		chip.chipIcon = ContextCompat.getDrawable(this, R.drawable.ic_person)
  		chip.isChipIconVisible = true
  		chip.isCloseIconVisible = true
  		chip.isClickable = true
  		chip.isCheckable = false
  		binding.personList.addView(chip as View)
  		chip.setOnCloseIconClickListener {
  			binding.personList.removeView(chip as View)
  			Toast.makeText(this, "${chip.text} has been removed", Toast.LENGTH_SHORT).show()
  		}
  	}
  }
  

  Here, we have done below things –

  1. initSetup(): We have set a text changed listener on our edit text. Whenever we enter comma (,) in editText box, new chip is created with entered value in it (before comma).
  2. addChipToGroup(): This method creates a new chip (with entered text) and add it to ChipGroup. We have also set click listener on close icon. Whenever close icon of any chip is clicked, that chip is removed from viewGroup.
  3. We have used several attributes while creating chip. You can visit our article on dynamic chip to learn more about different attributes in chip.

Now, run the application. We will get output as below –

Thus, we have seen an example of Android Entry or Input Chip Application.