Snapchat like Add Friend button in recycler view android

Question

I am trying to create a Snapchat Add Friend button like this -

Below is the code for my XML layout of the recylerView item -

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="position"
            type="java.lang.Integer" />

        <variable
            name="viewModel"
            type="com.app.thingleapplication.viewModel.SearchFriendsViewModel" />
    </data>

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:layout_marginBottom="3dp"
        android:elevation="3dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/data_holder"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/guideline2"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent">


                <TextView
                    android:id="@+id/search_result_name"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:ellipsize="end"
                    android:fontFamily="@font/avenirltstd_black"
                    android:maxLines="2"
                    android:paddingStart="10dp"
                    android:paddingLeft="10dp"
                    android:paddingTop="10dp"
                    android:paddingEnd="10dp"
                    android:paddingRight="10dp"
                    android:text="@{viewModel.getItemAt(position).userName}"
                    android:textSize="18sp"
                    app:layout_constraintBottom_toTopOf="@id/search_result_email"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintVertical_bias="0.1"
                    app:layout_constraintVertical_chainStyle="packed" />

                <TextView
                    android:id="@+id/search_result_email"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:drawableStart="@drawable/ic_action_email"
                    android:drawablePadding="5dp"
                    android:ellipsize="end"
                    android:fontFamily="@font/avenirltstd_book"
                    android:gravity="center_vertical"
                    android:lines="1"
                    android:paddingStart="10dp"
                    android:paddingTop="5dp"
                    android:paddingEnd="10dp"
                    android:paddingBottom="5dp"
                    android:text="@{viewModel.getItemAt(position).email}"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toTopOf="@id/search_result_phone"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@id/search_result_name" />

                <TextView
                    android:id="@+id/search_result_phone"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:drawableStart="@drawable/ic_action_phone"
                    android:drawablePadding="5dp"
                    android:ellipsize="end"
                    android:fontFamily="@font/avenirltstd_book"
                    android:gravity="center_vertical"
                    android:lines="1"
                    android:paddingStart="10dp"
                    android:paddingTop="5dp"
                    android:paddingEnd="10dp"
                    android:paddingBottom="5dp"
                    android:text="@{viewModel.getItemAt(position).phone}"
                    android:textSize="14sp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent" />


            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.Guideline
                android:id="@+id/guideline2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_constraintGuide_percent=".75" />


            <FrameLayout
                android:id="@+id/add_button"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:background="@drawable/add_friend_button_border"
                android:elevation="5dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/guideline2"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/button_add"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="@string/add_button"
                    android:textColor="@color/white"
                    android:visibility="visible"
                    android:textSize="16sp" />
                <ProgressBar
                    android:id="@+id/progress"
                    android:layout_width="16dp"
                    android:layout_height="16dp"
                    android:layout_gravity="center"
                    android:indeterminate="true"
                    android:visibility="gone"
                    android:theme="@style/progress" />


            </FrameLayout>

            <FrameLayout
                android:id="@+id/sent_button"
                android:layout_width="80dp"
                android:layout_height="30dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:background="@drawable/sent_button_background"
                android:elevation="5dp"
                android:visibility="@{viewModel.getSentVisibility(position)}"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/guideline2"
                app:layout_constraintTop_toTopOf="parent">

                <TextView
                    android:id="@+id/button_sent"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:text="@string/sent_button"
                    android:textColor="@color/white"
                    android:textSize="16sp" />

            </FrameLayout>


        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</layout>

How do i toggle the visibility of the progressbar inside my add_button frame layout in onBindViewholder. I tried it...it works but due to recyclerViews recycling...some another view's progress bar also starts showing up in recyclerview and the "ADD" text is gone. Can anyone help me fix this ?

Answer 1

You didn't post any code except your layout, and the code is where the problem is. Yes recycler view can be a pain but all you have to do is specifically set the visibility of the control every time, not just when making it visible. You also want to specifically set it invisible everywhere else. You MUST do this because, as you know, the controls get reused. That means their settings such as visibility get reused as well.

You want to see something odd, try this with an edittext.