ViewfinderView Homepage, Documentation and Download- Android finder view component- Development details

ViewfinderView is a finder view: mainly used to render scan-related animation effects. Its styles are mainly divided into two categories: classic: classic style (with scan box), popular: popular style (without scan box); can be customized arbitrarily.

If you have used ZXing Lite or MLKitpossibly using its internal ViewfinderView.has now ViewfinderView Independently, it is convenient for subsequent unified maintenance.

afterZXing Lite,MLKit,WeChat QRCode will directly use this ViewfinderView As a generic scan rendering view.

Gif display

You can also directly download Demo App experience effect

ViewfinderView attribute description

Attributesattribute typeDefaultsproperty description
vvViewfinderStyleenumclassicViewfinder frame style; support: classic: classic style (with scanning frame), popular: popular style (without scanning frame)
vvMaskColorcolor#60000000The color of the mask outside the scan area
vvFrameColorcolor#7F1FB3E2The color of the scan area border
vvFrameWidthdimensionscan frame width
vvFrameHeightdimensionscan frame height
vvFrameRatiofloat0.625fScan frame and screen ratio, when the width and height of the scan frame are not set, use the ratio to calculate the width and height
vvFrameLineStrokeWidthdimension1dpborder line width
vvFramePaddingLeftdimension0Padding to the left of the scan box
vvFramePaddingTopdimension0Padding above the scan box
vvFramePaddingRightdimension0Padding to the right of the scan box
vvFramePaddingBottomdimension0Padding below the scan box
vvFrameGravityenumcenterScan frame alignment
vvFrameCornerColorcolor#FF1FB3E2The color of the corners of the scan area
vvFrameCornerSizedimension16dpThe size of the corners of the scanning area
vvFrameCornerStrokeWidthdimension4dpThe stroke width of the corners of the scan area
vvFrameDrawablereferenceScan box custom picture
vvLaserLineHeightdimension5dpLaser scan line height
vvLaserMovementSpeeddimension2dpMoving speed of laser scanning line
vvLaserAnimationIntervalinteger20Scan animation delay interval, unit: milliseconds
vvLaserGridColumninteger20Grid Laser Scan Columns
vvLaserGridHeightinteger40dpGrid laser scanning height, when it is 0dp, it means dynamic paving
vvLaserColorcolor#FF1FB3E2The color of the laser line in the scanning area
vvLaserStyleenumlineLaser Scanned Patterns
vvLaserDrawablereferenceLaser scan line custom picture
vvLaserDrawableRatiofloat0.625fLaser scan image and screen ratio
vvLabelTextstringScan prompt text information
vvLabelTextColorcolor#FFC0C0C0Prompt text font color
vvLabelTextSizedimension14spPrompt text font size
vvLabelTextPaddingdimension24dpThe distance between the prompt text and the scanning area
vvLabelTextWidthdimensionThe width of the prompt text, the default is the width of the View
vvLabelTextLocationenumbottomPrompt text display position
vvPointColorcolor#FF1FB3E2the color of the resulting point
vvPointStrokeColorcolor#FFFFFFFFThe color of the resulting point stroke
vvPointRadiusdimension15dpThe radius of the resulting point
vvPointStrokeRatiofloat1.2The ratio of the stroke radius of the result point to the radius of the result point
vvPointDrawablereferenceResult point custom picture
vvPointAnimationbooleantrueWhether to display the animation of the result point
vvPointAnimationIntervalinteger3000The animation interval of the result point; unit: millisecond

Custom attributes related to ViewfinderView are used uniformly vv beginning.



  1. in Project build.gradle Add remote warehouse inside

allprojects {
    repositories {

  1. in Module build.gradle Add the import dependencies inside

// AndroidX 版本
implementation 'com.github.jenly1314:viewfinderview:1.0.0'


layout example

For custom properties related to ViewfinderView, see above ViewfinderView attribute description

        app:vvLaserStyle="line" />

#ViewfinderView #Homepage #Documentation #Download #Android #finder #view #component #Development details


發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *