Create custom view for header section.

library/ui-strings/src/main/res/values/strings.xml

@@ -3323,5 +3323,9 @@
     <!--    Note to translators: for RTL languages, context menu will be at top left corner instead of top right corner. Thanks!-->
     <string name="onboarding_new_app_layout_feedback_message">Tap top right to see the option to feedback.</string>
     <string name="onboarding_new_app_layout_button_try">Try it out</string>
+    
+    <!-- QR Code Login -->
+    <string name="qr_code_login_header_scan_qr_code_title">Scan QR code</string>
+    <string name="qr_code_login_header_scan_qr_code_description">Use the camera on this device to scan the QR code shown on your other device:</string>
 
 </resources>

library/ui-styles/src/main/res/values/stylable_qr_code_login_header_view.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+
+    <declare-styleable name="QrCodeLoginHeaderView">
+        <attr name="qrCodeLoginHeaderTitle" format="string" />
+        <attr name="qrCodeLoginHeaderDescription" format="string" />
+        <attr name="qrCodeLoginHeaderImageResource" format="reference" />
+        <attr name="qrCodeLoginHeaderImageBackgroundTint" format="color" />
+    </declare-styleable>
+
+</resources>

vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginHeaderView.kt

@@ -0,0 +1,69 @@
+/*
+ * 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.ColorStateList
+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.databinding.ViewQrCodeLoginHeaderBinding
+
+class QrCodeLoginHeaderView @JvmOverloads constructor(
+        context: Context,
+        attrs: AttributeSet? = null,
+        defStyleAttr: Int = 0
+) : ConstraintLayout(context, attrs, defStyleAttr) {
+
+    private val binding = ViewQrCodeLoginHeaderBinding.inflate(
+            LayoutInflater.from(context),
+            this
+    )
+
+    init {
+        context.obtainStyledAttributes(
+                attrs,
+                R.styleable.QrCodeLoginHeaderView,
+                0,
+                0
+        ).use {
+            setTitle(it)
+            setDescription(it)
+            setImage(it)
+        }
+    }
+
+    private fun setTitle(typedArray: TypedArray) {
+        val title = typedArray.getString(R.styleable.QrCodeLoginHeaderView_qrCodeLoginHeaderTitle)
+        binding.qrCodeLoginHeaderTitleTextView.text = title
+    }
+
+    private fun setDescription(typedArray: TypedArray) {
+        val description = typedArray.getString(R.styleable.QrCodeLoginHeaderView_qrCodeLoginHeaderDescription)
+        binding.qrCodeLoginHeaderDescriptionTextView.text = description
+    }
+
+    private fun setImage(typedArray: TypedArray) {
+        val imageResource = typedArray.getResourceId(R.styleable.QrCodeLoginHeaderView_qrCodeLoginHeaderImageResource, 0)
+        val backgroundTint = typedArray.getColor(R.styleable.QrCodeLoginHeaderView_qrCodeLoginHeaderImageBackgroundTint, 0)
+        binding.qrCodeLoginHeaderImageView.setImageResource(imageResource)
+        binding.qrCodeLoginHeaderImageView.backgroundTintList = ColorStateList.valueOf(backgroundTint)
+    }
+}

vector/src/main/java/im/vector/app/features/login/qr/QrCodeLoginInstructionsFragment.kt

@@ -0,0 +1,29 @@
+/*
+ * 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.view.LayoutInflater
+import android.view.ViewGroup
+import im.vector.app.core.platform.VectorBaseFragment
+import im.vector.app.databinding.FragmentQrCodeLoginInstructionsBinding
+
+class QrCodeLoginInstructionsFragment : VectorBaseFragment<FragmentQrCodeLoginInstructionsBinding>() {
+
+    override fun getBinding(inflater: LayoutInflater, container: ViewGroup?): FragmentQrCodeLoginInstructionsBinding {
+        return FragmentQrCodeLoginInstructionsBinding.inflate(inflater, container, false)
+    }
+}

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

@@ -0,0 +1,20 @@
+<?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"
+    android:layout_width="match_parent"
+    android:layout_height="match_parent"
+    android:paddingHorizontal="16dp">
+
+    <im.vector.app.features.login.qr.QrCodeLoginHeaderView
+        android:id="@+id/qrCodeLoginInstructionsHeaderView"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:qrCodeLoginHeaderDescription="@string/qr_code_login_header_scan_qr_code_description"
+        app:qrCodeLoginHeaderImageBackgroundTint="?colorPrimary"
+        app:qrCodeLoginHeaderImageResource="@drawable/ic_camera"
+        app:qrCodeLoginHeaderTitle="@string/qr_code_login_header_scan_qr_code_title" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

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

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<merge 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"
+    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout">
+
+    <ImageView
+        android:id="@+id/qrCodeLoginHeaderImageView"
+        android:layout_width="70dp"
+        android:layout_height="70dp"
+        android:layout_marginTop="40dp"
+        android:background="@drawable/circle"
+        android:contentDescription="@string/qr_code_login_header_scan_qr_code_title"
+        android:padding="12dp"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        app:tint="?vctr_system"
+        tools:backgroundTint="?colorPrimary"
+        tools:src="@drawable/ic_camera" />
+
+    <TextView
+        android:id="@+id/qrCodeLoginHeaderTitleTextView"
+        style="@style/TextAppearance.Vector.Title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="32dp"
+        android:textStyle="bold"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/qrCodeLoginHeaderImageView"
+        tools:text="@string/qr_code_login_header_scan_qr_code_title" />
+
+    <TextView
+        android:id="@+id/qrCodeLoginHeaderDescriptionTextView"
+        style="@style/TextAppearance.Vector.Subtitle"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="16dp"
+        android:gravity="center"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/qrCodeLoginHeaderTitleTextView"
+        tools:text="@string/qr_code_login_header_scan_qr_code_description" />
+
+</merge>