Redesign conversation and conversation preferences layouts

Remove avatars from conversation items unless in a group chat.

// FREEBIE

res/drawable/recipient_preference_scrim_bottom.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+            android:angle="90"
+            android:startColor="#3A000000"
+            android:centerColor="#1D000000"
+            android:endColor="@android:color/transparent"/>
+</shape>

res/drawable/recipient_preference_scrim_top.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+    <gradient
+            android:angle="270"
+            android:startColor="#26000000"
+            android:centerColor="#0C000000"
+            android:endColor="@android:color/transparent"/>
+</shape>

res/layout/conversation_title_view.xml

@@ -2,36 +2,74 @@
 <org.thoughtcrime.securesms.ConversationTitleView
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:tools="http://schemas.android.com/tools"
-              android:orientation="vertical"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
+        xmlns:app="http://schemas.android.com/apk/res-auto"
         android:layout_gravity="center_vertical"
         android:gravity="center_vertical">
 
+    <ImageView android:id="@+id/up_button"
+               android:layout_width="wrap_content"
+               android:layout_height="wrap_content"
+               android:src="@drawable/ic_arrow_back_white_24dp"
+               android:clickable="true"
+               android:layout_marginRight="15dp"
+               android:layout_marginEnd="15dp"
+               android:layout_alignParentLeft="true"
+               android:layout_alignParentStart="true"
+               android:layout_centerVertical="true"
+               android:visibility="visible"/>
+
+    <org.thoughtcrime.securesms.components.AvatarImageView
+            android:id="@+id/contact_photo_image"
+            android:foreground="@drawable/contact_photo_background"
+            android:layout_width="48dp"
+            android:layout_height="48dp"
+            android:layout_toRightOf="@id/up_button"
+            android:layout_toEndOf="@id/up_button"
+            android:layout_centerVertical="true"
+            android:layout_marginRight="10dp"
+            android:layout_marginEnd="10dp"
+            android:cropToPadding="true"
+            android:transitionName="contact_photo"
+            app:inverted="true"
+            tools:src="@drawable/ic_contact_picture"
+            android:contentDescription="@string/conversation_list_item_view__contact_photo_image"/>
+
+    <RelativeLayout android:id="@+id/content"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_toRightOf="@id/contact_photo_image"
+                    android:layout_toEndOf="@id/contact_photo_image"
+                    android:layout_centerVertical="true">
+
         <org.thoughtcrime.securesms.components.emoji.EmojiTextView
                 android:id="@+id/title"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:singleLine="true"
                 android:ellipsize="end"
+                android:textSize="18dp"
                 android:transitionName="recipient_name"
                 android:drawablePadding="5dp"
                 android:gravity="center_vertical"
                 android:layout_gravity="center_vertical"
+                android:layout_alignParentLeft="true"
+                android:layout_alignParentStart="true"
+                android:layout_alignParentTop="true"
                 style="@style/TextSecure.TitleTextStyle"
                 tools:ignore="UnusedAttribute"/>
 
-    <LinearLayout android:orientation="horizontal"
-                  android:layout_width="wrap_content"
-                  android:layout_height="wrap_content"
-                  android:gravity="center_vertical">
-
         <ImageView android:id="@+id/verified_indicator"
                    android:src="@drawable/ic_check_circle_white_18dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginRight="3dp"
+                   android:layout_marginEnd="3dp"
                    android:layout_gravity="bottom"
+                   android:layout_alignParentLeft="true"
+                   android:layout_alignParentStart="true"
+                   android:layout_below="@id/title"
                    android:alpha="0.7"
                    android:visibility="gone"/>
 
@@ -43,10 +81,14 @@
                 android:ellipsize="end"
                 android:layout_gravity="center_vertical|start"
                 android:gravity="center_vertical"
+                android:layout_toRightOf="@id/verified_indicator"
+                android:layout_toEndOf="@id/verified_indicator"
+                android:layout_below="@id/title"
                 android:textDirection="ltr"
