Create custom view for instructions section.
This commit is contained in:
parent
6fbdd87dcf
commit
4fdb4e8c79
|
@ -3324,8 +3324,17 @@
|
|||
<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>
|
||||
|
||||
<string name="one">1</string>
|
||||
<string name="two">2</string>
|
||||
<string name="three">3</string>
|
||||
<string name="four">4</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>
|
||||
<string name="qr_code_login_new_device_instruction_1">Open Element on your other device</string>
|
||||
<string name="qr_code_login_new_device_instruction_2">Go to Settings -> Security & Privacy</string>
|
||||
<string name="qr_code_login_new_device_instruction_3">Select \'Link a device\'</string>
|
||||
<string name="qr_code_login_new_device_instruction_4">Select \'Show QR code on this device\'</string>
|
||||
|
||||
</resources>
|
||||
|
|
|
@ -0,0 +1,11 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<resources>
|
||||
|
||||
<declare-styleable name="QrCodeLoginInstructionsView">
|
||||
<attr name="qrCodeLoginInstruction1" format="string" />
|
||||
<attr name="qrCodeLoginInstruction2" format="string" />
|
||||
<attr name="qrCodeLoginInstruction3" format="string" />
|
||||
<attr name="qrCodeLoginInstruction4" format="string" />
|
||||
</declare-styleable>
|
||||
|
||||
</resources>
|
|
@ -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)
|
||||
}
|
||||
}
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<shape xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
android:shape="ring"
|
||||
android:innerRadius="0dp"
|
||||
android:thicknessRatio="2"
|
||||
android:useLevel="false">
|
||||
|
||||
<solid android:color="?android:colorBackground" />
|
||||
|
||||
<stroke
|
||||
android:width="1dp"
|
||||
android:color="?colorPrimary" />
|
||||
|
||||
</shape>
|
|
@ -17,4 +17,18 @@
|
|||
app:qrCodeLoginHeaderImageResource="@drawable/ic_camera"
|
||||
app:qrCodeLoginHeaderTitle="@string/qr_code_login_header_scan_qr_code_title" />
|
||||
|
||||
<im.vector.app.features.login.qr.QrCodeLoginInstructionsView
|
||||
android:id="@+id/qrCodeLoginInstructionsView"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginHorizontal="8dp"
|
||||
android:layout_marginTop="24dp"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/qrCodeLoginInstructionsHeaderView"
|
||||
app:qrCodeLoginInstruction1="@string/qr_code_login_new_device_instruction_1"
|
||||
app:qrCodeLoginInstruction2="@string/qr_code_login_new_device_instruction_2"
|
||||
app:qrCodeLoginInstruction3="@string/qr_code_login_new_device_instruction_3"
|
||||
app:qrCodeLoginInstruction4="@string/qr_code_login_new_device_instruction_4" />
|
||||
|
||||
</androidx.constraintlayout.widget.ConstraintLayout>
|
||||
|
|
|
@ -0,0 +1,132 @@
|
|||
<?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">
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/instructions1Layout"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:orientation="horizontal"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toTopOf="parent"
|
||||
tools:visibility="visible">
|
||||
|
||||
<TextView
|
||||
style="@style/TextAppearance.Vector.Caption"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/circle_qr_code_login_instruction_with_border"
|
||||
android:padding="6dp"
|
||||
android:text="@string/one"
|
||||
android:textColor="?colorPrimary" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/instruction1TextView"
|
||||
style="@style/TextAppearance.Vector.Body"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center_vertical"
|
||||
android:layout_marginStart="8dp"
|
||||
tools:text="@string/qr_code_login_new_device_instruction_1" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/instructions2Layout"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="12dp"
|
||||
android:orientation="horizontal"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/instructions1Layout"
|
||||
tools:visibility="visible">
|
||||
|
||||
<TextView
|
||||
style="@style/TextAppearance.Vector.Caption"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/circle_qr_code_login_instruction_with_border"
|
||||
android:padding="6dp"
|
||||
android:text="@string/two"
|
||||
android:textColor="?colorPrimary" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/instruction2TextView"
|
||||
style="@style/TextAppearance.Vector.Body"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center_vertical"
|
||||
android:layout_marginStart="8dp"
|
||||
tools:text="@string/qr_code_login_new_device_instruction_2" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/instructions3Layout"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="12dp"
|
||||
android:orientation="horizontal"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/instructions2Layout"
|
||||
tools:visibility="visible">
|
||||
|
||||
<TextView
|
||||
style="@style/TextAppearance.Vector.Caption"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/circle_qr_code_login_instruction_with_border"
|
||||
android:padding="6dp"
|
||||
android:text="@string/three"
|
||||
android:textColor="?colorPrimary" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/instruction3TextView"
|
||||
style="@style/TextAppearance.Vector.Body"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center_vertical"
|
||||
android:layout_marginStart="8dp"
|
||||
tools:text="@string/qr_code_login_new_device_instruction_3" />
|
||||
</LinearLayout>
|
||||
|
||||
<LinearLayout
|
||||
android:id="@+id/instructions4Layout"
|
||||
android:layout_width="0dp"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_marginTop="12dp"
|
||||
android:orientation="horizontal"
|
||||
android:visibility="gone"
|
||||
app:layout_constraintEnd_toEndOf="parent"
|
||||
app:layout_constraintStart_toStartOf="parent"
|
||||
app:layout_constraintTop_toBottomOf="@id/instructions3Layout"
|
||||
tools:visibility="visible">
|
||||
|
||||
<TextView
|
||||
style="@style/TextAppearance.Vector.Caption"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:background="@drawable/circle_qr_code_login_instruction_with_border"
|
||||
android:padding="6dp"
|
||||
android:text="@string/four"
|
||||
android:textColor="?colorPrimary" />
|
||||
|
||||
<TextView
|
||||
android:id="@+id/instruction4TextView"
|
||||
style="@style/TextAppearance.Vector.Body"
|
||||
android:layout_width="wrap_content"
|
||||
android:layout_height="wrap_content"
|
||||
android:layout_gravity="center_vertical"
|
||||
android:layout_marginStart="8dp"
|
||||
tools:text="@string/qr_code_login_new_device_instruction_4" />
|
||||
</LinearLayout>
|
||||
|
||||
</merge>
|
Loading…
Reference in New Issue