Update verify identity UI.

2026-02-15 07:28:30 +00:00 · 2021-08-27 15:56:54 -03:00
parent 0273d0f285
commit 083301185c
8 changed files with 283 additions and 124 deletions
--- a/app/src/main/java/org/thoughtcrime/securesms/VerifyIdentityActivity.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/VerifyIdentityActivity.java
@@ -45,10 +45,10 @@ import android.view.View;
 import android.view.ViewGroup;
 import android.view.animation.Animation;
 import android.view.animation.AnticipateInterpolator;
-import android.view.animation.OvershootInterpolator;
 import android.view.animation.ScaleAnimation;
-import android.widget.CompoundButton;
+import android.widget.Button;
 import android.widget.ImageView;
+import android.widget.TextSwitcher;
 import android.widget.TextView;
 import android.widget.Toast;

@@ -56,12 +56,16 @@ import androidx.annotation.DrawableRes;
 import androidx.annotation.NonNull;
 import androidx.appcompat.app.AlertDialog;
 import androidx.appcompat.widget.SwitchCompat;
+import androidx.core.view.OneShotPreDrawListener;
 import androidx.fragment.app.Fragment;
 import androidx.fragment.app.FragmentTransaction;
+import androidx.interpolator.view.animation.FastOutSlowInInterpolator;
+import androidx.transition.TransitionManager;

 import org.signal.core.util.ThreadUtil;
 import org.signal.core.util.concurrent.SignalExecutors;
 import org.signal.core.util.logging.Log;
+import org.thoughtcrime.securesms.components.ShapeScrim;
 import org.thoughtcrime.securesms.components.camera.CameraView;
 import org.thoughtcrime.securesms.crypto.ReentrantSessionLock;
 import org.thoughtcrime.securesms.crypto.IdentityKeyParcelable;
@@ -214,7 +218,7 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
    Permissions.onRequestPermissionsResult(this, requestCode, permissions, grantResults);
  }

-  public static class VerifyDisplayFragment extends Fragment implements CompoundButton.OnCheckedChangeListener {
+  public static class VerifyDisplayFragment extends Fragment {

    public static final String RECIPIENT_ID    = "recipient_id";
    public static final String REMOTE_NUMBER   = "remote_number";
@@ -230,23 +234,28 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement

    private View                 container;
    private View                 numbersContainer;
+    private View                 loading;
+    private View                 qrCodeContainer;
    private ImageView            qrCode;
    private ImageView            qrVerified;
-    private TextView             tapLabel;
+    private TextSwitcher         tapLabel;
    private TextView             description;
    private View.OnClickListener clickListener;
-    private SwitchCompat         verified;
+    private Button               verifyButton;

    private TextView[] codes                = new TextView[12];
    private boolean    animateSuccessOnDraw = false;
    private boolean    animateFailureOnDraw = false;
+    private boolean    currentVerifiedState = false;

    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup viewGroup, Bundle bundle) {
      this.container        = ViewUtil.inflate(inflater, viewGroup, R.layout.verify_display_fragment);
      this.numbersContainer = container.findViewById(R.id.number_table);
+      this.loading          = container.findViewById(R.id.loading);
+      this.qrCodeContainer  = container.findViewById(R.id.qr_code_container);
      this.qrCode           = container.findViewById(R.id.qr_code);
-      this.verified         = container.findViewById(R.id.verified_switch);
+      this.verifyButton     = container.findViewById(R.id.verify_button);
      this.qrVerified       = container.findViewById(R.id.qr_verified);
      this.description      = container.findViewById(R.id.description);
      this.tapLabel         = container.findViewById(R.id.tap_label);
@@ -263,11 +272,11 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
      this.codes[10]        = container.findViewById(R.id.code_eleventh);
      this.codes[11]        = container.findViewById(R.id.code_twelth);

-      this.qrCode.setOnClickListener(clickListener);
+      this.qrCodeContainer.setOnClickListener(clickListener);
      this.registerForContextMenu(numbersContainer);

-      this.verified.setChecked(getArguments().getBoolean(VERIFIED_STATE, false));
-      this.verified.setOnCheckedChangeListener(this);
+      updateVerifyButton(getArguments().getBoolean(VERIFIED_STATE, false), false);
+      this.verifyButton.setOnClickListener((button -> updateVerifyButton(!currentVerifiedState, true)));

      return container;
    }
@@ -327,6 +336,7 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement

        @Override
        protected void onPostExecute(Fingerprint fingerprint) {
+          if (getActivity() == null) return;
          VerifyDisplayFragment.this.fingerprint = fingerprint;
          setFingerprintViews(fingerprint, true);
          getActivity().supportInvalidateOptionsMenu();
@@ -480,7 +490,7 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
    }

    private void setRecipientText(Recipient recipient) {
-      description.setText(Html.fromHtml(String.format(getActivity().getString(R.string.verify_display_fragment__if_you_wish_to_verify_the_security_of_your_end_to_end_encryption_with_s), recipient.getDisplayName(getContext()))));
+      description.setText(Html.fromHtml(String.format(getActivity().getString(R.string.verify_display_fragment__to_verify_the_security_of_your_end_to_end_encryption_with_s), recipient.getDisplayName(getContext()))));
      description.setMovementMethod(LinkMovementMethod.getInstance());
    }

@@ -501,9 +511,11 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
      if (animate) {
        ViewUtil.fadeIn(qrCode, 1000);
        ViewUtil.fadeIn(tapLabel, 1000);
+        ViewUtil.fadeOut(loading, 300, View.GONE);
      } else {
        qrCode.setVisibility(View.VISIBLE);
        tapLabel.setVisibility(View.VISIBLE);
+        loading.setVisibility(View.GONE);
      }
    }

