Organizer QrCode Screen (EXPOSUREAPP-5831) (#2661)

* added qr-code layout

* added fragment to test menu

* linting

* fix max length

* refactoring

* refactoring

* changed toolbar

* simplified coding

* updated nav_graph

* fixed layout issue

* removed rounded corners

* updated class naming

* fixed nav_graph

* Satisfy detekt

* added comments

* added comments

* updated background

* changed buttons styling to match background

* revert changes

* added rounded corners

* updated qr code creation animation

* linting

* fixed button positioning

* added comments

* outsourced qrcode generation to component

* added accessibility strings

* updated strings

* removed unneeded dependencies

* changed qrcode generation

* updated strings

* fixed issue with rounded corners

* updated layout

Co-authored-by: Mohamed Metwalli <mohamed.metwalli@sap.com>

Corona-Warn-App/src/deviceForTesters/java/de/rki/coronawarnapp/test/eventregistration/ui/EventRegistrationTestFragment.kt

@@ -51,6 +51,10 @@ class EventRegistrationTestFragment : Fragment(R.layout.fragment_test_eventregis
                 findNavController().navigate(R.id.showStoredEventsTestFragment)
             }
 
+            showQrCodeDetailFragment.setOnClickListener {
+                findNavController().navigate(R.id.qrCodeDetailFragment)
+            }
+
             startCreateEventFlowButton.setOnClickListener {
                 findNavController().navigate(R.id.traceLocationOrganizerCategoriesFragment)
             }

Corona-Warn-App/src/deviceForTesters/java/de/rki/coronawarnapp/ui/main/MainActivityTestModule.kt

@@ -34,6 +34,8 @@ import de.rki.coronawarnapp.test.submission.ui.SubmissionTestFragment
 import de.rki.coronawarnapp.test.submission.ui.SubmissionTestFragmentModule
 import de.rki.coronawarnapp.test.tasks.ui.TestTaskControllerFragment
 import de.rki.coronawarnapp.test.tasks.ui.TestTaskControllerFragmentModule
+import de.rki.coronawarnapp.ui.eventregistration.organizer.details.QrCodeDetailFragment
+import de.rki.coronawarnapp.ui.eventregistration.organizer.details.QrCodeDetailFragmentModule
 
 @Module
 abstract class MainActivityTestModule {
@@ -85,4 +87,7 @@ abstract class MainActivityTestModule {
 
     @ContributesAndroidInjector(modules = [ShowStoredEventsTestFragmentModule::class])
     abstract fun showStoredEvents(): ShowStoredEventsTestFragment
+
+    @ContributesAndroidInjector(modules = [QrCodeDetailFragmentModule::class])
+    abstract fun showEventDetail(): QrCodeDetailFragment
 }

Corona-Warn-App/src/deviceForTesters/res/layout/fragment_test_eventregistration.xml

 <?xml version="1.0" encoding="utf-8"?>
 
 <androidx.core.widget.NestedScrollView 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="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     tools:ignore="HardcodedText">
 
     <LinearLayout
@@ -121,8 +121,8 @@
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_marginTop="@dimen/spacing_tiny"
-                android:textIsSelectable="true"
                 android:text="After creating an event in the app, it is sent to the server and returned together with a guid and a signature."
+                android:textIsSelectable="true"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="parent"
                 app:layout_constraintTop_toBottomOf="@+id/event_title" />
@@ -148,6 +148,16 @@
                 app:layout_constraintStart_toEndOf="@id/create_event_button"
                 app:layout_constraintTop_toBottomOf="@id/events_body" />
 
+            <com.google.android.material.button.MaterialButton
+                android:id="@+id/show_qr_code_detail_fragment"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="8dp"
+                android:text="Open Organizer Fragment"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/create_event_button" />
+
             <com.google.android.material.button.MaterialButton
                 android:id="@+id/start_create_event_flow_button"
                 android:layout_width="0dp"
@@ -156,8 +166,9 @@
                 android:text="Start Create Event Flow"
                 app:layout_constraintEnd_toEndOf="parent"
                 app:layout_constraintStart_toStartOf="@id/create_event_button"
-                app:layout_constraintTop_toBottomOf="@id/create_event_button" />
+                app:layout_constraintTop_toBottomOf="@id/show_qr_code_detail_fragment" />
 
         </androidx.constraintlayout.widget.ConstraintLayout>
+
     </LinearLayout>
 </androidx.core.widget.NestedScrollView>

Corona-Warn-App/src/deviceForTesters/res/navigation/test_nav_graph.xml

@@ -144,6 +144,10 @@
         <action
             android:id="@+id/action_eventRegistrationTestFragment_to_ShowStoredEventsTestFragment"
             app:destination="@id/showStoredEventsTestFragment" />
+        <action
+            android:id="@+id/action_eventRegistrationTestFragment_to_qrCodeDetailFragment"
+            app:destination="@id/qrCodeDetailFragment" />
+
     </fragment>
 
     <fragment
@@ -171,8 +175,12 @@
         android:id="@+id/traceLocationOrganizerCategoriesFragment"
         android:name="de.rki.coronawarnapp.ui.eventregistration.organizer.category.TraceLocationCategoryFragment"
         android:label="TraceLocationCategoryFragment"
-        tools:layout="@layout/trace_location_organizer_category_fragment">
-
+        tools:layout="@layout/trace_location_organizer_category_fragment" />
+    <fragment
+        android:id="@+id/qrCodeDetailFragment"
+        android:name="de.rki.coronawarnapp.ui.eventregistration.organizer.details.QrCodeDetailFragment"
+        android:label="QrCodeDetailFragment"
+        tools:layout="@layout/trace_location_organizer_qr_code_detail_fragment" >
         <action
             android:id="@+id/action_traceLocationOrganizerCategoriesFragment_to_traceLocationCreateFragment"
             app:destination="@id/traceLocationCreateFragment" />

Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/eventregistration/organizer/details/QrCodeDetailFragment.kt

+package de.rki.coronawarnapp.ui.eventregistration.organizer.details
+
+import android.os.Bundle
+import android.view.View
+import android.view.accessibility.AccessibilityEvent
+import android.widget.LinearLayout
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.graphics.drawable.RoundedBitmapDrawableFactory
+import androidx.fragment.app.Fragment
+import com.google.android.material.appbar.AppBarLayout
+import com.google.android.material.appbar.AppBarLayout.OnOffsetChangedListener
+import de.rki.coronawarnapp.R
+import de.rki.coronawarnapp.databinding.TraceLocationOrganizerQrCodeDetailFragmentBinding
+import de.rki.coronawarnapp.util.ContextExtensions.getDrawableCompat
+import de.rki.coronawarnapp.util.di.AutoInject
+import de.rki.coronawarnapp.util.ui.observe2
+import de.rki.coronawarnapp.util.ui.popBackStack
+import de.rki.coronawarnapp.util.ui.viewBindingLazy
+import de.rki.coronawarnapp.util.viewmodel.CWAViewModelFactoryProvider
+import de.rki.coronawarnapp.util.viewmodel.cwaViewModels
+import javax.inject.Inject
+import kotlin.math.abs
+
+class QrCodeDetailFragment : Fragment(R.layout.trace_location_organizer_qr_code_detail_fragment), AutoInject {
+
+    @Inject lateinit var viewModelFactory: CWAViewModelFactoryProvider.Factory
+
+    private val vm: QrCodeDetailViewModel by cwaViewModels { viewModelFactory }
+    private val binding: TraceLocationOrganizerQrCodeDetailFragmentBinding by viewBindingLazy()
+
+    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
+        super.onViewCreated(view, savedInstanceState)
+
+        setToolbarOverlay()
+
+        binding.apply {
+            appBarLayout.addOnOffsetChangedListener(
+                OnOffsetChangedListener { appBarLayout, verticalOffset ->
+                    title.alpha = (
+                        1.0f - abs(verticalOffset / (appBarLayout.totalScrollRange.toFloat() * 0.5f))
+                        )
+                    subtitle.alpha = (
+                        1.0f - abs(verticalOffset / (appBarLayout.totalScrollRange.toFloat() * 0.7f))
+                        )
+                }
+            )
+
+            title.text = vm.titleText
+            subtitle.text = vm.subtitleText
+            eventDate.text = vm.eventDate
+
+            toolbar.apply {
+                navigationIcon = context.getDrawableCompat(R.drawable.ic_close_white)
+                navigationContentDescription = getString(R.string.accessibility_close)
+                setNavigationOnClickListener { vm.onBackButtonPress() }
+            }
+        }
+
+        vm.qrCodeBitmap.observe2(this) {
+            binding.qrCodeImage.apply {
+                val resourceId = RoundedBitmapDrawableFactory.create(resources, it)
+                resourceId.cornerRadius = it.width * 0.1f
+                setImageDrawable(resourceId)
+            }
+        }
+
+        vm.routeToScreen.observe2(this) {
+            when (it) {
+                QrCodeDetailNavigationEvents.NavigateBack -> {
+                    popBackStack()
+                }
+                QrCodeDetailNavigationEvents.NavigateToPrintFragment -> { /* TODO */
+                }
+                QrCodeDetailNavigationEvents.NavigateToDuplicateFragment -> { /* TODO */
+                }
+            }
+        }
+    }
+
+    private fun setToolbarOverlay() {
+        val width = requireContext().resources.displayMetrics.widthPixels
+
+        val params: CoordinatorLayout.LayoutParams = binding.nestedScrollView.layoutParams
+            as (CoordinatorLayout.LayoutParams)
+
+        val textParams = binding.subtitle.layoutParams as (LinearLayout.LayoutParams)
+        textParams.bottomMargin = ((width) / 2) - 24 /* 24 is space between screen border and QrCode */
+        binding.subtitle.requestLayout() /* 24 is space between screen border and QrCode */
+
+        val behavior: AppBarLayout.ScrollingViewBehavior = params.behavior as ((AppBarLayout.ScrollingViewBehavior))
+        behavior.overlayTop = ((width) / 2) - 24
+    }
+
+    override fun onResume() {
+        super.onResume()
+        binding.contentContainer.sendAccessibilityEvent(AccessibilityEvent.TYPE_ANNOUNCEMENT)
+    }
+}

Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/eventregistration/organizer/details/QrCodeDetailFragmentModule.kt

+package de.rki.coronawarnapp.ui.eventregistration.organizer.details
+
+import dagger.Binds
+import dagger.Module
+import dagger.multibindings.IntoMap
+import de.rki.coronawarnapp.util.viewmodel.CWAViewModel
+import de.rki.coronawarnapp.util.viewmodel.CWAViewModelFactory
+import de.rki.coronawarnapp.util.viewmodel.CWAViewModelKey
+
+@Module
+abstract class QrCodeDetailFragmentModule {
+    @Binds
+    @IntoMap
+    @CWAViewModelKey(QrCodeDetailViewModel::class)
+    abstract fun qrCodeDetailFragmentVM(
+        factory: QrCodeDetailViewModel.Factory
+    ): CWAViewModelFactory<out CWAViewModel>
+}

Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/eventregistration/organizer/details/QrCodeDetailNavigationEvents.kt

+package de.rki.coronawarnapp.ui.eventregistration.organizer.details
+
+sealed class QrCodeDetailNavigationEvents {
+    object NavigateBack : QrCodeDetailNavigationEvents()
+    object NavigateToPrintFragment : QrCodeDetailNavigationEvents()
+    object NavigateToDuplicateFragment : QrCodeDetailNavigationEvents()
+}

Corona-Warn-App/src/main/java/de/rki/coronawarnapp/ui/eventregistration/organizer/details/QrCodeDetailViewModel.kt

+package de.rki.coronawarnapp.ui.eventregistration.organizer.details
+
+import android.graphics.Bitmap
+import dagger.assisted.AssistedFactory
+import dagger.assisted.AssistedInject
+import de.rki.coronawarnapp.util.coroutine.DispatcherProvider
+import de.rki.coronawarnapp.util.ui.SingleLiveEvent
+import de.rki.coronawarnapp.util.viewmodel.CWAViewModel
+import de.rki.coronawarnapp.util.viewmodel.SimpleCWAViewModelFactory
+import timber.log.Timber
+
+class QrCodeDetailViewModel @AssistedInject constructor(
+    private val dispatcher: DispatcherProvider,
+    private val qrCodeGenerator: QrCodeGenerator,
+) : CWAViewModel() {
+
+    /* Currently hardcoded to show the functionality -> will be connected to the database in a separate PR */
+    val qrCodeText = "HTTPS://E.CORONAWARN.APP/C1/BIYAUEDBZY6EIWF7QX6JOKSRPAGEB3H7CIIEGV2BEBGGC5LOMNUCAUD" +
+        "BOJ2HSGGTQ6SACIHXQ6SACKA6CJEDARQCEEAPHGEZ5JI2K2T422L5U3SMZY5DGCPUZ2RQACAYEJ3HQYMAFF" +
+        "BU2SQCEEAJAUCJSQJ7WDM675MCMOD3L2UL7ECJU7TYERH23B746RQTABO3CTI="
+    val titleText = "Jahrestreffen der deutschen SAP Anwendergruppe"
+    val subtitleText = "Hauptstr 3, 69115 Heidelberg"
+    val eventDate = "21.01.2021, 18:00 - 21:00 Uhr"
+
+    init {
+        createQrCode(qrCodeText)
+    }
+
+    val qrCodeBitmap = SingleLiveEvent<Bitmap>()
+    val errorMessage = SingleLiveEvent<String>()
+
+    val routeToScreen: SingleLiveEvent<QrCodeDetailNavigationEvents> = SingleLiveEvent()
+
+    /**
+     * Creates a QR Code [Bitmap] ,result is delivered by [qrCodeBitmap]
+     */
+    fun createQrCode(input: String) = launch(context = dispatcher.IO) {
+
+        try {
+            qrCodeBitmap.postValue(qrCodeGenerator.createQrCode(input))
+        } catch (e: Exception) {
+            Timber.d(e, "Qr code creation failed")
+            errorMessage.postValue(e.localizedMessage ?: "QR code creation failed")
+        }
+    }
+
+    fun onBackButtonPress() {
+        routeToScreen.postValue(QrCodeDetailNavigationEvents.NavigateBack)
+    }
+
+    @AssistedFactory
+    interface Factory : SimpleCWAViewModelFactory<QrCodeDetailViewModel>
+}

Corona-Warn-App/src/main/res/color/button_trace_location.xml

+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:color="@color/colorSurface1Pressed" android:state_pressed="true" /> <!-- pressed -->
+    <item android:color="@color/colorTraceLocationGradientBackground" /> <!-- default -->
+</selector>
\ No newline at end of file

Corona-Warn-App/src/main/res/drawable/ic_close_white.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+  <path
+      android:pathData="M1.2843,0L0,1.2843L5.7157,7L0,12.7157L1.2843,14L7,8.2843L12.7157,14L14,12.7157L8.2843,7L14,1.2843L12.7157,0L7,5.7157L1.2843,0Z"
+      android:fillColor="#ffffff"/>
+</vector>

Corona-Warn-App/src/main/res/drawable/ic_corona_warn_app_icon_white.xml

+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:aapt="http://schemas.android.com/aapt"
+    android:width="76dp"
+    android:height="26dp"
+    android:viewportWidth="76"
+    android:viewportHeight="26">
+  <path
+      android:pathData="M25.0703,15.396H25.8939L26.9581,18.7117L28.3576,15.2891H28.4014L29.8081,18.7117L30.8505,15.396H31.6231L29.8883,20.6598H29.8446L28.3795,17.0385L26.8779,20.6598H26.8415L25.0703,15.396Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M32.8132,19.6208H34.8249L35.2113,20.5911H36.0349L33.8555,15.2891H33.8118L31.6396,20.5911H32.4268L32.8132,19.6208ZM34.54,18.9037H33.0969L33.8257,17.0854L34.54,18.9037Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M37.0918,20.5896H37.8717V18.672H38.6809H38.7756L39.8835,20.5896H40.7363L39.5409,18.5268C40.1605,18.29 40.5031,17.7705 40.5031,17.0447C40.5031,16.0592 39.8398,15.3945 38.6809,15.3945H37.0918V20.5896ZM39.6934,17.0455C39.6934,17.6643 39.3872,17.9699 38.651,17.9699H37.8711V16.1211H38.651C39.38,16.1211 39.6934,16.419 39.6934,17.0455Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M42.6908,17.1768V20.5918H41.9619V15.3203H42.0203L45.1983,18.8117V15.3967H45.9271V20.6681H45.8689L42.6908,17.1768Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M47.5049,17.8203H48.8461V18.5155H47.5049V17.8203Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M50.8552,19.6208H52.8669L53.2533,20.5911H54.0769L51.8975,15.2891H51.8538L49.6816,20.5911H50.4688L50.8552,19.6208ZM52.5828,18.9037H51.1397L51.8685,17.0854L52.5828,18.9037Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M55.1338,20.5896H55.9137V18.756H56.7083C57.8599,18.756 58.5305,18.1066 58.5305,17.0753C58.5305,16.0668 57.8672,15.3945 56.7083,15.3945H55.1338V20.5896ZM57.7228,17.0761C57.7228,17.7102 57.4166,18.031 56.6804,18.031H55.915V16.1211H56.6804C57.4093,16.1211 57.7228,16.4343 57.7228,17.0761Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M59.7412,20.5896H60.5212V18.756H61.3157C62.4673,18.756 63.1379,18.1066 63.1379,17.0753C63.1379,16.0668 62.4746,15.3945 61.3157,15.3945H59.7412V20.5896ZM62.3302,17.0761C62.3302,17.7102 62.024,18.031 61.2878,18.031H60.5225V16.1211H61.2878C62.0167,16.1211 62.3302,16.4343 62.3302,17.0761Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M25.1113,7.8824C25.1113,5.4574 26.9226,3.6719 29.2191,3.6719C30.7107,3.6719 31.7406,4.263 32.439,5.2644L31.4683,5.9641C30.9356,5.2282 30.249,4.8422 29.1835,4.8422C27.5855,4.8422 26.4253,6.1451 26.4253,7.8824C26.4253,9.6559 27.6091,10.9227 29.2309,10.9227C30.2726,10.9227 31.0422,10.5246 31.6459,9.7283L32.6284,10.416C31.7998,11.538 30.7462,12.093 29.1835,12.093C26.8871,12.093 25.1113,10.3074 25.1113,7.8824Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M37.909,3.6719C35.6006,3.6719 33.7539,5.4574 33.7539,7.8824C33.7539,10.3074 35.6006,12.093 37.909,12.093C40.2174,12.093 42.0641,10.3074 42.0641,7.8824C42.0641,5.4574 40.2174,3.6719 37.909,3.6719ZM37.9085,4.8438C39.5777,4.8438 40.7496,6.1467 40.7496,7.884C40.7496,9.6213 39.5777,10.9243 37.9085,10.9243C36.2394,10.9243 35.0674,9.6213 35.0674,7.884C35.0674,6.1467 36.2394,4.8438 37.9085,4.8438Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M43.8994,11.9852H45.1661V8.957H46.4801H46.634L48.4334,11.9852H49.8184L47.8769,8.7277C48.8831,8.3537 49.4396,7.5333 49.4396,6.3872C49.4396,4.8309 48.3623,3.7813 46.4801,3.7813H43.8994V11.9852ZM48.1244,6.3858C48.1244,7.363 47.6272,7.8456 46.4316,7.8456H45.165V4.9259H46.4316C47.6154,4.9259 48.1244,5.3964 48.1244,6.3858Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M55.2147,3.6719C52.9063,3.6719 51.0596,5.4574 51.0596,7.8824C51.0596,10.3074 52.9063,12.093 55.2147,12.093C57.5231,12.093 59.3698,10.3074 59.3698,7.8824C59.3698,5.4574 57.5231,3.6719 55.2147,3.6719ZM55.2161,4.8438C56.8853,4.8438 58.0573,6.1467 58.0573,7.884C58.0573,9.6213 56.8853,10.9243 55.2161,10.9243C53.547,10.9243 52.375,9.6213 52.375,7.884C52.375,6.1467 53.547,4.8438 55.2161,4.8438Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M62.3752,6.5919V11.9848H61.1914V3.6602H61.2861L66.4474,9.1737V3.7808H67.6312V12.1054H67.5365L62.3752,6.5919Z"
+      android:fillColor="#ffffff"/>
+  <path
+      android:pathData="M70.7672,10.45H74.0345L74.662,11.9822H75.9996L72.4601,3.6094H72.3891L68.8613,11.9822H70.1398L70.7672,10.45ZM73.5725,9.3128H71.2285L72.4123,6.4414L73.5725,9.3128Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M12.8401,16.6805V18.8725C13.2442,19.0159 13.5342,19.4012 13.5342,19.8554C13.5342,20.4317 13.0681,20.8989 12.4931,20.8989C11.9181,20.8989 11.452,20.4317 11.452,19.8554C11.452,19.4012 11.742,19.0159 12.1461,18.8725V16.6805C11.257,16.6069 10.4474,16.2539 9.8047,15.7086L8.2584,17.2584C8.4429,17.6462 8.3762,18.1242 8.0558,18.4453C7.6492,18.8529 6.99,18.8529 6.5834,18.4453C6.1769,18.0378 6.1769,17.3771 6.5834,16.9696C6.9038,16.6485 7.3807,16.5815 7.7676,16.7665L9.3139,15.2167C8.7698,14.5725 8.4177,13.761 8.3442,12.8698H6.1572C6.0142,13.2749 5.6298,13.5655 5.1767,13.5655C4.6017,13.5655 4.1356,13.0983 4.1356,12.522C4.1356,11.9457 4.6017,11.4785 5.1767,11.4785C5.6298,11.4785 6.0142,11.7692 6.1572,12.1742H8.3442C8.4177,11.283 8.7698,10.4716 9.3139,9.8274L7.7676,8.2775C7.3807,8.4625 6.9038,8.3955 6.5834,8.0744C6.1769,7.6669 6.1769,7.0062 6.5834,6.5987C6.99,6.1912 7.6492,6.1912 8.0558,6.5987C8.3762,6.9198 8.4429,7.3978 8.2584,7.7856L9.8047,9.3354C10.4474,8.7901 11.257,8.4371 12.1461,8.3636V6.1715C11.742,6.0281 11.452,5.6428 11.452,5.1887C11.452,4.6123 11.9181,4.1452 12.4931,4.1452C13.0681,4.1452 13.5342,4.6123 13.5342,5.1887C13.5342,5.6428 13.2442,6.0281 12.8401,6.1715V8.3636C13.8514,8.4473 14.76,8.8933 15.437,9.5713L21.327,3.6676C19.0662,1.4016 15.943,0 12.4931,0C5.5933,0 0,5.6063 0,12.522C0,19.4377 5.5933,25.044 12.4931,25.044C15.943,25.044 19.0662,23.6424 21.327,21.3764L15.437,15.4727C14.76,16.1508 13.8514,16.5968 12.8401,16.6805Z">
+    <aapt:attr name="android:fillColor">
+      <gradient 
+          android:startY="25.044"
+          android:startX="21.327"
+          android:endY="0"
+          android:endX="21.327"
+          android:type="linear">
+        <item android:offset="0" android:color="#FFFFFFFF"/>
+        <item android:offset="1" android:color="#FFFFFFFF"/>
+      </gradient>
+    </aapt:attr>
+  </path>
+</vector>

Corona-Warn-App/src/main/res/drawable/trace_location_gradient_background.xml

+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item>
+        <shape android:shape="rectangle">
+            <solid android:color="@color/colorTraceLocationGradientBackground" />
+        </shape>
+    </item>
+</selector>

Corona-Warn-App/src/main/res/drawable/trace_location_qr_code_background.xml

+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
+    <solid android:color="#ffffff"/>
+
+    <corners android:radius="15px"/>
+</shape>

Corona-Warn-App/src/main/res/drawable/trace_location_view_cardhighlight_gradient_all_corners.xml

 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
-    <corners
-        android:bottomLeftRadius="@dimen/radius_card"
-        android:bottomRightRadius="@dimen/radius_card"
-        android:radius="0dp"
-        android:topLeftRadius="@dimen/radius_card"
-        android:topRightRadius="@dimen/radius_card" />
     <gradient
         android:angle="135"
         android:centerColor="#6C648C"

Corona-Warn-App/src/main/res/layout/trace_location_organizer_qr_code_detail_fragment.xml

+<?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:id="@+id/content_container"
+    android:layout_width="match_parent"
+    android:contentDescription="@string/trace_location_event_detail_title_accessibility"
+    android:background="@drawable/trace_location_gradient_background"
+    android:layout_height="match_parent">
+
+    <androidx.coordinatorlayout.widget.CoordinatorLayout
+        android:id="@+id/coordinator_layout"
+        android:layout_width="0dp"
+        android:layout_height="0dp"
+        android:layout_marginBottom="12dp"
+        android:nestedScrollingEnabled="true"
+        app:layout_constraintBottom_toTopOf="@id/qr_code_print_button"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent"
+        tools:context=".CollapsingToolbar">
+
+        <com.google.android.material.appbar.AppBarLayout
+            android:id="@+id/appBarLayout"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content">
+
+            <com.google.android.material.appbar.CollapsingToolbarLayout
+                android:id="@+id/collapsing_toolbar_layout"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:nestedScrollingEnabled="true"
+                app:layout_scrollFlags="scroll|exitUntilCollapsed">
+
+                <ImageView
+                    android:id="@+id/expandedImage"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    android:src="@drawable/trace_location_view_cardhighlight_gradient_all_corners"
+                    app:layout_collapseMode="parallax" />
+
+                <LinearLayout
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:orientation="vertical"
+                    app:layout_collapseMode="parallax">
+
+                    <TextView
+                        android:id="@+id/title"
+                        android:layout_width="match_parent"
+                        android:layout_height="wrap_content"
+                        android:layout_marginHorizontal="24dp"
+                        android:layout_marginTop="90dp"
+                        android:layout_marginBottom="12dp"
+                        android:gravity="center"
+                        android:textColor="@android:color/white"
+                        android:textSize="20sp"
+                        android:textStyle="bold"
+                        tools:text="Jahrestreffen der deutschen SAP Anwendergruppe" />
+
+                    <TextView
+                        android:id="@+id/subtitle"
+                        android:layout_width="wrap_content"
+                        android:layout_height="wrap_content"
+                        android:layout_gravity="center"
+                        android:gravity="center"
+                        android:layout_marginBottom="8dp"
+                        android:textColor="@android:color/white"
+                        android:textSize="18sp"
+                        android:textStyle="normal"
+                        tools:text="Hauptstr 3, 69115 Heidelberg" />
+
+                </LinearLayout>
+
+                <com.google.android.material.appbar.MaterialToolbar
+                    android:id="@+id/toolbar"
+                    android:layout_width="match_parent"
+                    android:layout_height="?attr/actionBarSize"
+                    app:layout_collapseMode="pin"
+                    app:layout_scrollFlags="scroll|enterAlways"
+                    app:navigationIcon="@drawable/ic_close_white"
+                    app:titleTextColor="@color/colorAccentTintButton">
+
+                    <LinearLayout
+                        android:id="@+id/header_text_layout"
+                        android:layout_width="match_parent"
+                        android:layout_height="match_parent"
+                        android:layout_gravity="bottom"
+                        android:background="#00FFFFFF"
+                        android:gravity="center_vertical"
+                        android:orientation="horizontal">
+
+                        <ImageView
+                            android:layout_width="match_parent"
+                            android:layout_height="wrap_content"
+                            android:layout_marginEnd="72dp"
+                            android:src="@drawable/ic_corona_warn_app_icon_white" />
+
+                    </LinearLayout>
+
+                </com.google.android.material.appbar.MaterialToolbar>
+
+            </com.google.android.material.appbar.CollapsingToolbarLayout>
+
+        </com.google.android.material.appbar.AppBarLayout>
+
+        <androidx.core.widget.NestedScrollView
+            android:id="@+id/nested_scroll_view"
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            app:layout_behavior="@string/appbar_scrolling_view_behavior">
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content">
+
+                <ImageView
+                    android:id="@+id/qrCodeImage"
+                    android:layout_width="0dp"
+                    android:layout_height="0dp"
+                    android:contentDescription="@string/trace_location_event_detail_qr_code_accessibility"
+                    android:layout_marginHorizontal="24dp"
+                    android:layout_marginVertical="12dp"
+                    android:layout_marginTop="16dp"
+                    android:background="@drawable/trace_location_qr_code_background"
+                    app:layout_constraintDimensionRatio="H,1:1"
+                    app:layout_constraintLeft_toLeftOf="parent"
+                    app:layout_constraintRight_toRightOf="parent"
+                    app:layout_constraintTop_toTopOf="parent"
+                    tools:src="@drawable/ic_illustrations_qr_code_scan_info" />
+
+                <TextView
+                    android:id="@+id/eventDate"
+                    style="@style/headline6Sixteen"
+                    android:layout_width="match_parent"
+                    android:layout_height="match_parent"
+                    app:layout_constraintTop_toBottomOf="@id/qrCodeImage"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintVertical_chainStyle="packed"
+                    android:layout_marginTop="12dp"
+                    android:layout_marginHorizontal="24dp"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    android:gravity="center"
+                    android:textSize="16sp"
+                    android:textStyle="normal"
+                    tools:text="21.01.2021, 18:00 - 21:00 Uhr">
+
+                </TextView>
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+        </androidx.core.widget.NestedScrollView>
+
+    </androidx.coordinatorlayout.widget.CoordinatorLayout>
+
+    <Button
+        android:id="@+id/qr_code_print_button"
+        style="@style/buttonPrimary"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/spacing_normal"
+        android:layout_marginEnd="@dimen/spacing_normal"
+        android:layout_marginBottom="8dp"
+        android:text="@string/trace_location_event_detail_show_print_qr_code_button"
+        app:layout_constraintBottom_toTopOf="@id/qr_code_clone_button"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:text="@string/trace_location_event_detail_show_print_qr_code_button" />
+
+    <Button
+        android:id="@+id/qr_code_clone_button"
+        style="@style/buttonTraceLocation"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        android:layout_marginStart="@dimen/spacing_normal"
+        android:layout_marginEnd="@dimen/spacing_normal"
+        android:layout_marginBottom="4dp"
+        android:text="@string/trace_location_event_detail_save_as_template_button"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        tools:text="@string/trace_location_event_detail_save_as_template_button" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>

Corona-Warn-App/src/main/res/navigation/trace_location_attendee_nav_graph.xml

@@ -40,6 +40,14 @@
             android:defaultValue="@null"
             app:argType="string"
             app:nullable="true" />
+        <action
+            android:id="@+id/action_checkInsFragment_to_qrCodeDetailFragment"
+            app:destination="@id/qrCodeDetailFragment" />
     </fragment>
+    <fragment
+        android:id="@+id/qrCodeDetailFragment"
+        android:name="de.rki.coronawarnapp.ui.eventregistration.organizer.details.QrCodeDetailFragment"
+        android:label="QrCodeDetailFragment"
+        tools:layout="@layout/trace_location_organizer_qr_code_detail_fragment" />
 
 </navigation>
\ No newline at end of file

Corona-Warn-App/src/main/res/values-de/event_registration_strings.xml

@@ -141,4 +141,14 @@
     <!-- XTXT: Text for trace location creation card -->
     <string name="create_trace_location_card_button">"QR-Code erstellen"</string>
 
+    <!--  Organizer Flow: Event Detail Screen-->
+    <!-- XTXT: Organizer Flow : Accessibility description for qr-code illustration -->
+    <string name="trace_location_event_detail_qr_code_accessibility">"QR-Code"</string>
+    <!-- XHED: Organizer Flow : Accessibility title for event-overview -->
+    <string name="trace_location_event_detail_title_accessibility">"Event-Ansicht"</string>
+    !-- XBUT: Organizer Flow : Title for show print version button -->
+    <string name="trace_location_event_detail_show_print_qr_code_button">"Druckversion anzeigen"</string>
+    <!-- XBUT: Organizer Flow : Title for save as template button -->
+    <string name="trace_location_event_detail_save_as_template_button">"Als Vorlage verwenden"</string>
+
 </resources>

Corona-Warn-App/src/main/res/values-night/colors.xml

@@ -71,4 +71,6 @@
 
     <!-- Trace location -->
     <color name="colorTraceLocationIconDateBackground">#434445</color>
+    <color name="colorTraceLocationGradientBackground">#000000</color>
+
 </resources>

Corona-Warn-App/src/main/res/values/colors.xml

@@ -91,6 +91,9 @@
 
     <!-- Trace location -->
     <color name="colorTraceLocationIconDateBackground">#FFFFFF</color>
+    <color name="colorTraceLocationGradientBackground">#F5F5F5</color>
+    <color name="colorTraceLocationButtonTextColor">#F5F5F5</color>
+
 
     <!-- Swipe to delete background color -->
     <color name="swipeDeleteBackgroundColor">#EB4D3D</color>

Corona-Warn-App/src/main/res/values/event_registration_strings.xml

@@ -142,4 +142,14 @@
     <!-- XTXT: Text for trace location creation card -->
     <string name="create_trace_location_card_button">"QR-Code erstellen"</string>
 
+    <!--  Organizer Flow: Event Detail Screen-->
+    <!-- XTXT: Organizer Flow : Accessibility description for qr-code illustration -->
+    <string name="trace_location_event_detail_qr_code_accessibility">"QR-Code"</string>
+    <!-- XHED: Organizer Flow : Accessibility title for event-overview -->
+    <string name="trace_location_event_detail_title_accessibility">"Event-Ansicht"</string>
+    !-- XBUT: Organizer Flow : Title for show print version button -->
+    <string name="trace_location_event_detail_show_print_qr_code_button">"Druckversion anzeigen"</string>
+    <!-- XBUT: Organizer Flow : Title for save as template button -->
+    <string name="trace_location_event_detail_save_as_template_button">"Als Vorlage verwenden"</string>
+
 </resources>