Use CardView for cards
UI Tweaks with Allen
Bug: 16373753
Change-Id: I550b8fe39b973a8789c18154eed9cac67308eb8b
diff --git a/Android.mk b/Android.mk
index a6c4efc..124549b 100644
--- a/Android.mk
+++ b/Android.mk
@@ -10,12 +10,14 @@
res_dirs := res $(contacts_common_dir)/res $(phone_common_dir)/res
LOCAL_SRC_FILES := $(call all-java-files-under, $(src_dirs))
-LOCAL_RESOURCE_DIR := $(addprefix $(LOCAL_PATH)/, $(res_dirs))
+LOCAL_RESOURCE_DIR := $(addprefix $(LOCAL_PATH)/, $(res_dirs)) \
+ frameworks/support/v7/cardview/res
LOCAL_AAPT_FLAGS := \
--auto-add-overlay \
--extra-packages com.android.contacts.common \
- --extra-packages com.android.phone.common
+ --extra-packages com.android.phone.common \
+ --extra-packages android.support.v7.cardview
LOCAL_JAVA_LIBRARIES := telephony-common voip-common
LOCAL_STATIC_JAVA_LIBRARIES := \
@@ -23,6 +25,7 @@
android-common \
guava \
android-support-v13 \
+ android-support-v7-cardview \
android-support-v7-palette \
android-support-v4 \
libphonenumber \
diff --git a/res/layout/expanding_entry_card_item.xml b/res/layout/expanding_entry_card_item.xml
index dfd450c..174ddf9 100644
--- a/res/layout/expanding_entry_card_item.xml
+++ b/res/layout/expanding_entry_card_item.xml
@@ -36,12 +36,14 @@
<TextView
android:id="@+id/header"
+ android:textSize="@dimen/expanding_entry_card_title_text_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_toEndOf="@+id/icon"
android:layout_toStartOf="@+id/icon_alternate"
- android:textColor="@color/quickcontact_entry_header_text_color" />
+ android:textColor="@color/quickcontact_entry_header_text_color"
+ android:layout_marginBottom="@dimen/expanding_entry_card_header_margin_bottom" />
<TextView
android:id="@+id/sub_header"
diff --git a/res/layout/expanding_entry_card_view.xml b/res/layout/expanding_entry_card_view.xml
index 7c4464a..6b89759 100644
--- a/res/layout/expanding_entry_card_view.xml
+++ b/res/layout/expanding_entry_card_view.xml
@@ -13,7 +13,11 @@
See the License for the specific language governing permissions and
limitations under the License.
-->
-<merge xmlns:android="http://schemas.android.com/apk/res/android">
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:orientation="vertical"
+ android:id="@+id/container">
<TextView
android:id="@+id/title"
@@ -39,4 +43,4 @@
android:layout_height="wrap_content"
android:orientation="vertical" />
-</merge>
\ No newline at end of file
+</LinearLayout>
\ No newline at end of file
diff --git a/res/layout/quickcontact_content.xml b/res/layout/quickcontact_content.xml
index b72340b..494b93b 100644
--- a/res/layout/quickcontact_content.xml
+++ b/res/layout/quickcontact_content.xml
@@ -15,6 +15,7 @@
-->
<com.android.contacts.widget.TouchlessScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
@@ -32,22 +33,26 @@
<com.android.contacts.quickcontact.ExpandingEntryCardView
style="@style/ExpandingEntryCardStyle"
android:id="@+id/no_contact_data_card"
- android:visibility="gone" />
+ android:visibility="gone"
+ cardview:cardCornerRadius="@dimen/expanding_entry_card_card_corner_radius" />
<com.android.contacts.quickcontact.ExpandingEntryCardView
style="@style/ExpandingEntryCardStyle"
android:id="@+id/communication_card"
- android:visibility="gone" />
+ android:visibility="gone"
+ cardview:cardCornerRadius="@dimen/expanding_entry_card_card_corner_radius" />
<com.android.contacts.quickcontact.ExpandingEntryCardView
style="@style/ExpandingEntryCardStyle"
android:id="@+id/recent_card"
- android:visibility="gone" />
+ android:visibility="gone"
+ cardview:cardCornerRadius="@dimen/expanding_entry_card_card_corner_radius" />
<com.android.contacts.quickcontact.ExpandingEntryCardView
style="@style/ExpandingEntryCardStyle"
android:id="@+id/about_card"
- android:visibility="gone" />
+ android:visibility="gone"
+ cardview:cardCornerRadius="@dimen/expanding_entry_card_card_corner_radius" />
</LinearLayout>
diff --git a/res/layout/quickcontact_expanding_entry_card_button.xml b/res/layout/quickcontact_expanding_entry_card_button.xml
index fef2959..7bf7e67 100644
--- a/res/layout/quickcontact_expanding_entry_card_button.xml
+++ b/res/layout/quickcontact_expanding_entry_card_button.xml
@@ -34,13 +34,14 @@
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
- android:drawablePadding="@dimen/expanding_entry_card_button_drawable_padding"
+ android:drawablePadding="@dimen/expanding_entry_card_item_image_spacing"
android:gravity="center_vertical"
android:layout_weight="0"
android:paddingBottom="@dimen/expanding_entry_card_button_padding_vertical"
- android:paddingStart="@dimen/expanding_entry_card_button_padding_start"
+ android:paddingStart="@dimen/expanding_entry_card_item_padding_start"
android:paddingTop="@dimen/expanding_entry_card_button_padding_vertical"
- android:textColor="@color/expanding_entry_card_button_text_color" />
+ android:textColor="@color/expanding_entry_card_button_text_color"
+ android:textSize="@dimen/expanding_entry_card_title_text_size" />
<LinearLayout
android:id="@+id/badge_container"
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index 0d516eb..6439c1d 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -125,8 +125,8 @@
<!-- Margins for ExpandingEntryCardView -->
- <dimen name="expanding_entry_card_marginStart">12dp</dimen>
- <dimen name="expanding_entry_card_marginEnd">12dp</dimen>
+ <dimen name="expanding_entry_card_marginStart">8dp</dimen>
+ <dimen name="expanding_entry_card_marginEnd">8dp</dimen>
<dimen name="expanding_entry_card_marginBottom">12dp</dimen>
<!-- Width of the grey border surrounding the expanding entry cards. If we ever add
a rounded corner to the expanding entry cards, than we will need to increase this value -->
@@ -136,7 +136,7 @@
<dimen name="first_card_marginTop">12dp</dimen>
<!-- Elevation of an ExpandingEntryCard, for the sake of shadow casting -->
- <dimen name="expanding_entry_card_elevation">1dp</dimen>
+ <dimen name="expanding_entry_card_elevation">2dp</dimen>
<!-- Elevation of the QuickContact's Toolbar, for the sake of shadow casting -->
<dimen name="quick_contact_toolbar_elevation">4.5dp</dimen>
@@ -150,25 +150,28 @@
<!-- Dimensions for an entry in ExpandingEntryCardView -->
<dimen name="expanding_entry_card_item_padding_start">20dp</dimen>
<dimen name="expanding_entry_card_item_padding_end">20dp</dimen>
- <dimen name="expanding_entry_card_item_padding_top">16dp</dimen>
+ <dimen name="expanding_entry_card_item_padding_top">18dp</dimen>
<dimen name="expanding_entry_card_item_padding_bottom">16dp</dimen>
- <dimen name="expanding_entry_card_item_image_spacing">20dp</dimen>
+ <dimen name="expanding_entry_card_item_image_spacing">27dp</dimen>
<!-- Dimensions for a button in ExpandingEntryCardView -->
- <dimen name="expanding_entry_card_button_padding_start">20dp</dimen>
- <dimen name="expanding_entry_card_button_padding_vertical">16dp</dimen>
- <dimen name="expanding_entry_card_button_drawable_padding">20dp</dimen>
+ <dimen name="expanding_entry_card_button_padding_vertical">18dp</dimen>
<dimen name="expanding_entry_card_item_text_icon_margin_top">7dp</dimen>
<dimen name="expanding_entry_card_item_text_icon_margin_right">7dp</dimen>
<dimen name="expanding_entry_card_item_sub_header_icon_margin_right">4dp</dimen>
<dimen name="expanding_entry_card_item_sub_header_icon_margin_bottom">14dp</dimen>
- <dimen name="expanding_entry_card_item_icon_margin_top">8dp</dimen>
+ <dimen name="expanding_entry_card_item_icon_margin_top">7dp</dimen>
+ <dimen name="expanding_entry_card_item_header_only_margin_top">6dp</dimen>
<dimen name="expanding_entry_card_item_alternate_icon_margin_end">0dp</dimen>
<dimen name="expanding_entry_card_item_alternate_icon_margin_bottom">10dp</dimen>
<dimen name="expanding_entry_card_badge_separator_margin">8dp</dimen>
+ <dimen name="expanding_entry_card_card_corner_radius">2dp</dimen>
+ <dimen name="expanding_entry_card_header_margin_bottom">2dp</dimen>
+ <!-- The top margin when the sub header and text views are both gone -->
+ <dimen name="expanding_entry_card_item_header_only_margin_bottom">2dp</dimen>
<dimen name="people_activity_card_elevation">2dp</dimen>
<!-- The width the that the tabs occupy in the ActionBar when in landscape mode.
diff --git a/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java b/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java
index 4bfc225..6812ac4 100644
--- a/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java
+++ b/src/com/android/contacts/quickcontact/ExpandingEntryCardView.java
@@ -21,6 +21,7 @@
import android.graphics.ColorFilter;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
+import android.support.v7.widget.CardView;
import android.text.TextUtils;
import android.transition.ChangeBounds;
import android.transition.ChangeScroll;
@@ -35,6 +36,7 @@
import android.view.TouchDelegate;
import android.view.View;
import android.view.ViewGroup;
+import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
@@ -48,7 +50,7 @@
/**
* Display entries in a LinearLayout that can be expanded to show all entries.
*/
-public class ExpandingEntryCardView extends LinearLayout {
+public class ExpandingEntryCardView extends CardView {
private static final String TAG = "ExpandingEntryCardView";
private static final int DURATION_EXPAND_ANIMATION_FADE_IN = 200;
@@ -184,6 +186,7 @@
private ViewGroup mAnimationViewGroup;
private LinearLayout mBadgeContainer;
private final List<ImageView> mBadges;
+ private LinearLayout mContainer;
private final OnClickListener mExpandCollapseButtonListener = new OnClickListener() {
@Override
@@ -207,6 +210,7 @@
mEntriesViewGroup = (LinearLayout)
expandingEntryCardView.findViewById(R.id.content_area_linear_layout);
mTitleTextView = (TextView) expandingEntryCardView.findViewById(R.id.title);
+ mContainer = (LinearLayout) expandingEntryCardView.findViewById(R.id.container);
mCollapseArrowDrawable =
getResources().getDrawable(R.drawable.expanding_entry_card_collapse_white_24);
mExpandArrowDrawable =
@@ -315,7 +319,7 @@
removeView(mExpandCollapseButton);
if (mCollapsedEntriesCount < mNumEntries
&& mExpandCollapseButton.getParent() == null && !mIsAlwaysExpanded) {
- addView(mExpandCollapseButton, -1);
+ mContainer.addView(mExpandCollapseButton, -1);
}
}
@@ -325,23 +329,22 @@
private void addSeparator(View entry) {
View separator = new View(getContext());
- separator.setBackgroundColor(getResources().getColor(
+ Resources res = getResources();
+
+ separator.setBackgroundColor(res.getColor(
R.color.expanding_entry_card_item_separator_color));
- LayoutParams layoutParams = generateDefaultLayoutParams();
- Resources resources = getResources();
- layoutParams.height = resources.getDimensionPixelSize(
- R.dimen.expanding_entry_card_item_separator_height);
+ LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
+ ViewGroup.LayoutParams.MATCH_PARENT,
+ res.getDimensionPixelSize(R.dimen.expanding_entry_card_item_separator_height));
// The separator is aligned with the text in the entry. This is offset by a default
// margin. If there is an icon present, the icon's width and margin are added
- int marginStart = resources.getDimensionPixelSize(
+ int marginStart = res.getDimensionPixelSize(
R.dimen.expanding_entry_card_item_padding_start);
ImageView entryIcon = (ImageView) entry.findViewById(R.id.icon);
if (entryIcon.getVisibility() == View.VISIBLE) {
int imageWidthAndMargin =
- resources.getDimensionPixelSize(
- R.dimen.expanding_entry_card_item_icon_width) +
- resources.getDimensionPixelSize(
- R.dimen.expanding_entry_card_item_image_spacing);
+ res.getDimensionPixelSize(R.dimen.expanding_entry_card_item_icon_width) +
+ res.getDimensionPixelSize(R.dimen.expanding_entry_card_item_image_spacing);
marginStart += imageWidthAndMargin;
}
layoutParams.setMarginStart(marginStart);
@@ -521,13 +524,16 @@
view.setTag(entry.getIntent());
}
- // If only the header is visible, add a top margin to match icon's top margin
+ // If only the header is visible, add a top margin to match icon's top margin.
+ // Also increase the space below the header for visual comfort.
if (header.getVisibility() == View.VISIBLE && subHeader.getVisibility() == View.GONE &&
text.getVisibility() == View.GONE) {
RelativeLayout.LayoutParams headerLayoutParams =
(RelativeLayout.LayoutParams) header.getLayoutParams();
headerLayoutParams.topMargin = (int) (getResources().getDimension(
- R.dimen.expanding_entry_card_item_icon_margin_top));
+ R.dimen.expanding_entry_card_item_header_only_margin_top));
+ headerLayoutParams.bottomMargin += (int) (getResources().getDimension(
+ R.dimen.expanding_entry_card_item_header_only_margin_bottom));
header.setLayoutParams(headerLayoutParams);
}
@@ -562,6 +568,12 @@
});
}
+ // Decrease margin for entries that have an invisible icon
+ if (iconVisibility == View.INVISIBLE) {
+ view.setPaddingRelative(view.getPaddingStart(), 0, view.getPaddingEnd(),
+ view.getPaddingBottom());
+ }
+
return view;
}