+                android:textSize="13dp"
                 tools:text="(123) 123-1234"
                 style="@style/TextSecure.SubtitleTextStyle"/>
 
-    </LinearLayout>
+    </RelativeLayout>
 
 </org.thoughtcrime.securesms.ConversationTitleView>

res/layout/recipient_preference_activity.xml

@@ -1,69 +1,72 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.design.widget.CoordinatorLayout
-              xmlns:tools="http://schemas.android.com/tools"
+        xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto"
-              android:orientation="vertical"
         android:layout_width="match_parent"
-              android:layout_height="match_parent">
+        android:layout_height="match_parent"
+        android:background="@color/transparent"
+        xmlns:tools="http://schemas.android.com/tools">
 
-    <android.support.v7.widget.Toolbar
+    <android.support.design.widget.AppBarLayout
-            android:id="@+id/toolbar"
+            android:id="@+id/app_bar_layout"
-            android:layout_height="130dp"
             android:layout_width="match_parent"
-            android:minHeight="?attr/actionBarSize"
+            android:layout_height="300dp"
-            android:background="?attr/colorPrimary"
+            android:background="@color/transparent">
-            android:theme="@style/TextSecure.LightActionBar">
 
-        <LinearLayout android:layout_width="match_parent"
+        <android.support.design.widget.CollapsingToolbarLayout
+                android:id="@+id/collapsing_toolbar"
+                android:layout_width="match_parent"
                 android:layout_height="match_parent"
-                      android:orientation="horizontal"
+                android:background="@color/transparent"
-                      android:gravity="center_vertical">
+                app:layout_scrollFlags="scroll|exitUntilCollapsed">
 
-            <org.thoughtcrime.securesms.components.AvatarImageView
+            <ImageView android:id="@+id/avatar"
-                    android:id="@+id/avatar"
+                       android:layout_width="match_parent"
-                    android:foreground="@drawable/contact_photo_background"
+                       android:layout_height="match_parent"
-                    android:layout_width="50dp"
+                       android:scaleType="centerCrop"
-                    android:layout_height="50dp"
+                       android:background="@color/black"
-                    android:cropToPadding="true"
+                       android:transitionName="avatar"
-                    app:inverted="true" />
+                       app:layout_collapseMode="parallax"
+                       app:layout_collapseParallaxMultiplier="0.7"/>
+
+            <View
+                    android:layout_width="match_parent"
+                    android:layout_height="88dp"
+                    android:background="@drawable/recipient_preference_scrim_top"
+                    app:layout_collapseMode="pin"/>
 
-            <LinearLayout android:layout_width="wrap_content"
+            <View
-                          android:layout_height="wrap_content"
+                    android:layout_width="match_parent"
-                          android:orientation="vertical"
+                    android:layout_height="98dp"
-                          android:paddingLeft="10dp">
+                    android:layout_gravity="bottom"
+                    android:layout_alignBottom="@+id/image"
+                    android:background="@drawable/recipient_preference_scrim_bottom"/>
 
-                <org.thoughtcrime.securesms.components.emoji.EmojiTextView
+            <android.support.v7.widget.Toolbar
-                          android:id="@+id/name"
+                    android:id="@+id/toolbar"
-                          android:layout_width="wrap_content"
+                    android:layout_width="match_parent"
-                          android:layout_height="wrap_content"
+                    android:layout_height="?attr/actionBarSize"
-                          android:ellipsize="end"
+                    android:theme="@style/TextSecure.LightActionBar"
-                          android:transitionName="recipient_name"
+                    android:background="@color/transparent"
-                          style="@style/TextSecure.TitleTextStyle"
+                    android:layout_marginTop="24dp"
-                          tools:ignore="UnusedAttribute" />
+                    app:layout_collapseMode="pin" >
 
