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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?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>
<?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>
<?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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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)
}
}
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) } }
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:

CardView Example in Kotlin
CardView Example in Kotlin

I hope this code example was helpful for you. For more code examples in Kotlin, checkout out the Kotlin category.

And if you are looking for video courses and books on Kotlin, below is a great collection.

Happy learning!

Kotlin. Video Courses.

The Complete Android Kotlin Developer Course

Learn how to make online games, and apps for Android O, like Pokémon , twitter,Tic Tac Toe, and notepad using Kotlin. The Complete Android Kotlin Developer Course icon

Kotlin for Java Developers

Use your Java skills to learn Kotlin fast. Enhance career prospects and master Kotlin, including Java interoperability. Kotlin for Java Developers icon

Kotlin for Beginners: Learn Programming With Kotlin

Learn Kotlin from scratch! Grasp object-orientation and idiomatic Kotlin to realize coding projects and Android apps! Kotlin for Java Developers icon

Leave a Reply

Your email address will not be published. Required fields are marked *