Polish toolbar on room detail screen

app/build.gradle

@@ -54,6 +54,11 @@ dependencies {
     implementation "com.airbnb.android:epoxy-paging:$epoxy_version"
     implementation 'com.airbnb.android:mvrx:0.6.0'
 
+    implementation 'com.github.bumptech.glide:glide:4.8.0'
+    kapt 'com.github.bumptech.glide:compiler:4.8.0'
+    //todo remove that
+    implementation 'com.amulyakhare:com.amulyakhare.textdrawable:1.0.1'
+
 
     implementation "org.koin:koin-android:$koin_version"
     implementation "org.koin:koin-android-scope:$koin_version"

app/src/main/java/im/vector/riotredesign/core/extensions/CharSequence.kt

@@ -0,0 +1,6 @@
+package im.vector.riotredesign.core.extensions
+
+
+fun CharSequence.firstCharAsString(): String {
+    return this[0].toString()
+}

app/src/main/java/im/vector/riotredesign/features/home/RoomSummaryViewHelper.kt

@@ -0,0 +1,19 @@
+package im.vector.riotredesign.features.home
+
+import android.content.Context
+import android.graphics.drawable.Drawable
+import android.support.v4.content.ContextCompat
+import com.amulyakhare.textdrawable.TextDrawable
+import im.vector.matrix.android.api.session.room.model.RoomSummary
+import im.vector.riotredesign.R
+import im.vector.riotredesign.core.extensions.firstCharAsString
+
+class RoomSummaryViewHelper(private val roomSummary: RoomSummary) {
+
+    fun avatarDrawable(context: Context): Drawable {
+        val avatarColor = ContextCompat.getColor(context, R.color.pale_teal)
+        return TextDrawable.builder().buildRound(roomSummary.displayName.firstCharAsString().toUpperCase(), avatarColor)
+    }
+
+
+}

app/src/main/java/im/vector/riotredesign/features/home/detail/RoomDetailFragment.kt

@@ -16,6 +16,7 @@ import im.vector.riotredesign.R
 import im.vector.riotredesign.core.platform.RiotFragment
 import im.vector.riotredesign.core.platform.ToolbarConfigurable
 import im.vector.riotredesign.core.utils.FragmentArgumentDelegate
+import im.vector.riotredesign.features.home.RoomSummaryViewHelper
 import kotlinx.android.synthetic.main.fragment_room_detail.*
 import org.koin.android.ext.android.inject
 
@@ -76,7 +77,15 @@ class RoomDetailFragment : RiotFragment(), TimelineEventAdapter.Callback {
 
     private fun renderRoomSummary(roomSummary: RoomSummary?) {
         roomSummary?.let {
-            toolbar.title = it.displayName
+            val roomSummaryViewHelper = RoomSummaryViewHelper(it)
+            toolbarTitleView.text = it.displayName
+            toolbarAvatarImageView.setImageDrawable(roomSummaryViewHelper.avatarDrawable(riotActivity))
+            if (it.topic.isNotEmpty()) {
+                toolbarSubtitleView.visibility = View.VISIBLE
+                toolbarSubtitleView.text = it.topic
+            } else {
+                toolbarSubtitleView.visibility = View.GONE
+            }
         }
     }
 

app/src/main/java/im/vector/riotredesign/features/home/list/RoomListFragment.kt

@@ -36,7 +36,7 @@ class RoomListFragment : RiotFragment(), RoomSummaryController.Callback {
 
     override fun onActivityCreated(savedInstanceState: Bundle?) {
         super.onActivityCreated(savedInstanceState)
-        roomController = RoomSummaryController(this)
+        roomController = RoomSummaryController(riotActivity, this)
         stateView.contentView = epoxyRecyclerView
         epoxyRecyclerView.setController(roomController)
 

app/src/main/java/im/vector/riotredesign/features/home/list/RoomSummaryController.kt

@@ -1,16 +1,20 @@
 package im.vector.riotredesign.features.home.list
 
+import android.content.Context
 import com.airbnb.epoxy.Typed2EpoxyController
 import im.vector.matrix.android.api.session.room.model.RoomSummary
+import im.vector.riotredesign.features.home.RoomSummaryViewHelper
 
-class RoomSummaryController(private val callback: Callback? = null
-
+class RoomSummaryController(private val context: Context,
+                            private val callback: Callback? = null
 ) : Typed2EpoxyController<List<RoomSummary>, RoomSummary>() {
 
     override fun buildModels(summaries: List<RoomSummary>?, selected: RoomSummary?) {
         summaries?.forEach {
+            val roomSummaryViewHelper = RoomSummaryViewHelper(it)
             RoomSummaryItem(
-                    it.displayName,
+                    title = it.displayName,
+                    avatarDrawable = roomSummaryViewHelper.avatarDrawable(context),
                     isSelected = it == selected,
                     listener = { callback?.onRoomSelected(it) }
             )

app/src/main/java/im/vector/riotredesign/features/home/list/RoomSummaryItem.kt

@@ -1,23 +1,28 @@
 package im.vector.riotredesign.features.home.list
 
-import android.support.v4.content.ContextCompat
+import android.graphics.drawable.Drawable
+import android.widget.ImageView
 import android.widget.TextView
 import im.vector.riotredesign.R
 import im.vector.riotredesign.core.epoxy.KotlinModel
 import im.vector.riotredesign.core.platform.CheckableConstraintLayout
 
+
 data class RoomSummaryItem(
         val title: CharSequence,
+        val avatarDrawable: Drawable,
         val isSelected: Boolean,
         val listener: (() -> Unit)? = null
 ) : KotlinModel(R.layout.item_room) {
 
-    val titleView by bind<TextView>(R.id.titleView)
-    val rootView by bind<CheckableConstraintLayout>(R.id.itemRoomLayout)
+    private val titleView by bind<TextView>(R.id.titleView)
+    private val avatarImageView by bind<ImageView>(R.id.toolbarAvatarImageView)
+    private val rootView by bind<CheckableConstraintLayout>(R.id.itemRoomLayout)
 
     override fun bind() {
         rootView.isChecked = isSelected
         titleView.setOnClickListener { listener?.invoke() }
         titleView.text = title
+        avatarImageView.setImageDrawable(avatarDrawable)
     }
 }

app/src/main/res/layout/fragment_room_detail.xml

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
@@ -8,12 +9,65 @@
         android:id="@+id/toolbar"
         android:layout_width="0dp"
         android:layout_height="?actionBarSize"
-        android:background="@color/dark"
+        android:background="?attr/colorPrimary"
+        app:contentInsetStartWithNavigation="0dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent"
         app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
-        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
+        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
+
+        <android.support.constraint.ConstraintLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent">
+
+            <ImageView
+                android:id="@+id/toolbarAvatarImageView"
+                android:layout_width="40dp"
+                android:layout_height="40dp"
+                android:layout_marginBottom="8dp"
+                android:layout_marginTop="8dp"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:src="@tools:sample/avatars" />
+
+            <TextView
+                android:id="@+id/toolbarTitleView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="8dp"
+                android:layout_marginStart="8dp"
+                android:ellipsize="end"
+                android:maxLines="1"
+                android:textSize="18sp"
+                app:layout_constraintBottom_toTopOf="@+id/toolbarSubtitleView"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.0"
+                app:layout_constraintStart_toEndOf="@+id/toolbarAvatarImageView"
+                app:layout_constraintTop_toTopOf="parent"
+                tools:text="@tools:sample/full_names" />
+
+            <TextView
+                android:id="@+id/toolbarSubtitleView"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="8dp"
+                android:layout_marginEnd="8dp"
+                android:layout_marginStart="8dp"
+                android:ellipsize="end"
+                android:maxLines="1"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintHorizontal_bias="0.0"
+                app:layout_constraintStart_toEndOf="@+id/toolbarAvatarImageView"
+                app:layout_constraintTop_toBottomOf="@+id/toolbarTitleView"
+                tools:text="@tools:sample/date/day_of_week" />
+
+
+        </android.support.constraint.ConstraintLayout>
+
+    </android.support.v7.widget.Toolbar>
 
     <com.airbnb.epoxy.EpoxyRecyclerView
         android:id="@+id/recyclerView"

app/src/main/res/layout/item_room.xml

@@ -2,27 +2,34 @@
 
 <im.vector.riotredesign.core.platform.CheckableConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    android:id="@+id/itemRoomLayout"
     xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/itemRoomLayout"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@drawable/bg_room_item"
-    android:minHeight="80dp">
+    android:minHeight="48dp">
+
+    <ImageView
+        android:id="@+id/toolbarAvatarImageView"
+        android:layout_width="32dp"
+        android:layout_height="32dp"
+        android:layout_marginStart="16dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:src="@tools:sample/avatars" />
 
     <TextView xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:tools="http://schemas.android.com/tools"
         android:id="@+id/titleView"
-        android:layout_width="match_parent"
+        android:layout_width="0dp"
         android:layout_height="wrap_content"
-        android:layout_marginStart="24dp"
-        android:layout_marginTop="8dp"
-        android:layout_marginEnd="8dp"
-        android:layout_marginBottom="8dp"
+        android:layout_marginStart="16dp"
         android:textSize="14sp"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintStart_toEndOf="@id/toolbarAvatarImageView"
         app:layout_constraintTop_toTopOf="parent"
-        tools:text="Room name" />
+        tools:text="@tools:sample/full_names" />
 
 </im.vector.riotredesign.core.platform.CheckableConstraintLayout>