From 84ac49babc81c94357706c5073fdb89f27b5fdbd Mon Sep 17 00:00:00 2001
From: yueg <yueg@google.com>
Date: Wed, 1 Nov 2017 16:22:28 -0700
Subject: Implement some UI changes.

Including:
- merge end call button with other buttons
- add ripple effect for buttons
- adjust elevation according to material design guide
- add triangle in expanded view
Bug: 67605985
Test: manual
PiperOrigin-RevId: 174253861
Change-Id: I7b5315245a322235efb39a9cda26b8686cc7bbf9
---
 .../newbubble/res/drawable/bubble_pill_down.xml    |  23 +++++
 .../res/drawable/bubble_ripple_circle.xml          |  26 -----
 .../newbubble/res/drawable/bubble_shape_circle.xml |  25 +++++
 .../res/drawable/bubble_shape_circle_small.xml     |  23 +++++
 .../newbubble/res/layout/new_bubble_base.xml       | 112 ++++++++++-----------
 java/com/android/newbubble/res/values/colors.xml   |   7 +-
 java/com/android/newbubble/res/values/styles.xml   |  38 +++++++
 java/com/android/newbubble/res/values/values.xml   |  14 ++-
 8 files changed, 174 insertions(+), 94 deletions(-)
 create mode 100644 java/com/android/newbubble/res/drawable/bubble_pill_down.xml
 delete mode 100644 java/com/android/newbubble/res/drawable/bubble_ripple_circle.xml
 create mode 100644 java/com/android/newbubble/res/drawable/bubble_shape_circle.xml
 create mode 100644 java/com/android/newbubble/res/drawable/bubble_shape_circle_small.xml
 create mode 100644 java/com/android/newbubble/res/values/styles.xml

(limited to 'java/com/android/newbubble/res')

diff --git a/java/com/android/newbubble/res/drawable/bubble_pill_down.xml b/java/com/android/newbubble/res/drawable/bubble_pill_down.xml
new file mode 100644
index 000000000..721e6fc52
--- /dev/null
+++ b/java/com/android/newbubble/res/drawable/bubble_pill_down.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2017 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:bottomRightRadius="@dimen/bubble_radius"
+      android:bottomLeftRadius="@dimen/bubble_radius"/>
+  <solid android:color="@android:color/white"/>
+</shape>
diff --git a/java/com/android/newbubble/res/drawable/bubble_ripple_circle.xml b/java/com/android/newbubble/res/drawable/bubble_ripple_circle.xml
deleted file mode 100644
index 8d5cf0bb5..000000000
--- a/java/com/android/newbubble/res/drawable/bubble_ripple_circle.xml
+++ /dev/null
@@ -1,26 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (C) 2017 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
-  -->
-
-<ripple xmlns:android="http://schemas.android.com/apk/res/android"
-    android:color="?android:colorControlHighlight">
-  <item>
-    <shape>
-      <corners android:radius="@dimen/bubble_size"/>
-      <solid android:color="@android:color/white"/>
-    </shape>
-  </item>
-</ripple>
diff --git a/java/com/android/newbubble/res/drawable/bubble_shape_circle.xml b/java/com/android/newbubble/res/drawable/bubble_shape_circle.xml
new file mode 100644
index 000000000..af9d8589b
--- /dev/null
+++ b/java/com/android/newbubble/res/drawable/bubble_shape_circle.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2017 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:bottomRightRadius="@dimen/bubble_size"
+      android:topRightRadius="@dimen/bubble_size"
+      android:bottomLeftRadius="@dimen/bubble_size"
+      android:topLeftRadius="@dimen/bubble_size"/>
+  <solid android:color="@android:color/white"/>
+</shape>
diff --git a/java/com/android/newbubble/res/drawable/bubble_shape_circle_small.xml b/java/com/android/newbubble/res/drawable/bubble_shape_circle_small.xml
new file mode 100644
index 000000000..73b9cf338
--- /dev/null
+++ b/java/com/android/newbubble/res/drawable/bubble_shape_circle_small.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2017 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" android:shape="oval">
+  <solid android:color="@android:color/white"/>
+  <size android:width="@dimen/bubble_small_icon_size"
+      android:height="@dimen/bubble_small_icon_size"/>
+</shape>
diff --git a/java/com/android/newbubble/res/layout/new_bubble_base.xml b/java/com/android/newbubble/res/layout/new_bubble_base.xml
index 9174f3fdb..c90cabdf2 100644
--- a/java/com/android/newbubble/res/layout/new_bubble_base.xml
+++ b/java/com/android/newbubble/res/layout/new_bubble_base.xml
@@ -19,6 +19,7 @@
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
+    android:clipChildren="false"
     tools:theme="@style/Theme.AppCompat">
   <RelativeLayout
       android:id="@+id/bubble_primary_container"
@@ -27,14 +28,18 @@
       android:layout_centerHorizontal="true"
       android:animateLayoutChanges="true"
       android:clipChildren="false"
-      android:clipToPadding="false"
-      android:elevation="12dp">
+      android:clipToPadding="false">
     <ViewAnimator
         android:id="@+id/bubble_button_primary"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:background="@drawable/bubble_ripple_circle"
+        android:layout_marginStart="@dimen/bubble_shadow_padding_size_horizontal"
+        android:layout_marginEnd="@dimen/bubble_shadow_padding_size_horizontal"
+        android:layout_marginTop="@dimen/bubble_shadow_padding_size_vertical"
+        android:layout_marginBottom="@dimen/bubble_shadow_padding_size_vertical"
+        android:background="@drawable/bubble_shape_circle"
         android:measureAllChildren="false"
+        android:elevation="@dimen/bubble_elevation"
         tools:backgroundTint="#FF0000AA">
       <RelativeLayout
           android:layout_width="wrap_content"
@@ -53,7 +58,7 @@
             android:padding="@dimen/bubble_small_icon_padding"
             android:tint="@android:color/white"
             android:tintMode="src_in"
-            android:background="@drawable/bubble_ripple_circle_small"
+            android:background="@drawable/bubble_shape_circle_small"
             android:measureAllChildren="false"
             tools:backgroundTint="#FF0000AA"
             tools:src="@android:drawable/ic_btn_speak_now"/>
@@ -72,80 +77,67 @@
   </RelativeLayout>
   <RelativeLayout
       android:id="@+id/bubble_expanded_layout"
-      android:layout_width="wrap_content"
+      android:layout_width="@dimen/bubble_expanded_width"
       android:layout_height="wrap_content"
       android:layout_below="@id/bubble_primary_container"
-      android:paddingTop="@dimen/bubble_shadow_padding_size_vertical"
-      android:paddingBottom="@dimen/bubble_shadow_padding_size_vertical"
-      android:paddingStart="@dimen/bubble_shadow_padding_size_horizontal"
-      android:paddingEnd="@dimen/bubble_shadow_padding_size_horizontal"
-      android:clipToPadding="false"
+      android:layout_marginStart="@dimen/bubble_shadow_padding_size_horizontal_double"
+      android:layout_marginEnd="@dimen/bubble_shadow_padding_size_horizontal_double"
+      android:layout_marginTop="@dimen/bubble_shadow_padding_size_vertical_minus"
+      android:layout_marginBottom="@dimen/bubble_shadow_padding_size_vertical"
       android:visibility="gone"
       tools:visibility="visible">
     <RelativeLayout
-        android:id="@+id/bubble_expanded_layout_part_one"
-        android:layout_width="wrap_content"
+        android:id="@+id/bubble_triangle"
+        android:layout_width="20dp"
+        android:layout_height="20dp"
+        android:layout_marginTop="7dp"
+        android:layout_marginBottom="-10dp"
+        android:layout_centerHorizontal="true"
+        android:background="@color/background_dialer_white"
+        android:elevation="@dimen/bubble_expanded_elevation"
+        android:rotation="45">
+    </RelativeLayout>
+    <RelativeLayout
+        android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:layout_below="@id/bubble_triangle"
+        android:clipToPadding="false"
         android:background="@drawable/bubble_background_with_radius"
-        android:elevation="@dimen/bubble_elevation"
+        android:elevation="@dimen/bubble_expanded_elevation"
         android:layoutDirection="inherit">
       <com.android.newbubble.NewCheckableButton
           android:id="@+id/bubble_button_full_screen"