@@ -559,6 +571,8 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
      qrVerified.setImageBitmap(qrSuccess);
      qrVerified.getBackground().setColorFilter(getResources().getColor(R.color.green_500), PorterDuff.Mode.MULTIPLY);

+      tapLabel.setText(getString(R.string.verify_display_fragment__successful_match));
+
      animateVerified();
    }

@@ -569,6 +583,8 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
      qrVerified.setImageBitmap(qrSuccess);
      qrVerified.getBackground().setColorFilter(getResources().getColor(R.color.red_500), PorterDuff.Mode.MULTIPLY);

+      tapLabel.setText(getString(R.string.verify_display_fragment__failed_to_verify_safety_number));
+
      animateVerified();
    }

@@ -576,7 +592,7 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
      ScaleAnimation scaleAnimation = new ScaleAnimation(0, 1, 0, 1,
                                                         ScaleAnimation.RELATIVE_TO_SELF, 0.5f,
                                                         ScaleAnimation.RELATIVE_TO_SELF, 0.5f);
-      scaleAnimation.setInterpolator(new OvershootInterpolator());
+      scaleAnimation.setInterpolator(new FastOutSlowInInterpolator());
      scaleAnimation.setDuration(800);
      scaleAnimation.setAnimationListener(new Animation.AnimationListener() {
        @Override
@@ -594,6 +610,9 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
              scaleAnimation.setInterpolator(new AnticipateInterpolator());
              scaleAnimation.setDuration(500);
              ViewUtil.animateOut(qrVerified, scaleAnimation, View.GONE);
+              ViewUtil.fadeIn(qrCode, 800);
+              qrCodeContainer.setEnabled(true);
+              tapLabel.setText(getString(R.string.verify_display_fragment__tap_to_scan));
            }
          }, 2000);
        }
@@ -602,53 +621,75 @@ public class VerifyIdentityActivity extends PassphraseRequiredActivity implement
        public void onAnimationRepeat(Animation animation) {}
      });

+      ViewUtil.fadeOut(qrCode, 200, View.INVISIBLE);
      ViewUtil.animateIn(qrVerified, scaleAnimation);
+      qrCodeContainer.setEnabled(false);
    }

