How to draw four boundary corner for qr code scanner

I shortened the edges. It looks better now.

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp" android:height="200dp" android:viewportHeight="230.0" android:viewportWidth="230.0">
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M200,5C197.1,5 198,5 225,5L225,30.79L225,6"
        android:strokeColor="@color/colorWhite" android:strokeWidth="2"/>
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M5,15C5,51.8 5,5 5,5L10.19,5L30,5"
        android:strokeColor="@color/colorWhite" android:strokeWidth="2"/>
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M200,225C200,225 200,225 225,225L225,200.21L225,200"
        android:strokeColor="@color/colorWhite" android:strokeWidth="2"/>
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M5,200C5,200 5,210 5,225L30.90,225L7,225"
        android:strokeColor="@color/colorWhite" android:strokeWidth="2"/>

</vector>

You should check down :

enter image description here


I created a vector drawable for this:

<vector 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="220dp" android:height="220dp" android:viewportHeight="230.0" android:viewportWidth="230.0">
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M165,5C178.2,5 198.2,5 225,5L225,30.79L225,65"
        android:strokeColor="@color/qr_code_reader_square" android:strokeWidth="10"/>
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M5,65C5,51.8 5,31.8 5,5L30.79,5L65,5"
        android:strokeColor="@color/qr_code_reader_square" android:strokeWidth="10"/>
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M165,225C178.2,225 198.2,225 225,225L225,199.21L225,165"
        android:strokeColor="@color/qr_code_reader_square" android:strokeWidth="10"/>
    <path android:fillColor="#00000000" android:fillType="evenOdd"
        android:pathData="M5,165C5,178.2 5,198.2 5,225L30.79,225L65,225"
        android:strokeColor="@color/qr_code_reader_square" android:strokeWidth="10"/>
</vector>

You can save it in res/drawable as qr_code_reader_square.xml and then use it in your layout like this:

<FrameLayout
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:background="@drawable/qr_code_reader_square"/>

You will also have to set the color in res/values/colors.xml:

<color name="qr_code_reader_square">#FFFFFFFF</color>

Use the below drawable file and set the background of QR Code:-

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item >
    <shape android:shape="rectangle">
        <stroke android:color="@color/black" android:width="5dp"/>
        <solid android:color="@color/white"/>
    </shape>
</item>
    <item android:left="20dp" android:right="20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
    <item android:top="20dp" android:bottom="20dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

Tags:

Android