diff --git a/packages/SystemUI/res-keyguard/layout/type_clock.xml b/packages/SystemUI/res-keyguard/layout/type_clock.xml
index 21c64e9c7dbe2..f4a73765acc12 100644
--- a/packages/SystemUI/res-keyguard/layout/type_clock.xml
+++ b/packages/SystemUI/res-keyguard/layout/type_clock.xml
@@ -24,32 +24,8 @@
       android:orientation="vertical"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-    >
-    <TextView
-        android:id="@+id/header"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="50dp"
-        style="@style/widget_big"
-        android:textColor="@color/typeClockAccentColor"
-        android:text="@string/type_clock_header"
-        android:textSize="40dp"
-    />
-    <TextView
-        android:id="@+id/hour"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="50dp"
-        style="@style/widget_big"
-        android:textSize="40dp"
-    />
-    <TextView
-        android:id="@+id/minute"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginLeft="50dp"
-        style="@style/widget_big"
-        android:textSize="40dp"
-    />
-  </com.android.keyguard.clock.TypographicClock>
+      android:paddingLeft="50dp"
+      style="@style/widget_big"
+      android:textSize="40dp"
+      />
 </com.android.keyguard.clock.ClockLayout>
diff --git a/packages/SystemUI/res-keyguard/values/strings.xml b/packages/SystemUI/res-keyguard/values/strings.xml
index 1f333073d8e00..94481e7fe4564 100644
--- a/packages/SystemUI/res-keyguard/values/strings.xml
+++ b/packages/SystemUI/res-keyguard/values/strings.xml
@@ -402,8 +402,25 @@ number">%d</xliff:g> remaining attempt before SIM becomes permanently unusable.
 number">%d</xliff:g> remaining attempts before SIM becomes permanently unusable. Contact carrier for details.</item>
     </plurals>
 
-    <!-- Header for typographic clock face. [CHAR LIMIT=8] -->
-    <string name="type_clock_header">It\u2019s</string>
+    <!-- Time displayed on typographic clock face, which displays the time in words.
+             Example:
+
+                 It's
+                 Four
+                 Twenty
+                 Nine
+
+         This string requires two arguments: the first in the hours of the time and
+         the second is the minutes of the time. The hours string is obtained from
+         string-array type_clock_hours below and the minutes string is obtained
+         from string-array type_clock_minutes below.
+
+    [CHAR LIMIT=8] -->
+    <plurals name="type_clock_header">
+        <item quantity="one"><annotation name="color">It\u2019s</annotation>\n^1\n^2</item>
+        <item quantity="few"><annotation name="color">It\u2019s</annotation>\n^1\n^2</item>
+        <item quantity="other"><annotation name="color">It\u2019s</annotation>\n^1\n^2</item>
+    </plurals>
 
     <!-- Hour displayed in words on the typographic clock face. [CHAR LIMIT=12] -->
     <string-array name="type_clock_hours">
diff --git a/packages/SystemUI/src/com/android/keyguard/clock/TypographicClock.java b/packages/SystemUI/src/com/android/keyguard/clock/TypographicClock.java
index 5f9da3ee33bb3..8feae53159acc 100644
--- a/packages/SystemUI/src/com/android/keyguard/clock/TypographicClock.java
+++ b/packages/SystemUI/src/com/android/keyguard/clock/TypographicClock.java
@@ -17,9 +17,14 @@ package com.android.keyguard.clock;
 
 import android.content.Context;
 import android.content.res.Resources;
+import android.text.Annotation;
+import android.text.Spannable;
+import android.text.SpannableString;
+import android.text.SpannedString;
+import android.text.TextUtils;
 import android.text.format.DateFormat;
+import android.text.style.ForegroundColorSpan;
 import android.util.AttributeSet;
-import android.widget.LinearLayout;
 import android.widget.TextView;
 
 import com.android.keyguard.R;
@@ -31,13 +36,14 @@ import java.util.TimeZone;
 /**
  * Clock that presents the time in words.
  */
-public class TypographicClock extends LinearLayout {
+public class TypographicClock extends TextView {
 
+    private static final String ANNOTATION_COLOR = "color";
+
+    private final Resources mResources;
     private final String[] mHours;
     private final String[] mMinutes;
-    private TextView mHeaderText;
-    private TextView mHourText;
-    private TextView mMinuteText;
+    private final int mAccentColor;
     private Calendar mTime;
     private String mDescFormat;
     private TimeZone mTimeZone;
@@ -54,9 +60,10 @@ public class TypographicClock extends LinearLayout {
         super(context, attrs, defStyleAttr);
         mTime = Calendar.getInstance();
         mDescFormat = ((SimpleDateFormat) DateFormat.getTimeFormat(context)).toLocalizedPattern();
-        Resources res = context.getResources();
-        mHours = res.getStringArray(R.array.type_clock_hours);
-        mMinutes = res.getStringArray(R.array.type_clock_minutes);
+        mResources = context.getResources();
+        mHours = mResources.getStringArray(R.array.type_clock_hours);
+        mMinutes = mResources.getStringArray(R.array.type_clock_minutes);
+        mAccentColor = mResources.getColor(R.color.typeClockAccentColor, null);
     }
 
     /**
@@ -65,11 +72,28 @@ public class TypographicClock extends LinearLayout {
     public void onTimeChanged() {
         mTime.setTimeInMillis(System.currentTimeMillis());
         setContentDescription(DateFormat.format(mDescFormat, mTime));
-        final int hour = mTime.get(Calendar.HOUR);
-        mHourText.setText(mHours[hour % 12]);
-        final int minute = mTime.get(Calendar.MINUTE);
-        mMinuteText.setText(mMinutes[minute % 60]);
-        invalidate();
+        final int hour = mTime.get(Calendar.HOUR) % 12;
+        final int minute = mTime.get(Calendar.MINUTE) % 60;
+
+        // Get the quantity based on the hour for languages like Portuguese and Czech.
+        SpannedString typeTemplate = (SpannedString) mResources.getQuantityText(
+                R.plurals.type_clock_header, hour);
+
+        // Find the "color" annotation and set the foreground color to the accent color.
+        Annotation[] annotations = typeTemplate.getSpans(0, typeTemplate.length(),
+                Annotation.class);
+        SpannableString spanType = new SpannableString(typeTemplate);
+        for (int i = 0; i < annotations.length; i++) {
+            Annotation annotation = annotations[i];
+            String key = annotation.getValue();
+            if (ANNOTATION_COLOR.equals(key)) {
+                spanType.setSpan(new ForegroundColorSpan(mAccentColor),
+                        spanType.getSpanStart(annotation), spanType.getSpanEnd(annotation),
+                        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
+            }
+        }
+
+        setText(TextUtils.expandTemplate(spanType, mHours[hour], mMinutes[minute]));
     }
 
     /**
@@ -82,25 +106,6 @@ public class TypographicClock extends LinearLayout {
         mTime.setTimeZone(timeZone);
     }
 
-    /**
-     * Set the color of the text used to display the time.
-     *
-     * This is necessary when the wallpaper shown behind the clock on the
-     * lock screen changes.
-     */
-    public void setTextColor(int color) {
-        mHourText.setTextColor(color);
-        mMinuteText.setTextColor(color);
-    }
-
-    @Override
-    protected void onFinishInflate() {
-        super.onFinishInflate();
-        mHeaderText = findViewById(R.id.header);
-        mHourText = findViewById(R.id.hour);
-        mMinuteText = findViewById(R.id.minute);
-    }
-
     @Override
     protected void onAttachedToWindow() {
         super.onAttachedToWindow();