driveimageview release

driveimageview release

1I 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.

sketch

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

Yannick Signer

 

6 thoughts on “driveimageview release
Kiran Rao

Great library! One question I have is regarding this:

Then in the layer above we have a CustomView which has the same size as the ImageView.

Doesn’t it suffice for the CustomView to be the size of the content of the DriveImageModel? I’m wondering if making the layer the whole size of the image results in overdraw?

    Yannick Signer

    Hello, thank you very much! I see your point about the size of the layer. With the current implementation, I don’t have to set the size myself and I let the layout handle that calculation. But maybe that would be the better way to do it. So what do you mean by an overdraw?

Kiran Rao

Overdraw as in – drawing the same pixel multiple times. First, the pixels for the image. Then the transparent layer on top of it. Finally, the pixels for the description.

Overdraw cannot be avoided, but should be minimized. In this case, the portion where you display the description has overdraw – each pixel is drawn twice. This is acceptable. But, having the layer be the same size as the image would cause the all the pixels be drawn twice right? (Please correct me if I am misunderstanding the way a layer works. I am assuming that it draws a transparent layer to fill its size).

More on overdraw here:
https://www.youtube.com/watch?v=T52v50r-JfE
https://developer.android.com/tools/performance/debug-gpu-overdraw/index.html

    Yannick Signer

    Ahh, now I see what you mean. I looked at this today and when I activated the Debug GPU Overdraw on my device and looked at the app I found that there is indeed an overdraw. And it is there where you described it. But after I compared this with a normal ImageView it seems like they normally get overdrawn once. So actually the transparent CustomView doesn’t cause an additional overdraw in that area. But there is some overdraw where my figures are, but as you said, I can’t really avoid these. I tried to find out more about that automated overdrawing of the ImageView, but I wasn’t successful. What’s your opinion on this?

      Kiran Rao

      I’m not really an expert on this 😀
      Maybe you should ask on the Android Performance Patterns community on G+ – https://plus.google.com/communities/116342551728637785407

      If I had to guess based on the results you describe, I would guess that the Image gets overdrawn once, the text on top of it gets overdrawn twice; and the layer that you add above the CustomView does not cause any overdraw because perhaps it is not a transparent layer as I assumed but just a “virtual” layer??

      If that reasoning is correct then I would conclude that DriveImageView is indeed as optimized as possible.

      P.S:- I’m not getting email notifications to replies to my comments here.

        Yannick Signer

        Yeah, that’s a good idea, I posted my question there now :). Yes, I’m coming to the exact same conclusion and the “Debug GPU Overdraw” only supports that. Thank you very much for that input, I’ve never cared about overdraw until now. Hmm yeah I will check that, it normally should send an email if there’s a reply..

Leave a Reply to Yannick Signer Cancel reply

Your email address will not be published. Required fields are marked *