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
---
 .../incallui/NewReturnToCallController.java        |   7 ++
 java/com/android/incallui/res/values/strings.xml   |   3 +
 java/com/android/newbubble/NewBubble.java          |  49 ++++-----
 java/com/android/newbubble/NewBubbleInfo.java      |   4 +-
 java/com/android/newbubble/NewCheckableButton.java |   9 +-
 .../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 ++-
 13 files changed, 209 insertions(+), 131 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

diff --git a/java/com/android/incallui/NewReturnToCallController.java b/java/com/android/incallui/NewReturnToCallController.java
index fa7a45de0..97bf7ad50 100644
--- a/java/com/android/incallui/NewReturnToCallController.java
+++ b/java/com/android/incallui/NewReturnToCallController.java
@@ -277,17 +277,22 @@ public class NewReturnToCallController implements InCallUiListener, Listener, Au
     List<Action> actions = new ArrayList<>();
     SpeakerButtonInfo speakerButtonInfo = new SpeakerButtonInfo(audioState, IconSize.SIZE_24_DP);
 
+    // Return to call
     actions.add(
         Action.builder()
             .setIconDrawable(context.getDrawable(R.drawable.quantum_ic_fullscreen_vd_theme_24))
             .setIntent(fullScreen)
+            .setName(context.getText(R.string.bubble_return_to_call))
             .build());
+    // Mute/unmute
     actions.add(
         Action.builder()
             .setIconDrawable(context.getDrawable(R.drawable.quantum_ic_mic_off_white_24))
             .setChecked(audioState.isMuted())
             .setIntent(toggleMute)
+            .setName(context.getText(R.string.incall_label_mute))
             .build());
+    // Speaker/audio selector
     actions.add(
         Action.builder()
             .setIconDrawable(context.getDrawable(speakerButtonInfo.icon))
@@ -295,10 +300,12 @@ public class NewReturnToCallController implements InCallUiListener, Listener, Au
             .setChecked(speakerButtonInfo.isChecked)
             .setIntent(speakerButtonInfo.checkable ? toggleSpeaker : showSpeakerSelect)
             .build());
+    // End call
     actions.add(
         Action.builder()
             .setIconDrawable(context.getDrawable(R.drawable.quantum_ic_call_end_vd_theme_24))
             .setIntent(endCall)
+            .setName(context.getText(R.string.incall_label_end_call))
             .build());
     return actions;
   }
diff --git a/java/com/android/incallui/res/values/strings.xml b/java/com/android/incallui/res/values/strings.xml
index 2f1542a08..af6125366 100644
--- a/java/com/android/incallui/res/values/strings.xml
+++ b/java/com/android/incallui/res/values/strings.xml
@@ -202,4 +202,7 @@
   </string>
   <string name="video_call_lte_to_wifi_failed_do_not_show">Do not show this again</string>
 
+  <!-- Text for bubble return-to-call button -->
+  <string name="bubble_return_to_call">Back to call</string>
+
 </resources>
diff --git a/java/com/android/newbubble/NewBubble.java b/java/com/android/newbubble/NewBubble.java
index 226326f3c..fb6a5e458 100644
--- a/java/com/android/newbubble/NewBubble.java
+++ b/java/com/android/newbubble/NewBubble.java
@@ -26,17 +26,14 @@ import android.content.Intent;
 import android.graphics.PixelFormat;
 import android.graphics.drawable.Animatable;
 import android.graphics.drawable.Drawable;
-import android.graphics.drawable.RippleDrawable;
 import android.net.Uri;
 import android.os.Handler;
 import android.provider.Settings;
-import android.support.annotation.ColorInt;
 import android.support.annotation.IntDef;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.annotation.VisibleForTesting;
 import android.support.v4.graphics.ColorUtils;
-import android.support.v4.graphics.drawable.DrawableCompat;
 import android.support.v4.os.BuildCompat;
 import android.support.v4.view.animation.FastOutLinearInInterpolator;
 import android.support.v4.view.animation.LinearOutSlowInInterpolator;
