diff --git a/library/ui-strings/src/main/res/values/strings.xml b/library/ui-strings/src/main/res/values/strings.xml
index 8520bfbed4..a2642caab3 100644
--- a/library/ui-strings/src/main/res/values/strings.xml
+++ b/library/ui-strings/src/main/res/values/strings.xml
@@ -3323,9 +3323,18 @@
Tap top right to see the option to feedback.
Try it out
-
+
+ 1
+ 2
+ 3
+ 4
+
Scan QR code
Use the camera on this device to scan the QR code shown on your other device:
+ Open Element on your other device
+ Go to Settings -> Security & Privacy
+ Select \'Link a device\'
+ Select \'Show QR code on this device\'
diff --git a/library/ui-styles/src/main/res/values/stylable_qr_code_instructions_view.xml b/library/ui-styles/src/main/res/values/stylable_qr_code_instructions_view.xml
new file mode 100644
index 0000000000..c9a4bb9d05
--- /dev/null
+++ b/library/ui-styles/src/main/res/values/stylable_qr_code_instructions_view.xml
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsView.kt b/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsView.kt
new file mode 100644
index 0000000000..ddb92b272e
--- /dev/null
+++ b/vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsView.kt
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2022 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.app.features.login.qr
+
+import android.content.Context
+import android.content.res.TypedArray
+import android.util.AttributeSet
+import android.view.LayoutInflater
+import androidx.constraintlayout.widget.ConstraintLayout
+import androidx.core.content.res.use
+import im.vector.app.R
+import im.vector.app.core.extensions.setTextOrHide
+import im.vector.app.databinding.ViewQrCodeLoginInstructionsBinding
+
+class QrCodeLoginInstructionsView @JvmOverloads constructor(
+ context: Context,
+ attrs: AttributeSet? = null,
+ defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+
+ private val binding = ViewQrCodeLoginInstructionsBinding.inflate(
+ LayoutInflater.from(context),
+ this
+ )
+
+ init {
+ context.obtainStyledAttributes(
+ attrs,
+ R.styleable.QrCodeLoginInstructionsView,
+ 0,
+ 0
+ ).use {
+ setInstructions(it)
+ }
+ }
+
+ private fun setInstructions(typedArray: TypedArray) {
+ val instruction1 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction1)
+ val instruction2 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction2)
+ val instruction3 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction3)
+ val instruction4 = typedArray.getString(R.styleable.QrCodeLoginInstructionsView_qrCodeLoginInstruction4)
+ binding.instruction1TextView.setTextOrHide(instruction1)
+ binding.instruction2TextView.setTextOrHide(instruction2)
+ binding.instruction3TextView.setTextOrHide(instruction3)
+ binding.instruction4TextView.setTextOrHide(instruction4)
+ }
+}
diff --git a/vector/src/main/res/drawable/circle_qr_code_login_instruction_with_border.xml b/vector/src/main/res/drawable/circle_qr_code_login_instruction_with_border.xml
new file mode 100644
index 0000000000..cb99e4467c
--- /dev/null
+++ b/vector/src/main/res/drawable/circle_qr_code_login_instruction_with_border.xml
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/vector/src/main/res/layout/fragment_qr_code_login_instructions.xml b/vector/src/main/res/layout/fragment_qr_code_login_instructions.xml
index 3f085b0aee..9f87b1b4d4 100644
--- a/vector/src/main/res/layout/fragment_qr_code_login_instructions.xml
+++ b/vector/src/main/res/layout/fragment_qr_code_login_instructions.xml
@@ -17,4 +17,18 @@
app:qrCodeLoginHeaderImageResource="@drawable/ic_camera"
app:qrCodeLoginHeaderTitle="@string/qr_code_login_header_scan_qr_code_title" />
+
+
diff --git a/vector/src/main/res/layout/view_qr_code_login_instructions.xml b/vector/src/main/res/layout/view_qr_code_login_instructions.xml
new file mode 100644
index 0000000000..4b23c0d73d
--- /dev/null
+++ b/vector/src/main/res/layout/view_qr_code_login_instructions.xml
@@ -0,0 +1,132 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+