Need efficient way to update view on click for category list-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

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