diff --git a/Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/submission/TanInput.kt b/Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/submission/TanInput.kt
deleted file mode 100644
index 05cafbe81e156cc76ec698e114abecf04ec43028..0000000000000000000000000000000000000000
--- a/Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/submission/TanInput.kt
+++ /dev/null
@@ -1,117 +0,0 @@
-package de.rki.coronawarnapp.ui.submission
-
-import android.content.Context
-import android.os.Handler
-import android.text.InputFilter
-import android.util.AttributeSet
-import android.view.inputmethod.InputMethodManager
-import android.widget.FrameLayout
-import androidx.core.widget.doOnTextChanged
-import de.rki.coronawarnapp.R
-import de.rki.coronawarnapp.ui.submission.TanConstants.MAX_LENGTH
-import de.rki.coronawarnapp.util.TanHelper
-import kotlinx.android.synthetic.main.view_tan_input.view.dash_view_1
-import kotlinx.android.synthetic.main.view_tan_input.view.dash_view_2
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_edittext
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_1
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_10
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_2
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_3
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_4
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_5
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_6
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_7
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_8
-import kotlinx.android.synthetic.main.view_tan_input.view.tan_input_textview_9
-import java.util.Locale
-
-class TanInput(context: Context, attrs: AttributeSet) : FrameLayout(context, attrs) {
-
- companion object {
- private const val KEYBOARD_TRIGGER_DELAY = 100L
- }
-
- private val whitespaceFilter =
- InputFilter { source, _, _, _, _, _ -> source.filter { !it.isWhitespace() } }
- private val alphaNumericFilter = InputFilter { source, _, _, _, _, _ ->
- source.filter {
- TanConstants.ALPHA_NUMERIC_CHARS.contains(it)
- }
- }
- private var lengthFilter = InputFilter.LengthFilter(MAX_LENGTH)
-
- var listener: ((String?) -> Unit)? = null
-
- private var tan: String? = null
-
- init {
- inflate(context, R.layout.view_tan_input, this)
-
- tan_input_edittext.filters = arrayOf(whitespaceFilter, alphaNumericFilter, lengthFilter)
-
- dash_view_1.text = "-"
- dash_view_2.text = "-"
-
- // register listener
- tan_input_edittext.doOnTextChanged { text, _, _, _ -> updateTan(text) }
- setOnClickListener { showKeyboard() }
-
- // initially show the keyboard
- Handler().postDelayed({ showKeyboard() }, KEYBOARD_TRIGGER_DELAY)
- }
-
- private fun showKeyboard() {
- if (tan_input_edittext.requestFocus()) {
- val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
- imm.showSoftInput(tan_input_edittext, InputMethodManager.SHOW_IMPLICIT)
- }
- }
-
- private fun limitLength(length: Int?) {
- lengthFilter = InputFilter.LengthFilter(if (length != null) length else MAX_LENGTH)
- tan_input_edittext.filters = arrayOf(whitespaceFilter, alphaNumericFilter, lengthFilter)
- }
-
- private fun updateTan(text: CharSequence?) {
- this.tan = text?.toString()?.toUpperCase(Locale.ROOT)
- updateDigits()
- tan?.let {
- limitLength(
- if (TanHelper.allCharactersValid(it)) null
- else it.length
- )
- }
- notifyListener()
- }
-
- private fun notifyListener() = listener?.invoke(tan)
-
- private fun updateDigits() = listOf(
- tan_input_textview_1,
- tan_input_textview_2,
- tan_input_textview_3,
- tan_input_textview_4,
- tan_input_textview_5,
- tan_input_textview_6,
- tan_input_textview_7,
- tan_input_textview_8,
- tan_input_textview_9,
- tan_input_textview_10
- ).forEachIndexed { i, tanDigit ->
- tanDigit.text = digitAtIndex(i)
- tanDigit.background =
- if (digitAtIndex(i) == "")
- resources.getDrawable(R.drawable.tan_input_digit, null)
- else if (TanHelper.isTanCharacterValid(digitAtIndex(i)))
- resources.getDrawable(R.drawable.tan_input_digit_entered, null)
- else resources.getDrawable(R.drawable.tan_input_digit_error, null)
-
- tanDigit.setTextColor(
- if (TanHelper.isTanCharacterValid(digitAtIndex(i)))
- resources.getColor(R.color.colorTextSemanticNeutral, null)
- else resources.getColor(R.color.colorTextSemanticRed, null)
- )
- }
-
- private fun digitAtIndex(index: Int): String = tan?.getOrNull(index)?.toString() ?: ""
-}
diff --git a/Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/view/TanInput.kt b/Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/view/TanInput.kt
new file mode 100644
index 0000000000000000000000000000000000000000..4f1ee0e9aa14cacdbd4f438b67a130be686b6471
--- /dev/null
+++ b/Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/view/TanInput.kt
@@ -0,0 +1,195 @@
+package de.rki.coronawarnapp.ui.view
+
+import android.content.Context
+import android.os.Handler
+import android.text.InputFilter
+import android.util.AttributeSet
+import android.view.ViewGroup
+import android.view.inputmethod.InputMethodManager
+import android.widget.EditText
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.core.view.children
+import androidx.core.widget.doOnTextChanged
+import de.rki.coronawarnapp.R
+import de.rki.coronawarnapp.ui.submission.TanConstants
+import de.rki.coronawarnapp.ui.submission.TanConstants.MAX_LENGTH
+import de.rki.coronawarnapp.util.TanHelper
+import kotlinx.android.synthetic.main.view_tan_input_edittext.view.tan_input_edittext
+import java.util.Locale
+import kotlin.math.max
+
+class TanInput(context: Context, attrs: AttributeSet) : ViewGroup(context, attrs) {
+
+ companion object {
+ private const val KEYBOARD_TRIGGER_DELAY = 100L
+ private const val EMPTY_STRING = ""
+ }
+
+ private val whitespaceFilter =
+ InputFilter { source, _, _, _, _, _ -> source.filter { !it.isWhitespace() } }
+ private val alphaNumericFilter = InputFilter { source, _, _, _, _, _ ->
+ source.filter {
+ TanConstants.ALPHA_NUMERIC_CHARS.contains(it)
+ }
+ }
+ private var lengthFilter = InputFilter.LengthFilter(MAX_LENGTH)
+
+ var listener: ((String?) -> Unit)? = null
+
+ private var tan: String? = null
+
+ private val lineSpacing: Int
+
+ init {
+ // add "hidden" edittext for input handling
+ inflate(context, R.layout.view_tan_input_edittext, this)
+
+ // add 3 blocks of digits
+ inflate(context, R.layout.view_tan_input_group_3, this)
+ inflate(context, R.layout.view_tan_input_group_3, this)
+ inflate(context, R.layout.view_tan_input_group_4, this)
+
+ lineSpacing = context.resources.getDimension(R.dimen.submission_tan_line_spacing).toInt()
+
+ tan_input_edittext.filters = arrayOf(whitespaceFilter, alphaNumericFilter, lengthFilter)
+
+ // register listener
+ tan_input_edittext.doOnTextChanged { text, _, _, _ -> updateTan(text) }
+ setOnClickListener { showKeyboard() }
+
+ // initially show the keyboard
+ Handler().postDelayed({ showKeyboard() },
+ KEYBOARD_TRIGGER_DELAY
+ )
+ }
+
+ private fun showKeyboard() {
+ if (tan_input_edittext.requestFocus()) {
+ val imm = context.getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
+ imm.showSoftInput(tan_input_edittext, InputMethodManager.SHOW_IMPLICIT)
+ }
+ }
+
+ private fun limitLength(length: Int?) {
+ lengthFilter = InputFilter.LengthFilter(if (length != null) length else MAX_LENGTH)
+ tan_input_edittext.filters = arrayOf(whitespaceFilter, alphaNumericFilter, lengthFilter)
+ }
+
+ private fun updateTan(text: CharSequence?) {
+ this.tan = text?.toString()?.toUpperCase(Locale.ROOT)
+ updateDigits()
+ tan?.let {
+ limitLength(
+ if (TanHelper.allCharactersValid(it)) null
+ else it.length
+ )
+ }
+ notifyListener()
+ }
+
+ private fun notifyListener() = listener?.invoke(tan)
+
+ // returns all digits
+ private fun digits(): List<TextView> = children
+ .filterIsInstance(LinearLayout::class.java) // filter to 3 groups, ignoring edittext
+ .flatMap {
+ it.children.filterIsInstance(TextView::class.java) // ignore separators
+ }
+ .toList()
+
+ private fun updateDigits() = digits().forEachIndexed { i, tanDigit ->
+ val text = digitAtIndex(i)
+ tanDigit.text = text
+ tanDigit.background = when {
+ text == EMPTY_STRING -> resources.getDrawable(R.drawable.tan_input_digit, null)
+ TanHelper.isTanCharacterValid(text) -> resources.getDrawable(
+ R.drawable.tan_input_digit_entered,
+ null
+ )
+ else -> resources.getDrawable(R.drawable.tan_input_digit_error, null)
+ }
+
+ tanDigit.setTextColor(
+ if (TanHelper.isTanCharacterValid(text))
+ resources.getColor(R.color.colorTextPrimary1, null)
+ else
+ resources.getColor(R.color.colorTextSemanticRed, null)
+ )
+ }
+
+ private fun digitAtIndex(index: Int): String = tan?.getOrNull(index)?.toString() ?: EMPTY_STRING
+
+ override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+ super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+
+ val availableWith = MeasureSpec.getSize(widthMeasureSpec)
+
+ var lines = 1
+ var remainingWidthInLine = availableWith
+ var longestLineWidth = 0
+
+ // calculate number of lines and longest line
+ for (i in 0 until childCount) {
+ val child = getChildAt(i)
+ measureChild(child, widthMeasureSpec, heightMeasureSpec)
+
+ if (child is EditText) {
+ // no need to place "hidden" input in line
+ continue
+ }
+
+ // is there sill enough place at current line?
+ if (child.measuredWidth <= remainingWidthInLine) {
+ // child can be placed at current line
+ remainingWidthInLine -= child.measuredWidth
+ longestLineWidth = max(longestLineWidth, availableWith - remainingWidthInLine)
+ } else {
+ // child needs to be placed at next line
+ lines++
+ remainingWidthInLine = availableWith - child.measuredWidth
+ longestLineWidth = max(longestLineWidth, availableWith - remainingWidthInLine)
+ }
+ }
+
+ // calculate height assuming all groups have same height
+ val childrenHeight = children.first { it is LinearLayout }.measuredHeight
+ val resultingHeight = lines * childrenHeight + (lineSpacing * (lines - 1))
+
+ val resultingWidth = longestLineWidth
+
+ setMeasuredDimension(resultingWidth, resultingHeight)
+ }
+
+ override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+ val availableWidth = right - left
+ var remainingWidthInLine = availableWidth
+ var currentLineStart = 0
+
+ for (i in 0 until childCount) {
+ val child = getChildAt(i)
+
+ if (child is EditText) {
+ // layout "hidden" edittext
+ child.layout(0, 0, 1, 1)
+ continue
+ }
+
+ val childWidth = child.measuredWidth
+
+ // if not enough space in current line, target next
+ if (childWidth > remainingWidthInLine) {
+ currentLineStart += (child.measuredHeight + lineSpacing)
+ remainingWidthInLine = availableWidth
+ }
+
+ // layout child at line
+ val childTop = currentLineStart
+ val childBottom = currentLineStart + child.measuredHeight
+ val childStart = availableWidth - remainingWidthInLine
+ val childEnd = childStart + childWidth
+ remainingWidthInLine -= childWidth
+ child.layout(childStart, childTop, childEnd, childBottom)
+ }
+ }
+}
diff --git a/Corona-Warn-App/src/main/res/drawable/tan_input_digit.xml b/Corona-Warn-App/src/main/res/drawable/tan_input_digit.xml
index e5629f0e74c26134c9889cefd5462a7cdc83de18..f748bc904ab4d9af7924f7f230496403983150ba 100644
--- a/Corona-Warn-App/src/main/res/drawable/tan_input_digit.xml
+++ b/Corona-Warn-App/src/main/res/drawable/tan_input_digit.xml
@@ -1,17 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
+ <shape android:shape="rectangle">
<corners android:radius="@dimen/submission_tan_input_digit_radius" />
<solid android:color="@color/colorSurface2" />
</shape>
</item>
<item
- android:height="1.5dp"
+ android:height="@dimen/submission_tan_input_digit_stroke"
android:gravity="bottom">
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
+ <shape android:shape="rectangle">
<corners android:bottomLeftRadius="@dimen/submission_tan_input_digit_radius" />
<corners android:bottomRightRadius="@dimen/submission_tan_input_digit_radius" />
<solid android:color="@color/colorTextSemanticNeutral" />
diff --git a/Corona-Warn-App/src/main/res/drawable/tan_input_digit_error.xml b/Corona-Warn-App/src/main/res/drawable/tan_input_digit_error.xml
index 01780eeb09b0b18076cb5bd414e1a2274c3d4015..8e293e04fc5f65d2ea027dfa86effb787eb5a4b0 100644
--- a/Corona-Warn-App/src/main/res/drawable/tan_input_digit_error.xml
+++ b/Corona-Warn-App/src/main/res/drawable/tan_input_digit_error.xml
@@ -1,17 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
+ <shape android:shape="rectangle">
<corners android:radius="@dimen/submission_tan_input_digit_radius" />
<solid android:color="@color/colorSurface2" />
</shape>
</item>
<item
- android:height="1.5dp"
+ android:height="@dimen/submission_tan_input_digit_stroke"
android:gravity="bottom">
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
+ <shape android:shape="rectangle">
<corners android:bottomLeftRadius="@dimen/submission_tan_input_digit_radius" />
<corners android:bottomRightRadius="@dimen/submission_tan_input_digit_radius" />
<solid android:color="@color/colorTextSemanticRed" />
diff --git a/Corona-Warn-App/src/main/res/layout/include_submission_tan.xml b/Corona-Warn-App/src/main/res/layout/include_submission_tan.xml
index 229d109eead4749864ff93b30c2a5057de8b4b16..b86713c29c6865f66be70d38e61475cd142113e0 100644
--- a/Corona-Warn-App/src/main/res/layout/include_submission_tan.xml
+++ b/Corona-Warn-App/src/main/res/layout/include_submission_tan.xml
@@ -34,11 +34,11 @@
app:layout_constraintStart_toStartOf="@+id/guideline_start"
app:layout_constraintTop_toTopOf="parent" />
- <de.rki.coronawarnapp.ui.submission.TanInput
+ <de.rki.coronawarnapp.ui.view.TanInput
android:id="@+id/submission_tan_input"
android:layout_width="@dimen/match_constraint"
android:layout_height="wrap_content"
- android:layout_marginTop="@dimen/spacing_normal"
+ android:layout_marginTop="@dimen/spacing_large"
app:layout_constraintEnd_toStartOf="@+id/guideline_end"
app:layout_constraintStart_toStartOf="@+id/guideline_start"
app:layout_constraintTop_toBottomOf="@+id/submission_tan_body" />
@@ -49,6 +49,7 @@
android:layout_width="@dimen/match_constraint"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_small"
+ android:accessibilityLiveRegion="assertive"
android:text="@string/submission_tan_character_error"
android:textColor="@color/colorTextSemanticRed"
android:visibility="@{FormatterSubmissionHelper.formatShowTanCharacterError(viewmodel.tanCharactersValid, viewmodel.tanChecksumValid)}"
@@ -62,6 +63,7 @@
android:layout_width="@dimen/match_constraint"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/spacing_small"
+ android:accessibilityLiveRegion="assertive"
android:text="@string/submission_tan_error"
android:textColor="@color/colorTextSemanticRed"
android:visibility="@{FormatterHelper.formatVisibility(!viewmodel.tanChecksumValid)}"
diff --git a/Corona-Warn-App/src/main/res/layout/view_tan_input.xml b/Corona-Warn-App/src/main/res/layout/view_tan_input.xml
deleted file mode 100644
index 9083b562845012532d3bc66852b9b20a93ee1ffa..0000000000000000000000000000000000000000
--- a/Corona-Warn-App/src/main/res/layout/view_tan_input.xml
+++ /dev/null
@@ -1,125 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<layout 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">
-
- <androidx.constraintlayout.widget.ConstraintLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent">
-
- <EditText
- android:id="@+id/tan_input_edittext"
- style="@style/tanInputEdittext"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent" />
-
- <TextView
- android:id="@+id/tan_input_textview_1"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_2"
- app:layout_constraintHorizontal_chainStyle="spread_inside"
- app:layout_constraintStart_toStartOf="parent"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
-
- <TextView
- android:id="@+id/tan_input_textview_2"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_3"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_1"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/tan_input_textview_3"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/dash_view_1"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_2"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/dash_view_1"
- style="@style/tanInputDash"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_4"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_3"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="-" />
-
- <TextView
- android:id="@+id/tan_input_textview_4"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_5"
- app:layout_constraintStart_toEndOf="@+id/dash_view_1"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/tan_input_textview_5"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_6"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_4"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/tan_input_textview_6"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/dash_view_2"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_5"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/dash_view_2"
- style="@style/tanInputDash"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_7"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_6"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="-" />
-
- <TextView
- android:id="@+id/tan_input_textview_7"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_8"
- app:layout_constraintStart_toEndOf="@+id/dash_view_2"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/tan_input_textview_8"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_9"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_7"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/tan_input_textview_9"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintEnd_toStartOf="@+id/tan_input_textview_10"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_8"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
-
- <TextView
- android:id="@+id/tan_input_textview_10"
- style="@style/tanInputDigit"
- app:layout_constraintEnd_toEndOf="parent"
- app:layout_constraintStart_toEndOf="@+id/tan_input_textview_9"
- app:layout_constraintTop_toTopOf="parent"
- tools:text="X" />
- </androidx.constraintlayout.widget.ConstraintLayout>
-
-</layout>
diff --git a/Corona-Warn-App/src/main/res/layout/view_tan_input_edittext.xml b/Corona-Warn-App/src/main/res/layout/view_tan_input_edittext.xml
new file mode 100644
index 0000000000000000000000000000000000000000..9aca2e5aabbc809514cd30cab4f85190a6aa26d6
--- /dev/null
+++ b/Corona-Warn-App/src/main/res/layout/view_tan_input_edittext.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android">
+
+ <EditText
+ android:id="@+id/tan_input_edittext"
+ style="@style/tanInputEdittext" />
+
+</layout>
diff --git a/Corona-Warn-App/src/main/res/layout/view_tan_input_group_3.xml b/Corona-Warn-App/src/main/res/layout/view_tan_input_group_3.xml
new file mode 100644
index 0000000000000000000000000000000000000000..99d15420c57f0fb92da05751c4a3b0afd230b1d7
--- /dev/null
+++ b/Corona-Warn-App/src/main/res/layout/view_tan_input_group_3.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:tools="http://schemas.android.com/tools">
+
+ <LinearLayout
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:gravity="center"
+ android:orientation="horizontal">
+
+ <TextView
+ android:id="@+id/tan_input_1"
+ style="@style/tanInputDigit"
+ android:layout_marginStart="@dimen/no_padding"
+ tools:text="X" />
+
+ <TextView
+ android:id="@+id/tan_input_2"
+ style="@style/tanInputDigit"
+ tools:text="X" />
+
+ <TextView
+ android:id="@+id/tan_input_3"
+ style="@style/tanInputDigit"
+ tools:text="X" />
+
+ <View style="@style/tanInputDash" />
+
+ </LinearLayout>
+
+</layout>
diff --git a/Corona-Warn-App/src/main/res/layout/view_tan_input_group_4.xml b/Corona-Warn-App/src/main/res/layout/view_tan_input_group_4.xml
new file mode 100644
index 0000000000000000000000000000000000000000..a6b07ef390bcef69160dd7808da471dcf0fe7692
--- /dev/null
+++ b/Corona-Warn-App/src/main/res/layout/view_tan_input_group_4.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<layout xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:tools="http://schemas.android.com/tools">
+
+ <LinearLayout
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:gravity="center"
+ android:orientation="horizontal">
+
+ <TextView
+ android:id="@+id/tan_input_1"
+ style="@style/tanInputDigit"
+ android:layout_marginStart="@dimen/no_padding"
+ tools:text="X" />
+
+ <TextView
+ android:id="@+id/tan_input_2"
+ style="@style/tanInputDigit"
+ tools:text="X" />
+
+ <TextView
+ android:id="@+id/tan_input_3"
+ style="@style/tanInputDigit"
+ tools:text="X" />
+
+ <TextView
+ android:id="@+id/tan_input_4"
+ style="@style/tanInputDigit"
+ tools:text="X" />
+
+ </LinearLayout>
+
+</layout>
diff --git a/Corona-Warn-App/src/main/res/values/dimens.xml b/Corona-Warn-App/src/main/res/values/dimens.xml
index 5e5d81a76a4aa111d66d3a29f615af72a81f678f..3c52614f94bbf02778ccd1238338d79b02c2cc9a 100644
--- a/Corona-Warn-App/src/main/res/values/dimens.xml
+++ b/Corona-Warn-App/src/main/res/values/dimens.xml
@@ -94,10 +94,15 @@
<!-- Submission Tan Input -->
<dimen name="submission_tan_input_edittext_size">1dp</dimen>
<dimen name="submission_tan_input_digit_radius">2dp</dimen>
- <dimen name="submission_tan_input_digit_width">22dp</dimen>
- <dimen name="submission_tan_input_digit_height">40dp</dimen>
- <dimen name="submission_tan_input_dash_width">11dp</dimen>
- <dimen name="submission_tan_input_dash_height">40dp</dimen>
+ <dimen name="submission_tan_input_digit_width">24dp</dimen>
+ <dimen name="submission_tan_input_digit_height">32dp</dimen>
+ <dimen name="submission_tan_input_digit_spacing">3dp</dimen>
+ <dimen name="submission_tan_input_digit_stroke">2dp</dimen>
+ <dimen name="submission_tan_dash_width">6dp</dimen>
+ <dimen name="submission_tan_dash_height">2dp</dimen>
+ <dimen name="submission_tan_dash_spacing_start">2dp</dimen>
+ <dimen name="submission_tan_dash_spacing_end">5dp</dimen>
+ <dimen name="submission_tan_line_spacing">16dp</dimen>
<!-- Submission QR Code Scan -->
<dimen name="submission_scan_qr_code_viewfinder_size">240dp</dimen>
diff --git a/Corona-Warn-App/src/main/res/values/styles.xml b/Corona-Warn-App/src/main/res/values/styles.xml
index e4e112a37bdead8cacc4b9f3f883b0e2c25a29b5..26dde88b16e45db9962f3422d01165ab3cd2db7a 100644
--- a/Corona-Warn-App/src/main/res/values/styles.xml
+++ b/Corona-Warn-App/src/main/res/values/styles.xml
@@ -235,13 +235,17 @@
<item name="android:layout_height">@dimen/submission_tan_input_digit_height</item>
<item name="android:background">@drawable/tan_input_digit</item>
<item name="android:gravity">center</item>
+ <item name="android:layout_marginStart">@dimen/submission_tan_input_digit_spacing</item>
+ <item name="android:layout_marginEnd">@dimen/submission_tan_input_digit_spacing</item>
</style>
<style name="tanInputDash" parent="headline6">
- <item name="android:layout_width">@dimen/submission_tan_input_dash_width</item>
- <item name="android:layout_height">@dimen/submission_tan_input_dash_height</item>
- <item name="android:background">@null</item>
+ <item name="android:layout_width">@dimen/submission_tan_dash_width</item>
+ <item name="android:layout_height">@dimen/submission_tan_dash_height</item>
+ <item name="android:background">@color/colorTextSemanticNeutral</item>
<item name="android:gravity">center</item>
+ <item name="android:layout_marginStart">@dimen/submission_tan_dash_spacing_start</item>
+ <item name="android:layout_marginEnd">@dimen/submission_tan_dash_spacing_end</item>
</style>
<style name="tanInputEdittext">