Prevent button from becoming transparent when selected

Issue

I have a recyclerview that has a row of buttons. My objective is to make the currently selected button have text that is teal-colored, while the rest have text that is grey colored.

To do that, I have the following code in my TabAdapter class:

class TabAdapter(private val items: ArrayList<Pair<String, ArrayList<String>>>, private val context: Context) : RecyclerView.Adapter<TabViewHolder>() {
private var selectedPosition: Int = RecyclerView.NO_POSITION

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): TabViewHolder {
    return TabViewHolder(LayoutInflater.from(context).inflate(R.layout.tabrecycler_item_column, parent, false))
}

override fun getItemCount(): Int {
    return items.size
}

override fun onBindViewHolder(holder: TabViewHolder, position: Int) {

    context as AnimeFaceKeyboard

    holder.itemView.isSelected = selectedPosition == position

    if (holder.itemView.isSelected) {
        holder.button.setTextColor(ContextCompat.getColor(context, R.color.material_deep_teal_200))
    } else {
        holder.button.setTextColor(ContextCompat.getColor(context, R.color.material_grey_600))
    }


    //This code sets the widths of the buttons to, at minimum,
    //occupy the entire width of the screen combined 
    val displayMetrics = Resources.getSystem().displayMetrics

    if (itemCount * (120 * displayMetrics.density) < displayMetrics.widthPixels) {
        holder.button.width = displayMetrics.widthPixels / itemCount
    }


    holder.button.text = items[position].first
    holder.button.setOnClickListener {

        //TODO - Figure out how this code works
        notifyItemChanged(selectedPosition)
        selectedPosition = holder.layoutPosition
        notifyItemChanged(selectedPosition)

        //This code updates a different recyclerview. 
        context.isFavoritesTabSelected = position == items.lastIndex
        context.updateCurrentImageLayout(items[position].second)
    }
}

}
class TabViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val button: Button = view.tabButton

}

The relevant lines are in the onBindViewHolder method. Specifically this line

holder.itemView.isSelected = selectedPosition == position

and this code inside the onClick method for the buttons

        notifyItemChanged(selectedPosition)
        selectedPosition = holder.layoutPosition
        notifyItemChanged(selectedPosition)

Also here is the layout for the buttons in the recyclerview:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/tabButton"
        android:layout_width="match_parent"
        android:minWidth="120dp"
        android:layout_height="match_parent"
        android:text="Unset-Button-Text"
        android:background="@color/darkshade"
        style="@style/Widget.AppCompat.Button.Borderless"/>


</android.support.constraint.ConstraintLayout>

The behavior of my recyclerView is partially function. The text of the currently selected button, is in fact, teal colored.

However, there are two issues

1] The buttons turn partially transparent when they are tapped. Something must be wrong with the on-tap ripple animation

and

2] The ripple animation is only supposed to play for the current button that is selected, but, it also plays for the previously selected button.

Here is a GIF from my phone to demonstrate:

Solution

After reading @Shashwat's answer, I solved the problem by changing the background color of the recyclerview to the same color as the buttons.

This means that even if the adapter recreates the button from scratch, there is no fading in and out.

Answered By - Foobar