Photo Picker Design Tweaks
Removes the camera button in the top right corner and uses two buttons to take a photo and
select a photo.
Bug: 24988706
Screenshots:
https://drive.google.com/a/google.com/folderview?id=0BwSNbQ_IWQd2RWpldXJEOFhkMW8&usp=sharing
Change-Id: I579016ad0bcfcb7a2b5407717b59ed1539f1eecc
diff --git a/res/drawable-hdpi/ic_check_circle_googblue_drawable_24dp.png b/res/drawable-hdpi/ic_check_circle_googblue_drawable_24dp.png
index 24d308f..da6561d 100644
--- a/res/drawable-hdpi/ic_check_circle_googblue_drawable_24dp.png
+++ b/res/drawable-hdpi/ic_check_circle_googblue_drawable_24dp.png
Binary files differ
diff --git a/res/drawable-hdpi/ic_photos_white_24.png b/res/drawable-hdpi/ic_photos_white_24.png
new file mode 100644
index 0000000..a5180a1
--- /dev/null
+++ b/res/drawable-hdpi/ic_photos_white_24.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_check_circle_googblue_drawable24dp.png b/res/drawable-mdpi/ic_check_circle_googblue_drawable24dp.png
deleted file mode 100644
index cea7967..0000000
--- a/res/drawable-mdpi/ic_check_circle_googblue_drawable24dp.png
+++ /dev/null
Binary files differ
diff --git a/res/drawable-mdpi/ic_check_circle_googblue_drawable_24dp.png b/res/drawable-mdpi/ic_check_circle_googblue_drawable_24dp.png
new file mode 100644
index 0000000..efa2fdf
--- /dev/null
+++ b/res/drawable-mdpi/ic_check_circle_googblue_drawable_24dp.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_photos_white_24.png b/res/drawable-mdpi/ic_photos_white_24.png
new file mode 100644
index 0000000..e0e5854
--- /dev/null
+++ b/res/drawable-mdpi/ic_photos_white_24.png
Binary files differ
diff --git a/res/drawable-xhdpi/ic_check_circle_googblue_drawable_24dp.png b/res/drawable-xhdpi/ic_check_circle_googblue_drawable_24dp.png
index 5cfcaf5..70a22c9 100644
--- a/res/drawable-xhdpi/ic_check_circle_googblue_drawable_24dp.png
+++ b/res/drawable-xhdpi/ic_check_circle_googblue_drawable_24dp.png
Binary files differ
diff --git a/res/drawable-xhdpi/ic_photos_white_24.png b/res/drawable-xhdpi/ic_photos_white_24.png
new file mode 100644
index 0000000..bc64bb0
--- /dev/null
+++ b/res/drawable-xhdpi/ic_photos_white_24.png
Binary files differ
diff --git a/res/drawable-xxhdpi/ic_check_circle_googblue_drawable_24dp.png b/res/drawable-xxhdpi/ic_check_circle_googblue_drawable_24dp.png
index e50091c..7ac3497 100644
--- a/res/drawable-xxhdpi/ic_check_circle_googblue_drawable_24dp.png
+++ b/res/drawable-xxhdpi/ic_check_circle_googblue_drawable_24dp.png
Binary files differ
diff --git a/res/drawable-xxhdpi/ic_photos_white_24.png b/res/drawable-xxhdpi/ic_photos_white_24.png
new file mode 100644
index 0000000..2cb5dbc
--- /dev/null
+++ b/res/drawable-xxhdpi/ic_photos_white_24.png
Binary files differ
diff --git a/res/drawable-xxxhdpi/ic_check_circle_googblue_drawable_24dp.png b/res/drawable-xxxhdpi/ic_check_circle_googblue_drawable_24dp.png
index c26bd2f..c077752 100644
--- a/res/drawable-xxxhdpi/ic_check_circle_googblue_drawable_24dp.png
+++ b/res/drawable-xxxhdpi/ic_check_circle_googblue_drawable_24dp.png
Binary files differ
diff --git a/res/drawable-xxxhdpi/ic_photos_white_24.png b/res/drawable-xxxhdpi/ic_photos_white_24.png
new file mode 100644
index 0000000..5722b4a
--- /dev/null
+++ b/res/drawable-xxxhdpi/ic_photos_white_24.png
Binary files differ
diff --git a/res/layout/all_photos_button.xml b/res/layout/all_photos_button.xml
new file mode 100644
index 0000000..6ccdca5
--- /dev/null
+++ b/res/layout/all_photos_button.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ android:layout_width="135dp"
+ android:layout_height="135dp"
+ android:background="@color/google_grey_600"
+ android:orientation="vertical">
+
+ <ImageView
+ android:id="@+id/image"
+ android:paddingTop="48dp"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:src="@drawable/ic_photos_white_24"
+ android:layout_gravity="center_horizontal"/>
+
+ <TextView
+ android:id="@+id/textLabel"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_centerInParent="true"
+ android:singleLine="true"
+ android:text="@string/all_photos_button"
+ android:textSize="14sp"
+ android:textColor="@color/photo_action_button_color"
+ android:paddingTop="9dp"
+ android:paddingBottom="35dp"
+ android:layout_gravity="center_horizontal"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/res/layout/compact_photo_selection_fragment.xml b/res/layout/compact_photo_selection_fragment.xml
index 354b9f3..b35dae5 100644
--- a/res/layout/compact_photo_selection_fragment.xml
+++ b/res/layout/compact_photo_selection_fragment.xml
@@ -14,13 +14,15 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<GridView xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/grid_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:numColumns="auto_fit"
- android:columnWidth="100dp"
- android:stretchMode="none"
- android:gravity="center"
- android:drawSelectorOnTop="true"/>
+ <GridView xmlns:android="http://schemas.android.com/apk/res/android"
+ android:id="@+id/grid_view"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
+ android:numColumns="auto_fit"
+ android:verticalSpacing="3dp"
+ android:horizontalSpacing="3dp"
+ android:stretchMode="none"
+ android:gravity="center"
+ android:paddingTop="3dp"
+ android:drawSelectorOnTop="true"/>
diff --git a/res/layout/compact_photo_selection_item.xml b/res/layout/compact_photo_selection_item.xml
index 6f70c80..c625765 100644
--- a/res/layout/compact_photo_selection_item.xml
+++ b/res/layout/compact_photo_selection_item.xml
@@ -21,18 +21,19 @@
<ImageView
android:id="@+id/image"
- android:layout_width="125dp"
- android:layout_height="125dp"
+ android:layout_width="135dp"
+ android:layout_height="135dp"
android:adjustViewBounds="true"
android:layout_centerInParent="true"
android:scaleType="centerCrop" />
<ImageView
android:id="@+id/check"
- android:layout_width="30dp"
- android:layout_height="30dp"
+ android:layout_width="24dp"
+ android:layout_height="24dp"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
+ android:layout_margin="8dp"
android:src="@drawable/ic_check_circle_googblue_drawable_24dp"
android:visibility="gone"/>
@@ -41,6 +42,8 @@
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentBottom="true"
- android:layout_alignParentStart="true"/>
+ android:layout_alignParentStart="true"
+ android:paddingBottom="8dp"
+ android:paddingStart="8dp"/>
</RelativeLayout>
diff --git a/res/layout/take_a_photo_button.xml b/res/layout/take_a_photo_button.xml
new file mode 100644
index 0000000..28ec60b
--- /dev/null
+++ b/res/layout/take_a_photo_button.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ android:layout_width="135dp"
+ android:layout_height="135dp"
+ android:background="@color/google_grey_600"
+ android:orientation="vertical">
+
+ <ImageView
+ android:id="@+id/image"
+ android:paddingTop="48dp"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:src="@drawable/ic_photo_camera_white_24dp"
+ android:layout_gravity="center_horizontal"/>
+
+ <TextView
+ android:id="@+id/textLabel"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_centerInParent="true"
+ android:singleLine="true"
+ android:text="@string/take_a_photo_button"
+ android:textSize="14sp"
+ android:textColor="@color/photo_action_button_color"
+ android:paddingTop="9dp"
+ android:paddingBottom="35dp"
+ android:layout_gravity="center_horizontal"/>
+</LinearLayout>
\ No newline at end of file
diff --git a/res/values/colors.xml b/res/values/colors.xml
index a537a95..7b20f82 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -64,4 +64,10 @@
<!-- Color of disabled text and unfocused hint text inside the contact editor. 25% black. -->
<color name="editor_disabled_text_color">#40000000</color>
+
+ <!-- Color of button background in compact photo picker. -->
+ <color name="google_grey_600">#757575</color>
+
+ <!-- Color of button text color in compact photo picker, 85% white. -->
+ <color name="photo_action_button_color">#D9FFFFFF</color>
</resources>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index a5187d2..6339794 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -255,4 +255,7 @@
will never take affect inside list items. As a result, the padding at the very top
of ListView's will not match the padding inside list items -->
<dimen name="contact_browser_list_item_padding_top_or_bottom">12dp</dimen>
+
+ <!-- Width of padding between columns of photos in photo picker -->
+ <dimen name="photo_picker_column_padding_width">1dp</dimen>
</resources>
diff --git a/res/values/strings.xml b/res/values/strings.xml
index 3102bf8..45ba4fa 100644
--- a/res/values/strings.xml
+++ b/res/values/strings.xml
@@ -809,4 +809,16 @@
<!-- Help message showing in suggestion card in Quick contact. [CHAR LIMIT=500]-->
<string name="suggestion_card_help_message">Clean up duplicate contacts to see all info in one place. For more details on a contact tap on the avatar. You can always change the profile photo or separate contacts at anytime.</string>
+ <!-- Linked contacts title showing in contact editor UI. [CHAR LIMIT=30]-->
+ <string name="compact_editor_linked_contacts_title">Linked contacts</string>
+
+ <!-- Title of profile photos that are from your various accounts -->
+ <string name="from_your_accounts">From your accounts</string>
+
+ <!-- Button used in photo picker to open camera -->
+ <string name="take_a_photo_button">Take a photo</string>
+
+ <!-- Button used in photo picker to open photo/gallery -->
+ <string name="all_photos_button">All photos</string>
+
</resources>
diff --git a/src/com/android/contacts/editor/CompactPhotoSelectionFragment.java b/src/com/android/contacts/editor/CompactPhotoSelectionFragment.java
index be4e938..bd4016e 100644
--- a/src/com/android/contacts/editor/CompactPhotoSelectionFragment.java
+++ b/src/com/android/contacts/editor/CompactPhotoSelectionFragment.java
@@ -23,16 +23,14 @@
import android.app.Fragment;
import android.content.Context;
-import android.content.Intent;
-import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;
import android.os.Parcel;
import android.os.Parcelable;
import android.provider.ContactsContract;
+import android.util.DisplayMetrics;
+import android.view.Display;
import android.view.LayoutInflater;
-import android.view.Menu;
-import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
@@ -50,6 +48,12 @@
private static final String STATE_PHOTOS = "photos";
private static final String STATE_PHOTO_MODE = "photoMode";
+ private final int VIEW_TYPE_TAKE_PHOTO = 0;
+ private final int VIEW_TYPE_ALL_PHOTOS = 1;
+ private final int VIEW_TYPE_IMAGE = 2;
+ private final int NUMBER_OF_COLUMNS_PORTRAIT = 3;
+ private final int NUMBER_OF_COLUMNS_LANDSCAPE = 5;
+ private int mNumberOfColumns;
/**
* Callbacks hosts this Fragment.
@@ -155,7 +159,7 @@
@Override
public int getCount() {
- return mPhotos == null ? 0 : mPhotos.size();
+ return mPhotos == null ? 2 : mPhotos.size() + 2;
}
@Override
@@ -169,11 +173,46 @@
}
@Override
+ public int getItemViewType(int index) {
+ if (index == 0) {
+ return VIEW_TYPE_TAKE_PHOTO;
+ } else if (index == 1) {
+ return VIEW_TYPE_ALL_PHOTOS;
+ } else {
+ return VIEW_TYPE_IMAGE;
+ }
+ }
+
+ @Override
public View getView(int position, View convertView, ViewGroup parent) {
if (mPhotos == null) return null;
+ // when position is 0 or 1, we should make sure account_type *is not* in convertView
+ // before reusing it.
+ if (getItemViewType(position) == 0){
+ if (convertView == null || convertView.findViewById(R.id.account_type) != null) {
+ return mLayoutInflater.inflate(R.layout.take_a_photo_button, /* root =*/ null);
+ }
+ else{
+ return convertView;
+ }
+ }
+
+ if (getItemViewType(position) == 1) {
+ if (convertView == null || convertView.findViewById(R.id.account_type) != null) {
+ return mLayoutInflater.inflate(R.layout.all_photos_button, /* root =*/ null);
+ }
+ else {
+ return convertView;
+ }
+ }
+
+ // when position greater than 1, we should make sure account_type *is* in convertView
+ // before reusing it.
+ position -= 2;
+
final View photoItemView;
- if (convertView == null) {
+ if (convertView == null || convertView.findViewById(R.id.account_type) == null) {
photoItemView = mLayoutInflater.inflate(
R.layout.compact_photo_selection_item, /* root =*/ null);
} else {
@@ -247,14 +286,37 @@
gridView.setAdapter(photoAdapter);
gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
- // Call the host back so it can set the new photo as primary
- final Photo photo = (Photo) photoAdapter.getItem(position);
- if (mListener != null) {
- mListener.onPhotoSelected(photo);
+ final PhotoSourceDialogFragment.Listener listener = (PhotoSourceDialogFragment.Listener)
+ getActivity();
+ if (position == 0){
+ listener.onTakePhotoChosen();
+ } else if (position == 1) {
+ listener.onPickFromGalleryChosen();
+ } else {
+ // Call the host back so it can set the new photo as primary
+ final Photo photo = (Photo) photoAdapter.getItem(position - 2);
+ if (mListener != null) {
+ mListener.onPhotoSelected(photo);
+ }
}
}
});
+ final Display display = getActivity().getWindowManager().getDefaultDisplay();
+ final DisplayMetrics outMetrics = new DisplayMetrics ();
+ display.getMetrics(outMetrics);
+
+ // portrait -- 3 columns; landscape -- 5 columns.
+ mNumberOfColumns = outMetrics.heightPixels > outMetrics.widthPixels ?
+ NUMBER_OF_COLUMNS_PORTRAIT : NUMBER_OF_COLUMNS_LANDSCAPE;
+ final int paddingWidth = (int) getResources().getDimension(R.dimen
+ .photo_picker_column_padding_width);
+ float density = getResources().getDisplayMetrics().density;
+ float dpScreenWidth = outMetrics.widthPixels / density;
+ float dpColumnWidth = (dpScreenWidth - paddingWidth * mNumberOfColumns) * density /
+ mNumberOfColumns;
+ gridView.setColumnWidth((int) dpColumnWidth);
+
return view;
}
@@ -266,19 +328,11 @@
}
@Override
- public void onCreateOptionsMenu(Menu menu, MenuInflater menuInflater) {
- menuInflater.inflate(R.menu.edit_contact_photo, menu);
- }
-
- @Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case android.R.id.home:
getActivity().onBackPressed();
return true;
- case R.id.menu_photo:
- PhotoSourceDialogFragment.show(getActivity(), mPhotoMode);
- return true;
default:
return super.onOptionsItemSelected(item);
}
