I finished a new android library today. It’s an idea that I had in my head for quite some time and finally got enough time to implement it. With the driveimageview library you can add some text or a description to an ImageView in a nice and colourful style. You can see an example of such a DriveImageView on the right side.

Build-Up

The DriveImageView is built from basic contents. At its heart, we have the normal ImageView. This is the widget where the library sets the image. Then in the layer above we have a CustomView which has the same size as the ImageView. And on that canvas the library draws the whole figures and the text. The reason why I didn’t use TextView’s to display the text is that working with the canvas itself gives the library much more options when it comes to the text-size of the texts. Also, these TextView sometimes have this strange behaviour when they should automatically resize and so working with the canvas was alright.

With the help of the canvas I could figure out a nice way which automatically resizes the Text to the custom heights of the figures. If you’re interested to find out how I did this, you can take a look at the following method in the DriveImageViewLayout.

Customisation

When I build a library it’s very important for me that its components can be easily customised with as less hassle as possible. Also, I want to keep the amount of things that can be customised as high as possible. The driveimageview-library gives the possibility to customise the colours of all figures (the divider and the main figure). You can change the height of the main figure as well as the width that separates the left border and the folder-text. But if there isn’t set a custom height it automatically calculates a nice height. The font size of the main and the folder-text changes according to the size of the height of the figures. This works pretty well and it’s programmed in a way that saves resources and time in the main draw method.

Gradle

After the android-square-progressbar library works so nicely with Bintray I decided to publish this library there as well. This gives users easy access to it. You can add it to your project via these two simple additions to your gradle-files.

As you can customise so many things, I did this brief overview, so you can find the right way for you to modify the DriveImageView:

setFolderCorner(floatfolderCorner)

This sets the height and the width of the “crack” in the divider line, where then the folder text is located. The value is in dp and later gets converted into pixels for the canvas.

setCustomFolderSpacing(floatcustomFolderSpacing)

This sets the space from the left side of the image to the right side of the folder crack.

setCustomHeight(floatcustomHeight)

This sets the custom height of the whole figure that is in front of the ImageView.

setImageScaleType(ImageView.ScaleTypescale)

This is something that I added after it turned out to be really useful in the android-square-progressbar. You can set the ScaleType of the ImageView to maybe make the image it contains look a bit better.

setAlphaValue(floatalphaValue)

This sets the opacity value of all the figures on the canvas. The value should be between 0f and 1f.

setTextColor(StringtextColor)

This sets the colour of the text. This includes the colours of both the main and the folder text.

setDivideColor(StringdivideColor)

This sets the colour of the divider-part of the figure.

setBackgroundColor(StringbackgroundColor)

This sets the background colour of the main figure (without the divider part).

Future

I will continuously update this library and add some more options when I’ve got enough time. If you found a bug or if you want to request a new feature for the library, then you can do this on the GitHub page here: https://github.com/mrwonderman/driveimageview/issues