Create CardView in Kotlin Programmatically

In this short Kotlin code example we will learn how to create a single CardView in Kotlin programmatically.

CardView is a FrameLayout with a rounded corner background and shadow. You can add multiple views into a CardView and then show them in a list one under another.

We will make a quotation card containing quote and the name of the quotation teller.

In this example we are covering:

Create CardView in a LinearLayout
Set border radius of the CardView
Change CardView Background color
Set content padding to CardView
Add Views inside the CardView

Layout XML

Following is the Activity_card_view_example.xml containing an empty LinearLayout to which we will add the CardView.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/constraintLayout"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.appsdeveloperblog.kotlin.examples.CardViewExample"
    android:orientation="horizontal">

</LinearLayout>

CardView Example in Kotlin

In the CardViewExample.kt file below we will create the CardView programmatically and add it into the LinearLayout. After creating the CardView we will create a LinearLayout called cardLinearLayout to maintain the orientation of the views inside the card.

import android.graphics.Color
import android.graphics.Typeface
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v7.widget.CardView
import android.widget.TextView
import android.widget.RelativeLayout
import android.view.ViewGroup
import android.widget.LinearLayout


class CardViewExample : AppCompatActivity() {

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

        val mainLinearLayout = findViewById(R.id.constraintLayout) as LinearLayout
        val cardLinearLayout = LinearLayout(this)

        cardLinearLayout.orientation = LinearLayout.VERTICAL
        val params = RelativeLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.WRAP_CONTENT)
        params.setMargins(16,16,16,16)

        val cardView = CardView(this)
        cardView.radius = 15f
        cardView.setCardBackgroundColor(Color.parseColor("#009688"))
        cardView.setContentPadding(36,36,36,36)
        cardView.layoutParams = params
        cardView.cardElevation = 30f


        val quote = TextView(this)
        quote.text = "\"Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.\n";
        quote.textSize = 24f
        quote.setTextColor(Color.WHITE)
        quote.setTypeface(Typeface.SANS_SERIF,Typeface.NORMAL)

        val name = TextView(this)
        name.text = "- Thomas A. Edison"
        name.textSize = 16f
        name.setTypeface(Typeface.MONOSPACE, Typeface.ITALIC)
        name.setTextColor(Color.parseColor("#E0F2F1"))


        cardLinearLayout.addView(quote)
        cardLinearLayout.addView(name)
        cardView.addView(cardLinearLayout)
        mainLinearLayout.addView(cardView)
    }
}

When you run the above code, your application should look like the one on the picture below: