ComposeMessageActivity UI work

Add a little triangle over the avatar. Let the background show through
in places. Adjust spacing. Other tweaks.

Change-Id: I459debf4c51bfb72b5eb0563a3dbfb08961c067c

6 files changed, 170 insertions, 20 deletions

diff --git a/res/layout/compose_message_activity.xml b/res/layout/compose_message_activity.xml
index b12d1894..b7ddf641 100644
--- a/res/layout/compose_message_activity.xml
+++ b/res/layout/compose_message_activity.xml
@@ -21,7 +21,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="@drawable/white_background"
+    android:background="@color/list_background"
     android:orientation="vertical">
 
     <LinearLayout
@@ -69,14 +69,14 @@
             android:listSelector="@drawable/chat_history_selector"
             android:drawSelectorOnTop="true"
             android:transcriptMode="alwaysScroll"
-            android:scrollbarAlwaysDrawVerticalTrack="true"
-            android:scrollbarStyle="insideInset"
             android:smoothScrollbar="false"
             android:stackFromBottom="true"
             android:visibility="gone"
             android:fadingEdge="none"
             android:layout_marginBottom="1dip"
             android:cacheColorHint="@android:color/white"
+            android:scrollbarAlwaysDrawVerticalTrack="false"
+            android:scrollbarStyle="insideOverlay"
         />
 
         <LinearLayout
diff --git a/res/layout/message_list_item.xml b/res/layout/message_list_item.xml
index 0b1cad0b..a2347427 100644
--- a/res/layout/message_list_item.xml
+++ b/res/layout/message_list_item.xml
@@ -23,11 +23,10 @@
     android:id="@+id/msg_list_item"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:background="@drawable/listitem_background"
+    android:background="#00000000"
     android:orientation="horizontal">
 
     <LinearLayout android:id="@+id/mms_layout_view_parent"
-        android:paddingLeft="5dip"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_weight="1"
@@ -39,6 +38,7 @@
             android:layout_height="wrap_content"/>
 
         <RelativeLayout
+            android:background="@drawable/listitem_background"
             android:layout_width="match_parent"
             android:layout_height="wrap_content">
 
@@ -52,20 +52,22 @@
                 android:background="@color/text_hairline" />
 
             <android.widget.QuickContactBadge
-                android:layout_marginLeft="0dip"
-                android:layout_marginRight="5dip"
-                android:layout_marginTop="5dip"
-                android:layout_marginBottom="5dip"
                 android:layout_alignParentLeft="true"
-                android:layout_width="64dip"
+                android:layout_width="80dip"
+                android:layout_height="80dip"
                 android:id="@+id/avatar"
                 style="?android:attr/quickContactBadgeStyleWindowSmall" />
 
+            <View
+                android:id="@+id/divit"
+                android:layout_alignParentLeft="true"
+                android:layout_width="80dip"
+                android:layout_height="80dip" />
+
             <TextView android:id="@+id/text_view"
                 android:autoLink="all"
                 android:paddingTop="6dip"
                 android:paddingBottom="3dip"
-                android:paddingRight="10dip"
                 android:layout_width="0dip"
                 android:layout_height="wrap_content"
                 android:layout_alignParentRight="true"
@@ -86,15 +88,15 @@
                 android:layout_toLeftOf="@+id/status_icons"
                 android:layout_below="@id/text_view"
                 android:textAppearance="?android:attr/textAppearanceSmall"
-                android:paddingRight="10dip"
                 android:paddingTop="1dip"
-                android:textColor="#ffc1c1c1" />
+                android:textColor="@color/text_hairline" />
 
             <LinearLayout android:id="@id/status_icons"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:layout_below="@id/text_view"
                 android:layout_marginBottom="8dip"
+                android:background="@drawable/listitem_background"
                 android:orientation="horizontal" >
 
                 <ImageView
diff --git a/res/values/colors.xml b/res/values/colors.xml
index 9766f554..242017f1 100644
--- a/res/values/colors.xml
+++ b/res/values/colors.xml
@@ -32,6 +32,7 @@
     <drawable name="text_color_offwhite">#55ffffff</drawable>
     <drawable name="text_color_blue">#ff78b2ea</drawable>
     <color name="text_hairline">#ffc1c1c1</color>
+    <color name="list_background">#fff1f1f1</color>
 
     <!-- Chat "sent time" text background -->
     <color name="timestamp_color">#bf000000</color>
diff --git a/res/values/dimens.xml b/res/values/dimens.xml
index af5c07ff..031dc1bb 100644
--- a/res/values/dimens.xml
+++ b/res/values/dimens.xml
@@ -6,4 +6,6 @@ All Rights Reserved. -->
     <dimen name="send_button_top_margin_with_mms">0dip</dimen>
 
     <dimen name="message_item_avatar_on_right_text_indent">50dip</dimen>