-                <TextView android:id="@+id/blocked_indicator"
+            </android.support.v7.widget.Toolbar>
-                          android:layout_width="wrap_content"
-                          android:layout_height="wrap_content"
-                          android:text="@string/recipient_preference_activity__blocked"
-                          android:textSize="12sp"
-                          android:textStyle="bold"
-                          android:textColor="?recipient_preference_blocked"
-                          android:textAllCaps="true"
-                          android:background="@drawable/blocked_indicator_background"
-                          android:paddingTop="3dp"
-                          android:paddingBottom="3dp"
-                          android:paddingLeft="5dp"
-                          android:paddingRight="5dp"
-                          android:layout_marginTop="2dp"
-                          tools:ignore="UnusedAttribute" />
 
-            </LinearLayout>
+        </android.support.design.widget.CollapsingToolbarLayout>
 
-        </LinearLayout>
+    </android.support.design.widget.AppBarLayout>
 
-    </android.support.v7.widget.Toolbar>
+    <android.support.v4.widget.NestedScrollView
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:fillViewport="true"
+            app:layout_behavior="@string/appbar_scrolling_view_behavior">
 
         <FrameLayout android:id="@+id/preference_fragment"
                      android:layout_width="match_parent"
                      android:layout_height="match_parent"/>
-</LinearLayout>
+
+    </android.support.v4.widget.NestedScrollView>
+
+</android.support.design.widget.CoordinatorLayout>

res/values/dimens.xml

@@ -13,7 +13,7 @@
     <dimen name="transport_selection_popup_width">200sp</dimen>
     <dimen name="transport_selection_popup_xoff">2dp</dimen>
     <dimen name="transport_selection_popup_yoff">2dp</dimen>
-    <dimen name="contact_photo_target_size">64dp</dimen>
+    <dimen name="contact_photo_target_size">300dp</dimen>
     <dimen name="contact_selection_photo_size">50dp</dimen>
     <dimen name="thumbnail_max_size">230dp</dimen>
     <dimen name="preference_fragment_padding_side">8dp</dimen>

src/org/thoughtcrime/securesms/ConversationActivity.java

@@ -1201,31 +1201,18 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
       }
     });
 
-    titleView.setOnClickListener(new OnClickListener() {
+    titleView.setOnClickListener(v -> {
-      @Override
-      public void onClick(View v) {
       Intent intent = new Intent(ConversationActivity.this, RecipientPreferenceActivity.class);
       intent.putExtra(RecipientPreferenceActivity.ADDRESS_EXTRA, recipient.getAddress());
       intent.putExtra(RecipientPreferenceActivity.CAN_HAVE_SAFETY_NUMBER_EXTRA,
                       isSecureText && !isSelfConversation());
 
-        startActivitySceneTransition(intent, titleView.findViewById(R.id.title), "recipient_name");
+      startActivitySceneTransition(intent, titleView.findViewById(R.id.contact_photo_image), "avatar");
-      }
-    });
-
-    unblockButton.setOnClickListener(new OnClickListener() {
-      @Override
-      public void onClick(View v) {
-        handleUnblock();
-      }
     });
 
-    makeDefaultSmsButton.setOnClickListener(new OnClickListener() {
+    titleView.setOnBackClickedListener(view -> onBackPressed());
-      @Override
+    unblockButton.setOnClickListener(v -> handleUnblock());
-      public void onClick(View v) {
+    makeDefaultSmsButton.setOnClickListener(v -> handleMakeDefaultSms());
-        handleMakeDefaultSms();
-      }
-    });
 
     composeText.setOnKeyListener(composeKeyPressedListener);
     composeText.addTextChangedListener(composeKeyPressedListener);
@@ -1243,7 +1230,7 @@ public class ConversationActivity extends PassphraseRequiredActionBarActivity
   }
 
   protected void initializeActionBar() {
-    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
+    getSupportActionBar().setDisplayHomeAsUpEnabled(false);
     getSupportActionBar().setCustomView(R.layout.conversation_title_view);
     getSupportActionBar().setDisplayShowCustomEnabled(true);
     getSupportActionBar().setDisplayShowTitleEnabled(false);

src/org/thoughtcrime/securesms/ConversationItem.java

@@ -123,7 +123,7 @@ public class ConversationItem extends LinearLayout
   private AlertView          alertView;
 
   private @NonNull  Set<MessageRecord>  batchSelected = new HashSet<>();
-  private @Nullable Recipient           conversationRecipient;
+  private @NonNull  Recipient           conversationRecipient;
   private @NonNull  Stub<ThumbnailView> mediaThumbnailStub;
   private @NonNull  Stub<AudioView>     audioViewStub;
   private @NonNull  Stub<DocumentView>  documentViewStub;
@@ -404,9 +404,14 @@ public class ConversationItem extends LinearLayout
     }
   }
 
