How to design a CardView with a text in centre in Android Studio using Kotlin.

Last updated Dec 12, 2021

In this example tutorial, we will see how to make an CardView with a text in centre by using Kotlin in android studio.

What is CardView?
CardView is a rounded-corner widget that can be used to display any type of data. The CardView is primarily used to give the UI design 
a rich feel and look. CardView can be used to add items to a listview or a Recycler View.


Implementation:

To begin, Create a new project in android studio with the name CardView Kotlin. Then press the Finish button.
Open the activity main.xml file and add the LinearLayout with orientation (Vertical or horizontal).

 

       <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="#FACDC9"
    tools:context=".MainActivity"></LinearLayout>

 

If you are using latest version of android studio, so it's provide the material design functionality by default, if not then add below dependency inside build.gradle(app)

implementation ‘com.google.android.material:material:1.2.1’

 

In activity_main.xml, insert an CardView inside a LinearLayout.

    <androidx.cardview.widget.CardView
        android:layout_width="250dp"
        android:layout_height="300dp"
        app:cardCornerRadius="49dp"
        android:layout_gravity="center"
        app:cardBackgroundColor="#4D2B7C"
        >
    </androidx.cardview.widget.CardView>
   

 

Add color to cardview using the cardBackgroundColor property and change the corner radius using cardCornerRadius attribute.

app:cardCornerRadius="49dp"
app:cardBackgroundColor="#4D2B7C"


 

CardView has the following attributes: 
    id, padding, cardBackgroundColor,cardCornerRadius,background, layout_margin, layout_marginLeft, layout_marginRight, layout_marginEnd, layout margin, paddingLeft and so on....

android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:padding="10dp"
        android:background="@drawable/facebook"
        app:cardCornerRadius="49dp"
        app:cardBackgroundColor="#4D2B7C"
        android:layout_margin="10dp"

 

Add TextView inside CardView widget in activity_main.xml file

            <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="CardView"
            android:textSize="21sp"
            android:gravity="center"
            android:textColor="@color/white"></TextView>

 

Run the application in emulator or real device, you will see the output shown below.

 

Output:

CardView Output


  Complete source code  for Android CardView example:
 

 activity_main.xml file
 

 

 <?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#ECE1E1"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="250dp"
        android:layout_height="300dp"
        app:cardCornerRadius="49dp"
        android:layout_gravity="center"
        app:cardBackgroundColor="#4D2B7C"
        >
        <TextView
            android:id="@+id/tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="CardView"
            android:textSize="21sp"
            android:gravity="center"
            android:textColor="@color/white"></TextView>
    </androidx.cardview.widget.CardView>
</LinearLayout>

 

build.gradle(app) file

plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.nishajain.cardview_kotlin"
        minSdk 21
        targetSdk 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.0'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

 

Conclusion: We have covered the topic how to design a cardView with text in centre to Android by using Kotlin.

 

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1538 Views
Projects By category
Categories