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.

Just add the following repository to your root build.gradle:

allprojects {
    repositories {
        jcenter()
        maven { url "https://jcenter.bintray.com" }
    }
}

Then in your app build.gradle:

dependencies {
    // other repos ...
    compile 'ch.halcyon:driveimageview:0.0.1'
}

How to use it

After you added the library to your gradle files (see above) you then can add the DriveImageView to your layout XML-Files. Just select it from the CustomViews-Chooser or add it directly via the XML:

<ch.haclyon.driveimageview.DriveImageView
  android:id="@+id/driveImageView"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />

In your code, you then can introduce the object and set some basic settings:

DriveImageView driveImgView = (DriveImageView)findViewById(R.id.driveImageView);
driveImgView.setDriveImageModel(new DriveImageModel("main text", "small text", R.drawable.image));

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(float folderCorner)

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(float customFolderSpacing)

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

setCustomHeight(float customHeight)

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

setImageScaleType(ImageView.ScaleType scale)

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(float alphaValue)

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

setTextColor(String textColor)

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

setDivideColor(String divideColor)

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

setBackgroundColor(String backgroundColor)

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

GitHub repository: https://github.com/mrwonderman/driveimageview

Play Store: https://play.google.com/store/apps/details?id=ch.haclyon.driveimageview.example