Need efficient way to update view on click for category list

Question

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?

https://stackoverflow.com/a/55139080/12148482 – vipul_8192 May 16 '22 at 06:28 — vipul_8192, May 16 '22 at 06:28

score 0 · Accepted Answer · answered May 15 '22 at 11:42

0

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 May 15 '22 at 11:42

Arpit Shukla

9,612
1
14
40

Thanks for the code. On further exploration, can I set custom view in radio button as it would achieve the same objective – vipul_8192 May 15 '22 at 14:39
That seems to be a completely different question. You should post it as a new question. – Arpit Shukla May 15 '22 at 16:04

score 0 · Answer 2 · answered May 15 '22 at 17:39

You can use a MaterialToggleButtonGroup with singleSelection set to true. That way you can theme them as usual, all the usual button states (like hover) will look right, they'll automatically uncheck if another is checked, and they'll work better with accessibility services.

You can use addOnButtonCheckedListener on the group layout to handle one of the buttons being selected.

Material Design docs here too: https://material.io/components/buttons/android#toggle-button

Need efficient way to update view on click for category list

2 Answers2