Touch up InCallUI call card positioning.

- Position the sizes, layout, and transitions of text better.
- Correct the sizing of the buttons.

Bug: 14622411, 14617751, 14618551
Change-Id: Idbc5f9b97447d6b40e4702ea70db2196dfdab979

5 files changed, 101 insertions, 93 deletions

diff --git a/InCallUI/res/layout/call_button_fragment.xml b/InCallUI/res/layout/call_button_fragment.xml
index 19ada9020..7fa3c56ab 100644
--- a/InCallUI/res/layout/call_button_fragment.xml
+++ b/InCallUI/res/layout/call_button_fragment.xml
@@ -30,15 +30,15 @@
 
 <!-- Main cluster of onscreen buttons on the lower part of the screen. -->
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
-        android:id="@+id/bottomButtons"
-        android:orientation="vertical"
-        android:layout_width="match_parent"
-        android:background="#0000ff"
-        android:layout_margin="0dp"
-        android:padding="0dp"
-        android:layout_height="wrap_content"
-        android:layout_alignParentBottom="true"
-        android:visibility="invisible" >
+    android:id="@+id/bottomButtons"
+    android:orientation="vertical"
+    android:layout_width="match_parent"
+    android:background="#0000ff"
+    android:layout_margin="0dp"
+    android:padding="0dp"
+    android:layout_height="wrap_content"
+    android:layout_alignParentBottom="true"
+    android:visibility="invisible" >
 
     <!-- Row 1, the "extra button row": A couple of relatively rare
          buttons used only in certain call states.
@@ -46,23 +46,22 @@
          For now, at least, there's only ever one button visible here
          at a time, so this can be a simple FrameLayout. -->
     <include android:id="@+id/extraButtonRow"
-            layout="@layout/extra_button_row"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content" />
+        layout="@layout/extra_button_row"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" />
 
     <!-- Row 2: The main batch of in-call buttons:
          Dialpad / Audio mode / Mute / Hold / Add call
          Visible in all states except while an incoming call is
          ringing. -->
     <LinearLayout
