Android

Display Current Day, Date and Time In CardView - Kotlin Version

In this tutorial, you will learn how to develop an Android application using Kotlin that displays the current day, date, and time within a 'CardView'. You'll implement this by writing Kotlin code in the MainActivity to fetch the current system time, format it according to your requirements, and display it in a CardView UI component. Additionally, you'll configure necessary dependencies in the 'build.gradle' file to ensure smooth integration of required libraries or components for the project. This tutorial will focus on handling date and time formatting, UI layout design with CardView, and integrating dependencies for a Kotlin-based Android application.
Submitted on July 07, 2024

To create an Android app in Kotlin that displays the current day, date, and time in a ‘CardView’ with specified formatting, you'll need to follow these steps. Here the necessary Kotlin code for MainActivity and also mention the dependencies you might need in your ‘build.gradle’ file.

Step-by-Step Implementation

1. Update Dependencies

Ensure you have the necessary dependencies in your ‘build.gradle’ (Module: app) file:

         
implementation 'androidx.cardview:cardview:1.0.0'  // for CardView
implementation 'androidx.core:core-ktx:1.7.0'      // for Kotlin extensions

Make sure your ‘build.gradle’ is synced after adding these dependencies.

2. Create Layout (activity_main.xml)

Here's how your activity_main.xml layout file should look:


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        app:cardCornerRadius="8dp">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">


            <TextView
                android:id="@+id/textViewDay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="24sp"
                android:textStyle="bold"
                android:text="Day of the Week"
                android:layout_gravity="center_horizontal"/>


            <TextView
                android:id="@+id/textViewDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="18sp"
                android:text="January 1, 2023"
                android:layout_marginTop="8dp"
                android:layout_gravity="center_horizontal"/>


            <TextView
                android:id="@+id/textViewTime"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textSize="16sp"
                android:text="12:00 PM"
                android:layout_marginTop="8dp"
                android:layout_gravity="center_horizontal"/>


        </LinearLayout>


    </androidx.cardview.widget.CardView>


</RelativeLayout>

3. Implement MainActivity (MainActivity.kt)

Now, in your ‘MainActivity.kt’ file, update it as follows:


import android.os.Bundle
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import java.text.SimpleDateFormat
import java.util.*

class MainActivity : AppCompatActivity() {

    private lateinit var textViewDay: TextView
    private lateinit var textViewDate: TextView
    private lateinit var textViewTime: TextView

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

        textViewDay = findViewById(R.id.textViewDay)
        textViewDate = findViewById(R.id.textViewDate)
        textViewTime = findViewById(R.id.textViewTime)

        // Get current date and time
        val calendar = Calendar.getInstance()
        val dateFormat = SimpleDateFormat("EEEE", Locale.getDefault())
        val date = SimpleDateFormat("MMMM dd, yyyy", Locale.getDefault())
        val time = SimpleDateFormat("hh:mm a", Locale.getDefault())

        val currentDate = date.format(calendar.time)
        val currentTime = time.format(calendar.time)
        val currentDay = dateFormat.format(calendar.time)

        // Set text to TextViews
        textViewDay.text = currentDay
        textViewDate.text = currentDate
        textViewTime.text = currentTime
    }
}

Explanation of Android CardView and TextViews - Kotlin

Explanation:

  • Dependencies: We added androidx.cardview:cardview for the CardView and androidx.core:core-ktx for Kotlin extensions.

  • Layout (activity_main.xml):

    • Uses a CardView with nested LinearLayout containing three TextViews for day, date, and time.

  • MainActivity (MainActivity.kt):

    • Initializes TextView variables (textViewDay, textViewDate, textViewTime).
    • Retrieves current date and time using Calendar and formats it using SimpleDateFormat.
    • Sets formatted date, day, and time to respective TextViews.

Additional Notes:

  • Customization: You can further customize the CardView and TextViews with different attributes like text size, font, margins, etc., to fit your design requirements.

  • Time Formatting: Adjust SimpleDateFormat patterns ("EEEE", "MMMM dd, yyyy", "hh:mm a") as per your desired format for day, date, and time.

By following these steps, you should have an Android app in Kotlin that displays the current day, date, and time within a CardView, meeting your requirements. Adjustments can be made based on additional features or styling preferences for your application.

Related Topics

Display Current Day, Date and Time In CardView - Java Version