RecyclerView with Kotlin and Android Studio

RecyclerView with Kotlin and Android Studio

RecyclerView is a new view group for displaying data collections, it is designed to replacement older view groups such as ListView or GridView and more flexible. CardView is a UI component that presents two text and image content in views like cards or views into list.

To create Android RecyclerView Kotlin with CardView with image and 2 text you can follow step by step such as below

1. Create new project in Android Studio with including Kotlin

2. Add dependencies RecyclerView and CardView in build.gradle

dependencies {
    ......
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:cardview-v7:26.1.0'
    implementation 'com.android.support:recyclerview-v7:26.1.0'
}

3. Add code below (RecyclerView) to activity_main.xml in res/layout folder

<android.support.v7.widget.RecyclerView
    android:id="@+id/myRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

4. Create new XML Layout (LinearLayout) and give name activity_item.xml

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

    <ImageView
      android:id="@+id/image_listview"
      android:layout_width="150dp"
      android:layout_height="wrap_content"
      android:layout_marginRight="16dp"
      android:scaleType="centerCrop" />

    <TextView
      android:id="@+id/title_listview"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_toRightOf="@+id/image_listview"
      android:textSize="16sp"
      android:textColor="#000000"
      android:textStyle="bold" />

    <TextView
      android:id="@+id/description_listview"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@+id/title_listview"
      android:layout_toRightOf="@+id/image_listview"
      android:paddingTop="5dp"
      android:textColor="#000000"
      android:textSize="12sp" />

    </RelativeLayout>
</android.support.v7.widget.CardView>

5. Create new Kotlin Class and give name ModelView.kt

data class ModelView(val list_title: String, val list_image: Int, val list_desc: String)

6. Create Adapter Kotlin Class and give name ItemAdapter.kt

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView

class ItemAdapter(val userList: ArrayList<ModelView>) : RecyclerView.Adapter<ItemAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemAdapter.ViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.activity_item, parent, false)
        return ViewHolder(v)
    }

    override fun onBindViewHolder(holder: ItemAdapter.ViewHolder, position: Int) {
        holder.bindItems(userList[position])
    }

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

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bindItems(user: ModelView) {
            val listTitle = itemView.findViewById(R.id.title_listview) as TextView
            val listDesc  = itemView.findViewById(R.id.description_listview) as TextView
            val listImage  = itemView.findViewById(R.id.image_listview) as ImageView
            listTitle.text = user.list_title
            listDesc.text = user.list_desc
            listImage.setImageResource(user.list_image)
        }
    }
}

7. Edit MainActivity.kt and Import dependencies plugin

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.widget.LinearLayout

8. Add this code into function onCreate in MainActivity.kt

val myRecyclerView = findViewById(R.id.myRecyclerView) as RecyclerView
myRecyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false)
val baris = ArrayList<ModelView>()
baris.add(ModelView("Online Security", R.drawable.image1,"...."))
baris.add(ModelView("Work Hard", R.drawable.image2,"..."))
baris.add(ModelView("Okay Company", R.drawable.image3,"..."))
baris.add(ModelView("Free Download", R.drawable.image4,"..."))
baris.add(ModelView("Bag Career", R.drawable.image5,"..."))
baris.add(ModelView("Gallery Image", R.drawable.image6,"..."))
baris.add(ModelView("Sephia Nature", R.drawable.image7,"..."))
baris.add(ModelView("Personal People", R.drawable.image8,"..."))
baris.add(ModelView("Sunset Nature", R.drawable.image9,"..."))
baris.add(ModelView("Nebula Space", R.drawable.image0,"..."))

val adapter = ItemAdapter(baris)
myRecyclerView.adapter = adapter

9. Done!

Full source code Android RecyclerView Kotlin with CardView and image and 2 text

build.gradle

dependencies {
    ......
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support:cardview-v7:26.1.0'
    implementation 'com.android.support:recyclerview-v7:26.1.0'
}

activity_main.xml

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/myRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

activity_item.xml

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

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

        <ImageView
            android:id="@+id/image_listview"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="16dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/title_listview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/image_listview"
            android:textSize="16sp"
            android:textColor="#000000"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/description_listview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/title_listview"
            android:layout_toRightOf="@+id/image_listview"
            android:paddingTop="5dp"
            android:textColor="#000000"
            android:textSize="12sp" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

