TextClock in Android

0 1 2 minutes read

Text Clock is a UI widget in android which is used to display the current time in android applications. This widget displays the current time in a simple text view. The text clock widget displays a time in 12 and 24 hours format. In this article, we will take a look at How to use the TextClock widget on android. A sample video is given below to get an idea about what we are going to do in this article.

Note: This Android article covered in both Java and Kotlin languages.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the code below. Comments are added in the code to get to know in detail.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/idRLContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <!--on below line we are creating
        a text for our app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/idTCClock"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="Text Clock in Android"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
    <!--on below line we are creating a text clock-->
    <TextClock
        android:id="@+id/idTCClock"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_margin="20dp"
        android:gravity="center"
        android:padding="10dp"
        android:textAlignment="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />
  
</RelativeLayout>

Step 3: Working with the MainActivity file

Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject
  
import android.os.Bundle
import android.widget.TextClock
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
  
    // on below line we are creating a variable.
    lateinit var clockTC: TextClock
  
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // on below line we are initializing our variables.
        clockTC = findViewById(R.id.idTCClock)
  
        // on below line we are setting 12 hour
        // format for our text clock
        clockTC.format12Hour = "hh:mm:ss a"
  
    }
}

Java

package com.gtappdevelopers.googlemapsroutes;
  
import android.os.Build;
import android.os.Bundle;
import android.widget.TextClock;
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    // on below line we are creating variables.
    private TextClock clockTC;
  
    @RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN_MR1)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // on below line we are initializing our variables.
        clockTC = findViewById(R.id.idTCClock);
  
        // on below line we are setting 12 hour
        // format for our text clock
        clockTC.setFormat12Hour("hh:mm:ss a");
    }
}