Modify contacts empty view: no accounts screen to new spec
Spec and doc: go/empty-view, under "Empty no account view".
Screenshots of new empty view on N5:
https://drive.google.com/open?id=0BxaQ3Ze9jz_ceXlIVWNXZ1k0aGc
https://drive.google.com/open?id=0BxaQ3Ze9jz_cUC0zdVM5Z0dCajQ
Bug 30481628
Change-Id: I35f120ac177314cbedd17baeac13a5a8c33b0c8c
diff --git a/res/drawable-hdpi/contacts_no_account_empty.png b/res/drawable-hdpi/contacts_no_account_empty.png
new file mode 100644
index 0000000..b957bd4
--- /dev/null
+++ b/res/drawable-hdpi/contacts_no_account_empty.png
Binary files differ
diff --git a/res/drawable-hdpi/ic_person_black_128dp.png b/res/drawable-hdpi/ic_person_black_128dp.png
deleted file mode 100644
index 93b7886..0000000
--- a/res/drawable-hdpi/ic_person_black_128dp.png
+++ /dev/null
Binary files differ
diff --git a/res/drawable-mdpi/contacts_no_account_empty.png b/res/drawable-mdpi/contacts_no_account_empty.png
new file mode 100644
index 0000000..84334a9
--- /dev/null
+++ b/res/drawable-mdpi/contacts_no_account_empty.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_person_black_128dp.png b/res/drawable-mdpi/ic_person_black_128dp.png
deleted file mode 100644
index 4da7118..0000000
--- a/res/drawable-mdpi/ic_person_black_128dp.png
+++ /dev/null
Binary files differ
diff --git a/res/drawable-xhdpi/contacts_no_account_empty.png b/res/drawable-xhdpi/contacts_no_account_empty.png
new file mode 100644
index 0000000..188ebdf
--- /dev/null
+++ b/res/drawable-xhdpi/contacts_no_account_empty.png
Binary files differ
diff --git a/res/drawable-xhdpi/ic_person_black_128dp.png b/res/drawable-xhdpi/ic_person_black_128dp.png
deleted file mode 100644
index 04445b6..0000000
--- a/res/drawable-xhdpi/ic_person_black_128dp.png
+++ /dev/null
Binary files differ
diff --git a/res/drawable-xxhdpi/contacts_no_account_empty.png b/res/drawable-xxhdpi/contacts_no_account_empty.png
new file mode 100644
index 0000000..b3286e1
--- /dev/null
+++ b/res/drawable-xxhdpi/contacts_no_account_empty.png
Binary files differ
diff --git a/res/drawable-xxhdpi/ic_person_black_128dp.png b/res/drawable-xxhdpi/ic_person_black_128dp.png
deleted file mode 100644
index 3c40711..0000000
--- a/res/drawable-xxhdpi/ic_person_black_128dp.png
+++ /dev/null
Binary files differ
diff --git a/res/drawable-xxxhdpi/contacts_no_account_empty.png b/res/drawable-xxxhdpi/contacts_no_account_empty.png
new file mode 100644
index 0000000..3d877a9
--- /dev/null
+++ b/res/drawable-xxxhdpi/contacts_no_account_empty.png
Binary files differ
diff --git a/res/drawable-xxxhdpi/ic_person_black_128dp.png b/res/drawable-xxxhdpi/ic_person_black_128dp.png
deleted file mode 100644
index 1d94d5f..0000000
--- a/res/drawable-xxxhdpi/ic_person_black_128dp.png
+++ /dev/null
Binary files differ
diff --git a/res/layout-land/contacts_unavailable_fragment_content.xml b/res/layout-land/contacts_unavailable_fragment_content.xml
index 3d5a0b0..234d7c4 100644
--- a/res/layout-land/contacts_unavailable_fragment_content.xml
+++ b/res/layout-land/contacts_unavailable_fragment_content.xml
@@ -16,34 +16,31 @@
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="horizontal"
+ android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<LinearLayout
android:orientation="vertical"
- android:layout_marginLeft="40dp"
- android:layout_marginRight="40dp"
android:layout_width="wrap_content"
- android:layout_height="match_parent">
+ android:layout_height="wrap_content">
+
<ImageView
android:id="@+id/empty_image"
- android:layout_height="128dp"
- android:layout_width="128dp"
- android:layout_marginTop="60dp"
- android:alpha="0.38"
- android:gravity="center_horizontal"/>
+ android:layout_width="@dimen/contacts_no_account_empty_image_width"
+ android:layout_height="wrap_content"
+ android:scaleType="centerInside"
+ android:adjustViewBounds="true"
+ android:src="@drawable/contacts_no_account_empty"/>
<TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
- android:layout_marginTop="4dp"
- android:textAppearance="?android:attr/textAppearanceMedium"
- android:textColor="?android:attr/textColorSecondary"
+ android:layout_marginTop="@dimen/contacts_no_account_empty_text_padding_top"
android:layout_gravity="center_horizontal"
- android:textIsSelectable="false"/>
+ style="@style/EmptyStateTextStyle"/>
<ProgressBar
android:id="@+id/progress"
@@ -55,37 +52,26 @@
android:layout_marginTop="12dp" />
</LinearLayout>
- <!-- This buttons_container is landscape exclusive because we want the two buttons to be of
- the same width (wrapping the longer content) and the layout width to be 208dp. -->
<LinearLayout
android:id="@+id/buttons_container"
- android:orientation="vertical"
- android:layout_width="208dp"
- android:layout_height="match_parent">
- <LinearLayout
- android:orientation="vertical"
+ android:orientation="horizontal"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:gravity="center_horizontal">
+
+ <Button
+ android:id="@+id/add_account_button"
android:layout_width="wrap_content"
- android:layout_height="match_parent"
- android:layout_gravity="center_horizontal">
+ android:layout_height="wrap_content"
+ android:layout_marginEnd="@dimen/contacts_no_account_buttons_margin"
+ android:text="@string/contacts_unavailable_add_account"
+ style="@style/NoAccountViewButtonStyle"/>
- <Button
- style="@style/ContactsUnavailableButtonStyle"
- android:id="@+id/add_account_button"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="85dp"
- android:layout_marginBottom="10dp"
- android:textColor="@android:color/white"
- android:text="@string/contacts_unavailable_add_account" />
-
- <Button
- style="@style/ContactsUnavailableButtonStyle"
- android:id="@+id/import_contacts_button"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:textColor="@android:color/white"
- android:text="@string/contacts_unavailable_import_contacts" />
- </LinearLayout>
+ <Button
+ android:id="@+id/import_contacts_button"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:text="@string/contacts_unavailable_import_contacts"
+ style="@style/NoAccountViewButtonStyle"/>
</LinearLayout>
-
</LinearLayout>
diff --git a/res/layout/contacts_unavailable_fragment.xml b/res/layout/contacts_unavailable_fragment.xml
index 300921f..01a8787 100644
--- a/res/layout/contacts_unavailable_fragment.xml
+++ b/res/layout/contacts_unavailable_fragment.xml
@@ -24,7 +24,7 @@
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
- android:background="@color/background_primary">
+ android:background="@color/empty_state_background">
<include layout="@layout/contacts_unavailable_fragment_content"/>
</ScrollView>
</FrameLayout>
diff --git a/res/layout/contacts_unavailable_fragment_content.xml b/res/layout/contacts_unavailable_fragment_content.xml
index 765e453..860490d 100644
--- a/res/layout/contacts_unavailable_fragment_content.xml
+++ b/res/layout/contacts_unavailable_fragment_content.xml
@@ -23,11 +23,11 @@
<ImageView
android:id="@+id/empty_image"
- android:layout_height="128dp"
- android:layout_width="128dp"
- android:layout_marginTop="56dp"
- android:alpha="0.38"
- android:gravity="center_horizontal" />
+ android:layout_width="@dimen/contacts_no_account_empty_image_width"
+ android:layout_height="wrap_content"
+ android:scaleType="centerInside"
+ android:adjustViewBounds="true"
+ android:src="@drawable/contacts_no_account_empty"/>
<LinearLayout
android:orientation="vertical"
@@ -38,9 +38,8 @@
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
- android:layout_marginTop="4dp"
- android:textAppearance="?android:attr/textAppearanceMedium"
- android:textColor="?android:attr/textColorSecondary"/>
+ android:layout_marginTop="@dimen/contacts_no_account_empty_text_padding_top"
+ style="@style/EmptyStateTextStyle"/>
<ProgressBar
android:id="@+id/progress"
@@ -58,21 +57,18 @@
android:layout_height="wrap_content">
<Button
- style="@style/ContactsUnavailableButtonStyle"
android:id="@+id/add_account_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:layout_marginTop="50dp"
- android:layout_marginBottom="10dp"
- android:textColor="@android:color/white"
- android:text="@string/contacts_unavailable_add_account" />
+ android:layout_marginTop="@dimen/contacts_no_account_empty_button_padding_top"
+ android:text="@string/contacts_unavailable_add_account"
+ style="@style/NoAccountViewButtonStyle"/>
<Button
- style="@style/ContactsUnavailableButtonStyle"
android:id="@+id/import_contacts_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:textColor="@android:color/white"
- android:text="@string/contacts_unavailable_import_contacts" />
+ android:text="@string/contacts_unavailable_import_contacts"
+ style="@style/NoAccountViewButtonStyle"/>
</LinearLayout>
</LinearLayout>
diff --git a/res/values-land/dimens.xml b/res/values-land/dimens.xml
index c64d0d3..5e2744a 100644
--- a/res/values-land/dimens.xml
+++ b/res/values-land/dimens.xml
@@ -19,6 +19,9 @@
<dimen name="dialpad_digits_margin_bottom">50dip</dimen>
<dimen name="editor_type_label_width">120dip</dimen>
+ <!-- Top margin of the text message when provider status is busy -->
+ <dimen name="update_contact_list_top_margin">120dp</dimen>
+
<!-- Top padding for the image for empty group view-->
<dimen name="empty_group_view_image_padding_top">0dp</dimen>
@@ -36,4 +39,13 @@
<!-- Extra margin above image in empty account view -->
<dimen name="empty_account_view_image_offset">0dp</dimen>
+
+ <!-- Margin offset b/w the image top and app bar bottom for no account empty view -->
+ <dimen name="contacts_no_account_empty_image_offset">151dp</dimen>
+
+ <!-- Width for the image for contacts no account empty view -->
+ <dimen name="contacts_no_account_empty_image_width">150dp</dimen>
+
+ <!-- Top padding for the text for no account empty view -->
+ <dimen name="contacts_no_account_empty_text_padding_top">16dp</dimen>
</resources>
diff --git a/res/values-sw600dp-land/dimens.xml b/res/values-sw600dp-land/dimens.xml
index 7109cf6..b0cfb5a 100644
--- a/res/values-sw600dp-land/dimens.xml
+++ b/res/values-sw600dp-land/dimens.xml
@@ -27,4 +27,10 @@
<!-- Gap b/w image view and top of the screen in empty main view -->
<dimen name="empty_home_view_image_offset">175dp</dimen>
+
+ <!-- Width for the image for contacts no account empty view -->
+ <dimen name="contacts_no_account_empty_image_width">180dp</dimen>
+
+ <!-- Margin offset b/w the image top and app bar bottom for no account empty view -->
+ <dimen name="contacts_no_account_empty_image_offset">175dp</dimen>
</resources>
diff --git a/res/values-sw600dp/dimens.xml b/res/values-sw600dp/dimens.xml
index 1b8f32c..6e4f808 100644
--- a/res/values-sw600dp/dimens.xml
+++ b/res/values-sw600dp/dimens.xml
@@ -56,4 +56,7 @@
<!-- Gap b/w image view and top of the screen in empty main view -->
<dimen name="empty_home_view_image_offset">218dp</dimen>
+
+ <!-- Margin offset b/w the image top and app bar bottom for no account empty view -->
+ <dimen name="contacts_no_account_empty_image_offset">238dp</dimen>
</resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 4777b1b..a73e449 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -248,7 +248,8 @@
We have to be more careful in landscape. -->
<dimen name="people_activity_landscape_tabs_text_size">8dp</dimen>
- <dimen name="update_contact_list_top_margin">120dp</dimen>
+ <!-- Top margin of the text message when provider status is busy -->
+ <dimen name="update_contact_list_top_margin">188dp</dimen>
<dimen name="expanding_entry_card_item_icon_height">24dp</dimen>
<dimen name="expanding_entry_card_item_icon_width">24dp</dimen>
@@ -305,4 +306,19 @@
<!-- Extra margin above image in empty account view -->
<dimen name="empty_account_view_image_offset">30dp</dimen>
+
+ <!-- Margin offset b/w the image top and app bar bottom for no account empty view -->
+ <dimen name="contacts_no_account_empty_image_offset">230dp</dimen>
+
+ <!-- Width for the image for contacts no account empty view -->
+ <dimen name="contacts_no_account_empty_image_width">180dp</dimen>
+
+ <!-- Top padding for the text for no account empty view -->
+ <dimen name="contacts_no_account_empty_text_padding_top">32dp</dimen>
+
+ <!-- Top padding for add account button for no account empty view -->
+ <dimen name="contacts_no_account_empty_button_padding_top">16dp</dimen>
+
+ <!-- Margin b/w add account button and import contacts button for no account empty view -->
+ <dimen name="contacts_no_account_buttons_margin">8dp</dimen>
</resources>
diff --git a/res/values/integers.xml b/res/values/integers.xml
index 9183af6..60034e5 100644
--- a/res/values/integers.xml
+++ b/res/values/integers.xml
@@ -33,4 +33,7 @@
<!-- Top margin ratio for the image for empty account view -->
<integer name="empty_account_view_image_margin_divisor">4</integer>
+
+ <!-- Top margin ratio for the image for empty contacts view-->
+ <integer name="contacts_no_account_empty_image_margin_divisor">2</integer>
</resources>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index d982bd7..b936583 100644
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -304,7 +304,7 @@
<string name="removePhoto">Remove photo</string>
<!-- The text displayed when the contacts list is empty while displaying all contacts [CHAR LIMIT=NONE] -->
- <string name="noContacts">No contacts</string>
+ <string name="noContacts">Your contacts list is empty</string>
<!-- The text displayed when the labels list is empty while displaying all labels [CHAR LIMIT=30] -->
<string name="noGroups">No labels.</string>
@@ -630,7 +630,7 @@
<!-- Button shown on the main contacts screen when there are no contacts on the device.
Initiates a contact import dialog [CHAR LIMIT=128] -->
- <string name="contacts_unavailable_import_contacts">Import contacts</string>
+ <string name="contacts_unavailable_import_contacts">Import</string>
<!-- Title of the dialog that allows creation of a contact label [CHAR LIMIT=50] -->
<string name="create_group_dialog_title">Create new label</string>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index 709d002..9c6ace4 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -411,7 +411,7 @@
<item name="android:ellipsize">end</item>
</style>
- <!-- Text style for empty states. -->
+ <!-- Text style for empty states (no account view, empty label). -->
<style name="EmptyStateTextStyle">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#000000</item>
@@ -419,6 +419,14 @@
<item name="android:fontFamily">sans-serif</item>
</style>
+ <!-- Button style for main contacts no account empty view. -->
+ <style name="NoAccountViewButtonStyle" parent="@style/Widget.AppCompat.Button.Borderless">
+ <item name="android:textSize">14sp</item>
+ <item name="android:textColor">#0288d1</item>
+ <item name="android:fontFamily">sans-serif-medium</item>
+ <item name="android:textAllCaps">true</item>
+ </style>
+
<!-- Add contacts button style for empty states. -->
<style name="AddContactsButtonStyle" parent="@style/Widget.AppCompat.Button.Borderless">
<item name="android:textSize">16sp</item>
diff --git a/src/com/android/contacts/list/ContactsUnavailableFragment.java b/src/com/android/contacts/list/ContactsUnavailableFragment.java
index 99a5b7e..1b122cc 100644
--- a/src/com/android/contacts/list/ContactsUnavailableFragment.java
+++ b/src/com/android/contacts/list/ContactsUnavailableFragment.java
@@ -28,6 +28,7 @@
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
+import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
@@ -66,6 +67,17 @@
mView = inflater.inflate(R.layout.contacts_unavailable_fragment, null);
mImageView = (ImageView) mView.findViewById(R.id.empty_image);
+ final LinearLayout.LayoutParams layoutParams =
+ (LinearLayout.LayoutParams) mImageView.getLayoutParams();
+ final int screenHeight = getResources().getDisplayMetrics().heightPixels;
+ final int topMargin =
+ screenHeight / getResources()
+ .getInteger(R.integer.contacts_no_account_empty_image_margin_divisor)
+ - getResources()
+ .getDimensionPixelSize(R.dimen.contacts_no_account_empty_image_offset);
+ layoutParams.setMargins(0, topMargin, 0, 0);
+ layoutParams.gravity = Gravity.CENTER_HORIZONTAL;
+ mImageView.setLayoutParams(layoutParams);
mMessageView = (TextView) mView.findViewById(R.id.message);
mAddAccountButton = (Button) mView.findViewById(R.id.add_account_button);
@@ -127,20 +139,17 @@
*/
private void updateViewsForBusyStatus(int resId) {
mMessageView.setText(resId);
- mMessageView.setGravity(Gravity.CENTER_HORIZONTAL);
mMessageView.setVisibility(View.VISIBLE);
+ mImageView.setVisibility(View.GONE);
updateButtonVisibilty(View.GONE);
mProgress.setVisibility(View.VISIBLE);
- if (getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE) {
- final ViewGroup.MarginLayoutParams lp =
- (ViewGroup.MarginLayoutParams) mMessageView.getLayoutParams();
- final int marginTop =
- (int) getResources().getDimension(R.dimen.update_contact_list_top_margin);
- lp.setMargins(0, marginTop, 0, 0);
- mImageView.setVisibility(View.GONE);
- } else {
- mImageView.setVisibility(View.INVISIBLE);
- }
+
+ final ViewGroup.MarginLayoutParams layoutParams =
+ (ViewGroup.MarginLayoutParams) mMessageView.getLayoutParams();
+ final int marginTop =
+ (int) getResources().getDimension(R.dimen.update_contact_list_top_margin);
+ layoutParams.setMargins(0, marginTop, 0, 0);
+ mMessageView.setGravity(Gravity.CENTER_HORIZONTAL);
}
@Override
@@ -173,7 +182,6 @@
mMessageView.setGravity(Gravity.CENTER_HORIZONTAL);
mMessageView.setVisibility(View.VISIBLE);
if (callerTab == TabState.ALL) {
- mImageView.setImageResource(R.drawable.ic_person_black_128dp);
updateButtonVisibilty(View.VISIBLE);
}
} else {
