Changes the user detais UI.

app/build.gradle

@@ -140,6 +140,7 @@ dependencies {
     implementation libraries.frescoAnimatedWebP
 
     implementation libraries.glide
+    implementation libraries.glideTransformations
 
     kapt libraries.kotshiCompiler
     implementation libraries.kotshiApi

app/src/main/java/chat/rocket/android/userdetails/ui/UserDetailsFragment.kt

@@ -10,6 +10,7 @@ import chat.rocket.android.R
 import chat.rocket.android.analytics.AnalyticsManager
 import chat.rocket.android.analytics.event.ScreenViewEvent
 import chat.rocket.android.chatroom.ui.ChatRoomActivity
+import chat.rocket.android.emoji.internal.GlideApp
 import chat.rocket.android.userdetails.presentation.UserDetailsPresenter
 import chat.rocket.android.userdetails.presentation.UserDetailsView
 import chat.rocket.android.util.extensions.inflate
@@ -17,7 +18,12 @@ import chat.rocket.android.util.extensions.setLightStatusBar
 import chat.rocket.android.util.extensions.showToast
 import chat.rocket.android.util.extensions.ui
 import com.bumptech.glide.Glide
+import com.bumptech.glide.load.MultiTransformation
+import com.bumptech.glide.load.resource.bitmap.CenterCrop
+import com.bumptech.glide.load.resource.bitmap.RoundedCorners
+import com.bumptech.glide.request.RequestOptions
 import dagger.android.support.AndroidSupportInjection
+import jp.wasabeef.glide.transformations.BlurTransformation
 import kotlinx.android.synthetic.main.app_bar_chat_room.*
 import kotlinx.android.synthetic.main.fragment_user_details.*
 import javax.inject.Inject
@@ -62,6 +68,7 @@ class UserDetailsFragment : Fragment(), UserDetailsView {
         super.onViewCreated(view, savedInstanceState)
 
         setupToolbar()
+        setupListeners()
         presenter.loadUserDetails(userId)
 
         analyticsManager.logScreenView(ScreenViewEvent.UserDetails)
@@ -74,14 +81,17 @@ class UserDetailsFragment : Fragment(), UserDetailsView {
         status: String,
         utcOffset: String
     ) {
-        Glide.with(this)
-            .asBitmap()
-            .load(avatarUrl)
+        val requestBuilder = Glide.with(this).load(avatarUrl)
+
+        requestBuilder.apply(RequestOptions.bitmapTransform(MultiTransformation(BlurTransformation(), CenterCrop())))
+            .into(image_blur)
+
+        requestBuilder.apply(RequestOptions.bitmapTransform(RoundedCorners(14)))
             .into(image_avatar)
 
         text_name.text = name
         text_username.text = username
-        text_description_status.text = status
+        text_description_status.text = status.substring(0, 1).toUpperCase() + status.substring(1)
         text_description_timezone.text = utcOffset
 
         // We should also setup the user details listeners.
@@ -114,4 +124,8 @@ class UserDetailsFragment : Fragment(), UserDetailsView {
             toolbar.isVisible = false
         }
     }
+
+    private fun setupListeners() {
+        image_arrow_back.setOnClickListener { activity?.onBackPressed() }
+    }
 }
\ No newline at end of file

app/src/main/res/drawable/bg_round_bounds_white.xml → app/src/main/res/drawable/bg_border_user_details_avatar.xml

@@ -3,12 +3,12 @@
     android:shape="rectangle">
 
     <padding
-        android:bottom="2dp"
-        android:left="2dp"
-        android:right="2dp"
-        android:top="2dp" />
+        android:bottom="3dp"
+        android:left="3dp"
+        android:right="3dp"
+        android:top="3dp" />
 
-    <solid android:color="@android:color/white" />
+    <solid android:color="@color/color_white" />
 
-    <corners android:radius="25px" />
+    <corners android:radius="6dp" />
 </shape>

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

 <?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<ScrollView 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"
-    android:background="@android:color/white"
-    android:padding="@dimen/screen_edge_left_and_right_margins">
+    android:layout_height="match_parent">
+
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:background="@android:color/white">
+
+        <ImageView
+            android:id="@+id/image_blur"
+            android:layout_width="match_parent"
+            android:layout_height="120dp" />
+
+        <ImageView
+            android:id="@+id/image_arrow_back"
+            android:layout_width="24dp"
+            android:layout_height="24dp"
+            android:layout_margin="@dimen/screen_edge_left_and_right_margins"
+            android:src="@drawable/ic_arrow_back_white_24dp"
+            android:tint="@color/color_black"
+            app:layout_constraintStart_toStartOf="@+id/image_blur"
+            app:layout_constraintTop_toTopOf="@+id/image_blur" />
 
         <ImageView
             android:id="@+id/image_avatar"
-        android:layout_width="98dp"
-        android:layout_height="98dp"
+            android:layout_width="100dp"
+            android:layout_height="100dp"
+            android:background="@drawable/bg_border_user_details_avatar"
+            app:layout_constraintBottom_toBottomOf="@+id/image_blur"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/image_blur"
             tools:srcCompat="@tools:sample/avatars[6]" />
 
         <TextView
@@ -55,7 +75,8 @@
             style="@style/UserDetails.TextView.Title"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-        android:layout_marginTop="32dp"
+            android:layout_marginStart="@dimen/screen_edge_left_and_right_margins"
+            android:layout_marginTop="20dp"
             android:text="@string/status"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/text_message" />
@@ -65,6 +86,7 @@
             style="@style/UserDetails.TextView.Description"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/screen_edge_left_and_right_margins"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/text_title_status"
             tools:text="Online" />
@@ -74,6 +96,7 @@
             style="@style/UserDetails.TextView.Title"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/screen_edge_left_and_right_margins"
             android:layout_marginTop="16dp"
             android:text="@string/timezone"
             app:layout_constraintStart_toStartOf="parent"
@@ -84,10 +107,20 @@
             style="@style/UserDetails.TextView.Description"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
+            android:layout_marginStart="@dimen/screen_edge_left_and_right_margins"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@+id/text_title_timezone"
             tools:text="(UTC-2) 11:08 AM" />
 
+        <View
+            android:id="@+id/view_gray_bottom"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            android:layout_marginTop="16dp"
+            android:background="#FFF3f4f5"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintTop_toBottomOf="@+id/text_description_timezone" />
+
         <com.wang.avi.AVLoadingIndicatorView
             android:id="@+id/view_loading"
             style="@style/Authentication.AVLoadingIndicatorView"
@@ -95,12 +128,12 @@
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        tools:visibility="visible" />
+            app:layout_constraintTop_toTopOf="parent" />
 
         <androidx.constraintlayout.widget.Group
             android:id="@+id/group_user_details"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-        app:constraint_referenced_ids="image_avatar, text_name, text_username, text_message, text_title_status, text_description_status, text_title_timezone, text_description_timezone" />
-</androidx.constraintlayout.widget.ConstraintLayout>
+            app:constraint_referenced_ids="image_blur, image_avatar, text_name, text_username, text_message, text_title_status, text_description_status, text_title_timezone, text_description_timezone, view_gray_bottom" />
+    </androidx.constraintlayout.widget.ConstraintLayout>
+</ScrollView>

dependencies.gradle

@@ -51,6 +51,7 @@ ext {
             markwon               : '2.0.0',
             aVLoadingIndicatorView: '2.1.3',
             glide                 : '4.8.0',
+            glideTransformations  : '4.0.0',
 
             // For wearable
             wear                  : '2.3.0',
@@ -118,6 +119,7 @@ ext {
             frescoImageViewer     : "com.github.luciofm:FrescoImageViewer:${versions.frescoImageViewer}",
             glide                 : "com.github.bumptech.glide:glide:${versions.glide}",
             glideProcessor        : "com.github.bumptech.glide:compiler:${versions.glide}",
+            glideTransformations  : "jp.wasabeef:glide-transformations:${versions.glideTransformations}",
 
             markwon               : "ru.noties:markwon:${versions.markwon}",