This article is extended part of our tutorial on Input Chip. Here, we will learn how to use input chip with horizontalScrollView, why do we need horizontalScrollView ? etc.

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

Output

Getting Started

We have limited space on any android device. We can n’t show everything on single screen. For example,
Suppose we want to show one input chip as shown below in our screen –

There are only two Chips being used in single screen. Now, what if we want to show almost 20 Chips in single line ?

Obviously, we can’t show all Chips in single line. Some of Chips will be out of screen.

So, how can we do it ?

It can be achieved using HorizontalScrollView. We just need to wrap input chip with it.

Let’s see how to do it now –

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.

Using Input Chip With HorizontalScrollView in Kotlin

Follow steps below to use input chip with horizontalScrollView in newly created project –

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

  <resources>
      <string name="app_name">ChipWithHorizontalScrollView</string>
      <string name="india">India</string>
      <string name="biking">Biking</string>
      <string name="aeroplane">Aeroplane</string>
      <string name="mobile">Mobile</string>
  </resources>
  

• We need some sample images for our project. You can get it via –
  1. Download vector drawable images
  2. Or, Learn how to Add Image in Android Studio Using Image Asset Studio. Then, add some images in drawable folder.
  3. Or, Learn how to Add Vector Image in Android Using Vector Asset Studio. Then, add some images in drawable folder.
• 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"
      tools:context=".MainActivity">
  
      <HorizontalScrollView
          android:id="@+id/horizontalScrollView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:padding="10dp"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintEnd_toEndOf="parent"
          app:layout_constraintStart_toStartOf="parent"
          app:layout_constraintTop_toTopOf="parent">
  
          <com.google.android.material.chip.ChipGroup
              android:id="@+id/chipGroup"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              app:singleLine="true">
  
              <com.google.android.material.chip.Chip
                  android:id="@+id/chip3"
                  style="@style/Widget.MaterialComponents.Chip.Entry"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:checkable="false"
                  android:checked="true"
                  android:text="@string/india"
                  app:chipIcon="@drawable/ic_location" />
  
              <com.google.android.material.chip.Chip
                  android:id="@+id/chip4"
                  style="@style/Widget.MaterialComponents.Chip.Entry"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:checkable="false"
                  android:checked="true"
                  android:text="@string/biking"
                  app:chipIcon="@drawable/ic_biking" />
  
              <com.google.android.material.chip.Chip
                  android:id="@+id/chip5"
                  style="@style/Widget.MaterialComponents.Chip.Entry"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:checkable="false"
                  android:checked="true"
                  android:text="@string/aeroplane"
                  app:chipIcon="@drawable/ic_flight" />
  
              <com.google.android.material.chip.Chip
                  android:id="@+id/chip6"
                  style="@style/Widget.MaterialComponents.Chip.Entry"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:checkable="false"
                  android:checked="true"
                  android:text="@string/mobile"
                  app:chipIcon="@drawable/ic_mobile" />
  
          </com.google.android.material.chip.ChipGroup>
  
      </HorizontalScrollView>
  
  </androidx.constraintlayout.widget.ConstraintLayout>
  

  Here, we have wrapped ChipGroup with HorizontalScrollView. Inside ChipGroup, there are multiple Chips. Similarly, you can add as many Chips as you need in your project.

• Code inside MainActivity.kt is shown as below –

  package com.tutorialwing.chipwithhorizontalscrollview
  
  import androidx.appcompat.app.AppCompatActivity
  import android.os.Bundle
  import android.widget.Toast
  import androidx.core.view.get
  import com.tutorialwing.chipwithhorizontalscrollview.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)
  
  		setupChips()
  	}
  
  	private fun setupChips() {
  		binding.chip3.setOnCloseIconClickListener {
  			binding.chipGroup.removeView(it)
  			Toast.makeText(this, "Removed one item", Toast.LENGTH_SHORT).show()
  		}
  		binding.chip4.setOnCloseIconClickListener {
  			binding.chipGroup.removeView(it)
  			Toast.makeText(this, "Removed one item", Toast.LENGTH_SHORT).show()
  		}
  		binding.chip5.setOnCloseIconClickListener {
  			binding.chipGroup.removeView(it)
  			Toast.makeText(this, "Removed one item", Toast.LENGTH_SHORT).show()
  		}
  		binding.chip6.setOnCloseIconClickListener {
  			binding.chipGroup.removeView(it)
  			Toast.makeText(this, "Removed one item", Toast.LENGTH_SHORT).show()
  		}
  	}
  }
  

  Here, we have set click listener on chips. We are removing clicked chip from chipGroup. Then, showing a toast message when action is done successfully.

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