@@ -556,26 +553,22 @@ public class NewBubble {
 
   private void update() {
     // Whole primary button background
-    RippleDrawable backgroundRipple =
-        (RippleDrawable)
-            context.getResources().getDrawable(R.drawable.bubble_ripple_circle, context.getTheme());
+    Drawable backgroundCirle =
+        context.getResources().getDrawable(R.drawable.bubble_shape_circle, context.getTheme());
     int primaryTint =
         ColorUtils.compositeColors(
             context.getColor(R.color.bubble_primary_background_darken),
             currentInfo.getPrimaryColor());
-    backgroundRipple.getDrawable(0).mutate().setTint(primaryTint);
-    viewHolder.getPrimaryButton().setBackground(backgroundRipple);
+    backgroundCirle.mutate().setTint(primaryTint);
+    viewHolder.getPrimaryButton().setBackground(backgroundCirle);
 
     // Small icon
-    RippleDrawable smallIconBackgroundRipple =
-        (RippleDrawable)
-            context
-                .getResources()
-                .getDrawable(R.drawable.bubble_ripple_circle_small, context.getTheme());
-    smallIconBackgroundRipple
-        .getDrawable(0)
-        .setTint(context.getColor(R.color.bubble_button_text_color_blue));
-    viewHolder.getPrimaryIcon().setBackground(smallIconBackgroundRipple);
+    Drawable smallIconBackgroundCircle =
+        context
+            .getResources()
+            .getDrawable(R.drawable.bubble_shape_circle_small, context.getTheme());
+    smallIconBackgroundCircle.setTint(context.getColor(R.color.bubble_button_color_blue));
+    viewHolder.getPrimaryIcon().setBackground(smallIconBackgroundCircle);
     viewHolder.getPrimaryIcon().setImageIcon(currentInfo.getPrimaryIcon());
     viewHolder.getPrimaryAvatar().setImageDrawable(currentInfo.getAvatar());
 
@@ -595,13 +588,10 @@ public class NewBubble {
   }
 
   private void updateButtonStates() {
-    int colorBlue = context.getColor(R.color.bubble_button_text_color_blue);
-    int colorWhite = context.getColor(R.color.bubble_button_text_color_white);
-
-    configureButton(currentInfo.getActions().get(0), viewHolder.getFullScreenButton(), colorBlue);
-    configureButton(currentInfo.getActions().get(1), viewHolder.getMuteButton(), colorBlue);
-    configureButton(currentInfo.getActions().get(2), viewHolder.getAudioRouteButton(), colorBlue);
-    configureButton(currentInfo.getActions().get(3), viewHolder.getEndCallButton(), colorWhite);
+    configureButton(currentInfo.getActions().get(0), viewHolder.getFullScreenButton());
+    configureButton(currentInfo.getActions().get(1), viewHolder.getMuteButton());
+    configureButton(currentInfo.getActions().get(2), viewHolder.getAudioRouteButton());
+    configureButton(currentInfo.getActions().get(3), viewHolder.getEndCallButton());
   }
 
   private void doShowText(@NonNull CharSequence text) {
@@ -610,16 +600,11 @@ public class NewBubble {
     viewHolder.getPrimaryButton().setDisplayedChild(ViewHolder.CHILD_INDEX_TEXT);
   }
 
-  private void configureButton(Action action, NewCheckableButton button, @ColorInt int iconColor) {
-    Drawable iconDrawable = DrawableCompat.wrap(action.getIconDrawable());
-    DrawableCompat.setTint(iconDrawable.mutate(), iconColor);
-
-    button.setCompoundDrawablesWithIntrinsicBounds(iconDrawable, null, null, null);
+  private void configureButton(Action action, NewCheckableButton button) {
+    button.setCompoundDrawablesWithIntrinsicBounds(action.getIconDrawable(), null, null, null);
     button.setChecked(action.isChecked());
     button.setEnabled(action.isEnabled());
-    if (action.getName() != null) {
-      button.setText(action.getName());
-    }
+    button.setText(action.getName());
     button.setOnClickListener(v -> doAction(action));
   }
 
diff --git a/java/com/android/newbubble/NewBubbleInfo.java b/java/com/android/newbubble/NewBubbleInfo.java
index 44232f39b..126b300ed 100644
--- a/java/com/android/newbubble/NewBubbleInfo.java
+++ b/java/com/android/newbubble/NewBubbleInfo.java
@@ -79,7 +79,7 @@ public abstract class NewBubbleInfo {
 
     public abstract Drawable getIconDrawable();
 
-    @Nullable
+    @NonNull
     public abstract CharSequence getName();
 
     @NonNull
@@ -108,7 +108,7 @@ public abstract class NewBubbleInfo {
 
       public abstract Builder setIconDrawable(Drawable iconDrawable);
 
-      public abstract Builder setName(@Nullable CharSequence name);
+      public abstract Builder setName(@NonNull CharSequence name);
 
       public abstract Builder setIntent(@NonNull PendingIntent intent);
 
diff --git a/java/com/android/newbubble/NewCheckableButton.java b/java/com/android/newbubble/NewCheckableButton.java
index 63525a4a1..8e43335ca 100644
--- a/java/com/android/newbubble/NewCheckableButton.java
+++ b/java/com/android/newbubble/NewCheckableButton.java
@@ -17,6 +17,7 @@
 package com.android.newbubble;
 
 import android.content.Context;
+import android.content.res.ColorStateList;
 import android.support.v4.view.AccessibilityDelegateCompat;
 import android.support.v4.view.ViewCompat;
 import android.support.v4.view.accessibility.AccessibilityNodeInfoCompat;
@@ -68,10 +69,12 @@ public class NewCheckableButton extends AppCompatButton implements Checkable {
   public void setChecked(boolean checked) {
     if (mChecked != checked) {
       mChecked = checked;
-      setTextColor(
+      int newColor =
           checked
-              ? getContext().getColor(R.color.bubble_button_text_color_blue)
-              : getContext().getColor(R.color.bubble_button_text_color_black));
+              ? getContext().getColor(R.color.bubble_button_color_blue)
+              : getContext().getColor(R.color.bubble_button_color_grey);
+      setTextColor(newColor);
+      setCompoundDrawableTintList(ColorStateList.valueOf(newColor));
     }
   }
 
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