I've recently had need to customize the UI overlay of the excellent and free barcode scanning plugin Zxing. While gathering material for this post I discovered that an example is provided of customizing the overlay via XML, but when I initially searched the first example I came across was the C# method - so that's the route I took. The C# version did not have the ability to turn the flash on/off which was a feature I needed to access, so I figured out how to add that while styling. I'm going to go over how I modified the example class created by Redth to help anyone else who might attempt the same thing for their own Android app.
For starters, you need to modify your call to Zxing to specify the use of a custom overlay:
After that, you just need to customize the properties and methods of the ZxingOverlayView example class file. In my example I added the ability to control the torch (flashlight) and display bitamaps so that I could have my own custom buttons. I specified a default color and a pressed color, along with boolean flags so I could change the buttons to confirm to the user that they had pressed a button while waiting for a response:
For each of my buttons I had to specify a rectangle on the screen. It's best if you specify not in static pixels, but in percentage of the total screen available. This will ensure your overlay renders the same on any size of screen. I created three buttons, plus a rectangle to hold my torch icon bitmap. Notice that the TorchIconDimRect was created as part of SetDisplayValues() above as we decoded and resized the bitmap icon for it at the same time:
Here is the ImageHelper class file which you will only need if you are using bitmaps on your overlay. This helper class will resize your bitmap to the desired height to prevent image distortion:
So now that all the colors, shapes and bitmaps have been defined you just need to draw them to the screen. This is done through the OnDraw() method:
If your buttons are pressed, you can capture that event by overriding the OnTouchEvent method. Notice that in each button touch event I call this.Invalidate(). This call causes the screen to refresh and without it the OnDraw() method would not be invoked, and the screen would not reflect our buttons change in display when pressed.
Lastly, I read on a stackoverflow post that graphics and bitmaps are two objects which you must take care to properly dispose of when they are no longer needed If you don't properly dispose of the bitmaps created for your custom overlay then there is a potential for a memory leak. I dispose of my bitmaps by calling this OnUnload() method that I use at all points of exit:
This is how my custom overlay turned out. (Ignore the black & white checkerboard with green square which is just a test display for the android emulator's camera)
Hopefully my post helped you. Feel free to post questions if you are having problems, or need an explanation on any of my code.