Friday, May 14, 2021

ChipGroup add chip Android Example

 ChipGroup add chip Android Example

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)


        val context = this


        // get chip group initial checked chip text

        val chip: Chip? = findViewById(chipGroup.checkedChipId)

        textView.text = "Checked Chip : ${chip?.text}"



        // set chip group checked change listener

        chipGroup.setOnCheckedChangeListener { group, checkedId ->

            // get the checked chip instance from chip group

            (findViewById<Chip>(checkedId))?.let {

                // Show the checked chip text on text view

                textView.text = "Checked Chip : ${it.text}"

            }

        }



        // add chip to chip group programmatically

        button.setOnClickListener {

            (it as Button).isEnabled = false

            chipGroup.addChip(context,"Magenta")

            chipGroup.addChip(context,"Pink")

            chipGroup.addChip(context,"Black")

        }

    }

}



// 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

        isCheckedIconVisible = false

        isFocusable = true

        addView(this)

    }

}

activity_main.xml

<?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:id="@+id/constraintLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#FEFEFA"

    tools:context=".MainActivity">


    <Button

        android:id="@+id/button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="8dp"

        android:text="add Chips"

        android:backgroundTint="#E97451"

        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"

        style="@style/Widget.MaterialComponents.ChipGroup"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginTop="24dp"

        android:layout_marginEnd="8dp"

        app:checkedChip="@id/chipGreen"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/button"

        app:selectionRequired="true"

        app:singleSelection="true">


        <com.google.android.material.chip.Chip

            android:id="@+id/chipRed"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:checkable="true"

            android:text="Red"

            app:checkedIconVisible="false" />


        <com.google.android.material.chip.Chip

            android:id="@+id/chipGreen"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:checkable="true"

            android:text="Green"

            app:checkedIconVisible="false" />


        <com.google.android.material.chip.Chip

            android:id="@+id/chipYellow"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:checkable="true"

            android:text="Yellow"

            app:checkedIconVisible="false" />


    </com.google.android.material.chip.ChipGroup>


    <TextView

        android:id="@+id/textView"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_marginTop="32dp"

        android:fontFamily="sans-serif-condensed-medium"

        android:gravity="center"

        android:padding="8dp"

        android:textColor="#4F42B5"

        android:textSize="22sp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/chipGroup"

        tools:text="TextView" />


</androidx.constraintlayout.widget.ConstraintLayout>

ChipGroup add chip Android Example

No comments:

Post a Comment