A dialog with some lines of text over an image — WaterMarkDialog

MriDx
2 min readOct 9, 2021

A few days ago I was developing an app where user uploads some images of some site-work. To make it more authentic, I was asked to provide location information with the image, later I had to write those information on the image at a corner. Those informations were location (latitude/longitude, accuracy), uploader name, date and time of upload etc.

This is was completely new challenge for me as I had to compress the image after everything done above and the file size was preferably <1mb. At first I used some library, AndroidWM for watermarks and Compressor for compressing the image. These both works well but was not providing satisfactory result. So I developed these solutions myself.

My requirements were paint a dialog on the image at Bottom-Left corner, write all the information over the dialog and compress.

I started my research and came up with some good solution. The idea was we can get canvas of the image’s bitmap and paint whatever we want.

Now, it was left only calculations to write all these information. The process I followed is below —

  1. Calculate bitmap’s size (width/height) and decide a temporary width for the dialog.
  2. Then calculated text size by a given ratio multiply by the temporary dialog width. That way I have now text size of every line to be painted.
  3. Then calculated the actual width and height of the dialog to be painted by measuring text lines and summing up the text sizes respectively.
  4. So at this point, I have dialog width-height and text size. Now just had to calculate the positions of the dialog by given position and also the text lines X and Y points.
  5. And that’s almost it. Just painted all these over and done.

Well, it seems pretty easy but it took me two days to completely come up with this solution.

Now about the compression, I used some of the codes from here and Whatsapp Like Image Compression and it worked well.

So I hope this might help someone somehow. If you want to use this as a library then just clone this WaterMarkDialog project as import as library in your android studio project. I might upload it as a library in future, but at present I have no idea if these’s any sense to upload it as a library.

Thank you

Some result of the process are —

Position — Bottom-Left
Position — Top-Left

--

--

MriDx

Hey, I’m a Mobile App Developer from Guwahati, India