Change selected/unselected states of buttons.

- Add touch feedback (w00t).
- Adjust button heights/positions to spec.
- Add drawables for the different button states (no longer tabs).
- Remove vertical spacers (interfered with touch feedback).

Change-Id: I383ca898c8d2fcfc8c34021efc62cb03adbde1c1

13 files changed, 152 insertions, 64 deletions

diff --git a/InCallUI/res/color/selectable_icon_tint.xml b/InCallUI/res/color/selectable_icon_tint.xml
index 8665272ec..42aa310bb 100644
--- a/InCallUI/res/color/selectable_icon_tint.xml
+++ b/InCallUI/res/color/selectable_icon_tint.xml
@@ -16,8 +16,9 @@
   -->
 
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:color="#ffffffff" android:state_selected="true" />
-    <item android:color="#ffffffff" android:state_pressed="true" />
-    <item android:color="#99ffffff" />
+    <item android:color="#ffeeff41" android:state_selected="true" />
+    <item android:color="#ffeeff41" android:state_pressed="true" />
+    <!-- 70% white. -->
+    <item android:color="#b3ffffff" />
 </selector>
 
diff --git a/InCallUI/res/drawable/btn_background.xml b/InCallUI/res/drawable/btn_background.xml
index be4644670..fabcf7c65 100644
--- a/InCallUI/res/drawable/btn_background.xml
+++ b/InCallUI/res/drawable/btn_background.xml
@@ -18,12 +18,15 @@
 <!-- Background resource for "compound buttons" in the in-call UI.
      These buttons have two states (checked and unchecked), and
      show a blue bar along the bottom edge when checked. -->
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
+<touch-feedback xmlns:android="http://schemas.android.com/apk/res/android"
+    android:tint="@color/tab_pressed_color"
+    android:pinned="true">
+    <selector xmlns:android="http://schemas.android.com/apk/res/android">
 
-    <item android:state_pressed="true"
-          android:drawable="@color/tab_pressed_color" />
-    <item android:state_focused="true"
-          android:drawable="@drawable/tab_unselected_focused" />
-    <item android:drawable="@android:color/transparent" />
+        <item android:state_focused="true"
+              android:drawable="@drawable/btn_unselected_focused" />
 
-</selector>
+        <item android:drawable="@drawable/btn_unselected" />
+
+    </selector>
+</touch-feedback>
\ No newline at end of file
diff --git a/InCallUI/res/drawable/btn_compound_background.xml b/InCallUI/res/drawable/btn_compound_background.xml
index 5af7cca77..2f5a39d34 100644
--- a/InCallUI/res/drawable/btn_compound_background.xml
+++ b/InCallUI/res/drawable/btn_compound_background.xml
@@ -15,19 +15,22 @@
 -->
 
 <!-- Background resource for "compound buttons" in the in-call UI.
-     These buttons have two states (checked and unchecked), and
-     show a blue bar along the bottom edge when checked. -->
-<selector xmlns:android="http://schemas.android.com/apk/res/android">
+     These buttons have two states (selected and unselected). -->
+<touch-feedback xmlns:android="http://schemas.android.com/apk/res/android"
+    android:tint="@color/tab_pressed_color"
+    android:pinned="true">
+    <item>
+        <selector>
+            <item android:state_selected="true" android:state_focused="true"
+                  android:drawable="@drawable/btn_selected_focused" />
 
-    <item android:state_pressed="true"
-          android:drawable="@color/tab_pressed_color" />
-    <item android:state_selected="true" android:state_focused="true"
-          android:drawable="@drawable/tab_selected_focused" />
-    <item android:state_focused="true"
-          android:drawable="@drawable/tab_unselected_focused" />
-    <item android:state_selected="true"
-            android:drawable="@drawable/tab_selected" />
+            <item android:state_focused="true"
+                  android:drawable="@drawable/btn_unselected_focused" />cd
 