ModelView.kt

/**
 * Created by TedirGhazali on 19/01/2018.
 */

data class ModelView(val list_title: String, val list_image: Int, val list_desc: String)

ItemAdapter.kt

/**
 * Created by TedirGhazali on 19/01/2018.
 */

import android.support.v7.widget.RecyclerView
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView

class ItemAdapter(val userList: ArrayList<ModelView>) : RecyclerView.Adapter<ItemAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemAdapter.ViewHolder {
        val v = LayoutInflater.from(parent.context).inflate(R.layout.activity_item, parent, false)
        return ViewHolder(v)
    }

    override fun onBindViewHolder(holder: ItemAdapter.ViewHolder, position: Int) {
        holder.bindItems(userList[position])
    }

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

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bindItems(user: ModelView) {
            val listTitle = itemView.findViewById(R.id.title_listview) as TextView
            val listDesc  = itemView.findViewById(R.id.description_listview) as TextView
            val listImage  = itemView.findViewById(R.id.image_listview) as ImageView
            listTitle.text = user.list_title
            listDesc.text = user.list_desc
            listImage.setImageResource(user.list_image)
        }
    }
}

MainActivity.kt

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.LinearLayoutManager
import android.support.v7.widget.RecyclerView
import android.widget.LinearLayout

class MainActivity : AppCompatActivity() {

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

        val myRecyclerView = findViewById(R.id.myRecyclerView) as RecyclerView
        myRecyclerView.layoutManager = LinearLayoutManager(this, LinearLayout.VERTICAL, false)
        val baris = ArrayList<ModelView>()
        baris.add(ModelView("Online Security", R.drawable.image1,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec maximus porta arcu, et auctor nibh tempus in. In non feugiat ante"))
        baris.add(ModelView("Work Hard", R.drawable.image2,"Proin sed purus in lacus ornare sodales sit amet quis diam. Vestibulum congue eros ac hendrerit congue. Quisque ut sagittis ex"))
        baris.add(ModelView("Okay Company", R.drawable.image3,"Ut lobortis nibh vel eros volutpat facilisis. Fusce consectetur tempor dignissim. Sed sodales sem eu sapien tincidunt convallis"))
        baris.add(ModelView("Free Download", R.drawable.image4,"Cras ornare quam nec sagittis viverra. Maecenas efficitur diam at sapien ullamcorper, eget ultrices eros feugiat. Ut urna tellus"))
        baris.add(ModelView("Bag Career", R.drawable.image5,"Blandit ac nunc vel, congue rhoncus turpis. Donec odio purus, pulvinar in massa in, accumsan accumsan lorem. Nunc tempor sapien id porta tempus"))
        baris.add(ModelView("Gallery Image", R.drawable.image6,"Aliquam venenatis consequat nulla, quis facilisis massa viverra vitae. Phasellus eget leo ut ligula blandit tempor vel vel metus"))
        baris.add(ModelView("Sephia Nature", R.drawable.image7,"Cras magna ante, blandit eu ultricies id, vulputate sit amet libero. Interdum et malesuada fames ac ante ipsum primis in faucibus"))
        baris.add(ModelView("Personal People", R.drawable.image8,"Praesent sit amet velit ex. Nullam id fermentum tellus. Sed posuere egestas porta. Orci varius natoque penatibus et magnis dis parturient montes"))
        baris.add(ModelView("Sunset Nature", R.drawable.image9,"Nascetur ridiculus mus. Vivamus congue, magna ac facilisis rhoncus, arcu est accumsan neque, tristique ullamcorper libero leo vel nibh"))
        baris.add(ModelView("Nebula Space", R.drawable.image0,"Maecenas id mauris diam. Nunc a mattis est, in dictum libero. Suspendisse tempor pulvinar lorem eget imperdiet. Mauris nulla leo"))

        val adapter = ItemAdapter(baris)
        myRecyclerView.adapter = adapter
    }
}

Screenshot Android RecyclerView Kotlin

RecyclerView with Kotlin and Android Studio

Download source code Android RecyclerView Kotlin

Download