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:
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.
