Bag o' QC UX improvements
UX and I spent a couple days trying out different tweaks to QC.
This is the result.
Main Changes:
-landscape
-better blending, and interpolation of blended values
-different scrim animation length
-updated colors & dimensions
-scaling of title TextView during scroll
-EdgeEffect color is now dynamic
-Drop shadow size
Bug: 15725269
Change-Id: Ib992b41692704d3d932527cef715693ed7a7f4cc
diff --git a/res/layout-land/quickcontact_activity.xml b/res/layout-land/quickcontact_activity.xml
index 552f568..65fcd7d 100644
--- a/res/layout-land/quickcontact_activity.xml
+++ b/res/layout-land/quickcontact_activity.xml
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2011 The Android Open Source Project
+<!-- 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.
@@ -13,45 +13,29 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<LinearLayout
+<com.android.contacts.widget.MultiShrinkScroller
xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:ex="http://schemas.android.com/apk/res-auto"
- android:id="@android:id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
- android:padding="32dip"
- android:orientation="horizontal">
- <view
- class="com.android.contacts.common.widget.ProportionalLayout"
- android:layout_width="wrap_content"
- android:layout_height="match_parent"
- ex:ratio="1.0"
- ex:direction="heightToWidth">
- <FrameLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <ImageView
- android:id="@+id/photo"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:scaleType="centerCrop"
- android:contentDescription="@string/description_contact_photo" />
- <!-- Need to set a non null background on Toolbar in order for MenuItem
- ripples to be drawn on this view, instead of another-->
- <Toolbar
- android:layout_width="match_parent"
- android:layout_height="?android:attr/actionBarSize"
- android:background="#00000000"
- android:id="@+id/toolbar"/>
- </FrameLayout>
- </view>
- <com.android.contacts.quickcontact.ExpandingEntryCardView
- style="@style/ExpandingEntryCardStyle"
- android:id="@+id/communication_card"
- android:layout_marginTop="@dimen/communication_card_marginTop"
- android:visibility="gone" />
- <com.android.contacts.quickcontact.ExpandingEntryCardView
- style="@style/ExpandingEntryCardStyle"
- android:id="@+id/recent_card"
- android:visibility="gone" />
-</LinearLayout>
\ No newline at end of file
+ android:orientation="vertical"
+ android:id="@+id/multiscroller"
+ android:focusable="true"
+ android:focusableInTouchMode="true"
+ android:descendantFocusability="afterDescendants" >
+
+ <View
+ android:layout_width="match_parent"
+ android:layout_height="@dimen/quickcontact_starting_empty_height"
+ android:id="@+id/transparent_view" />
+
+ <LinearLayout
+ android:layout_width="match_parent"
+ android:layout_height="match_parent">
+
+ <include layout="@layout/quickcontact_header" />
+
+ <include layout="@layout/quickcontact_content" />
+
+ </LinearLayout>
+
+</com.android.contacts.widget.MultiShrinkScroller>
\ No newline at end of file
diff --git a/res/layout/expanding_entry_card_item.xml b/res/layout/expanding_entry_card_item.xml
index 890f2da..c038d1b 100644
--- a/res/layout/expanding_entry_card_item.xml
+++ b/res/layout/expanding_entry_card_item.xml
@@ -40,8 +40,7 @@
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/icon"
android:singleLine="true"
- android:textColor="@android:color/black"
- android:textStyle="bold" />
+ android:textColor="@android:color/black" />
<TextView
android:id="@+id/sub_header"
diff --git a/res/layout/quickcontact_activity.xml b/res/layout/quickcontact_activity.xml
index 13b8d9b..7b81ea2 100644
--- a/res/layout/quickcontact_activity.xml
+++ b/res/layout/quickcontact_activity.xml
@@ -29,54 +29,8 @@
android:layout_height="@dimen/quickcontact_starting_empty_height"
android:id="@+id/transparent_view" />
- <FrameLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@color/card_margin_color"
- android:id="@+id/toolbar_parent">
+ <include layout="@layout/quickcontact_header" />
- <ImageView
- android:id="@+id/photo"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:scaleType="centerCrop"
- android:contentDescription="@string/description_contact_photo" />
-
- <!-- Need to set a non null background on Toolbar in order for MenuItem
- ripples to be drawn on this view, instead of another-->
- <Toolbar
- android:layout_width="match_parent"
- android:layout_height="?android:attr/actionBarSize"
- android:background="#00000000"
- android:id="@+id/toolbar"/>
-
- </FrameLayout>
-
- <com.android.contacts.widget.TouchlessScrollView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:fillViewport="true"
- android:id="@+id/content_scroller"
- android:background="@color/card_margin_color">
-
- <!-- All the cards should be inserted into this LinearLayout -->
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- android:id="@+id/card_container">
- <com.android.contacts.quickcontact.ExpandingEntryCardView
- style="@style/ExpandingEntryCardStyle"
- android:id="@+id/communication_card"
- android:layout_marginTop="@dimen/communication_card_marginTop"
- android:visibility="gone" />
-
- <com.android.contacts.quickcontact.ExpandingEntryCardView
- style="@style/ExpandingEntryCardStyle"
- android:id="@+id/recent_card"
- android:visibility="gone" />
- </LinearLayout>
-
- </com.android.contacts.widget.TouchlessScrollView>
+ <include layout="@layout/quickcontact_content" />
</com.android.contacts.widget.MultiShrinkScroller>
\ No newline at end of file
diff --git a/res/layout/quickcontact_content.xml b/res/layout/quickcontact_content.xml
new file mode 100644
index 0000000..b5b2a83
--- /dev/null
+++ b/res/layout/quickcontact_content.xml
@@ -0,0 +1,42 @@
+<?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.
+-->
+<com.android.contacts.widget.TouchlessScrollView
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:fillViewport="true"
+ android:id="@+id/content_scroller"
+ android:background="@color/card_margin_color">
+
+ <!-- All the cards should be inserted into this LinearLayout -->
+ <LinearLayout
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:orientation="vertical"
+ android:id="@+id/card_container">
+ <com.android.contacts.quickcontact.ExpandingEntryCardView
+ style="@style/ExpandingEntryCardStyle"
+ android:id="@+id/communication_card"
+ android:layout_marginTop="@dimen/communication_card_marginTop"
+ android:visibility="gone" />
+
+ <com.android.contacts.quickcontact.ExpandingEntryCardView
+ style="@style/ExpandingEntryCardStyle"
+ android:id="@+id/recent_card"
+ android:visibility="gone" />
+ </LinearLayout>
+
+</com.android.contacts.widget.TouchlessScrollView>
\ No newline at end of file
diff --git a/res/layout/quickcontact_header.xml b/res/layout/quickcontact_header.xml
new file mode 100644
index 0000000..0d06917
--- /dev/null
+++ b/res/layout/quickcontact_header.xml
@@ -0,0 +1,49 @@
+<?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.
+-->
+<FrameLayout
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:background="@color/card_margin_color"
+ android:id="@+id/toolbar_parent">
+
+ <com.android.contacts.widget.QuickContactImageView
+ android:id="@+id/photo"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:scaleType="centerCrop"
+ android:contentDescription="@string/description_contact_photo" />
+
+ <!-- Need to set a non null background on Toolbar in order for MenuItem
+ ripples to be drawn on this view, instead of another-->
+ <Toolbar
+ android:layout_width="match_parent"
+ android:layout_height="?android:attr/actionBarSize"
+ android:background="#00000000"
+ android:id="@+id/toolbar"/>
+
+ <TextView
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:textColor="@color/actionbar_text_color"
+ android:maxLines="@integer/quickcontact_title_lines"
+ android:ellipsize="end"
+ android:layout_gravity="bottom"
+ android:textSize="@dimen/quickcontact_maximum_title_size"
+ android:id="@+id/large_title"/>
+
+</FrameLayout>
\ No newline at end of file
diff --git a/res/layout/quickcontact_title_placeholder.xml b/res/layout/quickcontact_title_placeholder.xml
new file mode 100644
index 0000000..31d83ff
--- /dev/null
+++ b/res/layout/quickcontact_title_placeholder.xml
@@ -0,0 +1,31 @@
+<?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.
+ -->
+<FrameLayout
+ xmlns:android="http://schemas.android.com/apk/res/android"
+ android:layout_width="wrap_content"
+ android:layout_height="match_parent" >
+
+ <!-- Marks the location and size of the Activity title -->
+ <TextView
+ android:id="@+id/placeholder_textview"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ style="@android:style/TextAppearance.Material.Widget.ActionBar.Title" />
+
+</FrameLayout>
+
+
diff --git a/res/values-land/bools.xml b/res/values-land/bools.xml
new file mode 100644
index 0000000..bd0650f
--- /dev/null
+++ b/res/values-land/bools.xml
@@ -0,0 +1,20 @@
+<?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.
+-->
+<resources>
+
+ <bool name="quickcontact_two_panel">true</bool>
+
+</resources>
diff --git a/res/values-land/integers.xml b/res/values-land/integers.xml
index 010a5b7..08e1fe3 100644
--- a/res/values-land/integers.xml
+++ b/res/values-land/integers.xml
@@ -18,4 +18,7 @@
<integer name="contact_tile_column_count_in_favorites">5</integer>
<integer name="contact_tile_column_count">4</integer>
+
+ <!-- Number of lines the QuickContact title can have -->
+ <integer name="quickcontact_title_lines">2</integer>
</resources>
diff --git a/res/values-land/vals.xml b/res/values-land/vals.xml
new file mode 100644
index 0000000..ebcae31
--- /dev/null
+++ b/res/values-land/vals.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright (C) 2011 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>
+ <!-- The ratio of width:height for the contact's photo -->
+ <item name="quickcontact_photo_ratio" type="vals" format="float">0.7</item>
+</resources>
diff --git a/res/values/bools.xml b/res/values/bools.xml
new file mode 100644
index 0000000..663845a
--- /dev/null
+++ b/res/values/bools.xml
@@ -0,0 +1,20 @@
+<?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.
+-->
+<resources>
+
+ <bool name="quickcontact_two_panel">false</bool>
+
+</resources>
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 962fe97..89f39b8 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -39,16 +39,16 @@
<color name="contacts_accent_color">#00acc1</color>
<!-- Color of the separator between entries in an ExpandingEntryCardView -->
- <color name="expanding_entry_card_item_separator_color">#eeeeee</color>
+ <color name="expanding_entry_card_item_separator_color">#e4e4e4</color>
<!-- Color of the text on an ExpandingEntryCard button -->
<color name="expanding_entry_card_button_text_color">@android:color/black</color>
<!-- Background color for an ExpandingEntryCard -->
- <color name="expanding_entry_card_background_color">#f7f8f9</color>
+ <color name="expanding_entry_card_background_color">#ffffff</color>
<!-- Color of the margin for cards -->
- <color name="card_margin_color">#ffbbbbbb</color>
+ <color name="card_margin_color">#f4f4f4</color>
<color name="call_arrow_green">#2aad6f</color>
<color name="call_arrow_red">#ff2e58</color>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 99bc345..9d8ba70 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -18,8 +18,8 @@
<!-- Initial height of transparent space above QuickContacts -->
<dimen name="quickcontact_starting_empty_height">150dp</dimen>
- <!-- Initial height of QuickContact's header/avatar-photo -->
- <dimen name="quickcontact_starting_header_height">200dp</dimen>
+ <!-- Initial size of QuickContact's title size -->
+ <dimen name="quickcontact_maximum_title_size">36dp</dimen>
<!-- Top padding of the entire contact editor -->
<dimen name="editor_padding_top">0dip</dimen>
@@ -147,9 +147,9 @@
<dimen name="expanding_entry_card_marginBottom">8dp</dimen>
<!-- Elevation of an ExpandingEntryCard, for the sake of shadow casting -->
- <dimen name="expanding_entry_card_elevation">2dp</dimen>
+ <dimen name="expanding_entry_card_elevation">1dp</dimen>
<!-- Elevation of the QuickContact's Toolbar, for the sake of shadow casting -->
- <dimen name="quick_contact_toolbar_elevation">6dp</dimen>
+ <dimen name="quick_contact_toolbar_elevation">4.5dp</dimen>
<!-- Top margin for the communication card, used to add space from header. -->
<dimen name="communication_card_marginTop">8dp</dimen>
diff --git a/res/values/integers.xml b/res/values/integers.xml
index a6b43d7..ff34d11 100644
--- a/res/values/integers.xml
+++ b/res/values/integers.xml
@@ -20,4 +20,7 @@
<!-- Determines the number of columns in a ContactTileRow -->
<integer name="contact_tile_column_count">2</integer>
+
+ <!-- Number of lines the QuickContact title can have -->
+ <integer name="quickcontact_title_lines">1</integer>
</resources>