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 :
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>