-    <item android:drawable="@android:color/transparent" />
+            <item android:state_selected="true"
+                android:drawable="@drawable/btn_selected" />
 
-</selector>
+            <item android:drawable="@drawable/btn_unselected" />
+        </selector>
+    </item>
+</touch-feedback>
\ No newline at end of file
diff --git a/InCallUI/res/drawable/btn_selected.xml b/InCallUI/res/drawable/btn_selected.xml
new file mode 100644
index 000000000..1446e4163
--- /dev/null
+++ b/InCallUI/res/drawable/btn_selected.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright (C) 2014 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
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item>
+        <shape android:shape="oval">
+            <solid android:color="@color/button_selected_color" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/InCallUI/res/drawable/btn_selected_focused.xml b/InCallUI/res/drawable/btn_selected_focused.xml
new file mode 100644
index 000000000..2eda9bf8b
--- /dev/null
+++ b/InCallUI/res/drawable/btn_selected_focused.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright (C) 2014 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
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item android:drawable="@drawable/btn_selected" />
+
+    <item>
+        <shape android:shape="oval" >
+            <stroke
+                android:width="4dp"
+                android:color="@color/focus_color" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/InCallUI/res/drawable/btn_unselected.xml b/InCallUI/res/drawable/btn_unselected.xml
new file mode 100644
index 000000000..aed995cec
--- /dev/null
+++ b/InCallUI/res/drawable/btn_unselected.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright (C) 2014 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
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item>
+        <shape android:shape="oval">
+            <solid android:color="@color/incall_background_color" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/InCallUI/res/drawable/btn_unselected_focused.xml b/InCallUI/res/drawable/btn_unselected_focused.xml
new file mode 100644
index 000000000..66075d427
--- /dev/null
+++ b/InCallUI/res/drawable/btn_unselected_focused.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+  ~ Copyright (C) 2014 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
+  -->
+
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
+    <item android:drawable="@drawable/btn_unselected" />
+    <item>
+        <shape android:shape="oval" >
+            <stroke
+                android:width="4dp"
+                android:color="@color/focus_color" />
+        </shape>
+    </item>
+</layer-list>
\ No newline at end of file
diff --git a/InCallUI/res/layout/call_button_fragment.xml b/InCallUI/res/layout/call_button_fragment.xml
index 139bdd00d..19ada9020 100644
--- a/InCallUI/res/layout/call_button_fragment.xml
+++ b/InCallUI/res/layout/call_button_fragment.xml
@@ -58,8 +58,10 @@
             android:orientation="horizontal"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:paddingStart="@dimen/button_cluster_side_padding"
-            android:paddingEnd="@dimen/button_cluster_side_padding"
+            android:paddingStart="@dimen/button_cluster_horizontal_padding"
+            android:paddingEnd="@dimen/button_cluster_horizontal_padding"
+            android:paddingTop="@dimen/button_cluster_vertical_padding"
+            android:paddingBottom="@dimen/button_cluster_vertical_padding"
             android:background="@color/button_background_color" >
 
         <!-- This row has either 4 or 5 buttons, depending on
@@ -74,9 +76,6 @@
        point exactly one of the pair is VISIBLE and the other is
        GONE. -->
 
-        <!-- Separator between left padding and 1st button -->
-        <View style="@style/VerticalSeparator"/>
-
         <!-- "Dialpad" -->
         <!-- This is a "compound button": it has checked and unchecked states. -->
         <ImageButton android:id="@+id/dialpadButton"
@@ -84,9 +83,6 @@
                 android:background="@drawable/btn_compound_dialpad"
                 android:contentDescription="@string/onscreenShowDialpadText" />
 
-        <!-- Separator between 1st and 2nd button -->
-        <View style="@style/VerticalSeparator" />
-
         <!-- "Audio mode" -->
         <!-- This is a multi-mode button that can behave either like a
              simple "compound button" with two states *or* like an
