Android provide three clock widget that you can use to implement clock. They are android.widget.AnalogClock
, android.widget.DigitalClock
and android.widget.TextClock
. AnalogClock and DigitalClock has been deprecated since android sdk version 1.7, but they can still be used. TextClock is recommended.
1. android.widget.AnalogClock
android.widget.AnalogClock
class extends android.view.View
class. So if you want to customize analog clock, you can create a sub class and overwrite it’s onDraw() method. And implement the customization code in that method.
AnalogClock Important Properties.
- android:dial : A drawable resource id which is analog clock dial image.
- android:hand_hour : A drawable resource id which is analog clock hour hand image.
- android:hand_minute : A drawable resource id which is analog clock minute hand image.
AnalogClock Disadvantage.
- Can not set analog clock second hand image.
- Can not set time directly, you can create a sub class to implement modify time function yourself.
- Can not get time from AnalogClock class directly, use
java.util.Calendar
to get current time instead.
AnalogClock Example.
- Copy your
clock_dial.jpg
,clock_hour_hand.png
andclock_minute_hand.png
into your android project app / res / drawable folder. Please note, the hour hand and minute hand image’s background should be transparent. - Copy below AnalogClock xml code in your layout xml file.
<AnalogClock android:id="@+id/analogClock" android:layout_width="match_parent" android:layout_height="match_parent" android:dial="@drawable/clock_dial" android:hand_hour="@drawable/clock_hour_hand" android:hand_minute="@drawable/clock_minute_hand"/>
- Use above layout xml in your Activity code.
2. android.widget.DigitalClock
android.widget.DigitalClock
is a sub class of android.wedget.TextView
. It can only show digital hour and minute value. You can change time value font size, color, style etc use TextView’s properties.
DigitalClock Disadvantage.
- Can not modify time directly, you can create a sub class to implement set time function yourself.
- Can only get text value from DigitalClock to get Hour and Minute time value.
DigitalClock Example.
Just copy below xml code into your layout file, then you can see a digital clock in your activity.
<DigitalClock android:id="@+id/digitalClock" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="35sp" android:textColor="@color/colorRed" android:textStyle="bold" android:layout_gravity="center_horizontal"/>
3. android.widget.TextClock
android.widget.TextClock
is introduced since android sdk 1.7. It is recommended. TextClock has below benefits.
- Can show, set and get both date and time.
- Support date time format customization.
Main TextClock Atttibute.
- format12Hour : Set 12-hour system time format.
- format24Hour : Set 24-hour system time format.
- timeZone : Set time zone.
- drawableStart : Clock head image id.
- drawableEnd : Clock tail image id.
Main TextClock Method.
- is24HourModeEnabled() : Check whether the system is currently using 24-hour system. This is decided by OS, can not change in code.
TextClock Example.
Use below xml code in your layout file to implement above TextClock example.
<TextClock android:id="@+id/textClock" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="35sp" android:textColor="#00FF00" android:format12Hour="yyyy-MM-dd H:mm:ss EEEE" android:drawableStart="@mipmap/ic_launcher" android:drawableEnd="@mipmap/ic_launcher"/>
Please Note: When you use TextClock xml tag, you may encounter error message like “view requires API level 17 (Current min is 15)” like below.
This is because your project sdk version is 15 and TextClock require version 17. Follow below steps to resolve this issue.
- In left project tree view panel.
- Select Project in the drop down list.
- Click app / build.gradle file.
- Change minSdkVersion from 15 to 17 in right panel.
4. Full Example
activity_clock.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout 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" tools:context="com.dev2qa.example.ClockActivity"> <ScrollView android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:scrollbars="vertical" android:scrollbarStyle="insideOverlay" tools:layout_editor_absoluteY="8dp" tools:layout_editor_absoluteX="8dp"> <!-- AnalogClock Example --> <TextView android:id="@+id/textView10" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Analog Clock Example" android:textSize="25sp" android:textColor="@color/colorRed"/> <AnalogClock android:id="@+id/analogClock" android:layout_width="match_parent" android:layout_height="match_parent" android:dial="@drawable/clock_dial" android:hand_hour="@drawable/clock_hour_hand" android:hand_minute="@drawable/clock_minute_hand"/> <Button android:id="@+id/analogClockGetValueButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Get Analog Clock Time"/> <!-- DigitalClock Example --> <TextView android:id="@+id/textView9" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Digital Clock Example" android:textSize="25sp" android:textColor="@color/colorRed"/> <DigitalClock android:id="@+id/digitalClock" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="35sp" android:textColor="@color/colorRed" android:textStyle="bold" android:layout_gravity="center_horizontal"/> <Button android:id="@+id/digitalClockGetValueButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Get Degital Clock Time"/> <!-- TextClock Example --> <TextView android:id="@+id/textView8" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Text Clock Example" android:textSize="25sp" android:textColor="@color/colorRed"/> <TextClock android:id="@+id/textClock" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="35sp" android:textColor="#00FF00" android:format12Hour="yyyy-MM-dd H:mm:ss EEEE" android:format24Hour="yyyy/MM/dd EE H:mm:ss" android:drawableStart="@mipmap/ic_launcher" android:drawableEnd="@mipmap/ic_launcher" android:timeZone="GMT+00:00" /> <Button android:id="@+id/textClockGetValueButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Get Text Clock Time"/> <Button android:id="@+id/textClockSetValueButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Change To BeiJing TimeZone"/> </LinearLayout> </ScrollView> </android.support.constraint.ConstraintLayout>
ClockActivity.java
package com.dev2qa.example; import android.app.AlertDialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.AnalogClock; import android.widget.Button; import android.widget.DigitalClock; import android.widget.TextClock; import java.util.Calendar; public class ClockActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_clock); final AnalogClock analogClock = (AnalogClock)findViewById(R.id.analogClock); Button getAnalogClockValueBtn = (Button)findViewById(R.id.analogClockGetValueButton); // Make button text original not all uppercase. getAnalogClockValueBtn.setAllCaps(false); getAnalogClockValueBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Can not get time value from AnalogCLock directly. // So get current time from system. long analogClockTime = Calendar.getInstance().getTimeInMillis(); showTimeInDialog("Analog clock time is", analogClockTime); } }); final DigitalClock digitalClock = (DigitalClock)findViewById(R.id.digitalClock); Button getDigitalClockValueBtn = (Button)findViewById(R.id.digitalClockGetValueButton); getDigitalClockValueBtn.setAllCaps(false); getDigitalClockValueBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // Can only get time value from DigitalClock display text. String digitalTimeValue = (String)digitalClock.getText(); showTimeInDialog("Digital clock time is " + digitalTimeValue, -1); } }); final TextClock textClock = (TextClock)findViewById(R.id.textClock); final Button getTextClockValueBtn = (Button)findViewById(R.id.textClockGetValueButton); getTextClockValueBtn.setAllCaps(false); getTextClockValueBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { StringBuffer msgBuffer = new StringBuffer(); msgBuffer.append("TextClock has below attributes:\r\n"); msgBuffer.append("Time " + textClock.getText() + " \r\n"); msgBuffer.append("TimeZone " + textClock.getTimeZone() + "\r\n"); msgBuffer.append("Is24HourMode " + textClock.is24HourModeEnabled() + "\r\n"); msgBuffer.append("24-hour Format " + textClock.getFormat24Hour() + "\r\n"); msgBuffer.append("12-hour Format " + textClock.getFormat12Hour() + "\r\n"); showTimeInDialog(msgBuffer.toString(), -1); } }); Button setTextClockValueBtn = (Button)findViewById(R.id.textClockSetValueButton); setTextClockValueBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { // The time zone is GMT+00:00 in layout xml configure. // Change time zone to GMT+08:00, Bei Jing time zone. textClock.setTimeZone("GMT+08:00"); // Click textClockGetValueButton again. getTextClockValueBtn.callOnClick(); } }); } /* Show timeLongValue use yyyy-MM-dd HH:MM:SS format in alert dialog. */ private void showTimeInDialog(String timeSource, long timeLongValue) { AlertDialog alertDialog = new AlertDialog.Builder(ClockActivity.this).create(); StringBuffer timeBuf = new StringBuffer(); timeBuf.append(timeSource); if(timeLongValue!=-1) { Calendar calendar = Calendar.getInstance(); calendar.setTimeInMillis(timeLongValue); int year = calendar.get(Calendar.YEAR); int month = calendar.get(Calendar.MONTH); int day = calendar.get(Calendar.DAY_OF_MONTH); int hour = calendar.get(Calendar.HOUR_OF_DAY); int minute = calendar.get(Calendar.MINUTE); int second = calendar.get(Calendar.SECOND); timeBuf.append(" : "); timeBuf.append(year); timeBuf.append("-"); timeBuf.append(month+1); timeBuf.append("-"); timeBuf.append(day); timeBuf.append(" "); timeBuf.append(hour); timeBuf.append(":"); timeBuf.append(minute); timeBuf.append(":"); timeBuf.append(second); } alertDialog.setMessage(timeBuf.toString()); alertDialog.show(); } }
Thank you very much for the explanation and examples I have benefited a lot
But please want to help me in the example how to add a second hand to a widget analog clock application can you give me the code for it