Android - How to Change the Color of Alternate Rows in RecyclerView

RecyclerView is an essential ViewGroup used in Android to display a list of items. It provides a flexible and highly customizable way of implementing a list that can be presented as a grid or a list. In this project, we will be working with RecyclerView to change the color of alternate rows. Typically, all items in a RecyclerView have the same color, which can be monotonous and unappealing. By alternating the row colors, we can provide a better visual experience to the user. To achieve this, we will assign a LightGrey color to the items at even positions and a White color to those at odd positions. This simple trick will help us customize our RecyclerView and enhance the user interface. The image below illustrates what we will accomplish in this project.

👁 Android - In RecyclerView How to Change the Color of Alternate Rows

Step-by-Step Implementation:

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add buildFeatures to build.gradle (Module:app)

Since in this project, we used ViewBinding so we have to set ViewBinding=True. Navigate to Gradle Scripts > build.gradle (Module:app) and add the Below buildFeatures section under the android section in the build.gradle (Module:app).

buildFeatures 
{
 viewBinding = true
}

Android Section

android {
 namespace 'com.example.geeksforgeeks'
 compileSdk 32
 defaultConfig {
 applicationId "com.example.geeksforgeeks"
 minSdk 21
 targetSdk 32
 versionCode 1
 versionName "1.0"
 testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
 }
 buildTypes {
 release {
 minifyEnabled false
 proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
 }
 }
 compileOptions {
 sourceCompatibility JavaVersion.VERSION_1_8
 targetCompatibility JavaVersion.VERSION_1_8
 }
 kotlinOptions {
 jvmTarget = '1.8'
 }
 buildFeatures {
 viewBinding = true
 }
}

After adding this buildFeatures section, Sync the Project.

Step 3: Change the StatusBar Color

Navigate to app > res > values > themes > themes.xml and add the below code under the style section in the themes.xml file.

<item name="android:statusBarColor" tools:targetApi="l">#308d46</item>

Step 4: Working with activity_main.xml

Navigate to the app > res > layout > activity_main.xml and add the below code to the activity_main.xml file. Below is the code for the activity_main.xml file. The activity_main.xml represents the UI part of our application. It includes one RecyclerView on which our list of items is displayed. Comments are added inside the code for a better understanding of the Code.

Step 5: Creating a layout for RecyclerView

Here we have to create a layout for our RecyclerView to display our items. Navigate to app > res > layout then Create a new layout resource file and name it items_row.xml. It includes three Text Views for displaying the Name and Emails of the Employees. Comments are added inside the code for a better understanding of the Code.

items_row.xml:

Step 6: Creating Employee Model

In this step, we are going to create an employee model for our RecyclerView. It Contains the Employee's Name and Employee email Id.  Below is the code for the Employee model. Navigate to app >java > your package name >  Create a Kotlin data class named it Employee.kt.

Employee.kt:

Step 7: Creating Employee ArrayList

In this step, we are going to prepare the List of employees with the employee name and employee email. Below is the code for Creating and adding data to the ArrayList. Comments are added inside the code for a better understanding of the Code. Navigate to app > java >your package name > Create a Kotlin Object named Constants.

Constants.kt:

Step 8: Creating Adapter for our RecyclerView

As we know for every RecycleView we need an Adapter class.  and Implement the Three member functions.

• onCreateViewHolder: Here we have to connect the layout resource file that we are for our RecyclerView. 
• onBindViewHolder: Here we have to bind our items to the data source.
• getItemCount: Here we have to return the length of our ArrayList 

Here we are going to implement the main logic to change the color of the alternate Row item. In the onBindViewHolder method we are going to check if the position is Even we assign Light grey color to that item and if the position is odd then we going to assign a white color to the item.

if (position % 2 == 0) {
 holder.llMain.setBackgroundColor(
 ContextCompat.getColor(
 holder.itemView.context,
 R.color.colorLightGray
 )
 )
 } else {
 holder.llMain.setBackgroundColor(ContextCompat.getColor(context, R.color.colorWhite))
 }

Navigate to app > java >your package name > Create a Kotlin Object named as ItemAdapter.Below is the code for the ItemAdapter class. Comments are added inside the code for a better understanding of the Code.

ItemAdapter.kt:

Step 9: Working with MainActivity File

In this step, we are going to Get the employeelist by calling the Constants getEmployeeData() method and assign the employee list to the ItemAdapter and display the employee list.

MainActivity.kt:

Output: