New Conversation View in XML

It now uses conversation bubbles in alternating colors
and vector drawables to indicate message state.

The conversation bubbles have been taken from Telegram
and can be replaced by a UX designer later.

This commit also addresses #9, because message text can
now be selected and copied. This is done by using

    android:textIsSelectable="true"

which only works for API level 11 or higher.

If we want copy and paste on lower API levels,
additional measures have to be implemented.

briar-android/res/drawable/message_delivered.xml

@@ -0,0 +1,5 @@
+<vector android:alpha="0.56" android:height="16dp"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="16dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M18,7l-1.41,-1.41 -6.34,6.34 1.41,1.41L18,7zm4.24,-1.41L11.66,16.17 7.48,12l-1.41,1.41L11.66,19l12,-12 -1.42,-1.41zM0.41,13.41L6,19l1.41,-1.41L1.83,12 0.41,13.41z"/>
+</vector>

briar-android/res/drawable/message_sent.xml

@@ -0,0 +1,5 @@
+<vector android:alpha="0.56" android:height="16dp"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="16dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
+</vector>

briar-android/res/drawable/message_stored.xml

@@ -0,0 +1,5 @@
+<vector android:alpha="0.56" android:height="16dp"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="16dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillAlpha=".9" android:fillColor="#FF000000" android:pathData="M11.99,2C6.47,2 2,6.48 2,12s4.47,10 9.99,10C17.52,22 22,17.52 22,12S17.52,2 11.99,2zM12,20c-4.42,0 -8,-3.58 -8,-8s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8zM12.5,7H11v6l5.25,3.15 0.75,-1.23 -4.5,-2.67z"/>
+</vector>

briar-android/res/drawable/social_send_now.xml

@@ -0,0 +1,5 @@
+<vector android:alpha="0.56" android:height="24dp"
+    android:viewportHeight="24.0" android:viewportWidth="24.0"
+    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
+    <path android:fillColor="#FF000000" android:pathData="M2.01,21L23,12 2.01,3 2,10l15,2 -15,2z"/>
+</vector>

briar-android/res/layout/activity_conversation.xml

@@ -39,9 +39,7 @@
 		android:layout_height="wrap_content"
 		android:background="@color/button_bar_background"
 		android:paddingLeft="@dimen/margin_medium"
-		android:paddingStart="@dimen/margin_medium"
+		android:paddingStart="@dimen/margin_medium">
-		android:paddingRight="@dimen/margin_medium"
-		android:paddingEnd="@dimen/margin_medium">
 
 		<EditText
 			android:id="@+id/contentView"
@@ -53,12 +51,16 @@
 
 		<ImageButton
 			android:id="@+id/sendButton"
-			android:layout_width="wrap_content"
+			android:layout_width="38dp"
-			android:layout_height="wrap_content"
+			android:layout_height="38dp"
+			android:layout_gravity="bottom"
 			android:src="@drawable/social_send_now"
-			android:background="@color/button_bar_background"
+			android:background="?attr/selectableItemBackground"
+			android:scaleType="fitEnd"
 			android:contentDescription="@string/send"
-			android:layout_gravity="center"/>
+			android:paddingRight="@dimen/margin_medium"
+			android:paddingEnd="@dimen/margin_medium"
+			android:paddingBottom="@dimen/margin_medium"/>
 	</LinearLayout>
 
 </LinearLayout>

briar-android/res/layout/list_item_msg_in.xml

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	xmlns:tools="http://schemas.android.com/tools"
+	android:layout_width="match_parent"
+	android:layout_height="wrap_content"
+	android:orientation="vertical"
+	android:paddingRight="@dimen/margin_medium"
+	android:paddingEnd="@dimen/margin_medium"
+	android:paddingTop="@dimen/margin_small"
+	android:paddingBottom="@dimen/margin_small">
+
+	<RelativeLayout
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:layout_gravity="left|start"
+		android:background="@drawable/msg_in"
+		android:paddingLeft="17dp"
+		android:paddingTop="5dp"
+		android:paddingRight="7dp"
+		android:paddingBottom="5dp">
+
+		<TextView
+			android:id="@+id/msgBody"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:minWidth="80dp"
+			android:textIsSelectable="true"
+			tools:text="Short message"/>
+
+		<TextView
+			android:id="@+id/msgTime"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:textSize="10sp"
+			android:textColor="@color/private_message_date"
+			android:layout_below="@+id/msgBody"
+			tools:text="Dec 24, 13:37"/>
+
+	</RelativeLayout>
+
+</LinearLayout>

briar-android/res/layout/list_item_msg_out.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	xmlns:tools="http://schemas.android.com/tools"
+	android:layout_width="match_parent"
+	android:layout_height="wrap_content"
+	android:orientation="vertical"
+	android:paddingLeft="@dimen/margin_medium"
+	android:paddingStart="@dimen/margin_medium"
+	android:paddingTop="@dimen/margin_small"
+	android:paddingBottom="@dimen/margin_small">
+
+	<RelativeLayout
+		android:layout_width="wrap_content"
+		android:layout_height="wrap_content"
+		android:layout_gravity="right|end"
+		android:background="@drawable/msg_out"
+		android:paddingLeft="7dp"
+		android:paddingTop="5dp"
+		android:paddingRight="17dp"
+		android:paddingBottom="5dp">
+
+		<TextView
+			android:id="@+id/msgBody"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:textIsSelectable="true"
+			android:minWidth="80dp"
+			tools:text="This is a long long long message that spans over several lines.\n\nIt ends here."/>
+
+		<TextView
+			android:id="@+id/msgTime"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:layout_below="@+id/msgBody"
+			android:layout_toLeftOf="@+id/msgStatus"
+			android:textSize="10sp"
+			android:textColor="@color/private_message_date"
+			android:singleLine="true"
+			tools:text="Dec 24, 13:37"/>
+
+		<ImageView
+			android:id="@+id/msgStatus"
+			android:layout_width="wrap_content"
+			android:layout_height="wrap_content"
+			android:layout_alignBottom="@+id/msgTime"
+			android:layout_alignRight="@+id/msgBody"
+			android:layout_alignEnd="@+id/msgBody"
+			android:layout_marginLeft="3dp"
+			tools:src="@drawable/message_delivered"/>
+
+	</RelativeLayout>
+
+</LinearLayout>

briar-android/res/values/color.xml

@@ -5,7 +5,6 @@
     <color name="action_bar_background">#2D3E50</color>
     <color name="button_bar_background">#FFFFFF</color>
     <color name="dashboard_background">#FFFFFF</color>
-    <color name="private_message_background">#FFFFFF</color>
 	<color name="private_message_date">#AAAAAA</color>
     <color name="unread_background">#FFFFFF</color>
 	<color name="horizontal_border">#CCCCCC</color>

briar-android/src/org/briarproject/android/contact/ConversationActivity.java

@@ -142,14 +142,7 @@ implements EventListener, OnClickListener, OnItemClickListener {
 			}
 		};
 		list.setLayoutParams(MATCH_WRAP_1);
-		int pad = LayoutUtils.getPadding(this);
+		list.setDivider(null);
-		list.setPadding(0, pad, 0, pad);
-		list.setClipToPadding(false);
-		// Make the dividers the same colour as the background
-		Resources res = getResources();
-		int background = res.getColor(android.R.color.transparent);
-		list.setDivider(new ColorDrawable(background));
-		list.setDividerHeight(pad);
 		list.setAdapter(adapter);
 		list.setOnItemClickListener(this);
 		list.setEmptyView(loading);

briar-android/src/org/briarproject/android/contact/ConversationAdapter.java

@@ -1,40 +1,28 @@
 package org.briarproject.android.contact;
 
 import android.content.Context;
-import android.content.res.Resources;
 import android.text.format.DateUtils;
+import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.ArrayAdapter;
-import android.widget.ImageButton;
 import android.widget.ImageView;
-import android.widget.LinearLayout;
 import android.widget.TextView;
 
 import org.briarproject.R;
-import org.briarproject.android.util.ElasticHorizontalSpace;
-import org.briarproject.android.util.LayoutUtils;
 import org.briarproject.api.messaging.PrivateMessageHeader;
 import org.briarproject.util.StringUtils;
 
 import java.util.ArrayList;
 
