Need efficient way to update view on click for category list

Issue

I have a view in which I need to select one of the three categories.

Each category is a Button.

Selected category should have black background with white text while other categories should have white background with black text.

I have done it by creating button for each category and updating on each click event. Is there any better way to do it?

What to do if the number of categories is not fixed?

val filterBoth: Button = parentView.findViewById(R.id.filter_both)
val filterVeg: Button = parentView.findViewById(R.id.filter_veg)
val filterNonveg: Button = parentView.findViewById(R.id.filter_nonveg)

filterBoth.setOnClickListener(this)
filterVeg.setOnClickListener(this)
filterNonveg.setOnClickListener(this)

override fun onClick(view: View?) {
    filterBoth.backgroundTintList = ColorStateList.valueOf(R.color.white)
    filterBoth.setTextColor(R.color.black)
    filterVeg.backgroundTintList = ColorStateList.valueOf(R.color.white)
    filterVeg.setTextColor(R.color.black)
    filterNonveg.backgroundTintList = ColorStateList.valueOf(R.color.white)
    filterNonveg.setTextColor(R.color.black)
    when(view?.id) {
        R.id.filter_both -> {
            filterBoth.backgroundTintList = ColorStateList.valueOf(R.color.black)
            filterBoth.setTextColor(R.color.white)
        }
        R.id.filter_veg -> {
            filterVeg.backgroundTintList = ColorStateList.valueOf(R.color.black)
            filterVeg.setTextColor(R.color.white)
        }
        R.id.filter_nonveg -> {
            filterNonveg.backgroundTintList = ColorStateList.valueOf(R.color.black)
            filterNonveg.setTextColor(R.color.white)
        }
    }
}

EDIT Can I somehow use RadioButton and RadioGroup for this functionality? How to set radiobutton view to a custom view for both checked and unchecked state?

Solution

You can try something like this:

val filterButtons = listOf(filterBoth, filterVeg, filterNonveg)
filterButtons.forEach { btn ->
    btn.setOnClickListener {
        filterButtons.forEach {
            val bgColor = if(it == btn) R.color.black else R.color.white
            val textColor = if(it == btn) R.color.white else R.color.black
            it.backgroundTintList = ColorStateList.valueOf(bgColor)
            it.setTextColor(textColor)
        }
    }
}

What to do if the number of categories is not fixed?

Just add more buttons in the filterButtons list and everything else remains the same.

Answered By - Arpit Shukla