@@ -98,9 +94,6 @@
                 android:background="@drawable/btn_compound_audio"
                 android:contentDescription="@string/onscreenAudioText" />
 
-        <!-- Separator between 2nd and 3rd button -->
-        <View style="@style/VerticalSeparator"/>
-
         <!-- "Mute" -->
         <!-- This is a "compound button": it has checked and unchecked states. -->
         <ImageButton android:id="@+id/muteButton"
@@ -108,9 +101,6 @@
                 android:background="@drawable/btn_compound_mute"
                 android:contentDescription="@string/onscreenMuteText" />
 
-        <!-- Separator between 3rd and 4th button -->
-        <View style="@style/VerticalSeparator" />
-
         <!-- This slot is either "Hold" or "Swap", depending on
              the state of the call.   One or the other of these
              must always be set to GONE. -->
@@ -128,10 +118,6 @@
                 android:contentDescription="@string/onscreenSwapCallsText"
                 android:visibility="gone" />
 
-        <!-- Separator between 4th and 5th button (if 5th exists) -->
-        <View android:id="@+id/holdSwapSpacer"
-                style="@style/VerticalSeparator"/>
-
         <!-- This slot is either "Add" or "Merge", depending on
              the state of the call.  One or the other of these
              must always be set to GONE. -->
@@ -152,18 +138,10 @@
                 android:contentDescription="@string/onscreenMergeCallsText"
                 android:visibility="gone" />
 
-        <!-- Separator between 5th and 6th button -->
-        <View android:id="@+id/auxiliaryActionSpacer"
-                style="@style/VerticalSeparator"
-                android:visibility="gone" />
-
         <ImageButton android:id="@+id/auxiliaryActionButton"
                 style="@style/InCallButton"
                 android:visibility="gone" />
 
-        <!-- Separator between last button and right padding -->
-        <View style="@style/VerticalSeparator" />
-
     </LinearLayout>
 
 </LinearLayout>
diff --git a/InCallUI/res/layout/extra_button_row.xml b/InCallUI/res/layout/extra_button_row.xml
index 35dcf0713..690186e68 100644
--- a/InCallUI/res/layout/extra_button_row.xml
+++ b/InCallUI/res/layout/extra_button_row.xml
@@ -30,8 +30,8 @@
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:paddingStart="@dimen/button_cluster_side_padding"
-        android:paddingEnd="@dimen/button_cluster_side_padding"
+        android:paddingStart="@dimen/button_cluster_horizontal_padding"
+        android:paddingEnd="@dimen/button_cluster_horizontal_padding"
         android:background="?android:attr/selectableItemBackground"
         android:visibility="gone">
         <!-- The entire LinearLayout here is clickable, so we don't
@@ -54,8 +54,8 @@
         android:orientation="horizontal"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:paddingStart="@dimen/button_cluster_side_padding"
-        android:paddingEnd="@dimen/button_cluster_side_padding"
+        android:paddingStart="@dimen/button_cluster_horizontal_padding"
+        android:paddingEnd="@dimen/button_cluster_horizontal_padding"
         android:background="?android:attr/selectableItemBackground"
         android:visibility="gone">
         <!-- The entire LinearLayout here is clickable, so we don't
diff --git a/InCallUI/res/values/colors.xml b/InCallUI/res/values/colors.xml
index d8e789151..8d48759b0 100644
--- a/InCallUI/res/values/colors.xml
+++ b/InCallUI/res/values/colors.xml
@@ -55,6 +55,8 @@
 
     <!-- Button background color. -->
     <color name="button_background_color">@color/incall_background_color</color>
+    <color name="button_selected_color">#00acc1</color>
+
 
     <!-- Background color of action bars -->
     <color name="actionbar_background_color">#3B77E7</color>
