Techoceanhub logo

Simplifying RecyclerView using Kotlin.

As people say Recycler view is difficult to understand but it is very flexible in nature as it provides dynamic features as compared to the ListView and Custom Adapter or you can say it is a combination of listview and custom adapter.

RecyclerView uses a ViewHolder class which is a helper class that holds the View of a row or rows, and we need to add the RecyclerView support library com.android.support:recyclerview-v7:23.1.0 or above.

Now we can understand why it’s called a RecyclerView because it recycles the existing view for a new one and gives much more power and control to its developers.

Below is a simple example of a recyclerview.

Recycler view provides different components  to work together to display your data. It creates a new ViewHolder object to inflate the layout and hold those references, or it recycles one from the existing stack(views).

Overall, the RecyclerView  class supports the display of a collection of data.

Below I have added steps to code RecyclerView.

First add below libraries in order to implement my recyclerView you can put them in build.gradle(Module:app)

   dependencies {

    implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'androidx.appcompat:appcompat:1.2.0'
implementation 'androidx.core:core-ktx:1.3.1'
implementation 'androidx.constraintlayout:constraintlayout:2.0.1'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test.ext:junit:1.1.2'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'
}

You can make RecyclerView with or Without cardView,
I have added in order to make my RecyclerView look more professional.

In second step  just go inside res and click layout folder  and edit your activity_main.xml and find the code similar to below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:id="@+id/imagesRecyclerView"/>

</LinearLayout>

In third step add one more xml file and name  langimage.xml and write below code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
card_view:cardCornerRadius="50dp"
card_view:cardBackgroundColor="#fed8b1">

<ImageView
android:layout_width="120dp"
android:layout_height="150dp"
android:id="@+id/image"
android:layout_marginLeft="110dp" />

</androidx.cardview.widget.CardView>

Now create a data class in kotlin named Language.

package adapter.manasvi.com.recyclerexampleproject
data class Language(
val imageSrc : Int
)

Next  step will be to make an adapter which will help as in between file to help the user to view data row by row and name it languageAdapter.kt.

package adapter.manasvi.com.recyclerexampleproject

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class languageAdapter(private val context : Context, private val images : List <Language>)
: RecyclerView.Adapter<languageAdapter.LanguageViewHolder>(){


class LanguageViewHolder(view: View) : RecyclerView.ViewHolder(view){
val img = itemView.findViewById<ImageView>(R.id.image)
fun bindView(image: Language) {
img.setImageResource(image.imageSrc)
//imgTitle.text = image.title
}
}

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

}

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

override fun onBindViewHolder(holder: LanguageViewHolder, position: Int) {
holder.bindView(images[position])
}
}

Last step will be to modify MainActivity.kt and run it.

package adapter.manasvi.com.recyclerexampleproject

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val images = listOf<Language>(
Language(R.drawable.clang),
Language(R.drawable.cplus),
Language(R.drawable.net),
Language( R.drawable.java),
Language(R.drawable.php)

)

val recyclerView = findViewById<RecyclerView>(R.id.imagesRecyclerView)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.setHasFixedSize(true)
recyclerView.adapter = languageAdapter(this, images)
}
}

Now lets see the output .

Do try  this example and modify it  and feel free to comment.

Sample Code:-

https://github.com/manasvi99/RecyclerExampleProject

Share:

Categories

Archives

Related Posts

Array Destructuring

Array Destructuring Array destructuring is a powerful syntax introduced in ES6 that allows you to unpack elements from an array

Read More »

Explore our Affiliated partner links

hostgator website plan

Hostgator

Best Website hosting plans & Best for 24/7 support.

hostinger webhosting plan

Hostinger

Reasonable website hosting packages for small business & 24/7 Email support

Elementor pro

Design Worpdress website quickly using Elementor Builder and AI

buy elementor website templates

Buy Elementor Website Template

Buy ready made Elementor Website Template from us & Get Free Elementor pro licence for 1 year .