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

In this tutorial, you will learn how to build an Android application using Java that showcases the current day, date, and time within a 'CardView'. You'll accomplish this by writing Java code in the MainActivity to retrieve the current system time, format it according to your preferences, and display it in a CardView interface. Additionally, you'll manage necessary dependencies in the 'build.gradle' file to ensure smooth integration of any required libraries or components for the project. This tutorial will emphasize date and time formatting, UI design with CardView, and the integration of dependencies for a Java-based Android app development.
Submitted on July 07, 2024

To create an Android app in Java that displays the current day, date, and time in a ‘CardView’ with specified formatting, you'll need to follow these steps. Here the necessary Java 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:1.7.0'      // for core Android functionality
          

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:id="@+id/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.java)

Now, in your ‘MainActivity.java’ 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.Calendar;
import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    private TextView textViewDay;
    private TextView textViewDate;
    private TextView textViewTime;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        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
        Calendar calendar = Calendar.getInstance();
        SimpleDateFormat dateFormat = new SimpleDateFormat("EEEE", Locale.getDefault());
        SimpleDateFormat date = new SimpleDateFormat("MMMM dd, yyyy", Locale.getDefault());
        SimpleDateFormat time = new SimpleDateFormat("hh:mm a", Locale.getDefault());

        String currentDate = date.format(calendar.getTime());
        String currentTime = time.format(calendar.getTime());
        String currentDay = dateFormat.format(calendar.getTime());

        // Set text to TextViews
        textViewDay.setText(currentDay);
        textViewDate.setText(currentDate);
        textViewTime.setText(currentTime);
    }
}

      

Explanation of Android CardView and TextViews - Kotlin

Explanation:

  • Dependencies: We added androidx.cardview:cardview for the CardView and androidx.core:core for core Android functionality.

  • Layout (activity_main.xml):

    • Uses a CardView with nested LinearLayout containing three TextViews for day, date, and time.
  • MainActivity (MainActivity.java):

    • 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 Java 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..