Emergency shortcut button UI fine tune
- Change the layout parameter to match UI guideline.
- Add devider for shortcut buttons.
Test: Manually
Bug: 80406570
Change-Id: Id681a59206e6f9ea6a45691fa017d822a4267317
Merged-In: Id681a59206e6f9ea6a45691fa017d822a4267317
diff --git a/res/drawable/btn_emergency_shortcuts.xml b/res/drawable/btn_emergency_shortcuts.xml
index 8198a57..063a824 100644
--- a/res/drawable/btn_emergency_shortcuts.xml
+++ b/res/drawable/btn_emergency_shortcuts.xml
@@ -15,6 +15,5 @@
-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
- <solid android:color="?attr/emergencyButtonBackgroundColor"/>
- <corners android:radius="10dp"/>
+ <corners android:radius="8dp"/>
</shape>
\ No newline at end of file
diff --git a/res/drawable/emergency_shortcuts_divider.xml b/res/drawable/emergency_shortcuts_divider.xml
new file mode 100644
index 0000000..988ffc5
--- /dev/null
+++ b/res/drawable/emergency_shortcuts_divider.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2018 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="rectangle">
+ <size android:height="1px"/>
+ <solid android:color="#33FFFFFF"/>
+</shape>
diff --git a/res/layout/emergency_shortcut_button.xml b/res/layout/emergency_shortcut_button.xml
index 5e30d4e5..5dc59af 100644
--- a/res/layout/emergency_shortcut_button.xml
+++ b/res/layout/emergency_shortcut_button.xml
@@ -15,60 +15,65 @@
-->
<com.android.phone.EmergencyShortcutButton
xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_height="64dp"
+ android:layout_height="@dimen/emergency_shortcut_button_height"
android:layout_width="match_parent">
<!-- Normal emergency call button view -->
<FrameLayout
android:id="@+id/emergency_call_number_info_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
+ android:background="@color/emergency_shortcut_button_background_color"
android:focusable="true"
android:clickable="true">
<LinearLayout
- android:layout_height="wrap_content"
+ android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical|start"
- android:gravity="center_vertical"
android:orientation="horizontal">
<FrameLayout
- android:layout_height="40dp"
- android:layout_width="40dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
+ android:layout_height="@dimen/phone_number_type_circle_image_height"
+ android:layout_width="@dimen/phone_number_type_circle_image_width"
+ android:layout_gravity="center_vertical"
+ android:layout_marginHorizontal="@dimen/emergency_dialer_image_margin_horizontal"
android:background="@drawable/phone_type_icon_background">
<ImageView
android:id="@+id/phone_type_icon"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
+ android:layout_width="@dimen/phone_number_type_image_height"
+ android:layout_height="@dimen/phone_number_type_image_width"
android:layout_gravity="center"/>
</FrameLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:gravity="center_vertical|start"
+ android:layout_gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="@+id/phone_number"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:autoSizeTextType="uniform"
- android:maxLines="1"
- android:textStyle="bold"
- android:textAppearance="?android:attr/textAppearanceLarge"/>
+ android:includeFontPadding="false"
+ android:textAppearance="@style/HeadlineTextAppearance"/>
<TextView
android:id="@+id/phone_number_description"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:autoSizeTextType="uniform"
- android:maxLines="1"/>
+ android:includeFontPadding="false"
+ android:paddingTop="9dp"
+ android:alpha="0.8"
+ android:textAppearance="@style/SubtitleTextAppearance"/>
</LinearLayout>
</LinearLayout>
- <ImageView
- android:id="@+id/microphone_icon"
+ <FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:layout_gravity="center_vertical|end"
- android:src="@drawable/fab_ic_call"/>
+ android:layout_marginHorizontal="@dimen/emergency_dialer_image_margin_horizontal"
+ android:layout_gravity="center_vertical|end">
+ <ImageView
+ android:id="@+id/microphone_icon"
+ android:layout_height="@dimen/phone_icon_height"
+ android:layout_width="@dimen/phone_icon_width"
+ android:src="@drawable/ic_emergency_callback_mode"/>
+ </FrameLayout>
</FrameLayout>
<!-- "Tap again to call" view -->
@@ -81,42 +86,44 @@
android:clickable="true"
android:visibility="invisible">
<LinearLayout
- android:layout_height="wrap_content"
+ android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="center_vertical|start"
android:gravity="center_vertical"
android:orientation="horizontal">
<FrameLayout
- android:layout_height="40dp"
- android:layout_width="40dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
- android:background="@drawable/phone_type_icon_background">
+ android:layout_height="@dimen/phone_number_type_circle_image_height"
+ android:layout_width="@dimen/phone_number_type_circle_image_width"
+ android:layout_marginHorizontal="@dimen/emergency_dialer_image_margin_horizontal"
+ android:background="@drawable/phone_type_icon_background"
+ android:backgroundTint="@android:color/white">
<ImageView
android:id="@+id/confirmed_phone_type_icon"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"/>
+ android:layout_width="@dimen/phone_number_type_image_height"
+ android:layout_height="@dimen/phone_number_type_image_width"
+ android:layout_gravity="center"
+ android:tint="@color/emergency_shortcut_confirm_button_background_color"/>
</FrameLayout>
<FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:gravity="center_vertical|start"
- android:orientation="vertical">
+ android:gravity="center_vertical">
<TextView
android:id="@+id/phone_call_hint"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:autoSizeTextType="uniform"
- android:maxLines="1"
- android:textColor="@android:color/white"
- android:textStyle="italic|bold"/>
+ android:textAppearance="@style/ShortcutsHintTextAppearance"/>
</FrameLayout>
</LinearLayout>
- <ImageView
+ <FrameLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:layout_gravity="center_vertical|end"
- android:src="@drawable/fab_ic_call"/>
+ android:layout_marginHorizontal="@dimen/emergency_dialer_image_margin_horizontal"
+ android:layout_gravity="center_vertical|end">
+ <ImageView
+ android:layout_height="@dimen/phone_icon_height"
+ android:layout_width="@dimen/phone_icon_width"
+ android:src="@drawable/ic_emergency_callback_mode"/>
+ </FrameLayout>
</FrameLayout>
</com.android.phone.EmergencyShortcutButton>
\ No newline at end of file
diff --git a/res/layout/emergency_shortcut_buttons_group.xml b/res/layout/emergency_shortcut_buttons_group.xml
index 915e5bb..86c521d 100644
--- a/res/layout/emergency_shortcut_buttons_group.xml
+++ b/res/layout/emergency_shortcut_buttons_group.xml
@@ -18,21 +18,26 @@
android:id="@+id/emergency_shortcut_buttons_group"
android:layout_height="wrap_content"
android:layout_width="match_parent"
- android:layout_marginHorizontal="@dimen/emergency_shortcut_button_margin_horizontal"
- android:layout_marginTop="58dp"
+ android:layout_marginTop="@dimen/emergency_shortcuts_group_margin_top"
android:orientation="vertical">
<FrameLayout
- android:layout_height="wrap_content"
+ android:id="@+id/emergency_number_title_group"
+ android:layout_height="@dimen/emergency_number_title_height"
android:layout_width="match_parent"
- android:paddingBottom="12dp">
- <TextView
- android:id="@+id/emergency_number_title"
+ android:paddingHorizontal="@dimen/emergency_number_title_group_padding_horizontal">
+ <FrameLayout
+ android:id="@+id/emergency_number_title_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:layout_gravity="center_vertical|start"
- android:textStyle="bold"
- android:maxLines="1"
- android:text="@string/single_emergency_number_title"/>
+ android:layout_gravity="center_vertical|start">
+ <TextView
+ android:id="@+id/emergency_number_title"
+ android:layout_height="wrap_content"
+ android:layout_width="wrap_content"
+ android:layout_gravity="center"
+ android:textAppearance="@style/SubtitleTextAppearance"
+ android:text="@string/single_emergency_number_title"/>
+ </FrameLayout>
<LinearLayout
android:id="@+id/location_info"
android:layout_height="wrap_content"
@@ -42,23 +47,26 @@
android:orientation="horizontal">
<ImageView
android:id="@+id/location_icon"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
+ android:layout_width="@dimen/location_image_width"
+ android:layout_height="@dimen/location_image_height"
android:src="@drawable/ic_location_on_white_18"/>
<TextView
android:id="@+id/location_text"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
- android:maxLines="1"
- android:textStyle="italic"/>
+ android:paddingStart="4dp"
+ android:alpha="0.7"
+ android:textAppearance="@style/SubtitleTextAppearance"/>
</LinearLayout>
</FrameLayout>
<LinearLayout
android:id="@+id/emergency_shortcut_buttons_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
- android:gravity="center"
+ android:layout_marginHorizontal="@dimen/emergency_shortcut_buttons_margin_horizontal"
android:orientation="vertical"
+ android:divider="@drawable/emergency_shortcuts_divider"
+ android:showDividers="middle"
android:background="@drawable/btn_emergency_shortcuts">
</LinearLayout>
</LinearLayout>
\ No newline at end of file
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 98ffff7..7136819 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -54,5 +54,6 @@
<color name="dialer_dialpad_touch_tint">#330288d1</color>
<color name="floating_action_button_touch_tint">#80ffffff</color>
+ <color name="emergency_shortcut_button_background_color">#1FFFFFFF</color>
<color name="emergency_shortcut_confirm_button_background_color">#E25142</color>
</resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index f590950..2cb4e7a 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -121,7 +121,13 @@
<dimen name="emergency_dialer_dialpad_button_margin">16dp</dimen>
<!-- Horizontal margin for button of emergency shortcut. -->
- <dimen name="emergency_shortcut_button_margin_horizontal">16dp</dimen>
+ <dimen name="emergency_shortcut_buttons_margin_horizontal">16dp</dimen>
+
+ <!-- Margin top of emergency shortcuts group -->
+ <dimen name="emergency_shortcuts_group_margin_top">48dp</dimen>
+
+ <!-- Horizontal padding for group of emergency number title-->
+ <dimen name="emergency_number_title_group_padding_horizontal">16dp</dimen>
<!-- Height and top margin for the emergency information button. -->
<dimen name="emergency_info_button_height">72dp</dimen>
@@ -139,4 +145,26 @@
<dimen name="dialpad_button_height">56dp</dimen>
<dimen name="dialpad_button_width">56dp</dimen>
+ <!-- The height for title of emergency number and location info. -->
+ <dimen name="emergency_number_title_height">48dp</dimen>
+
+ <!-- The height and width for the image of location info.-->
+ <dimen name="location_image_height">15dp</dimen>
+ <dimen name="location_image_width">15dp</dimen>
+
+ <!-- The height for button of emergency shortcut. -->
+ <dimen name="emergency_shortcut_button_height">80dp</dimen>
+
+ <!-- The height and width for the circle image of phone number type.-->
+ <dimen name="phone_number_type_circle_image_height">40dp</dimen>
+ <dimen name="phone_number_type_circle_image_width">40dp</dimen>
+
+ <!-- The height and width for the image of phone number type.-->
+ <dimen name="phone_number_type_image_height">24dp</dimen>
+ <dimen name="phone_number_type_image_width">24dp</dimen>
+
+ <!-- The height and width of phone icon.-->
+ <dimen name="phone_icon_height">24dp</dimen>
+ <dimen name="phone_icon_width">24dp</dimen>
+
</resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 64b8c29..a0a814c 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -324,4 +324,8 @@
<style name="SubtitleTextAppearance" parent="@style/HeadlineTextAppearance">
<item name="android:textSize">14sp</item>
</style>
+
+ <style name="ShortcutsHintTextAppearance" parent="@style/HeadlineTextAppearance">
+ <item name="android:textSize">16sp</item>
+ </style>
</resources>