Programmatically add chips to chipGroup Android Kotlin.
Hi, we would be looking into creating and programmatically adding chips to a chip group.
There are lots of materials on chips implementation, properties, etc https://material.io/components/chips/android and https://developer.android.com/reference/com/google/android/material/chip/Chip.
What we would be doing
- Create a chipGroup in xml
- Programatically create a chip
- Programmatically add the chip to the chipGroup.
Chips are compact elements that represent an attribute, text, entity, or action. They allow users to enter information, select a choice, filter content, or trigger an action. Chips are mostly used in groups. A chipGroup contains a set of chips and manages their layout, behavior pattern, and multiple exclusion scope.
We would be creating a choice chip. Choice chips allow the selection of a single chip from a set of options. It is an alternative to a toggle button, radio button, etc.
Now let’s dive straight into it…..
Note: To use Chips you have to add a dependency to the material component for android library
Open the app level build.gradle file
i. Make sure that the repositories section includes Google’s Maven Repository google(). For example:
allprojects {
repositories {
google()
jcenter() }
}
ii. Add the library to the dependencies section:
dependencies {
// …
implementation ‘com.google.android.material:material:<version>’
// …
}
Visit Google’s Maven Repository or MVN Repository to find the latest version of the library.
iii. Change your app theme to inherit from a material components theme
<style name=”Theme.MyApp” parent=”Theme.MaterialComponents.DayNight”>
<! — … — !>
</style>
- In your xml file, create a chipGroup
<com.google.android.material.chip.ChipGroup
xmlns:android=”http://schemas.android.com/apk/res/android"
xmlns:app=”http://schemas.android.com/apk/res-auto"
android:id=”@+id/chip_group”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:padding=”16dp”
app:singleLine=”true”
app:singleSelection=”true”>
</com.google.android.material.chip.ChipGroup>
Note: SingleSelection =”true” allows you select only one chip from the group
2.In the kotlin file, get the chipGroup by Id
setOnCheckedChangeListener to listen for click on any of the chip.
Get the text from the checked chip and save the value to the title variable.
findViewbyId(R.id.chip_group).setOnCheckedChangeListener { chipGroup, checkedId ->
val title = chipGroup.findViewById<Chip>(checkedId)?.text
Toast.makeText(chipGroup.context, titleOrNull ?: “No Choice”, Toast.LENGTH_LONG).show()
}
3. Get and supply data to the chip
categories.forEach { findViewbyId(R.id.chip_group).addChip(requireContext(),it.getString(NameModel.name)!!)
}
4. Create the chip and add it to the chipGroup
// create chip programmatically and add it to chip group
fun ChipGroup.addChip(context: Context, label: String){
Chip(context).apply {
id = View.generateViewId()
text = label
isClickable = true
isCheckable = true
setChipSpacingHorizontalResource(R.dimen.dimen_16)
isCheckedIconVisible = false
isFocusable = true
addView(this)
}
}