SlidingChipsView

Setup

Gradle

Add this to your project level build.gradle:

allprojects {
 repositories {
    maven { url "https://jitpack.io" }
 }
}

Add this to your app build.gradle:

dependencies {
    implementation 'com.github.edtslib:slidingchipsview:latest'
}

Usage

The SlidingChipsView is very easy to use. Just add it to your layout like any other view.

Via XML

Here's a basic implementation.

    <id.co.edtslib.slidingchipsview.SlidingChipsView
        android:id="@+id/chips"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Here's to give list data to slidingchipsview

        val list = mutableListOf("Abah", "Hezbi", "Ade", "Robert", "Jovan", "Ucup")
        val chips = findViewById<SlidingChipsView<String>>(R.id.chips)
        chips.items = list

Attributes information

app:startEndSpace

[dimension]: margin start end end with parent, default 16dp

app:textPadding

[dimension]: start and text text padding text and chip, default 20dp

app:textColor

[integer]: resource id color of chip text, default

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- text color when chip is selected -->
    <item android:state_selected="true"
        android:color="#ffffff" />
    <!-- text color when chip is normal -->
    <item android:color="#1171D4"/>
</selector>

app:chipBackground

[integer]: resource id color of chip background, default

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- background when chip is selected -->
    <item android:state_selected="true"
        android:color="#1171D4" />
    <!-- background when chip is normal -->
    <item android:color="#EFF3F6"/>
</selector>

Listening for click actions on the SlidingChipsView

You can set a listener to be notified when the user click the SlidingChipsView. An example is shown below.

        val chips = findViewById<SlidingChipsView<String>>(R.id.chips)
        chips.delegate = object : SlidingChipsDelegate<String> {
            override fun onSelected(item: String, position: Int) {
                Toast.makeText(this@MainActivity, item, Toast.LENGTH_SHORT).show()
            }

        }

Method for navigation actions on the SlidingVhipsView

    // selected index of chip
    var selectedIndex: Int = 0