-          android:layout_width="@dimen/bubble_expanded_width"
-          android:layout_height="@dimen/bubble_size"
-          android:padding="@dimen/bubble_icon_padding"
-          android:tint="@color/bubble_button_text_color_blue"
-          android:tintMode="src_in"
-          android:text="Full screen"
-          android:textColor="@color/bubble_button_text_color_black"
-          android:background="@android:color/transparent"
-          android:drawablePadding="@dimen/bubble_icon_padding"/>
+          android:layout_marginTop="@dimen/bubble_radius"
+          android:textColor="@color/bubble_button_color_grey"
+          android:background="@color/background_dialer_white"
+          android:drawableTint="@color/bubble_button_color_grey"
+          style="@style/CheckableButtonWithSelectableItemBackground"/>
       <com.android.newbubble.NewCheckableButton
           android:id="@+id/bubble_button_mute"
-          android:layout_width="@dimen/bubble_expanded_width"
-          android:layout_height="@dimen/bubble_size"
           android:layout_below="@id/bubble_button_full_screen"
-          android:padding="@dimen/bubble_icon_padding"
-          android:tint="@color/bubble_button_text_color_blue"
-          android:tintMode="src_in"
-          android:text="Mute"
-          android:textColor="@color/bubble_button_text_color_black"
-          android:background="@android:color/transparent"
-          android:drawablePadding="@dimen/bubble_icon_padding"/>
+          android:layout_marginTop="@dimen/bubble_expanded_separator_height"
+          android:textColor="@color/bubble_button_color_grey"
+          android:background="@color/background_dialer_white"
+          android:drawableTint="@color/bubble_button_color_grey"
+          style="@style/CheckableButtonWithSelectableItemBackground"/>
       <com.android.newbubble.NewCheckableButton
           android:id="@+id/bubble_button_audio_route"
-          android:layout_width="@dimen/bubble_expanded_width"
-          android:layout_height="@dimen/bubble_size"
           android:layout_below="@id/bubble_button_mute"
-          android:padding="@dimen/bubble_icon_padding"
-          android:tint="@color/bubble_button_text_color_blue"
-          android:tintMode="src_in"
-          android:text="Speakerphone"
-          android:textColor="@color/bubble_button_text_color_black"
-          android:background="@android:color/transparent"
-          android:drawablePadding="@dimen/bubble_icon_padding"/>
-    </RelativeLayout>
-    <RelativeLayout
-        android:id="@+id/bubble_expanded_layout_part_two"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="@dimen/bubble_expanded_separator_height"
-        android:layout_below="@id/bubble_expanded_layout_part_one"
-        android:background="@drawable/bubble_ripple_circle"
-        android:backgroundTint="@color/bubble_end_call_button_background"
-        android:elevation="@dimen/bubble_elevation"
-        android:layoutDirection="inherit">
+          android:layout_marginTop="@dimen/bubble_expanded_separator_height"
+          android:textColor="@color/bubble_button_color_grey"
+          android:background="@color/background_dialer_white"
+          android:drawableTint="@color/bubble_button_color_grey"
+          style="@style/CheckableButtonWithSelectableItemBackground"/>
       <com.android.newbubble.NewCheckableButton
           android:id="@+id/bubble_button_end_call"
-          android:layout_width="@dimen/bubble_expanded_width"
-          android:layout_height="@dimen/bubble_size"
-          android:padding="@dimen/bubble_icon_padding"
-          android:tint="@color/bubble_button_text_color_white"
-          android:tintMode="src_in"
-          android:text="End Call"
-          android:textColor="@color/bubble_button_text_color_white"
-          android:background="@android:color/transparent"
-          android:drawablePadding="@dimen/bubble_icon_padding"/>
+          android:layout_below="@id/bubble_button_audio_route"
+          android:layout_marginTop="@dimen/bubble_expanded_separator_height"
+          android:textColor="@color/bubble_button_color_white"
+          android:background="@drawable/bubble_pill_down"
+          android:backgroundTint="@color/dialer_end_call_button_color"
+          android:foreground="?attr/selectableItemBackground"
+          android:drawableTint="@color/bubble_button_color_white"
+          style="@style/CheckableButton"/>
     </RelativeLayout>
   </RelativeLayout>
 </RelativeLayout>
diff --git a/java/com/android/newbubble/res/values/colors.xml b/java/com/android/newbubble/res/values/colors.xml
index 556d8bd95..8b1294fc6 100644
--- a/java/com/android/newbubble/res/values/colors.xml
+++ b/java/com/android/newbubble/res/values/colors.xml
@@ -18,8 +18,7 @@
 <resources>
   <color name="bubble_primary_background_darken">#33000000</color>
 