+    <dimen name="message_item_text_padding_left_right">15dip</dimen>
+    <dimen name="message_item_text_padding_top">5dip</dimen>
 </resources>
diff --git a/src/com/android/mms/ui/DivitDrawable.java b/src/com/android/mms/ui/DivitDrawable.java
new file mode 100644
index 00000000..0214b344
--- /dev/null
+++ b/src/com/android/mms/ui/DivitDrawable.java
@@ -0,0 +1,116 @@
+/*
+ * Copyright (C) 2011 Google Inc.
+ *
+ * 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.
+ */
+
+package com.android.mms.ui;
+
+import android.graphics.Canvas;
+import android.graphics.ColorFilter;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.Rect;
+import android.graphics.drawable.Drawable;
+
+public class DivitDrawable extends Drawable {
+    private Paint mPaint = new Paint();
+    private Path mPath = new Path();
+    private int mPosition;
+    private float mDensity;
+
+    private static final float CORNER_OFFSET = 10;
+    private static final float EDGE_LENGTH = 10;
+
+    public static final int LEFT_UPPER = 1;
+    public static final int LEFT_MIDDLE = 2;
+    public static final int LEFT_LOWER = 3;
+
+    public static final int RIGHT_UPPER = 4;
+    public static final int RIGHT_MIDDLE = 5;
+    public static final int RIGHT_LOWER = 6;
+
+    public static final int TOP_LEFT = 7;
+    public static final int TOP_MIDDLE = 8;
+    public static final int TOP_RIGHT = 9;
+
+    public static final int BOTTOM_LEFT = 10;
+    public static final int BOTTOM_MIDDLE = 11;
+    public static final int BOTTOM_RIGHT = 12;
+
+    public DivitDrawable(int position, float density) {
+        mPosition = position;
+        mPaint.setColor(0xffffffff);
+        mPaint.setAntiAlias(true);
+        mDensity = density;
+    }
+
+    private void computePath() {
+        final float edgeLength = EDGE_LENGTH * mDensity;
+        final Rect bounds = getBounds();
+        switch (mPosition) {
+        case LEFT_UPPER: {
+            final float left = -1;
+            final float top = CORNER_OFFSET * mDensity;
+
+            mPath.moveTo(left, top);
+            mPath.lineTo(edgeLength, top + edgeLength);
+            mPath.lineTo(left, top + (2 * edgeLength));
+
+            break;
+        }
+        case RIGHT_UPPER: {
+            final float right = bounds.right + 1;
+            final float top = CORNER_OFFSET * mDensity;
+
+            mPath.moveTo(right, top);
+            mPath.lineTo(right - edgeLength, top + edgeLength);
+            mPath.lineTo(right, top + (2 * edgeLength));
+
+            break;
+        }
+        case BOTTOM_MIDDLE: {
+            final float middle = bounds.exactCenterX();
+            final float bottom = bounds.bottom + 1;
+
+            mPath.moveTo(middle - edgeLength, bottom);
+            mPath.lineTo(middle, bottom - edgeLength);
+            mPath.lineTo(middle + edgeLength, bottom);
+            break;
+        }
+        }
+        mPath.close();
+    }
+
+    @Override
+    public void draw(Canvas canvas) {
+        computePath();
+        canvas.drawPath(mPath, mPaint);
+    }
+
+    @Override
+    public void setAlpha(int alpha) {
+        // ignore
+    }
+
+    @Override
+    public void setColorFilter(ColorFilter cf) {
+        // ignore
+    }
+
+    @Override
+    public int getOpacity() {
+        return 0;
+    }
+}
+
diff --git a/src/com/android/mms/ui/MessageListItem.java b/src/com/android/mms/ui/MessageListItem.java
index 92bfd2f7..a7d82b38 100644
--- a/src/com/android/mms/ui/MessageListItem.java
+++ b/src/com/android/mms/ui/MessageListItem.java
@@ -25,6 +25,7 @@ import android.app.AlertDialog;
 import android.content.Context;
 import android.content.DialogInterface;
 import android.content.Intent;
+import android.content.res.Resources;
 import android.graphics.Bitmap;
 import android.graphics.BitmapFactory;
 import android.graphics.Typeface;
@@ -48,6 +49,7 @@ import android.text.style.StyleSpan;
 import android.text.style.TextAppearanceSpan;
 import android.text.style.URLSpan;
 import android.util.AttributeSet;
+import android.util.DisplayMetrics;
 import android.util.Log;
 import android.view.Gravity;
 import android.view.View;
@@ -102,6 +104,9 @@ public class MessageListItem extends LinearLayout implements
     private String mDefaultCountryIso;
     private TextView mDateView;
     private LinearLayout mStatusIcons;
+    private Drawable mLeftDivitDrawable;
+    private Drawable mRightDivitDrawable;
+    private View mDivit;        // little triangle on the side of the avatar
 
     public MessageListItem(Context context) {
         super(context);
@@ -128,6 +133,11 @@ public class MessageListItem extends LinearLayout implements
         mDetailsIndicator = (ImageView) findViewById(R.id.details_indicator);
         mAvatar = (QuickContactBadge) findViewById(R.id.avatar);
         mStatusIcons = (LinearLayout) findViewById(R.id.status_icons);
+
+        mDivit = findViewById(R.id.divit);
+        float density = mContext.getResources().getDisplayMetrics().density;
+        mLeftDivitDrawable = new DivitDrawable(DivitDrawable.LEFT_UPPER, density);
+        mRightDivitDrawable = new DivitDrawable(DivitDrawable.RIGHT_UPPER, density);
     }
 
     public void bind(MessageListAdapter.AvatarCache avatarCache, MessageItem msgItem) {
@@ -286,6 +296,14 @@ public class MessageListItem extends LinearLayout implements
             (RelativeLayout.LayoutParams)mDateView.getLayoutParams();
         RelativeLayout.LayoutParams statusIconsLayout =
             (RelativeLayout.LayoutParams)mStatusIcons.getLayoutParams();
+        RelativeLayout.LayoutParams divitLayout =
+            (RelativeLayout.LayoutParams)mDivit.getLayoutParams();
+
+        Resources resources = mContext.getResources();
+        int textPaddingLeftRight = resources.getDimensionPixelOffset(
+                R.dimen.message_item_text_padding_left_right);
+        int textPaddingTop = resources.getDimensionPixelOffset(
+                R.dimen.message_item_text_padding_top);
 
         if (msgItem.mBoxId == Mms.MESSAGE_BOX_INBOX) {
             // Avatar on left, text adjusted left
@@ -295,6 +313,7 @@ public class MessageListItem extends LinearLayout implements
             avatarLayout.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 0);
             statusIconsLayout.addRule(RelativeLayout.LEFT_OF, 0);
             dateLayout.addRule(RelativeLayout.LEFT_OF, 0);
+            divitLayout.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 0);
 
             // set the new rules
             avatarLayout.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
@@ -303,10 +322,15 @@ public class MessageListItem extends LinearLayout implements
             dateLayout.addRule(RelativeLayout.RIGHT_OF, R.id.avatar);
             statusIconsLayout.addRule(RelativeLayout.RIGHT_OF, R.id.date_view);
 
-            mBodyTextView.setPadding(0, 6, 0, 3);
+            mBodyTextView.setPadding(textPaddingLeftRight,
+                    textPaddingTop,
+                    textPaddingLeftRight,
+                    0);
             mBodyTextView.setGravity(Gravity.LEFT);
-            avatarLayout.rightMargin = 5;
-            avatarLayout.leftMargin = 0;
+            mDateView.setPadding(textPaddingLeftRight, 0, 0, 0);
+
+            mDivit.setBackgroundDrawable(mRightDivitDrawable);
+            divitLayout.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
         } else {
             // Avatar on right, text adjusted right
             // undo the old rules first
@@ -315,6 +339,7 @@ public class MessageListItem extends LinearLayout implements
             textLayout.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, 0);
             dateLayout.addRule(RelativeLayout.RIGHT_OF, 0);
             statusIconsLayout.addRule(RelativeLayout.RIGHT_OF, 0);
+            divitLayout.addRule(RelativeLayout.ALIGN_PARENT_LEFT, 0);
 
             // set the new rules
             textLayout.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
@@ -323,12 +348,16 @@ public class MessageListItem extends LinearLayout implements
             statusIconsLayout.addRule(RelativeLayout.LEFT_OF, R.id.date_view);
             dateLayout.addRule(RelativeLayout.LEFT_OF, R.id.avatar);
 
-            mBodyTextView.setPadding(mContext.getResources()
+            mBodyTextView.setPadding(resources
                     .getDimensionPixelOffset(R.dimen.message_item_avatar_on_right_text_indent),
-                        6, 10, 3);
+                        textPaddingTop,
+                        textPaddingLeftRight,
+                        0);
             mBodyTextView.setGravity(Gravity.RIGHT);
-            avatarLayout.rightMargin = 0;
-            avatarLayout.leftMargin = 5;
+            mDateView.setPadding(0, 0, textPaddingLeftRight, 0);
+
+            mDivit.setBackgroundDrawable(mLeftDivitDrawable);
+            divitLayout.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
         }
     }