-import static android.view.Gravity.BOTTOM;
-import static android.view.Gravity.LEFT;
-import static android.widget.LinearLayout.HORIZONTAL;
-import static android.widget.LinearLayout.VERTICAL;
-import static org.briarproject.android.util.CommonLayoutParams.MATCH_WRAP;
 import static org.briarproject.api.messaging.PrivateMessageHeader.Status.DELIVERED;
 import static org.briarproject.api.messaging.PrivateMessageHeader.Status.SENT;
 
 class ConversationAdapter extends ArrayAdapter<ConversationItem> {
 
-	private final int pad;
-
 	ConversationAdapter(Context ctx) {
 		super(ctx, android.R.layout.simple_expandable_list_item_1,
 				new ArrayList<ConversationItem>());
-		pad = LayoutUtils.getPadding(ctx);
 	}
 
 	@Override
@@ -42,46 +30,15 @@ class ConversationAdapter extends ArrayAdapter<ConversationItem> {
 		ConversationItem item = getItem(position);
 		PrivateMessageHeader header = item.getHeader();
 		Context ctx = getContext();
-		Resources res = ctx.getResources();
 
-		LinearLayout layout = new LinearLayout(ctx);
+		LayoutInflater inflater = (LayoutInflater) ctx.getSystemService
-		layout.setOrientation(VERTICAL);
+				(Context.LAYOUT_INFLATER_SERVICE);
-		if (header.isLocal()) layout.setPadding(3 * pad, 0, 0, 0);
-		else layout.setPadding(0, 0, 3 * pad, 0);
-
-		int background = res.getColor(R.color.private_message_background);
-
-		View content;
-		if (item.getBody() == null) {
-			TextView ellipsis = new TextView(ctx);
-			ellipsis.setText("\u2026");
-			content = ellipsis;
-		} else if (header.getContentType().equals("text/plain")) {
-			TextView text = new TextView(ctx);
-			text.setText(StringUtils.fromUtf8(item.getBody()));
-			content = text;
-		} else {
-			ImageButton attachment = new ImageButton(ctx);
-			attachment.setImageResource(R.drawable.content_attachment);
-			content = attachment;
-		}
-		content.setLayoutParams(MATCH_WRAP);
-		content.setBackgroundColor(background);
-		content.setPadding(pad, pad, pad, 0);
-		layout.addView(content);
 
+		View v;
 		if (header.isLocal()) {
-			LinearLayout footer = new LinearLayout(ctx);
+			v = inflater.inflate(R.layout.list_item_msg_out, null);
-			footer.setLayoutParams(MATCH_WRAP);
-			footer.setOrientation(HORIZONTAL);
-			footer.setGravity(BOTTOM);
-			footer.setPadding(pad, 0, pad, pad);
-			footer.setBackgroundColor(background);
 
-			footer.addView(new ElasticHorizontalSpace(ctx));
+			ImageView status = (ImageView) v.findViewById(R.id.msgStatus);
-
-			ImageView status = new ImageView(ctx);
-			status.setPadding(0, 0, pad, 0);
 			if (item.getStatus() == DELIVERED) {
 				status.setImageResource(R.drawable.message_delivered);
 			} else if (item.getStatus() == SENT) {
@@ -89,27 +46,24 @@ class ConversationAdapter extends ArrayAdapter<ConversationItem> {
 			} else {
 				status.setImageResource(R.drawable.message_stored);
 			}
-			footer.addView(status);
-
-			TextView date = new TextView(ctx);
-			date.setTextColor(res.getColor(R.color.private_message_date));
-			long timestamp = header.getTimestamp();
-			date.setText(DateUtils.getRelativeTimeSpanString(ctx, timestamp));
-			footer.addView(date);
-
-			layout.addView(footer);
 		} else {
-			TextView date = new TextView(ctx);
+			v = inflater.inflate(R.layout.list_item_msg_in, null);
-			date.setLayoutParams(MATCH_WRAP);
-			date.setGravity(LEFT);
-			date.setTextColor(res.getColor(R.color.private_message_date));
-			date.setBackgroundColor(background);
-			date.setPadding(pad, 0, pad, pad);
-			long timestamp = header.getTimestamp();
-			date.setText(DateUtils.getRelativeTimeSpanString(ctx, timestamp));
-			layout.addView(date);
 		}
 
-		return layout;
+		TextView body = (TextView) v.findViewById(R.id.msgBody);
+
+		if (item.getBody() == null) {
+			body.setText("\u2026");
+		} else if (header.getContentType().equals("text/plain")) {
+			body.setText(StringUtils.fromUtf8(item.getBody()));
+		} else {
+			// TODO support other content types
+		}
+
+		TextView date = (TextView) v.findViewById(R.id.msgTime);
+		long timestamp = header.getTimestamp();
+		date.setText(DateUtils.getRelativeTimeSpanString(ctx, timestamp));
+
+		return v;
 	}
 }

briar-android/src/org/briarproject/android/contact/ReadPrivateMessageActivity.java

@@ -40,6 +40,7 @@ import static org.briarproject.android.util.CommonLayoutParams.MATCH_WRAP_1;
 import static org.briarproject.android.util.CommonLayoutParams.WRAP_WRAP_1;
 import static org.briarproject.api.identity.Author.Status.VERIFIED;
 
+@Deprecated
 public class ReadPrivateMessageActivity extends BriarActivity
 implements OnClickListener {