diff --git a/InCallUI/res/values/dimens.xml b/InCallUI/res/values/dimens.xml
index ae5f5a1dd..b428179c4 100644
--- a/InCallUI/res/values/dimens.xml
+++ b/InCallUI/res/values/dimens.xml
@@ -48,7 +48,7 @@
     <dimen name="call_banner_name_number_right_padding">50sp</dimen>
 
     <!-- Height of the main row of in-call buttons. -->
-    <dimen name="in_call_button_height">76dp</dimen>
+    <dimen name="in_call_button_height">48dp</dimen>
 
     <!-- Width of buttons in the extra button row. -->
     <dimen name="extra_row_button_width">56dp</dimen>
@@ -65,7 +65,9 @@
          risk of false touches (from your finger wrapping around while
          holding the phone, *before* moving it up to your face and having
          the prox sensor kick in.) -->
-    <dimen name="button_cluster_side_padding">20dp</dimen>
+    <dimen name="button_cluster_horizontal_padding">20dp</dimen>
+    <dimen name="button_cluster_vertical_padding">4dp</dimen>
+    <dimen name="call_button_margin">4dp</dimen>
 
     <!-- Dimensions for OTA Call Card -->
     <dimen name="otaactivate_layout_marginTop">10dp</dimen>
diff --git a/InCallUI/res/values/styles.xml b/InCallUI/res/values/styles.xml
index b0f25ec51..47151467b 100644
--- a/InCallUI/res/values/styles.xml
+++ b/InCallUI/res/values/styles.xml
@@ -54,6 +54,7 @@
     <style name="InCallButton">
         <item name="android:layout_width">0px</item>
         <item name="android:layout_height">@dimen/in_call_button_height</item>
+        <item name="android:layout_margin">@dimen/call_button_margin</item>
         <item name="android:layout_weight">1</item>
         <item name="android:background">?android:attr/selectableItemBackground</item>
     </style>
@@ -68,12 +69,6 @@
         <item name="android:textOff">@null</item>
     </style>
 
-    <style name="VerticalSeparator">
-        <item name="android:layout_width">2dp</item>
-        <item name="android:layout_height">match_parent</item>
-        <item name="android:background">@color/button_background_color</item>
-    </style>
-
     <!-- Buttons in extra button row. -->
     <style name="InCallExtraRowButton">
         <item name="android:layout_width">@dimen/extra_row_button_width</item>
diff --git a/InCallUI/src/com/android/incallui/CallButtonFragment.java b/InCallUI/src/com/android/incallui/CallButtonFragment.java
index 2912ecefe..aa2dca784 100644
--- a/InCallUI/src/com/android/incallui/CallButtonFragment.java
+++ b/InCallUI/src/com/android/incallui/CallButtonFragment.java
@@ -50,7 +50,6 @@ public class CallButtonFragment
     private ImageButton mAddCallButton;
     private ImageButton mSwapButton;
     private ImageButton mAuxiliaryActionButton;
-    private View mAuxiliaryActionSpacer;
 
     private PopupMenu mAudioModePopup;
     private boolean mAudioModePopupVisible;
@@ -133,7 +132,6 @@ public class CallButtonFragment
         mSwapButton.setOnClickListener(this);
         mAuxiliaryActionButton = (ImageButton) parent.findViewById(R.id.auxiliaryActionButton);
         mAuxiliaryActionButton.setOnClickListener(this);
-        mAuxiliaryActionSpacer = parent.findViewById(R.id.auxiliaryActionSpacer);
 
         return parent;
     }
@@ -522,7 +520,6 @@ public class CallButtonFragment
     @Override
     public void updateAuxiliaryActionButton(boolean show, String description, Drawable drawable) {
         mAuxiliaryActionButton.setVisibility(show ? View.VISIBLE : View.GONE);
-        mAuxiliaryActionSpacer.setVisibility(show ? View.VISIBLE : View.GONE);
         if (show) {
             mAuxiliaryActionButton.setContentDescription(description);
             mAuxiliaryActionButton.setImageDrawable(drawable);