-  private void setContactPhoto(Recipient recipient) {
+  private void setContactPhoto(@NonNull Recipient recipient) {
-    if (! messageRecord.isOutgoing()) {
+    if (contactPhoto == null) return;
-      setContactPhotoForRecipient(recipient);
+
+    if (messageRecord.isOutgoing() || !groupThread) {
+      contactPhoto.setVisibility(View.GONE);
+    } else {
+      contactPhoto.setAvatar(recipient, true);
+      contactPhoto.setVisibility(View.VISIBLE);
     }
   }
 
@@ -547,15 +552,6 @@ public class ConversationItem extends LinearLayout
     }
   }
 
-  /// Helper Methods
-
-  private void setContactPhotoForRecipient(final Recipient recipient) {
-    if (contactPhoto == null) return;
-
-    contactPhoto.setAvatar(recipient, true);
-    contactPhoto.setVisibility(View.VISIBLE);
-  }
-
   /// Event handlers
 
   private void handleApproveIdentity() {
@@ -570,15 +566,12 @@ public class ConversationItem extends LinearLayout
 
   @Override
   public void onModified(final Recipient modified) {
-    Util.runOnMain(new Runnable() {
+    Util.runOnMain(() -> {
-      @Override
-      public void run() {
       setBubbleState(messageRecord, recipient);
       setContactPhoto(recipient);
       setGroupMessageStatus(messageRecord, recipient);
       setAudioViewTint(messageRecord, conversationRecipient);
       setDocumentViewTint(messageRecord, conversationRecipient);
-      }
     });
   }
 

src/org/thoughtcrime/securesms/ConversationTitleView.java

@@ -1,21 +1,33 @@
 package org.thoughtcrime.securesms;
 
 import android.content.Context;
+import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.text.TextUtils;
 import android.util.AttributeSet;
+import android.util.Log;
 import android.view.View;
 import android.widget.ImageView;
-import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
 import android.widget.TextView;
 
+import com.annimon.stream.Collectors;
+import com.annimon.stream.Stream;
+
+import org.thoughtcrime.securesms.components.AvatarImageView;
 import org.thoughtcrime.securesms.recipients.Recipient;
+import org.thoughtcrime.securesms.util.TextSecurePreferences;
 import org.thoughtcrime.securesms.util.ViewUtil;
 
-public class ConversationTitleView extends LinearLayout {
+import java.lang.ref.WeakReference;
+
+public class ConversationTitleView extends RelativeLayout {
 
   private static final String TAG = ConversationTitleView.class.getSimpleName();
 
+  private View            content;
+  private ImageView       back;
+  private AvatarImageView avatar;
   private TextView        title;
   private TextView        subtitle;
   private ImageView       verified;
@@ -33,9 +45,12 @@ public class ConversationTitleView extends LinearLayout {
   public void onFinishInflate() {
     super.onFinishInflate();
 
-    this.title    = (TextView)  findViewById(R.id.title);
+    this.back     = ViewUtil.findById(this, R.id.up_button);
-    this.subtitle = (TextView)  findViewById(R.id.subtitle);
+    this.content  = ViewUtil.findById(this, R.id.content);
-    this.verified = (ImageView) findViewById(R.id.verified_indicator);
+    this.title    = ViewUtil.findById(this, R.id.title);
+    this.subtitle = ViewUtil.findById(this, R.id.subtitle);
+    this.verified = ViewUtil.findById(this, R.id.verified_indicator);
+    this.avatar   = ViewUtil.findById(this, R.id.contact_photo_image);
 
     ViewUtil.setTextViewGravityStart(this.title, getContext());
     ViewUtil.setTextViewGravityStart(this.subtitle, getContext());
@@ -52,12 +67,25 @@ public class ConversationTitleView extends LinearLayout {
     } else {
       title.setCompoundDrawablesWithIntrinsicBounds(0, 0, 0, 0);
     }
+
+    if (recipient != null) {
+      this.avatar.setAvatar(recipient, false);
+    }
   }
 
   public void setVerified(boolean verified) {
     this.verified.setVisibility(verified ? View.VISIBLE : View.GONE);
   }
 
+  @Override
+  public void setOnClickListener(@Nullable OnClickListener listener) {
+    this.content.setOnClickListener(listener);
+  }
+
+  public void setOnBackClickedListener(@Nullable OnClickListener listener) {
+    this.back.setOnClickListener(listener);
+  }
+
   private void setComposeTitle() {
     this.title.setText(R.string.ConversationActivity_compose_message);
     this.subtitle.setText(null);
@@ -71,9 +99,15 @@ public class ConversationTitleView extends LinearLayout {
   }
 
   private void setGroupRecipientTitle(Recipient recipient) {
+    String localNumber = TextSecurePreferences.getLocalNumber(getContext());
+
     this.title.setText(recipient.getName());
-    this.subtitle.setText(null);
+    this.subtitle.setText(Stream.of(recipient.getParticipants())
-    this.subtitle.setVisibility(View.GONE);
+                                .filter(r -> !r.getAddress().serialize().equals(localNumber))
+                                .map(Recipient::toShortString)
+                                .collect(Collectors.joining(",")));
+
+    this.subtitle.setVisibility(View.VISIBLE);
   }
 
   private void setNonContactRecipientTitle(Recipient recipient) {

src/org/thoughtcrime/securesms/RecipientPreferenceActivity.java

@@ -5,30 +5,30 @@ import android.content.Context;
 import android.content.DialogInterface;
 import android.content.Intent;
 import android.content.IntentFilter;
+import android.graphics.Color;
 import android.media.Ringtone;
 import android.media.RingtoneManager;
 import android.net.Uri;
 import android.os.AsyncTask;
 import android.os.Build;
 import android.os.Bundle;
-import android.os.Handler;
 import android.preference.CheckBoxPreference;
 import android.preference.ListPreference;
 import android.preference.Preference;
 import android.provider.Settings;
 import android.support.annotation.NonNull;
+import android.support.design.widget.CollapsingToolbarLayout;
 import android.support.v4.app.Fragment;
 import android.support.v4.preference.PreferenceFragment;
 import android.support.v7.app.AlertDialog;
 import android.support.v7.widget.Toolbar;
 import android.util.Log;
 import android.view.MenuItem;
-import android.view.View;
+import android.view.WindowManager;
-import android.widget.TextView;
+import android.widget.ImageView;
 
 import org.thoughtcrime.securesms.color.MaterialColor;
 import org.thoughtcrime.securesms.color.MaterialColors;
-import org.thoughtcrime.securesms.components.AvatarImageView;
 import org.thoughtcrime.securesms.crypto.IdentityKeyParcelable;
 import org.thoughtcrime.securesms.crypto.MasterSecret;
 import org.thoughtcrime.securesms.database.Address;
@@ -49,6 +49,7 @@ import org.thoughtcrime.securesms.util.DynamicNoActionBarTheme;
 import org.thoughtcrime.securesms.util.DynamicTheme;
 import org.thoughtcrime.securesms.util.IdentityUtil;
 import org.thoughtcrime.securesms.util.Util;
+import org.thoughtcrime.securesms.util.ViewUtil;
 import org.thoughtcrime.securesms.util.concurrent.ListenableFuture;
 import org.whispersystems.libsignal.util.guava.Optional;
 
@@ -71,10 +72,8 @@ public class RecipientPreferenceActivity extends PassphraseRequiredActionBarActi
   private final DynamicTheme    dynamicTheme    = new DynamicNoActionBarTheme();
   private final DynamicLanguage dynamicLanguage = new DynamicLanguage();
 
-  private AvatarImageView   avatar;
+  private ImageView               avatar;
-  private Toolbar           toolbar;
+  private CollapsingToolbarLayout toolbarLayout;
-  private TextView          title;
-  private TextView          blockedIndicator;
   private BroadcastReceiver       staleReceiver;
 
   @Override
@@ -125,25 +124,35 @@ public class RecipientPreferenceActivity extends PassphraseRequiredActionBarActi
     super.onOptionsItemSelected(item);
     switch (item.getItemId()) {
       case android.R.id.home:
-        super.onBackPressed();
+        onBackPressed();
         return true;
     }
 
     return false;
   }
 
+  @Override
+  public void onBackPressed() {
+    finish();
+    overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);
+  }
+
   private void initializeToolbar() {
-    this.toolbar = (Toolbar) findViewById(R.id.toolbar);
+    this.toolbarLayout = ViewUtil.findById(this, R.id.collapsing_toolbar);
-    this.toolbar.setLogo(null);
+    this.avatar        = ViewUtil.findById(this, R.id.avatar);
 
-    setSupportActionBar(toolbar);
+    this.toolbarLayout.setExpandedTitleColor(getResources().getColor(R.color.white));
+    this.toolbarLayout.setCollapsedTitleTextColor(getResources().getColor(R.color.white));
 
+    Toolbar toolbar = ViewUtil.findById(this, R.id.toolbar);
+    setSupportActionBar(toolbar);
     getSupportActionBar().setDisplayHomeAsUpEnabled(true);
-    getSupportActionBar().setDisplayShowTitleEnabled(false);
+    getSupportActionBar().setLogo(null);
 
-    this.avatar           = (AvatarImageView) toolbar.findViewById(R.id.avatar);
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-    this.title            = (TextView) toolbar.findViewById(R.id.name);
+      getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
-    this.blockedIndicator = (TextView) toolbar.findViewById(R.id.blocked_indicator);
+      getWindow().setStatusBarColor(Color.TRANSPARENT);
+    }
   }
 
   private void initializeReceivers() {
@@ -163,27 +172,15 @@ public class RecipientPreferenceActivity extends PassphraseRequiredActionBarActi
     registerReceiver(staleReceiver, staleFilter);
   }
 
-  private void setHeader(Recipient recipient) {
+  private void setHeader(@NonNull Recipient recipient) {
-    this.avatar.setAvatar(recipient, true);
+    this.avatar.setImageDrawable(recipient.getContactPhoto().asCallCard(this));
-    this.title.setText(recipient.toShortString());
+    this.toolbarLayout.setTitle(recipient.toShortString());
-    this.toolbar.setBackgroundColor(recipient.getColor().toActionBarColor(this));
+    this.toolbarLayout.setContentScrimColor(recipient.getColor().toActionBarColor(this));
-
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
-      getWindow().setStatusBarColor(recipient.getColor().toStatusBarColor(this));
-    }
-
-    if (recipient.isBlocked()) this.blockedIndicator.setVisibility(View.VISIBLE);
-    else                       this.blockedIndicator.setVisibility(View.GONE);
   }
 
   @Override
   public void onModified(final Recipient recipient) {
-    title.post(new Runnable() {
+    Util.runOnMain(() -> setHeader(recipient));
-      @Override
-      public void run() {
-        setHeader(recipient);
-      }
-    });
   }
 
   public static class RecipientPreferenceFragment