From 002f64ce1d5d16f2b69c900dc39d81f4b76a655f Mon Sep 17 00:00:00 2001
From: Karl Dimla <klmbdimla@gmail.com>
Date: Wed, 3 Apr 2024 13:21:15 +0200
Subject: [PATCH] Fix sync connect for small screens (#4365)

Task/Issue URL:
https://app.asana.com/0/1201493110486074/1206542898886222/f

### Description
Fix layout for sync connect screen in smaller devices

### Steps to test this PR
- [ ] Go to Settings
- [ ] Open Sync & Backup
- [ ] Click on Sync with Another Device
- [ ] Verify that UI is correct

Results: https://app.asana.com/0/0/1206948358341237/f
---
 .../main/res/layout/activity_connect_sync.xml | 221 +++++++++---------
 1 file changed, 113 insertions(+), 108 deletions(-)

diff --git a/sync/sync-impl/src/main/res/layout/activity_connect_sync.xml b/sync/sync-impl/src/main/res/layout/activity_connect_sync.xml
index d481c3ee8ee7..431f829f1cda 100644
--- a/sync/sync-impl/src/main/res/layout/activity_connect_sync.xml
+++ b/sync/sync-impl/src/main/res/layout/activity_connect_sync.xml
@@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
+<?xml version="1.0" encoding="utf-8"?><!--
   ~ Copyright (c) 2023 DuckDuckGo
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,119 +13,125 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout 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:orientation="vertical"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
-
-    <LinearLayout
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:background="?attr/daxColorSurface"
-        android:orientation="vertical">
+    android:layout_height="match_parent"
+    android:orientation="vertical">
 
     <include
         android:id="@+id/includeToolbar"
-        layout="@layout/include_default_toolbar"/>
+        layout="@layout/include_default_toolbar" />
 
-    <androidx.constraintlayout.widget.ConstraintLayout
+    <ScrollView
         android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:orientation="vertical">
-
-        <com.duckduckgo.common.ui.view.text.DaxTextView
-            android:id="@+id/connect_hint"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_margin="@dimen/keyline_4"
-            android:text="@string/connect_screen_scan_qr_hint"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent" />
+        android:layout_height="match_parent"
+        android:fillViewport="true"
+        android:scrollbars="none">
 
-        <com.duckduckgo.sync.impl.ui.qrcode.SyncBarcodeView
-            android:id="@+id/qrCodeReader"
+        <androidx.constraintlayout.widget.ConstraintLayout
             android:layout_width="match_parent"
-            android:layout_height="@dimen/qrBarcodeSize"
-            android:layout_marginTop="@dimen/keyline_4"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@+id/connect_hint" />
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-    <androidx.constraintlayout.widget.ConstraintLayout
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-
-        android:background="?attr/daxColorBackground">
-
-        <ImageView
-            android:id="@+id/qrCodeImageView"
-            android:layout_width="@dimen/qrSizeMedium"
-            android:layout_height="@dimen/qrSizeMedium"
-            android:layout_gravity="center"
-            android:layout_marginStart="@dimen/keyline_5"
-            android:layout_marginTop="@dimen/keyline_5"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent"
-            tools:ignore="ContentDescription" />
-
-        <com.duckduckgo.common.ui.view.text.DaxTextView
-            android:id="@+id/qrCodeHintTitle"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/keyline_4"
-            android:layout_marginTop="@dimen/keyline_4"
-            android:layout_marginEnd="@dimen/keyline_4"
-            app:typography="h5"
-            android:text="@string/connect_screen_connect_qr_hint_title"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
-            app:layout_constraintTop_toTopOf="parent" />
-
-        <com.duckduckgo.common.ui.view.text.DaxTextView
-            android:id="@+id/qrCodeHintContent"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginStart="@dimen/keyline_4"
-            android:layout_marginTop="@dimen/keyline_2"
-            android:layout_marginEnd="@dimen/keyline_4"
-            android:text="@string/connect_screen_connect_qr_hint_content"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
-            app:layout_constraintTop_toBottomOf="@+id/qrCodeHintTitle"
-            app:typography="caption"
-            app:textType="secondary"/>
-
-    </androidx.constraintlayout.widget.ConstraintLayout>
-
-    </LinearLayout>
-
-    <com.duckduckgo.common.ui.view.divider.HorizontalDivider
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toTopOf="@+id/copyCodeButton"/>
-
-    <com.duckduckgo.common.ui.view.text.DaxTextView
-        android:id="@+id/copyCodeButton"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:drawableEnd="@drawable/ic_arrow_circle_right_12"
-        android:drawablePadding="@dimen/keyline_2"
-        android:layout_marginBottom="@dimen/keyline_4"
-        app:textType="secondary"
-        android:textAlignment="center"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintBottom_toBottomOf="parent"
-        android:text="@string/login_screen_cant_scan"/>
-
-</androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
+            android:layout_height="wrap_content">
+
+            <LinearLayout
+                android:id="@+id/readerContainer"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:background="?attr/daxColorSurface"
+                android:orientation="vertical"
+                app:layout_constraintBottom_toTopOf="@+id/qrcodeContainer"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <com.duckduckgo.common.ui.view.text.DaxTextView
+                    android:id="@+id/connect_hint"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_margin="@dimen/keyline_4"
+                    android:text="@string/connect_screen_scan_qr_hint" />
+
+                <com.duckduckgo.sync.impl.ui.qrcode.SyncBarcodeView
+                    android:id="@+id/qrCodeReader"
+                    android:layout_width="match_parent"
+                    android:layout_height="@dimen/qrBarcodeSize" />
+            </LinearLayout>
+
+            <androidx.constraintlayout.widget.ConstraintLayout
+                android:id="@+id/qrcodeContainer"
+                android:layout_width="match_parent"
+                android:layout_height="0dp"
+                android:background="?attr/daxColorBackground"
+                app:layout_constraintBottom_toTopOf="@+id/copyCodeDivider"
+                app:layout_constraintHeight_min="185dp"
+                app:layout_constraintHorizontal_weight="1"
+                app:layout_constraintTop_toBottomOf="@+id/readerContainer"
+                app:layout_constraintVertical_chainStyle="spread">
+
+                <ImageView
+                    android:id="@+id/qrCodeImageView"
+                    android:layout_width="@dimen/qrSizeMedium"
+                    android:layout_height="@dimen/qrSizeMedium"
+                    android:layout_gravity="center"
+                    android:layout_marginStart="@dimen/keyline_5"
+                    android:layout_marginTop="@dimen/keyline_5"
+                    app:layout_constraintStart_toStartOf="parent"
+                    app:layout_constraintTop_toTopOf="parent"
+                    tools:ignore="ContentDescription" />
+
+                <com.duckduckgo.common.ui.view.text.DaxTextView
+                    android:id="@+id/qrCodeHintTitle"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="@dimen/keyline_4"
+                    android:layout_marginTop="@dimen/keyline_4"
+                    android:layout_marginEnd="@dimen/keyline_4"
+                    android:text="@string/connect_screen_connect_qr_hint_title"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
+                    app:layout_constraintTop_toTopOf="parent"
+                    app:typography="h5" />
+
+                <com.duckduckgo.common.ui.view.text.DaxTextView
+                    android:id="@+id/qrCodeHintContent"
+                    android:layout_width="0dp"
+                    android:layout_height="wrap_content"
+                    android:layout_marginStart="@dimen/keyline_4"
+                    android:layout_marginTop="@dimen/keyline_2"
+                    android:layout_marginEnd="@dimen/keyline_4"
+                    android:text="@string/connect_screen_connect_qr_hint_content"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toEndOf="@+id/qrCodeImageView"
+                    app:layout_constraintTop_toBottomOf="@+id/qrCodeHintTitle"
+                    app:textType="secondary"
+                    app:typography="caption" />
+
+            </androidx.constraintlayout.widget.ConstraintLayout>
+
+
+            <com.duckduckgo.common.ui.view.divider.HorizontalDivider
+                android:id="@+id/copyCodeDivider"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                app:layout_constraintBottom_toTopOf="@+id/copyCodeButton"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/qrcodeContainer" />
+
+            <com.duckduckgo.common.ui.view.text.DaxTextView
+                android:id="@+id/copyCodeButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginBottom="@dimen/keyline_4"
+                android:drawableEnd="@drawable/ic_arrow_circle_right_12"
+                android:drawablePadding="@dimen/keyline_2"
+                android:text="@string/login_screen_cant_scan"
+                android:textAlignment="center"
+                app:layout_constraintBottom_toBottomOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@+id/copyCodeDivider"
+                app:textType="secondary" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </ScrollView>
+</LinearLayout>
\ No newline at end of file