ThemePicker: Show item name under the category name

When selecting an option, the name will show up for the
respective font, icon, accent colour or shape.

Change-Id: I834dbf30301dba47b1a7e850940af32e92c14b2d

Author: eldainosor

res/layout/theme_component_preview.xml

@@ -49,6 +49,7 @@
             android:drawablePadding="@dimen/theme_preview_header_drawable_padding"
             android:textAppearance="@style/CardTitleTextAppearance"
             android:importantForAccessibility="no"
+            android:gravity="center_horizontal"
             app:layout_constraintBottom_toTopOf="@id/theme_preview_card_body_container"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintHorizontal_bias="0.5"

src/com/android/customization/model/theme/custom/ThemeComponentOption.java

@@ -151,6 +151,9 @@ public void bindPreview(ViewGroup container) {
             }
             TextView title = container.findViewById(R.id.font_card_title);
             title.setTypeface(mHeadlineFont);
+            TextView header = container.findViewById(R.id.theme_preview_card_header);
+            header.setText(String.format("%s\n(%s)",
+                    container.getContext().getString(R.string.preview_name_font), mLabel));
             TextView bodyText = container.findViewById(R.id.font_card_body);
             bodyText.setTypeface(mBodyFont);
             container.findViewById(R.id.font_card_divider).setBackgroundColor(
@@ -233,6 +236,9 @@ public void bindPreview(ViewGroup container) {
 
             bindPreviewHeader(container, R.string.preview_name_icon, R.drawable.ic_wifi_24px);
 
+            TextView header = container.findViewById(R.id.theme_preview_card_header);
+            header.setText(String.format("%s\n(%s)",
+                    container.getContext().getString(R.string.preview_name_icon), mLabel));
             ViewGroup cardBody = container.findViewById(R.id.theme_preview_card_body_container);
             if (cardBody.getChildCount() == 0) {
                 LayoutInflater.from(container.getContext()).inflate(
@@ -366,6 +372,9 @@ public void bindPreview(ViewGroup container) {
 
             bindPreviewHeader(container, R.string.preview_name_color, R.drawable.ic_colorize_24px);
 
+            TextView header = container.findViewById(R.id.theme_preview_card_header);
+            header.setText(String.format("%s\n(%s)",
+                    container.getContext().getString(R.string.preview_name_color), mLabel));
             ViewGroup cardBody = container.findViewById(R.id.theme_preview_card_body_container);
             if (cardBody.getChildCount() == 0) {
                 LayoutInflater.from(container.getContext()).inflate(
@@ -509,6 +518,9 @@ public void bindPreview(ViewGroup container) {
 
             bindPreviewHeader(container, R.string.preview_name_shape, R.drawable.ic_shapes_24px);
 
+            TextView header = container.findViewById(R.id.theme_preview_card_header);
+            header.setText(String.format("%s\n(%s)",
+                    container.getContext().getString(R.string.preview_name_shape), mLabel));
             ViewGroup cardBody = container.findViewById(R.id.theme_preview_card_body_container);
             if (cardBody.getChildCount() == 0) {
                 LayoutInflater.from(container.getContext()).inflate(