-            android:orientation="horizontal"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            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" >
+        android:orientation="horizontal"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:paddingStart="@dimen/button_cluster_horizontal_padding"
+        android:paddingEnd="@dimen/button_cluster_horizontal_padding"
+        android:background="@color/button_background_color"
+        android:gravity="center">
 
         <!-- This row has either 4 or 5 buttons, depending on
        whether the device supports "Hold" (i.e. 4 buttons on
@@ -79,9 +78,9 @@
         <!-- "Dialpad" -->
         <!-- This is a "compound button": it has checked and unchecked states. -->
         <ImageButton android:id="@+id/dialpadButton"
-                style="@style/InCallCompoundButton"
-                android:background="@drawable/btn_compound_dialpad"
-                android:contentDescription="@string/onscreenShowDialpadText" />
+            style="@style/InCallCompoundButton"
+            android:background="@drawable/btn_compound_dialpad"
+            android:contentDescription="@string/onscreenShowDialpadText" />
 
         <!-- "Audio mode" -->
         <!-- This is a multi-mode button that can behave either like a
@@ -90,16 +89,16 @@
              btn_compound_audio.xml and InCallTouchUi.updateAudioButton()
              for the full details. -->
         <ImageButton android:id="@+id/audioButton"
-                style="@style/InCallButton"
-                android:background="@drawable/btn_compound_audio"
-                android:contentDescription="@string/onscreenAudioText" />
+            style="@style/InCallButton"
+            android:background="@drawable/btn_compound_audio"
+            android:contentDescription="@string/onscreenAudioText" />
 
         <!-- "Mute" -->
         <!-- This is a "compound button": it has checked and unchecked states. -->
         <ImageButton android:id="@+id/muteButton"
-                style="@style/InCallButton"
-                android:background="@drawable/btn_compound_mute"
-                android:contentDescription="@string/onscreenMuteText" />
+            style="@style/InCallButton"
+            android:background="@drawable/btn_compound_mute"
+            android:contentDescription="@string/onscreenMuteText" />
 
         <!-- This slot is either "Hold" or "Swap", depending on
              the state of the call.   One or the other of these
@@ -107,40 +106,40 @@
         <!-- "Hold" -->
         <!-- This is a "compound button": it has checked and unchecked states. -->
         <ImageButton android:id="@+id/holdButton"
-                style="@style/InCallButton"
-                android:background="@drawable/btn_compound_hold"
-                android:contentDescription="@string/onscreenHoldText" />
+            style="@style/InCallButton"
+            android:background="@drawable/btn_compound_hold"
+            android:contentDescription="@string/onscreenHoldText" />
 
         <!-- "Swap" (or "Manage calls" in some CDMA states) -->
         <ImageButton android:id="@+id/swapButton"
-                style="@style/InCallButton"
-                android:background="@drawable/btn_swap"
-                android:contentDescription="@string/onscreenSwapCallsText"
-                android:visibility="gone" />
+            style="@style/InCallButton"
+            android:background="@drawable/btn_swap"
+            android:contentDescription="@string/onscreenSwapCallsText"
+            android:visibility="gone" />
 
         <!-- 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. -->
         <!-- "Add Call" -->
         <ImageButton android:id="@+id/addButton"
-                style="@style/InCallButton"
-                android:background="@drawable/btn_add"
-                android:contentDescription="@string/onscreenAddCallText"
-                android:visibility="gone" />
+            style="@style/InCallButton"
+            android:background="@drawable/btn_add"
+            android:contentDescription="@string/onscreenAddCallText"
+            android:visibility="gone" />
 
         <!-- "Merge calls" -->
         <!-- This button is used only on GSM devices, where we know
              that "Add" and "Merge" are never available at the same time.
              The "Merge" button for CDMA devices is "cdmaMergeButton" above. -->
         <ImageButton android:id="@+id/mergeButton"
-                style="@style/InCallButton"
-                android:background="@drawable/btn_merge"
-                android:contentDescription="@string/onscreenMergeCallsText"
-                android:visibility="gone" />
+            style="@style/InCallButton"
+            android:background="@drawable/btn_merge"
+            android:contentDescription="@string/onscreenMergeCallsText"
+            android:visibility="gone" />
 
         <ImageButton android:id="@+id/auxiliaryActionButton"
-                style="@style/InCallButton"
-                android:visibility="gone" />
+            style="@style/InCallButton"
+            android:visibility="gone" />
 
     </LinearLayout>
 
diff --git a/InCallUI/res/layout/primary_call_info.xml b/InCallUI/res/layout/primary_call_info.xml
index 7c0a1811e..bfa4c7a13 100644
--- a/InCallUI/res/layout/primary_call_info.xml
+++ b/InCallUI/res/layout/primary_call_info.xml
@@ -39,32 +39,34 @@
             android:paddingEnd="@dimen/call_banner_side_padding"
             android:paddingTop="@dimen/call_banner_primary_call_top_padding"
             android:paddingBottom="@dimen/call_banner_top_bottom_padding"
-            android:background="@color/incall_call_banner_background_color" >
+            android:background="@color/incall_call_banner_background_color">
 
             <!-- Name (or the phone number, if we don't have a name to display). -->
             <LinearLayout android:id="@+id/stateAndName"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:orientation="vertical" >
+                android:orientation="vertical"
+                android:layout_centerInParent="true"
+                android:animateLayoutChanges="true">
 
                 <TextView android:id="@+id/callStateLabel"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:textAppearance="?android:attr/textAppearanceLarge"
+                    android:textSize="@dimen/call_status_text_size"
                     android:singleLine="true"
-                    android:gravity="left"
+                    android:gravity="start"
                     android:ellipsize="end" />
 
-
-                <LinearLayout android:id="@+id/stateAndName"
+                <LinearLayout
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
-                    android:orientation="horizontal" >
+                    android:orientation="horizontal">
 
                     <TextView android:id="@+id/name"
-                        android:layout_width="wrap_content"
+                        android:layout_width="0dp"
                         android:layout_height="wrap_content"
-                        android:paddingEnd="@dimen/call_banner_name_number_right_padding"
+                        android:layout_weight="1"
                         android:fontFamily="sans-serif-light"
                         android:textAppearance="?android:attr/textAppearanceLarge"
                         android:textSize="@dimen/call_name_text_size"
@@ -72,45 +74,45 @@
 
                     <!-- Elapsed time indication for a call in progress. -->
                     <TextView android:id="@+id/elapsedTime"
-                        android:gravity="right"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
+                        android:layout_centerVertical="true"
                         android:textAppearance="?android:attr/textAppearanceMedium"
                         android:textColor="@color/incall_call_banner_text_color"
                         android:singleLine="true"
-                        android:visibility="invisible" />
+                        android:visibility="gone" />
 
                 </LinearLayout>
 
-            </LinearLayout>
+                <!-- Label (like "Mobile" or "Work", if present) and phone number, side by side -->
+                <LinearLayout android:id="@+id/labelAndNumber"
+                    android:layout_below="@id/stateAndName"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="horizontal">
 
-            <!-- Label (like "Mobile" or "Work", if present) and phone number, side by side -->
-            <LinearLayout android:id="@+id/labelAndNumber"
-                android:layout_below="@id/stateAndName"
-                android:layout_width="wrap_content"
-                android:layout_height="wrap_content"
-                android:paddingEnd="@dimen/call_banner_name_number_right_padding"
-                android:orientation="horizontal" >
+                    <TextView android:id="@+id/phoneNumber"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:textAppearance="?android:attr/textAppearanceSmall"
+                        android:textColor="@color/incall_call_banner_secondary_text_color"
+                        android:textSize="@dimen/call_label_text_size"
+                        android:singleLine="true"
+                        android:textDirection="ltr" />
 
-                <TextView android:id="@+id/phoneNumber"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:textAppearance="?android:attr/textAppearanceSmall"
-                    android:textColor="@color/incall_call_banner_secondary_text_color"
-                    android:textSize="@dimen/call_label_text_size"
-                    android:singleLine="true"
-                    android:textDirection="ltr" />
+                    <TextView android:id="@+id/label"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:textAppearance="?android:attr/textAppearanceSmall"
+                        android:textColor="@color/incall_call_banner_secondary_text_color"
+                        android:textSize="@dimen/call_label_text_size"
+                        android:singleLine="true"
+                        android:layout_marginStart="6dp" />
 
-                <TextView android:id="@+id/label"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:textAppearance="?android:attr/textAppearanceSmall"
-                    android:textColor="@color/incall_call_banner_secondary_text_color"
-                    android:textSize="@dimen/call_label_text_size"
-                    android:singleLine="true"
-                    android:layout_marginStart="6dp" />
+                </LinearLayout>
 
             </LinearLayout>
+
             <!-- Call type indication: a special label and/or branding
                  for certain kinds of calls (like "Internet call" for a SIP call.) -->
             <TextView android:id="@+id/callTypeLabel"
diff --git a/InCallUI/res/values/dimens.xml b/InCallUI/res/values/dimens.xml
index 64a40d9b3..c6b819d4c 100644
--- a/InCallUI/res/values/dimens.xml
+++ b/InCallUI/res/values/dimens.xml
@@ -31,30 +31,29 @@
     <!-- Padding at the right edges of the secondary call banner. -->
     <dimen name="secondary_call_banner_right_padding">100dp</dimen>
     <!-- Padding at the top and bottom edges of the "call banner". -->
-    <dimen name="call_banner_primary_call_top_padding">24dp</dimen>
+    <dimen name="call_banner_primary_call_top_padding">16dp</dimen>
     <dimen name="call_banner_top_bottom_padding">8dp</dimen>
 
     <!-- Padding at the top and bottom edges of the "provider information" -->
     <dimen name="provider_info_top_bottom_padding">8dp</dimen>
 
     <!-- Text size for the name in the call info. -->
+    <dimen name="call_status_text_size">22sp</dimen>
     <dimen name="call_name_text_size">36sp</dimen>
-    <!-- Text size for the call info label and number. -->
     <dimen name="call_label_text_size">18sp</dimen>
-
     <!-- Right padding for name and number fields in the call banner.
          This padding is used to ensure that ultra-long names or
          numbers won't overlap the elapsed time indication. -->
     <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">48dp</dimen>
+    <!-- Height and width of the in-call buttons. -->
+    <dimen name="in_call_button_dimension">48dp</dimen>
 
     <!-- Width of buttons in the extra button row. -->
     <dimen name="extra_row_button_width">56dp</dimen>
 
     <!-- Height of buttons in the extra button row. -->
-    <dimen name="extra_row_button_height">@dimen/in_call_button_height</dimen>
+    <dimen name="extra_row_button_height">@dimen/in_call_button_dimension</dimen>
 
     <dimen name="primary_call_translation_z">8dp</dimen>
 
@@ -66,8 +65,8 @@
          holding the phone, *before* moving it up to your face and having
          the prox sensor kick in.) -->
     <dimen name="button_cluster_horizontal_padding">20dp</dimen>
-    <dimen name="button_cluster_vertical_padding">4dp</dimen>
-    <dimen name="call_button_margin">4dp</dimen>
+    <dimen name="call_button_margin_vertical">4dp</dimen>
+    <dimen name="call_button_margin_horizontal">2dp</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 f77cb24df..c5b5d4722 100644
--- a/InCallUI/res/values/styles.xml
+++ b/InCallUI/res/values/styles.xml
@@ -52,10 +52,12 @@
 
     <!-- Buttons in the main "button row" of the in-call onscreen touch UI. -->
     <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:layout_width">@dimen/in_call_button_dimension</item>
+        <item name="android:layout_height">@dimen/in_call_button_dimension</item>
+        <item name="android:layout_marginTop">@dimen/call_button_margin_vertical</item>
+        <item name="android:layout_marginBottom">@dimen/call_button_margin_vertical</item>
+        <item name="android:layout_marginLeft">@dimen/call_button_margin_horizontal</item>
+        <item name="android:layout_marginRight">@dimen/call_button_margin_horizontal</item>
         <item name="android:background">?android:attr/selectableItemBackground</item>
     </style>
 
diff --git a/InCallUI/src/com/android/incallui/CallCardFragment.java b/InCallUI/src/com/android/incallui/CallCardFragment.java
index e08c6207f..ced9f48ed 100644
--- a/InCallUI/src/com/android/incallui/CallCardFragment.java
+++ b/InCallUI/src/com/android/incallui/CallCardFragment.java
@@ -21,6 +21,7 @@ import android.graphics.drawable.Drawable;
 import android.os.Bundle;
 import android.telephony.DisconnectCause;
 import android.text.TextUtils;
+import android.view.Gravity;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.View.OnClickListener;
@@ -250,7 +251,12 @@ public class CallCardFragment extends BaseFragment<CallCardPresenter, CallCardPr
         Log.v(this, "gateway " + gatewayLabel + gatewayNumber);
 
         // Update the call state label.
-        mCallStateLabel.setText(callStateLabel);
+        if (!TextUtils.isEmpty(callStateLabel)) {
+            mCallStateLabel.setText(callStateLabel);
+            mCallStateLabel.setVisibility(View.VISIBLE);
+        } else {
+            mCallStateLabel.setVisibility(View.GONE);
+        }
 
         if (Call.State.INCOMING == state) {
             setBluetoothOn(bluetoothOn);