Design CardView with Centered Text in Android Studio

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

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.

 

Related Tutorials & Resources