Verification: migrate to Epoxy - Request Fragment

vector/src/main/java/im/vector/riotx/features/crypto/verification/SASVerificationCodeFragment.kt

@@ -36,7 +36,7 @@ class SASVerificationCodeFragment @Inject constructor(
     @BindView(R.id.sas_emoji_grid)
     lateinit var emojiGrid: ViewGroup
 
-    @BindView(R.id.sas_decimal_code)
+    @BindView(R.id.itemVerificationDecimalCode)
     lateinit var decimalTextView: TextView
 
     @BindView(R.id.emoji0)

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationBottomSheet.kt

@@ -17,20 +17,15 @@ package im.vector.riotx.features.crypto.verification
 
 import android.os.Bundle
 import android.os.Parcelable
-import android.view.LayoutInflater
 import android.view.View
-import android.view.ViewGroup
 import android.widget.ImageView
 import android.widget.TextView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
-import androidx.core.text.toSpannable
 import androidx.fragment.app.Fragment
 import androidx.lifecycle.Observer
 import androidx.transition.AutoTransition
 import androidx.transition.TransitionManager
 import butterknife.BindView
-import butterknife.ButterKnife
-import butterknife.Unbinder
 import com.airbnb.mvrx.MvRx
 import com.airbnb.mvrx.Success
 import com.airbnb.mvrx.fragmentViewModel
@@ -40,9 +35,7 @@ import im.vector.riotx.R
 import im.vector.riotx.core.di.ScreenComponent
 import im.vector.riotx.core.extensions.commitTransactionNow
 import im.vector.riotx.core.platform.VectorBaseBottomSheetDialogFragment
-import im.vector.riotx.core.utils.colorizeMatchingText
 import im.vector.riotx.features.home.AvatarRenderer
-import im.vector.riotx.features.themes.ThemeUtils
 import kotlinx.android.parcel.Parcelize
 import kotlinx.android.synthetic.main.bottom_sheet_verification.*
 import timber.log.Timber
@@ -97,11 +90,7 @@ class VerificationBottomSheet : VectorBaseBottomSheetDialogFragment() {
 
     override fun invalidate() = withState(viewModel) {
         it.otherUserMxItem?.let { matrixItem ->
-            val displayName = matrixItem.displayName ?: ""
+            otherUserNameText.text = getString(R.string.verification_request_alert_title, matrixItem.getBestName())
-            otherUserNameText.text = getString(R.string.verification_request_alert_title, displayName)
-                    .toSpannable()
-                    .colorizeMatchingText(displayName, ThemeUtils.getColor(requireContext(), R.attr.vctr_notice_text_color))
-
             avatarRenderer.render(matrixItem, otherUserAvatarImageView)
         }
 

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationRequestController.kt

@@ -0,0 +1,93 @@
+/*
+ * Copyright 2019 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification
+
+import androidx.core.text.toSpannable
+import com.airbnb.epoxy.EpoxyController
+import com.airbnb.mvrx.Loading
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.bottomsheet.bottomSheetSeparatorItem
+import im.vector.riotx.core.resources.ColorProvider
+import im.vector.riotx.core.resources.StringProvider
+import im.vector.riotx.core.utils.colorizeMatchingText
+import im.vector.riotx.features.crypto.verification.bottomsheet.bottomSheetVerificationActionItem
+import im.vector.riotx.features.crypto.verification.bottomsheet.bottomSheetVerificationNoticeItem
+import im.vector.riotx.features.crypto.verification.bottomsheet.bottomSheetVerificationWaitingItem
+import javax.inject.Inject
+
+class VerificationRequestController @Inject constructor(
+        private val stringProvider: StringProvider,
+        private val colorProvider: ColorProvider
+) : EpoxyController() {
+
+    var listener: Listener? = null
+
+    private var viewState: VerificationRequestViewState? = null
+
+    init {
+        // We are requesting a model build directly as the first build of epoxy is on the main thread.
+        // It avoids to build the whole list on the main thread.
+        requestModelBuild()
+    }
+
+    fun update(viewState: VerificationRequestViewState) {
+        this.viewState = viewState
+        requestModelBuild()
+    }
+
+    override fun buildModels() {
+        val state = viewState ?: return
+
+        val styledText = state.matrixItem.let {
+            stringProvider.getString(R.string.verification_request_notice, it.id)
+                    .toSpannable()
+                    .colorizeMatchingText(it.id, colorProvider.getColorFromAttribute(R.attr.vctr_notice_text_color))
+        }
+
+        bottomSheetVerificationNoticeItem {
+            id("notice")
+            notice(styledText)
+        }
+
+        bottomSheetSeparatorItem {
+            id("sep")
+        }
+
+        when (state.started) {
+            is Loading -> {
+                bottomSheetVerificationWaitingItem {
+                    id("waiting")
+                    title(stringProvider.getString(R.string.verification_request_waiting_for, state.matrixItem.getBestName()))
+                }
+            }
+            else       -> {
+                bottomSheetVerificationActionItem {
+                    id("start")
+                    title(stringProvider.getString(R.string.start_verification))
+                    subTitle(stringProvider.getString(R.string.verification_request_start_notice))
+                    iconRes(R.drawable.ic_arrow_right)
+                    iconColor(colorProvider.getColorFromAttribute(R.attr.riotx_text_primary))
+                    listener { listener?.onClickOnVerificationStart() }
+                }
+            }
+        }
+    }
+
+    interface Listener {
+        fun onClickOnVerificationStart()
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/VerificationRequestFragment.kt

@@ -15,68 +15,51 @@
  */
 package im.vector.riotx.features.crypto.verification
 
-import android.graphics.Typeface
+import android.os.Bundle
-import androidx.core.text.toSpannable
+import android.view.View
-import androidx.core.view.isInvisible
-import androidx.core.view.isVisible
-import butterknife.OnClick
-import com.airbnb.mvrx.Loading
 import com.airbnb.mvrx.fragmentViewModel
 import com.airbnb.mvrx.parentFragmentViewModel
 import com.airbnb.mvrx.withState
 import im.vector.riotx.R
+import im.vector.riotx.core.extensions.cleanup
+import im.vector.riotx.core.extensions.configureWith
 import im.vector.riotx.core.platform.VectorBaseFragment
-import im.vector.riotx.core.utils.colorizeMatchingText
+import kotlinx.android.synthetic.main.bottom_sheet_verification_child_fragment.*
-import im.vector.riotx.core.utils.styleMatchingText
-import im.vector.riotx.features.home.AvatarRenderer
-import im.vector.riotx.features.themes.ThemeUtils
-import kotlinx.android.synthetic.main.fragment_verification_request.*
 import javax.inject.Inject
 
 class VerificationRequestFragment @Inject constructor(
         val verificationRequestViewModelFactory: VerificationRequestViewModel.Factory,
-        val avatarRenderer: AvatarRenderer
+        val controller: VerificationRequestController
-) : VectorBaseFragment() {
+) : VectorBaseFragment(), VerificationRequestController.Listener {
 
     private val viewModel by fragmentViewModel(VerificationRequestViewModel::class)
 
     private val sharedViewModel by parentFragmentViewModel(VerificationBottomSheetViewModel::class)
 
-    override fun getLayoutResId() = R.layout.fragment_verification_request
+    override fun getLayoutResId() = R.layout.bottom_sheet_verification_child_fragment
 
-    override fun invalidate() = withState(viewModel) { state ->
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
-        state.matrixItem.let {
+        super.onViewCreated(view, savedInstanceState)
-            val styledText = getString(R.string.verification_request_alert_description, it.id)
-                    .toSpannable()
-                    .styleMatchingText(it.id, Typeface.BOLD)
-                    .colorizeMatchingText(it.id, ThemeUtils.getColor(requireContext(), R.attr.vctr_notice_text_color))
-            verificationRequestText.text = styledText
-        }
 
-        when (state.started) {
+        setupRecyclerView()
-            is Loading -> {
-                // Hide the start button, show waiting
-                verificationStartButton.isInvisible = true
-                verificationWaitingText.isVisible = true
-                val otherUser = state.matrixItem.displayName ?: state.matrixItem.id
-                verificationWaitingText.text = getString(R.string.verification_request_waiting_for, otherUser)
-                        .toSpannable()
-                        .styleMatchingText(otherUser, Typeface.BOLD)
-                        .colorizeMatchingText(otherUser, ThemeUtils.getColor(requireContext(), R.attr.vctr_notice_text_color))
-            }
-            else       -> {
-                verificationStartButton.isEnabled = true
-                verificationStartButton.isVisible = true
-                verificationWaitingText.isInvisible = true
-            }
-        }
-
-        Unit
     }
 
-    @OnClick(R.id.verificationStartButton)
+    override fun onDestroyView() {
-    fun onClickOnVerificationStart() = withState(viewModel) { state ->
+        bottomSheetVerificationRecyclerView.cleanup()
-        verificationStartButton.isEnabled = false
+        controller.listener = null
+        super.onDestroyView()
+    }
+
+    private fun setupRecyclerView() {
+        bottomSheetVerificationRecyclerView.configureWith(controller, hasFixedSize = false)
+        controller.listener = this
+    }
+
+    override fun invalidate() = withState(viewModel) { state ->
+        controller.update(state)
+    }
+
+    override fun onClickOnVerificationStart() = withState(viewModel) { state ->
         sharedViewModel.handle(VerificationAction.RequestVerificationByDM(state.matrixItem.id, state.roomId))
     }
 }

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationActionItem.kt

@@ -0,0 +1,77 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification.bottomsheet
+
+import android.content.res.ColorStateList
+import android.widget.ImageView
+import android.widget.TextView
+import androidx.annotation.DrawableRes
+import androidx.core.view.isVisible
+import androidx.core.widget.ImageViewCompat
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+import im.vector.riotx.core.extensions.setTextOrHide
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_action)
+abstract class BottomSheetVerificationActionItem : VectorEpoxyModel<BottomSheetVerificationActionItem.Holder>() {
+
+    @EpoxyAttribute
+    @DrawableRes
+    var iconRes: Int = -1
+    @EpoxyAttribute
+    var title: CharSequence = ""
+    @EpoxyAttribute
+    var subTitle: CharSequence = ""
+    @EpoxyAttribute
+    var titleColor: Int = 0
+    @EpoxyAttribute
+    var iconColor: Int = 0
+
+    @EpoxyAttribute
+    lateinit var listener: () -> Unit
+
+    override fun bind(holder: Holder) {
+        holder.view.setOnClickListener {
+            listener.invoke()
+        }
+
+        holder.title.text = title
+        holder.title.setTextColor(titleColor)
+
+        holder.subTitle.setTextOrHide(subTitle)
+
+        if (iconRes != -1) {
+            holder.icon.isVisible = true
+            holder.icon.setImageResource(iconRes)
+            ImageViewCompat.setImageTintList(holder.icon, ColorStateList.valueOf(iconColor))
+        } else {
+            holder.icon.isVisible = false
+        }
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val title by bind<TextView>(R.id.itemVerificationActionTitle)
+        val subTitle by bind<TextView>(R.id.itemVerificationActionSubTitle)
+        val icon by bind<ImageView>(R.id.itemVerificationActionIcon)
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationBigImageItem.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification.bottomsheet
+
+import android.widget.ImageView
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_big_image)
+abstract class BottomSheetVerificationBigImageItem : VectorEpoxyModel<BottomSheetVerificationBigImageItem.Holder>() {
+
+    @EpoxyAttribute
+    var imageRes: Int = 0
+
+    override fun bind(holder: Holder) {
+        holder.image.setImageResource(imageRes)
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val image by bind<ImageView>(R.id.itemVerificationBigImage)
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationDecimalCodeItem.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification.bottomsheet
+
+import android.widget.TextView
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_decimal_code)
+abstract class BottomSheetVerificationDecimalCodeItem : VectorEpoxyModel<BottomSheetVerificationDecimalCodeItem.Holder>() {
+
+    @EpoxyAttribute
+    var code: CharSequence = ""
+
+    override fun bind(holder: Holder) {
+        holder.code.text = code
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val code by bind<TextView>(R.id.itemVerificationDecimalCode)
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationEmojisItem.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification.bottomsheet
+
+import android.widget.TextView
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_emojis)
+abstract class BottomSheetVerificationEmojisItem : VectorEpoxyModel<BottomSheetVerificationEmojisItem.Holder>() {
+
+    @EpoxyAttribute
+    var notice: CharSequence = ""
+
+    override fun bind(holder: Holder) {
+        holder.notice.text = notice
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val notice by bind<TextView>(R.id.itemVerificationNoticeText)
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationNoticeItem.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification.bottomsheet
+
+import android.widget.TextView
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_notice)
+abstract class BottomSheetVerificationNoticeItem : VectorEpoxyModel<BottomSheetVerificationNoticeItem.Holder>() {
+
+    @EpoxyAttribute
+    var notice: CharSequence = ""
+
+    override fun bind(holder: Holder) {
+        holder.notice.text = notice
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val notice by bind<TextView>(R.id.itemVerificationNoticeText)
+    }
+}

vector/src/main/java/im/vector/riotx/features/crypto/verification/bottomsheet/BottomSheetVerificationWaitingItem.kt

@@ -0,0 +1,42 @@
+/*
+ * Copyright 2020 New Vector Ltd
+ *
+ * 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 im.vector.riotx.features.crypto.verification.bottomsheet
+
+import android.widget.TextView
+import com.airbnb.epoxy.EpoxyAttribute
+import com.airbnb.epoxy.EpoxyModelClass
+import im.vector.riotx.R
+import im.vector.riotx.core.epoxy.VectorEpoxyHolder
+import im.vector.riotx.core.epoxy.VectorEpoxyModel
+
+/**
+ * A action for bottom sheet.
+ */
+@EpoxyModelClass(layout = R.layout.item_verification_waiting)
+abstract class BottomSheetVerificationWaitingItem : VectorEpoxyModel<BottomSheetVerificationWaitingItem.Holder>() {
+
+    @EpoxyAttribute
+    var title: CharSequence = ""
+
+    override fun bind(holder: Holder) {
+        holder.title.text = title
+    }
+
+    class Holder : VectorEpoxyHolder() {
+        val title by bind<TextView>(R.id.itemVerificationWaitingTitle)
+    }
+}

vector/src/main/res/layout/bottom_sheet_verification_child_fragment.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/bottomSheetVerificationRecyclerView"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:fadeScrollbars="false"
+    android:scrollbars="vertical"
+    tools:itemCount="5"
+    tools:listitem="@layout/item_verification_action" />

vector/src/main/res/layout/fragment_verification_request.xml

@@ -1,43 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.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="wrap_content"
-    android:padding="16dp">
-
-    <TextView
-        android:id="@+id/verificationRequestText"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginBottom="8dp"
-        android:textColor="?riotx_text_secondary"
-        app:layout_constraintTop_toTopOf="parent"
-        tools:text="@string/verification_request_alert_description" />
-
-    <!--    app:layout_constraintTop_toBottomOf="@id/verificationRequestAvatar"-->
-
-    <com.google.android.material.button.MaterialButton
-        android:id="@+id/verificationStartButton"
-        style="@style/VectorButtonStylePositive"
-        android:layout_width="match_parent"
-        android:layout_marginTop="16dp"
-        android:text="@string/start_verification"
-        app:layout_constraintTop_toBottomOf="@id/verificationRequestText" />
-
-    <TextView
-        android:id="@+id/verificationWaitingText"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:gravity="center_horizontal"
-        android:textColor="?vctr_notice_secondary"
-        android:textSize="17sp"
-        android:textStyle="bold"
-        android:visibility="invisible"
-        tools:visibility="visible"
-        app:layout_constraintBottom_toBottomOf="@id/verificationStartButton"
-        app:layout_constraintTop_toTopOf="@id/verificationStartButton"
-        tools:text="@string/verification_request_waiting_for" />
-
-
-</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/item_verification_action.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.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="wrap_content"
+    android:clickable="true"
+    android:focusable="true"
+    android:foreground="?attr/selectableItemBackground"
+    android:minHeight="72dp"
+    android:paddingLeft="@dimen/layout_horizontal_margin"
+    android:paddingTop="8dp"
+    android:paddingRight="@dimen/layout_horizontal_margin"
+    android:paddingBottom="8dp">
+
+    <TextView
+        android:id="@+id/itemVerificationActionTitle"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:textColor="@color/riotx_accent"
+        android:textSize="16sp"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toTopOf="@+id/itemVerificationActionSubTitle"
+        app:layout_constraintEnd_toStartOf="@+id/itemVerificationActionIcon"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed"
+        tools:text="@string/start_verification" />
+
+    <TextView
+        android:id="@+id/itemVerificationActionSubTitle"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="4dp"
+        android:textColor="?riotx_text_secondary"
+        android:textSize="12sp"
+        android:visibility="gone"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/itemVerificationActionIcon"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@+id/itemVerificationActionTitle"
+        tools:text="For maximum security, do this in person"
+        tools:visibility="visible" />
+
+    <ImageView
+        android:id="@+id/itemVerificationActionIcon"
+        android:layout_width="48dp"
+        android:layout_height="48dp"
+        android:scaleType="center"
+        android:tint="?riotx_text_primary"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:src="@drawable/ic_arrow_right" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/item_verification_big_image.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/itemVerificationBigImage"
+    android:layout_width="match_parent"
+    android:layout_height="180dp"
+    android:layout_margin="8dp"
+    android:src="@drawable/ic_shield_trusted" />

vector/src/main/res/layout/item_verification_decimal_code.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<TextView 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:id="@+id/itemVerificationDecimalCode"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_marginTop="8dp"
+    android:layout_marginBottom="8dp"
+    android:gravity="center_horizontal"
+    android:textColor="?riotx_text_primary"
+    android:textSize="28sp"
+    android:textStyle="bold"
+    app:layout_constraintBottom_toBottomOf="@+id/sas_emoji_grid"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toTopOf="@+id/sas_emoji_grid"
+    tools:text="1234-4320-3905" />

vector/src/main/res/layout/item_verification_emojis.xml

@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.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="wrap_content"
+    android:layout_margin="@dimen/layout_vertical_margin"
+    app:layout_constrainedWidth="true"
+    app:layout_constraintEnd_toEndOf="parent"
+    app:layout_constraintStart_toStartOf="parent"
+    app:layout_constraintTop_toBottomOf="@+id/sas_emoji_description_2">
+
+    <include
+        android:id="@+id/emoji0"
+        layout="@layout/item_emoji_verif" />
+
+    <include
+        android:id="@+id/emoji1"
+        layout="@layout/item_emoji_verif" />
+
+    <include
+        android:id="@+id/emoji2"
+        layout="@layout/item_emoji_verif" />
+
+    <include
+        android:id="@+id/emoji3"
+        layout="@layout/item_emoji_verif" />
+
+    <include
+        android:id="@+id/emoji4"
+        layout="@layout/item_emoji_verif" />
+
+    <include
+        android:id="@+id/emoji5"
+        layout="@layout/item_emoji_verif" />
+
+    <include
+        android:id="@+id/emoji6"
+        layout="@layout/item_emoji_verif" />
+
+    <androidx.constraintlayout.helper.widget.Flow
+        android:id="@+id/sas_emoji_grid_flow"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        app:constraint_referenced_ids="emoji0,emoji1,emoji2,emoji3,emoji4,emoji5,emoji6"
+        app:flow_horizontalBias="0.5"
+        app:flow_horizontalGap="16dp"
+        app:flow_horizontalStyle="packed"
+        app:flow_verticalBias="0"
+        app:flow_verticalGap="8dp"
+        app:flow_wrapMode="chain"
+        tools:ignore="MissingConstraints" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/item_verification_notice.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<TextView xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/itemVerificationNoticeText"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:paddingLeft="@dimen/layout_horizontal_margin"
+    android:paddingTop="8dp"
+    android:paddingRight="@dimen/layout_horizontal_margin"
+    android:paddingBottom="8dp"
+    android:textColor="?riotx_text_primary"
+    android:textSize="14sp"
+    tools:text="todo" />

vector/src/main/res/layout/item_verification_waiting.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<androidx.constraintlayout.widget.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="wrap_content"
+    android:minHeight="72dp"
+    android:paddingLeft="@dimen/layout_horizontal_margin"
+    android:paddingTop="8dp"
+    android:paddingRight="@dimen/layout_horizontal_margin"
+    android:paddingBottom="8dp">
+
+    <TextView
+        android:id="@+id/itemVerificationWaitingTitle"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:textColor="?riotx_text_secondary"
+        android:textSize="16sp"
+        app:layout_constrainedWidth="true"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toStartOf="@+id/itemVerificationWaitingProgress"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintVertical_chainStyle="packed"
+        tools:text="Waiting for..." />
+
+    <ProgressBar
+        android:id="@+id/itemVerificationWaitingProgress"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:visibility="gone"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:visibility="visible" />
+
+
+</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/values/strings_riotX.xml

@@ -85,4 +85,8 @@
     <string name="settings_category_composer">Message editor</string>
 
 
+
+    <string name="verification_request_notice">For extra security, verify %s by checking a one-time code.</string>
+    <string name="verification_request_start_notice">For maximum security, do this in person.</string>
+
 </resources>