Android Date and Time UI Components

TextClock

The TextClock widget, introduced in Android 4.2 (API level 17), replaces the deprecated DigitalClock. It displays the current date and time as a formatted string and automatically adapts to the system's time format preference—either 12-hour or 24-hour.

To determine the active time format, use is24HourModeEnabled(). The component prioritizes formats as follows:

  • If in 24-hour mode, it uses getFormat24Hour().
  • If that returns null, it falls back to getFormat12Hour().
  • If both are unavailable, a system default is applied.

Key attributes and their corresponding methods include:

Attribute Setter Method Description
android:format12Hour setFormat12Hour(CharSequence) Defines display format for 12-hour mode
android:format24Hour setFormat24Hour(CharSequence) Defines display format for 24-hour mode
android:timeZone setTimeZone(String) Sets the time zone for display

Common formatting patterns (using format12Hour) and their outputs:

<TextClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:format12Hour="MM/dd/yy h:mmaa" />

<TextClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:format12Hour="MMM dd, yyyy h:mmaa" />

<TextClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:format12Hour="MMMM dd, yyyy h:mmaa" />

<TextClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:format12Hour="E, MMMM dd, yyyy h:mmaa" />

<TextClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:format12Hour="EEEE, MMMM dd, yyyy h:mmaa" />

<TextClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:format12Hour="Noteworthy day: M/d/yy" />

Note: Requires minSdkVersion ≥ 17.

AnalogClock

AnalogClock renders a traditional analog clock face. It supports customization of three visual elements:

  • android:dial: Background image of the clock face
  • android:hand_hour: Hour hand drawable
  • android:hand_minute: Minute hand drawible

Example usage:

<AnalogClock
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:dial="@mipmap/ic_c_bg"
    android:hand_hour="@mipmap/zhen_shi"
    android:hand_minute="@mipmap/zhen_fen" />

Chronometer

The Chronometer is a countdown/up timer that displays elapsed time since a base reference point. It supports start, stop, reset, and custom formatting.

Sample layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Chronometer
        android:id="@+id/timer_display"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#FF0000"
        android:textSize="60sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:orientation="horizontal">

        <Button
            android:id="@+id/start_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Start" />

        <Button
            android:id="@+id/stop_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Stop" />

        <Button
            android:id="@+id/reset_btn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Reset" />

        <Button
            android:id="@+id/format_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Format" />
    </LinearLayout>
</LinearLayout>

Associated Java logic:

public class TimerActivity extends AppCompatActivity 
    implements View.OnClickListener, Chronometer.OnChronometerTickListener {

    private Chronometer timerView;
    private Button startBtn, stopBtn, resetBtn, formatBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initializeViews();
    }

    private void initializeViews() {
        timerView = findViewById(R.id.timer_display);
        startBtn = findViewById(R.id.start_btn);
        stopBtn = findViewById(R.id.stop_btn);
        resetBtn = findViewById(R.id.reset_btn);
        formatBtn = findViewById(R.id.format_btn);

        timerView.setOnChronometerTickListener(this);
        startBtn.setOnClickListener(this);
        stopBtn.setOnClickListener(this);
        resetBtn.setOnClickListener(this);
        formatBtn.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        int id = view.getId();
        if (id == R.id.start_btn) {
            timerView.start();
        } else if (id == R.id.stop_btn) {
            timerView.stop();
        } else if (id == R.id.reset_btn) {
            timerView.setBase(SystemClock.elapsedRealtime());
        } else if (id == R.id.format_btn) {
            timerView.setFormat("Elapsed: %s");
        }
    }

    @Override
    public void onChronometerTick(Chronometer chronometer) {
        if ("00:00".equals(chronometer.getText().toString())) {
            Toast.makeText(this, "Time's up!", Toast.LENGTH_SHORT).show();
        }
    }
}

Tags: Android TextClock AnalogClock Chronometer UI Components

Posted on Sat, 08 Aug 2026 16:31:50 +0000 by frih