-  <color name="bubble_button_text_color_black">@color/dialer_primary_text_color</color>
-  <color name="bubble_button_text_color_white">@color/dialer_primary_text_color_white</color>
-  <color name="bubble_button_text_color_blue">@color/dialer_theme_color</color>
-  <color name="bubble_end_call_button_background">@color/dialer_end_call_button_color</color>
+  <color name="bubble_button_color_grey">@color/dialer_secondary_text_color</color>
+  <color name="bubble_button_color_white">@color/dialer_primary_text_color_white</color>
+  <color name="bubble_button_color_blue">@color/dialer_theme_color</color>
 </resources>
diff --git a/java/com/android/newbubble/res/values/styles.xml b/java/com/android/newbubble/res/values/styles.xml
new file mode 100644
index 000000000..274bd8704
--- /dev/null
+++ b/java/com/android/newbubble/res/values/styles.xml
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2017 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
+  -->
+
+<resources>
+  <style name="CheckableButton">
+    <item name="android:layout_width">@dimen/bubble_expanded_width</item>
+    <item name="android:layout_height">wrap_content</item>
+
+    <item name="android:paddingTop">@dimen/bubble_button_padding_vertical</item>
+    <item name="android:paddingBottom">@dimen/bubble_button_padding_vertical</item>
+    <item name="android:paddingStart">@dimen/bubble_button_padding_horizontal</item>
+    <item name="android:paddingEnd">@dimen/bubble_button_padding_horizontal</item>
+    <item name="android:drawablePadding">@dimen/bubble_icon_padding</item>
+  </style>
+
+  <style name="SelectableItemTheme">
+    <item name="colorControlHighlight">@color/dialer_secondary_text_color_hiden</item>
+  </style>
+  <style name="CheckableButtonWithSelectableItemBackground" parent="CheckableButton">
+    <item name="android:theme">@style/SelectableItemTheme</item>
+    <item name="android:foreground">?attr/selectableItemBackground</item>
+
+  </style>
+</resources>
\ No newline at end of file
diff --git a/java/com/android/newbubble/res/values/values.xml b/java/com/android/newbubble/res/values/values.xml
index 381b0079e..d8cd08f87 100644
--- a/java/com/android/newbubble/res/values/values.xml
+++ b/java/com/android/newbubble/res/values/values.xml
@@ -18,17 +18,23 @@
 <resources>
   <dimen name="bubble_size">56dp</dimen>
   <dimen name="bubble_icon_padding">16dp</dimen>
-  <dimen name="bubble_move_elevation_change">4dp</dimen>
+  <dimen name="bubble_move_elevation_change">6dp</dimen>
 
+  <dimen name="bubble_button_height">36dp</dimen>
   <dimen name="bubble_button_icon_padding">16dp</dimen>
-  <dimen name="bubble_safe_margin_horizontal">-4dp</dimen>
+  <dimen name="bubble_button_padding_vertical">12dp</dimen>
+  <dimen name="bubble_button_padding_horizontal">16dp</dimen>
+  <dimen name="bubble_safe_margin_horizontal">-16dp</dimen>
   <dimen name="bubble_safe_margin_vertical">64dp</dimen>
   <dimen name="bubble_shadow_padding_size_vertical">16dp</dimen>
+  <dimen name="bubble_shadow_padding_size_vertical_minus">-16dp</dimen>
   <dimen name="bubble_shadow_padding_size_horizontal">12dp</dimen>
+  <dimen name="bubble_shadow_padding_size_horizontal_double">24dp</dimen>
 
-  <dimen name="bubble_elevation">10dp</dimen>
+  <dimen name="bubble_elevation">6dp</dimen>
+  <dimen name="bubble_expanded_elevation">8dp</dimen>
   <dimen name="bubble_expanded_width">160dp</dimen>
-  <dimen name="bubble_radius">20dp</dimen>
+  <dimen name="bubble_radius">12dp</dimen>
   <dimen name="bubble_expanded_separator_height">4dp</dimen>
   <dimen name="bubble_small_icon_size">24dp</dimen>
   <dimen name="bubble_small_icon_padding">4dp</dimen>
-- 
cgit v1.2.3