Zen QS: Tweak segmented button + introduction styling.

 - Add a rounded rect background to the segmented buttons.
 - Remove the spacing between the segmented buttons.
 - Increase the minheight + font weight of the button text.
 - Remove the embedded divider line.
 - Add a rounded rect background to the intro messages.
 - Tweak margins, mostly 8dp -> 16dp in a few places.

Bug: 20949290
Bug: 20947407
Change-Id: Ic497c772aa7228423c8884d6ec7b9ccbfdda365a

7 files changed, 57 insertions, 13 deletions

diff --git a/packages/SystemUI/res/drawable/segmented_buttons_background.xml b/packages/SystemUI/res/drawable/segmented_buttons_background.xml
new file mode 100644
index 0000000..b243dc7c
--- /dev/null
+++ b/packages/SystemUI/res/drawable/segmented_buttons_background.xml
@@ -0,0 +1,22 @@
+<!--
+     Copyright (C) 2015 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android" >
+
+      <corners android:radius="@dimen/borderless_button_radius" />
+
+      <solid android:color="@color/segmented_buttons_background" />
+
+</shape>
\ No newline at end of file
diff --git a/packages/SystemUI/res/drawable/zen_introduction_message_background.xml b/packages/SystemUI/res/drawable/zen_introduction_message_background.xml
new file mode 100644
index 0000000..352fb57
--- /dev/null
+++ b/packages/SystemUI/res/drawable/zen_introduction_message_background.xml
@@ -0,0 +1,22 @@
+<!--
+     Copyright (C) 2015 The Android Open Source Project
+
+     Licensed under the Apache License, Version 2.0 (the "License");
+     you may not use this file except in compliance with the License.
+     You may obtain a copy of the License at
+
+          http://www.apache.org/licenses/LICENSE-2.0
+
+     Unless required by applicable law or agreed to in writing, software
+     distributed under the License is distributed on an "AS IS" BASIS,
+     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     See the License for the specific language governing permissions and
+     limitations under the License.
+-->
+<shape xmlns:android="http://schemas.android.com/apk/res/android" >
+
+      <corners android:radius="@dimen/borderless_button_radius" />
+
+      <solid android:color="@color/zen_introduction_message_background" />
+
+</shape>
\ No newline at end of file
diff --git a/packages/SystemUI/res/layout/segmented_button.xml b/packages/SystemUI/res/layout/segmented_button.xml
index b7a7932..9e1f373 100644
--- a/packages/SystemUI/res/layout/segmented_button.xml
+++ b/packages/SystemUI/res/layout/segmented_button.xml
@@ -25,4 +25,4 @@
     android:textColor="@color/segmented_button_text_selector"
     android:background="@drawable/btn_borderless_rect"
     android:textAppearance="@style/TextAppearance.QS.SegmentedButton"
-    android:minHeight="64dp" />
+    android:minHeight="72dp" />
diff --git a/packages/SystemUI/res/layout/zen_mode_panel.xml b/packages/SystemUI/res/layout/zen_mode_panel.xml
index 0264f3d..2160ca3 100644
--- a/packages/SystemUI/res/layout/zen_mode_panel.xml
+++ b/packages/SystemUI/res/layout/zen_mode_panel.xml
@@ -24,31 +24,29 @@
 
     <com.android.systemui.volume.SegmentedButtons
         android:id="@+id/zen_buttons"
+        android:background="@drawable/segmented_buttons_background"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp" />
-
-    <View
-        android:id="@+id/zen_embedded_divider"
-        android:layout_width="match_parent"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
         android:layout_marginTop="8dp"
-        android:layout_height="1dp"
-        android:background="#4dffffff" />
+        android:layout_marginBottom="8dp" />
 
     <RelativeLayout
         android:id="@+id/zen_introduction"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:paddingEnd="4dp"
+        android:layout_marginStart="16dp"
+        android:layout_marginEnd="16dp"
         android:paddingTop="8dp"
         android:paddingBottom="8dp"
-        android:background="@color/zen_introduction_message_background" >
+        android:background="@drawable/zen_introduction_message_background" >
 
         <ImageView
             android:id="@+id/zen_introduction_confirm"
             android:layout_width="48dp"
             android:layout_height="48dp"
+            android:layout_marginEnd="8dp"
             android:layout_alignParentEnd="true"
             android:background="@drawable/btn_borderless_rect"
             android:clickable="true"
@@ -73,7 +71,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_alignParentEnd="true"
-            android:layout_marginEnd="4dp"
+            android:layout_marginEnd="12dp"
             android:layout_below="@id/zen_introduction_message"
             android:clickable="true"
             android:focusable="true"
diff --git a/packages/SystemUI/res/values/colors.xml b/packages/SystemUI/res/values/colors.xml
index 7a108ed..b47d81d 100644
--- a/packages/SystemUI/res/values/colors.xml
+++ b/packages/SystemUI/res/values/colors.xml
@@ -127,6 +127,7 @@
     <color name="screen_pinning_request_bg">#ff009688</color><!-- deep teal 500 -->
     <color name="screen_pinning_request_window_bg">#80000000</color>
 
+    <color name="segmented_buttons_background">#14FFFFFF</color><!-- 8% white -->
     <color name="segmented_button_selected">#FFFFFFFF</color>
     <color name="segmented_button_unselected">#FFB0BEC5</color><!-- blue grey 200 -->
 
diff --git a/packages/SystemUI/res/values/dimens.xml b/packages/SystemUI/res/values/dimens.xml
index b0b78f2..62e0f3d 100644
--- a/packages/SystemUI/res/values/dimens.xml
+++ b/packages/SystemUI/res/values/dimens.xml
@@ -188,7 +188,7 @@
     <dimen name="qs_data_usage_text_size">14sp</dimen>
     <dimen name="qs_data_usage_usage_text_size">36sp</dimen>
 
-    <dimen name="segmented_button_spacing">8dp</dimen>
+    <dimen name="segmented_button_spacing">0dp</dimen>
     <dimen name="borderless_button_radius">2dp</dimen>
 
     <!-- How far the expanded QS panel peeks from the header in collapsed state. -->
diff --git a/packages/SystemUI/res/values/styles.xml b/packages/SystemUI/res/values/styles.xml
index c058d44..6709095 100644
--- a/packages/SystemUI/res/values/styles.xml
+++ b/packages/SystemUI/res/values/styles.xml
@@ -166,6 +166,7 @@
 
     <style name="TextAppearance.QS.SegmentedButton">
         <item name="android:textSize">16sp</item>
+        <item name="android:fontFamily">sans-serif-medium</item>
     </style>
 
     <style name="TextAppearance.QS.DataUsage">