[QRCode Android] Add camera preview overlay.

screenshot: https://screenshot.googleplex.com/7195BT4gJFQ.png

Bug: 993920
Change-Id: Id6d013e7046c8cdb59c0cbf79836188fb4d9962c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1953568
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: David Trainor <dtrainor@chromium.org>
Reviewed-by: Shakti Sahu <shaktisahu@chromium.org>
Reviewed-by: Jeffrey Cohen <jeffreycohen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#732460}

chrome/browser/share/android/java/res/values-sw600dp/dimens.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2019 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<resources>
+    <!-- QR code camera preview overlay dimensions -->
+    <dimen name="overlay_rect_size">300dp</dimen>
+    <dimen name="overlay_corner_size">30dp</dimen>
+</resources>
\ No newline at end of file

chrome/browser/share/android/java/res/values/colors.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2019 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file.-->
+
+<resources xmlns:tools="http://schemas.android.com/tools">
+    <!-- Qr code scanner camera preview overlay colors -->
+    <color name="overlay_mask">@color/black_alpha_65</color>
+</resources>
\ No newline at end of file

chrome/browser/share/android/java/res/values/dimens.xml

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright 2019 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<resources>
+    <!-- QR code camera preview overlay dimensions -->
+    <dimen name="overlay_rect_size">250dp</dimen>
+    <dimen name="overlay_corner_size">25dp</dimen>
+    <dimen name="overlay_corner_width">4dp</dimen>
+    <dimen name="overlay_text_top_padding">14dp</dimen>
+</resources>

chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/CameraPreviewOverlay.java

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+package org.chromium.chrome.browser.share.qrcode.scan_tab;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.Rect;
+import android.text.Layout.Alignment;
+import android.text.StaticLayout;
+import android.text.TextPaint;
+import android.view.View;
+
+import org.chromium.chrome.browser.share.qrcode.R;
+
+/** CameraPreviewOverlay is a mainly transparent layer meant for the camera preview. */
+public class CameraPreviewOverlay extends View {
+    private final int mRectSize;
+    private final int mCornerSize;
+    private final Paint mCornerPaint;
+    private final Paint mMaskPaint;
+    private final TextPaint mTextPaint;
+    private final int mTextTopPadding;
+    private final StaticLayout mTextLayout;
+
+    private Rect mFramingRect;
+
+    public CameraPreviewOverlay(Context context) {
+        super(context);
+
+        mRectSize = getResources().getDimensionPixelSize(R.dimen.overlay_rect_size);
+        mCornerSize = getResources().getDimensionPixelSize(R.dimen.overlay_corner_size);
+        mTextTopPadding = getResources().getDimensionPixelSize(R.dimen.overlay_text_top_padding);
+        updateFramingRect();
+
+        mMaskPaint = new Paint();
+        mMaskPaint.setColor(getResources().getColor(R.color.overlay_mask));
+
+        mCornerPaint = new Paint();
+        mCornerPaint.setColor(getResources().getColor(android.R.color.white));
+        mCornerPaint.setStyle(Paint.Style.STROKE);
+        mCornerPaint.setStrokeWidth(
+                getResources().getDimensionPixelSize(R.dimen.overlay_corner_width));
+
+        mTextPaint = new TextPaint();
+        mTextPaint.setAntiAlias(true);
+        mTextPaint.setColor(getResources().getColor(android.R.color.white));
+        mTextPaint.setTextSize(
+                getResources().getDimensionPixelSize(org.chromium.chrome.R.dimen.text_size_large));
+
+        String textString = getResources().getString(
+                org.chromium.chrome.R.string.qr_code_camera_framing_rect_description);
+        mTextLayout = new StaticLayout(textString, mTextPaint, mFramingRect.width(),
+                Alignment.ALIGN_CENTER, 1.0f, 0.0f, true);
+    }
+
+    @Override
+    protected void onSizeChanged(int w, int h, int ow, int oh) {
+        updateFramingRect();
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        drawOverlayMask(canvas);
+        drawCorners(canvas);
+        drawText(canvas);
+    }
+
+    /** Draws transparent scrim around the framing rectangle. */
+    private void drawOverlayMask(Canvas canvas) {
+        int width = canvas.getWidth();
+        int height = canvas.getHeight();
+
+        canvas.drawRect(0, 0, width, mFramingRect.top, mMaskPaint);
+        canvas.drawRect(
+                0, mFramingRect.top, mFramingRect.left, mFramingRect.bottom + 1, mMaskPaint);
+        canvas.drawRect(mFramingRect.right + 1, mFramingRect.top, width, mFramingRect.bottom + 1,
+                mMaskPaint);
+        canvas.drawRect(0, mFramingRect.bottom + 1, width, height, mMaskPaint);
+    }
+
+    /** Draws corners around the framing rectangle. */
+    private void drawCorners(Canvas canvas) {
+        // Top-left corner
+        Path path = new Path();
+        path.moveTo(mFramingRect.left, mFramingRect.top + mCornerSize);
+        path.lineTo(mFramingRect.left, mFramingRect.top);
+        path.lineTo(mFramingRect.left + mCornerSize, mFramingRect.top);
+        canvas.drawPath(path, mCornerPaint);
+
+        // Top-right corner
+        path.moveTo(mFramingRect.right, mFramingRect.top + mCornerSize);
+        path.lineTo(mFramingRect.right, mFramingRect.top);
+        path.lineTo(mFramingRect.right - mCornerSize, mFramingRect.top);
+        canvas.drawPath(path, mCornerPaint);
+
+        // Bottom-right corner
+        path.moveTo(mFramingRect.right, mFramingRect.bottom - mCornerSize);
+        path.lineTo(mFramingRect.right, mFramingRect.bottom);
+        path.lineTo(mFramingRect.right - mCornerSize, mFramingRect.bottom);
+        canvas.drawPath(path, mCornerPaint);
+
+        // Bottom-left corner
+        path.moveTo(mFramingRect.left, mFramingRect.bottom - mCornerSize);
+        path.lineTo(mFramingRect.left, mFramingRect.bottom);
+        path.lineTo(mFramingRect.left + mCornerSize, mFramingRect.bottom);
+        canvas.drawPath(path, mCornerPaint);
+    }
+
+    /** Draws text below the framing rectangle. */
+    private void drawText(Canvas canvas) {
+        canvas.save();
+        canvas.translate(mFramingRect.left, mFramingRect.bottom + mTextTopPadding);
+        mTextLayout.draw(canvas);
+        canvas.restore();
+    }
+
+    /** Updates the framing rectangle to always be in the center of the view. */
+    private void updateFramingRect() {
+        int width = getWidth();
+        int height = getHeight();
+        mFramingRect = new Rect((width - mRectSize) / 2, (height - mRectSize) / 2,
+                mRectSize + (width - mRectSize) / 2, mRectSize + (height - mRectSize) / 2);
+    }
+}

chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/QrCodeScanView.java

@@ -71,6 +71,7 @@ class QrCodeScanView {
         if (mHasCameraPermission) {
             mCameraPreview = new CameraPreview(mContext, mCameraCallback);
             mView.addView(mCameraPreview);
+            mView.addView(new CameraPreviewOverlay(mContext));
 
             updateCameraPreviewState();
         }

chrome/browser/share/android/java_sources.gni

@@ -10,6 +10,7 @@ share_java_sources = [
   "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/QrCodePageAdapter.java",
   "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/QrCodeShareActivity.java",
   "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/CameraPreview.java",
+  "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/CameraPreviewOverlay.java",
   "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/QrCodeScanCoordinator.java",
   "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/QrCodeScanMediator.java",
   "//chrome/browser/share/android/java/src/org/chromium/chrome/browser/share/qrcode/scan_tab/QrCodeScanView.java",

chrome/browser/ui/android/strings/android_chrome_strings.grd

@@ -3981,6 +3981,10 @@ The site does NOT gain access to the camera. The camera images are only visible
         Link Copied
       </message>
 
+      <message name="IDS_QR_CODE_CAMERA_FRAMING_RECT_DESCRIPTION" desc="Text under the framing rectangle in QR code camera preview.">
+        Position QR/barcode in this frame.
+      </message>
+
       <!-- Chime DFM module strings -->
       <message name="IDS_CHIME_MODULE_TITLE" desc="Text shown when the chime module is referenced in install start, success, failure UI (e.g. in IDS_MODULE_INSTALL_START_TEXT, which will expand to 'Installing Google Notifications Platform for Chrome…').">
         Google Notifications Platform

chrome/browser/ui/android/strings/android_chrome_strings_grd/IDS_QR_CODE_CAMERA_FRAMING_RECT_DESCRIPTION.png.sha1

+07f001829f37dd397a7678b935ddd0ab5f070f13
\ No newline at end of file