-    @Override
-    public void onCheckedChanged(CompoundButton buttonView, final boolean isChecked) {
-      final Recipient   recipient   = this.recipient.get();
-      final RecipientId recipientId = recipient.getId();
+    private void updateVerifyButton(boolean verified, boolean update) {
+      currentVerifiedState = verified;

-      SignalExecutors.BOUNDED.execute(() -> {
-        try (SignalSessionLock.Lock unused = ReentrantSessionLock.INSTANCE.acquire()) {
-          if (isChecked) {
-            Log.i(TAG, "Saving identity: " + recipientId);
-            DatabaseFactory.getIdentityDatabase(getActivity())
-                           .saveIdentity(recipientId,
-                                         remoteIdentity,
-                                         VerifiedStatus.VERIFIED, false,
-                                         System.currentTimeMillis(), true);
-          } else {
-            DatabaseFactory.getIdentityDatabase(getActivity())
-                           .setVerified(recipientId,
-                                        remoteIdentity,
-                                        VerifiedStatus.DEFAULT);
+      if (verified) {
+        verifyButton.setText(R.string.verify_display_fragment__clear_verification);
+      } else {
+        verifyButton.setText(R.string.verify_display_fragment__mark_as_verified);
+      }
+
+      if (update) {
+        final RecipientId recipientId = recipient.getId();
+
+        SignalExecutors.BOUNDED.execute(() -> {
+          try (SignalSessionLock.Lock unused = ReentrantSessionLock.INSTANCE.acquire()) {
+            if (verified) {
+              Log.i(TAG, "Saving identity: " + recipientId);
+              DatabaseFactory.getIdentityDatabase(getActivity())
+                             .saveIdentity(recipientId,
+                                           remoteIdentity,
+                                           VerifiedStatus.VERIFIED, false,
+                                           System.currentTimeMillis(), true);
+            } else {
+              DatabaseFactory.getIdentityDatabase(getActivity())
+                             .setVerified(recipientId,
+                                          remoteIdentity,
+                                          VerifiedStatus.DEFAULT);
+            }
+
+            ApplicationDependencies.getJobManager()
+                                   .add(new MultiDeviceVerifiedUpdateJob(recipientId,
+                                                                         remoteIdentity,
+                                                                         verified ? VerifiedStatus.VERIFIED
+                                                                                   : VerifiedStatus.DEFAULT));
+            StorageSyncHelper.scheduleSyncForDataChange();
+
+            IdentityUtil.markIdentityVerified(getActivity(), recipient.get(), verified, false);
          }
-
-          ApplicationDependencies.getJobManager()
-                                 .add(new MultiDeviceVerifiedUpdateJob(recipientId,
-                                                                       remoteIdentity,
-                                                                       isChecked ? VerifiedStatus.VERIFIED
-                                                                                 : VerifiedStatus.DEFAULT));
-          StorageSyncHelper.scheduleSyncForDataChange();
-
-          IdentityUtil.markIdentityVerified(getActivity(), recipient, isChecked, false);
-        }
-      });
+        });
+      }
    }
+
  }

  public static class VerifyScanFragment extends Fragment {

    private View           container;
    private CameraView     cameraView;
+    private ShapeScrim     cameraScrim;
+    private ImageView      cameraMarks;
    private ScanningThread scanningThread;
    private ScanListener   scanListener;

    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup viewGroup, Bundle bundle) {
-      this.container  = ViewUtil.inflate(inflater, viewGroup, R.layout.verify_scan_fragment);
-      this.cameraView = container.findViewById(R.id.scanner);
+      this.container   = ViewUtil.inflate(inflater, viewGroup, R.layout.verify_scan_fragment);
+      this.cameraView  = container.findViewById(R.id.scanner);
+      this.cameraScrim = container.findViewById(R.id.camera_scrim);
+      this.cameraMarks = container.findViewById(R.id.camera_marks);
+
+      OneShotPreDrawListener.add(cameraScrim, () -> {
+        int width  = cameraScrim.getScrimWidth();
+        int height = cameraScrim.getScrimHeight();
+
+        ViewUtil.updateLayoutParams(cameraMarks, width, height);
+      });

      return container;
    }
--- a/app/src/main/java/org/thoughtcrime/securesms/components/ShapeScrim.java
+++ b/app/src/main/java/org/thoughtcrime/securesms/components/ShapeScrim.java
@@ -23,9 +23,12 @@ public class ShapeScrim extends View {
  private final Paint     eraser;
  private final ShapeType shape;
  private final float     radius;
+  private final int       canvasColor;

  private Bitmap scrim;
  private Canvas scrimCanvas;
+  private int    scrimWidth;
+  private int    scrimHeight;

  public ShapeScrim(Context context) {
    this(context, null);
@@ -57,13 +60,30 @@ public class ShapeScrim extends View {
    this.eraser = new Paint();
    this.eraser.setColor(0xFFFFFFFF);
    this.eraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
+
+    this.canvasColor = Color.parseColor("#55BDBDBD");
+  }
+
+  @Override
+  protected void onLayout(boolean changed, int l, int t, int r, int b) {
+    super.onLayout(changed, l, t, r, b);
+    int   shortDimension = Math.min(getWidth(), getHeight());
+    float drawRadius     = shortDimension * radius;
+
+    float left   = (getMeasuredWidth() / 2 ) - drawRadius;
+    float top    = (getMeasuredHeight() / 2) - drawRadius;
+    float right  = left + (drawRadius * 2);
+    float bottom = top + (drawRadius * 2);
+
+    scrimWidth  = (int) (right - left);
+    scrimHeight = (int) (bottom - top);
  }

  @Override
  public void onDraw(Canvas canvas) {
    super.onDraw(canvas);

-    int   shortDimension = getWidth() < getHeight() ? getWidth() : getHeight();
+    int   shortDimension = Math.min(getWidth(), getHeight());
    float drawRadius     = shortDimension * radius;

    if (scrimCanvas == null) {
@@ -72,7 +92,7 @@ public class ShapeScrim extends View {
    }

    scrim.eraseColor(Color.TRANSPARENT);
-    scrimCanvas.drawColor(Color.parseColor("#55BDBDBD"));
+    scrimCanvas.drawColor(canvasColor);

    if (shape == ShapeType.CIRCLE) drawCircle(scrimCanvas, drawRadius, eraser);
    else                           drawSquare(scrimCanvas, drawRadius, eraser);
@@ -104,4 +124,12 @@ public class ShapeScrim extends View {

    canvas.drawRoundRect(square, 25, 25, eraser);
  }
+
+  public int getScrimWidth() {
+    return scrimWidth;
+  }
+
+  public int getScrimHeight() {
+    return scrimHeight;
+  }
 }
--- a/app/src/main/res/drawable/ic_camera_outline.xml
+++ b/app/src/main/res/drawable/ic_camera_outline.xml
@@ -0,0 +1,39 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="100dp"
+    android:height="100dp"
+    android:viewportWidth="61.38333"
+    android:viewportHeight="61.383335"
+    android:tint="@color/core_white">
+  <group>
+    <clip-path
+        android:pathData="M0.0016,0.0031l8.4667,0l0,8.4667l-8.4667,0z"/>
+    <path
+        android:pathData="M8.4682,0.7968L2.6474,0.7968C1.6245,0.7968 0.7953,1.6261 0.7953,2.6489L0.7953,8.4698L0.0016,8.4698L0.0016,2.6489C0.0016,1.1877 1.1861,0.0031 2.6474,0.0031L8.4682,0.0031Z"
+        android:fillColor="#000000"
+        android:fillType="evenOdd"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M61.3849,0.0031l-8.4667,0l-0,8.4667l8.4667,0z"/>
+    <path
+        android:pathData="M52.9183,0.7968L58.7391,0.7968C59.762,0.7968 60.5912,1.6261 60.5912,2.6489L60.5912,8.4698L61.3849,8.4698L61.3849,2.6489C61.3849,1.1877 60.2003,0.0031 58.7391,0.0031L52.9183,0.0031Z"
+        android:fillColor="#000000"
+        android:fillType="evenOdd"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M0.0016,61.3864l8.4667,-0l0,-8.4667l-8.4667,-0z"/>
+    <path
+        android:pathData="M8.4682,60.5927L2.6474,60.5927C1.6245,60.5927 0.7953,59.7635 0.7953,58.7406L0.7953,52.9198L0.0016,52.9198L0.0016,58.7406C0.0016,60.2018 1.1861,61.3864 2.6474,61.3864L8.4682,61.3864Z"
+        android:fillColor="#000000"
+        android:fillType="evenOdd"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M61.3849,61.3864l-8.4667,-0l-0,-8.4667l8.4667,-0z"/>
+    <path
+        android:pathData="M52.9182,60.5927L58.7391,60.5927C59.7619,60.5927 60.5912,59.7635 60.5912,58.7406L60.5912,52.9198L61.3849,52.9198L61.3849,58.7406C61.3849,60.2018 60.2003,61.3864 58.7391,61.3864L52.9182,61.3864Z"
+        android:fillColor="#000000"
+        android:fillType="evenOdd"/>
+  </group>
+</vector>
--- a/app/src/main/res/drawable/qr_code_background.xml
+++ b/app/src/main/res/drawable/qr_code_background.xml
@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
-        android:shape="oval">
-    <solid android:color="@color/white"/>
+        android:shape="rectangle">
+    <corners android:radius="10dp" />
+    <solid android:color="@color/core_grey_02" />
 </shape>
--- a/app/src/main/res/layout/verify_display_fragment.xml
+++ b/app/src/main/res/layout/verify_display_fragment.xml
@@ -1,66 +1,91 @@
 <?xml version="1.0" encoding="utf-8"?>
 <ScrollView 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="fill_parent"
            android:layout_height="fill_parent"
-            xmlns:tools="http://schemas.android.com/tools"
            android:fillViewport="true">

    <LinearLayout android:layout_width="fill_parent"
                  android:layout_height="wrap_content"
-                  android:padding="20dp"
+                  android:padding="36dp"
                  android:gravity="center_horizontal"
-                  android:background="@color/signal_background_secondary"
+                  android:background="@color/signal_background_primary"
                  android:orientation="vertical">

-        <FrameLayout android:layout_width="250dp"
-                     android:layout_height="250dp">
-
-            <TextView android:layout_width="wrap_content"
+        <LinearLayout android:id="@+id/qr_code_container"
+                      android:layout_width="match_parent"
                      android:layout_height="wrap_content"
-                      android:layout_gravity="center"
-                      android:textSize="20sp"
-                      android:text="@string/verify_display_fragment__loading"/>
+                      android:orientation="vertical"
+                      android:layout_marginStart="30dp"
+                      android:layout_marginEnd="30dp"
+                      android:background="@drawable/qr_code_background">

-            <org.thoughtcrime.securesms.components.SquareImageView
+            <FrameLayout android:layout_width="wrap_content"
+                         android:layout_height="wrap_content"
+                         android:layout_marginTop="36dp"
+                         android:layout_gravity="center">
+
+                <TextView android:id="@+id/loading"
+                          android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:layout_gravity="center"
+                          android:text="@string/verify_display_fragment__loading"
+                          android:textSize="20sp" />
+
+                <org.thoughtcrime.securesms.components.SquareImageView
                    android:id="@+id/qr_code"
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:layout_margin="20dp"
-                    android:padding="20dp"
-                    android:background="@drawable/qr_code_background"
+                    android:layout_width="164dp"
+                    android:layout_height="164dp"
+                    android:layout_gravity="center_horizontal"
                    android:visibility="invisible"
-                    tools:src="@drawable/splash_logo"
-                    tools:visibility="invisible"/>
+                    tools:src="@drawable/ic_about_mc_80"
+                    tools:visibility="visible" />

-            <TextView android:id="@+id/tap_label"
-                      android:layout_width="wrap_content"
-                      android:layout_height="wrap_content"
-                      android:layout_gravity="bottom|center_horizontal"
-                      android:layout_marginBottom="35dp"
-                      android:textColor="@color/core_grey_50"
-                      android:textSize="11sp"
-                      android:visibility="invisible"
-                      android:text="@string/verify_display_fragment__tap_to_scan"/>
-
-            <org.thoughtcrime.securesms.components.SquareImageView
+                <org.thoughtcrime.securesms.components.SquareImageView
                    android:id="@+id/qr_verified"
-                    android:layout_width="match_parent"
-                    android:layout_height="match_parent"
-                    android:layout_margin="20dp"
-                    android:padding="20dp"
+                    android:layout_width="100dp"
+                    android:layout_height="100dp"
                    android:src="@drawable/ic_check_white_48dp"
-                    android:background="@drawable/qr_code_background"
+                    android:background="@drawable/circle_tintable"
                    android:backgroundTint="@color/green_500"
-                    android:visibility="gone"/>
+                    android:visibility="gone"
+                    android:layout_gravity="center"
+                    tools:visibility="visible"/>
+            </FrameLayout>

+            <TextSwitcher android:id="@+id/tap_label"
+                          android:layout_width="match_parent"
+                          android:layout_height="wrap_content"
+                          android:layout_marginTop="20dp"
+                          android:layout_marginBottom="27dp"
+                          android:inAnimation="@android:anim/fade_in"
+                          android:outAnimation="@android:anim/fade_out">

-        </FrameLayout>
+                <TextView android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:layout_gravity="bottom|center_horizontal"
+                          android:textColor="@color/core_grey_50"
+                          android:textSize="11sp"
+                          android:text="@string/verify_display_fragment__tap_to_scan"
+                          style="@style/Signal.Text.Preview" />

+                <TextView android:layout_width="wrap_content"
+                          android:layout_height="wrap_content"
+                          android:layout_gravity="bottom|center_horizontal"
+                          android:textColor="@color/core_grey_50"
+                          android:textSize="11sp"
+                          android:text="@string/verify_display_fragment__successful_match"
+                          style="@style/Signal.Text.Preview" />
+
+            </TextSwitcher>
+
+        </LinearLayout>

        <TableLayout android:id="@+id/number_table"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
-                     android:layout_marginTop="5dp"
+                     android:layout_marginTop="36dp"
                     android:clickable="true"
                     android:focusable="true">

@@ -155,34 +180,28 @@
            </TableRow>
        </TableLayout>

-        <LinearLayout android:orientation="horizontal"
-                      android:layout_width="match_parent"
-                      android:layout_height="wrap_content"
-                      android:layout_marginTop="10dp"
-                      android:paddingStart="20dp">
-
-            <androidx.appcompat.widget.SwitchCompat
-                    android:id="@+id/verified_switch"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"/>
-
-            <TextView
-                    android:layout_marginStart="5dp"
-                    android:textSize="17dp"
-                    android:layout_width="wrap_content"
-                    android:layout_height="wrap_content"
-                    android:text="@string/verify_display_fragment__verified"/>
-
-        </LinearLayout>
-
        <TextView android:id="@+id/description"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
-                  android:layout_marginTop="15dp"
-                  android:textSize="17sp"
+                  android:layout_marginTop="36dp"
+                  android:layout_marginStart="30dp"
+                  android:layout_marginEnd="30dp"
+                  android:gravity="center"
                  android:lineSpacingExtra="3sp"
-                  android:text="@string/verify_display_fragment__if_you_wish_to_verify_the_security_of_your_end_to_end_encryption_with_s"/>
-
+                  android:text="@string/verify_display_fragment__to_verify_the_security_of_your_end_to_end_encryption_with_s"
+                  style="@style/TextAppearance.Signal.Body2" />

+        <com.google.android.material.button.MaterialButton
+            android:id="@+id/verify_button"
+            android:layout_width="match_parent"
+            android:layout_height="60dp"
+            android:textAllCaps="false"
+            android:layout_marginTop="43dp"
+            android:layout_marginStart="12dp"
+            android:layout_marginEnd="12dp"
+            android:text="@string/verify_display_fragment__mark_as_verified"
+            style="@style/Signal.Widget.Button.Large.Primary"
+            app:backgroundTint="@color/signal_inverse_transparent_10"
+            android:textColor="@color/signal_accent_primary"/>
    </LinearLayout>
 </ScrollView>
--- a/app/src/main/res/layout/verify_scan_fragment.xml
+++ b/app/src/main/res/layout/verify_scan_fragment.xml
@@ -1,27 +1,52 @@
 <?xml version="1.0" encoding="utf-8"?>
-<FrameLayout android:layout_width="match_parent"
-             android:layout_height="match_parent"
-             xmlns:android="http://schemas.android.com/apk/res/android"
-             xmlns:app="http://schemas.android.com/apk/res-auto">
+<androidx.constraintlayout.widget.ConstraintLayout
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        xmlns:android="http://schemas.android.com/apk/res/android"
+        xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <TextView android:id="@+id/information"
+              android:layout_width="match_parent"
+              android:layout_height="60dp"
+              android:gravity="center"
+              android:text="@string/verify_scan_fragment__scan_the_qr_code_on_your_contact"
+              style="@style/TextAppearance.Signal.Body2"
+              app:layout_constraintBottom_toBottomOf="parent"
+              app:layout_constraintEnd_toStartOf="parent"
+              app:layout_constraintEnd_toEndOf="parent" />

    <org.thoughtcrime.securesms.components.camera.CameraView
            android:id="@+id/scanner"
            android:layout_width="match_parent"
-            android:layout_height="match_parent"
-            app:camera="0"/>
+            android:layout_height="0dp"
+            app:camera="0"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintEnd_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintBottom_toTopOf="@+id/information" />

-    <LinearLayout android:id="@+id/overlay"
-                  android:layout_width="match_parent"
-                  android:layout_height="match_parent"
-                  android:orientation="vertical">
+    <FrameLayout android:id="@+id/overlay"
+                 android:layout_width="match_parent"
+                 android:layout_height="0dp"
+                 android:orientation="vertical"
+                 app:layout_constraintTop_toTopOf="parent"
+                 app:layout_constraintBottom_toTopOf="@id/information"
+                 app:layout_constraintEnd_toStartOf="parent"
+                 app:layout_constraintEnd_toEndOf="parent">
+
+        <ImageView android:id="@+id/camera_marks"
+                   android:layout_width="50dp"
+                   android:layout_height="50dp"
+                   android:layout_gravity="center"
+                   app:srcCompat="@drawable/ic_camera_outline" />

        <org.thoughtcrime.securesms.components.ShapeScrim
+                android:id="@+id/camera_scrim"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:radius="0.3"
-                app:shape="circle"/>
+                app:shape="square" />

+    </FrameLayout>

-    </LinearLayout>
-
-</FrameLayout>
+</androidx.constraintlayout.widget.ConstraintLayout>
--- a/app/src/main/res/values/strings.xml
+++ b/app/src/main/res/values/strings.xml
@@ -2153,14 +2153,20 @@
    <string name="recipients_panel__to"><small>Enter a name or number</small></string>

    <!-- verify_display_fragment -->
-    <string name="verify_display_fragment__if_you_wish_to_verify_the_security_of_your_end_to_end_encryption_with_s"><![CDATA[If you wish to verify the security of your encryption with %s, compare the number above with the number on their device. Alternatively, you can scan the code on their phone, or ask them to scan your code. <a href="https://signal.org/redirect/safety-numbers">Learn more.</a>]]></string>
+    <string name="verify_display_fragment__to_verify_the_security_of_your_end_to_end_encryption_with_s"><![CDATA[To verify the security of your end-to-end encryption with %s, compare the numbers above with their device. You can also scan the code on their phone. <a href="https://signal.org/redirect/safety-numbers">Learn more.</a>]]></string>
    <string name="verify_display_fragment__tap_to_scan">Tap to scan</string>
+    <string name="verify_display_fragment__successful_match">Successful match</string>
+    <string name="verify_display_fragment__failed_to_verify_safety_number">Failed to verify safety number</string>
    <string name="verify_display_fragment__loading">Loading…</string>
-    <string name="verify_display_fragment__verified">Verified</string>
+    <string name="verify_display_fragment__mark_as_verified">Mark as verified</string>
+    <string name="verify_display_fragment__clear_verification">Clear verification</string>

    <!-- verify_identity -->
    <string name="verify_identity__share_safety_number">Share safety number</string>

+    <!-- verity_scan_fragment -->
+    <string name="verify_scan_fragment__scan_the_qr_code_on_your_contact">Scan the QR Code on your contact\’s device.</string>
+
    <!-- webrtc_answer_decline_button -->
    <string name="webrtc_answer_decline_button__swipe_up_to_answer">Swipe up to answer</string>
    <string name="webrtc_answer_decline_button__swipe_down_to_reject">Swipe down to reject</string>
--- a/app/src/main/res/values/styles.xml
+++ b/app/src/main/res/values/styles.xml
@@ -311,7 +311,7 @@
    <style name="IdentityKey">
        <item name="android:fontFamily">monospace</item>
        <item name="android:typeface">monospace</item>
-        <item name="android:textSize">17sp</item>
+        <item name="android:textSize">16sp</item>
        <item name="android:clickable">false</item>
        <item name="android:focusable">false</item>
    </style>