Android cardView | Android Recyclerview using cardView

In this tutorial, we will learn how to use android cardView and how to combine CardView and RecyclerView.

CardView is a new Android widget that can be used to display any type of data by displaying it with rounded corners and a set elevation. This widget can be found in a variety of Android apps. CardView can be used to populate a listview or a Recycler View with items.

CardView is an Android widget that allows you to create a new appearance and efficient UI. You may make your app look more professional by following the steps outlined below. Cardview is a fantastic concept that improves your user experience over traditional Android UI.

Cardview was released with Android 5.0, also known as Lollipop. CardView is another key component of Material Design.

CardView widget’s appearance, use the following properties:

XML Attribute	Description
app:cardCornerRadius	cardCornerRadius attribute to set the corner radius in your layouts.
app:cardUseCompatPadding	Compat Padding, which simply adds inner padding on platforms Lollipop and after, is intended to ensure that the content area remains consistent across all platforms.
app:cardElevation	CardView uses the elevation property for shadows
app:cardBackgroundColor	If you prefer to modify the color of the card’s background,

Contents

CardView dependency

–> Add this dependency to your file build.gradle(app) and sync the project to use the CardView in your app.

dependencies {
//for cardview
    implementation "androidx.cardview:cardview:1.0.0"
//for recyclerview
    implementation "androidx.recyclerview:recyclerview:1.2.1"


}

CardView

//cardview 
<androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
  
  </androidx.cardview.widget.CardView>

cardView Example

cardView XML layout file

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="5dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/teal_700"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher_foreground" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_weight="2"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:text="Developersdome"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:textSize="15dp"
                android:text="Android development"
                />

        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_marginTop="130dp"
        android:background="@color/teal_700"

        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher_foreground" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_weight="2"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:text="Developersdome"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:textSize="15dp"
                android:text=" Web development"
                />

        </LinearLayout>
    </LinearLayout>

</androidx.cardview.widget.CardView>

CardView using Recyclerview in Android

File:Activity_main.xml

–>Add the code given below to your file Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        tools:listitem="@layout/item_list"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

File: Item_list.xml

–> Create a New Layout Resource file res/Layout/New/Layout Resource file-> ok after that add the code given below to your file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/CardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="10dp"
    card_view:cardElevation="5dp"
    card_view:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/teal_700"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher_foreground" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_weight="2"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:text="Developersdome"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:textSize="15dp"
                android:text="Android development"
                />

        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_marginTop="130dp"
        android:background="@color/teal_700"

        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher_foreground" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="12dp"
            android:layout_weight="2"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:text="Developersdome"
                android:textSize="25sp" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:textSize="15dp"
                android:text=" Web development"
                />

        </LinearLayout>
    </LinearLayout>

</androidx.cardview.widget.CardView>

File: MainActivity.kt

–>Add the code given below to your file MainActivity .kt

package com.sagar.recyclerview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.Window
import android.view.WindowManager
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView

class MainActivity : AppCompatActivity() {
    private lateinit var mAdapter: RecyclerViewAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN)
        setContentView(R.layout.activity_main)
        //Layout manager
        val recyclerView = findViewById<RecyclerView>(R.id.recyclerView)
        recyclerView.layoutManager = LinearLayoutManager(this)

        val item = ArrayList<User>()
        //adding user
        item.add(User("Developers"))
        item.add(User("Dome"))
        item.add(User("Developers1"))
        item.add(User("Dome1"))
        item.add(User("Developers2"))
        item.add(User("Dome2"))
        item.add(User("Developers3"))
        item.add(User("Dome3"))
        //Adapter setting
        mAdapter = RecyclerViewAdapter(item)
        recyclerView.adapter = mAdapter
    }
}

File: RecyclerViewAdapter.kt

–>Create a New kotlin class and Add the code given below to your file.

package com.sagar.recyclerview

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


class RecyclerViewAdapter(val userList: ArrayList<User>) : RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerViewAdapter.ViewHolder {

        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_list, parent, false)
        return ViewHolder(view)
    }

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

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

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

        fun bind(user: User) {
            val textViewName = itemView.findViewById<TextView>(R.id.textView1)
            textViewName.text = user.Firstname
        }
    }
}

File: User.kt

–> Create another Kotlin class and Add the code given below to your file

package com.sagar.recyclerview

data class User(val Firstname: String)