Rounded images on Android

By: Kevin | January 28, 2013

I’ve decided it’s time for an update to change some things that have bugged me. Like many things, there is more than one way to do just about everything, but here is what I ended up with.

The first thing I’ve changed was was the annoying “Loading” pop up when you start the app. You still need to wait for the information to download from cyber space (aka the server) but the benefit of this is if the information is already in your device’s memory, then it doesn’t block you from getting on with your business and the info will update as you browse.

Secondly, If you close the app, then open it up more than 10 mins later, the app will automatically refresh the animals for you (but not block the screen). Nice little update, right?!

The next thing I wanted to do was customize the app a little, make it look pretty. My first smart phone was an Android and my 2nd (as of this post) is an iPhone 5. There are things I love about both but I must say the #1 thing I like about iOS is the attention to detail and beauty. I must admit I am very impressed with Android 4.0+ and the improvements since I had mine (2.3). Anyway, one thing I love about iOS is how all images, and views in general, never have 90 degree angels. Images are almost always nicely rounded.

I researched how to round image corners in Android and it came down to two options. One being via XML, which amounts to being basically an optical illusion. The XML approach turned out to be to hard and not because of implementation, but because of the amount of different devices. If the screen size was larger then the rounded images didn’t work and things didn’t look right.

The second option is what I ultimately went with. In this option, I actually manipulate the pixels of the image itself. I searched sites like stackoverflow.com and other blogs and I typically found methods like this: (PS. I did not write this)

  //THIS METHOD ROUNDS THE IMAGES CORNERS  
    public static Bitmap getRoundedCornerBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);
    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
    final RectF rectF = new RectF(rect);
    final float roundPx = 25; //tells you how round to make the image
    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    paint.setXfermode(newPorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    return output;
    }

This piece of code’s ONLY purpose in life is to round images.

Basically, I used this method on each and every image you see on the app. It sees how big the image is and then chops off the 90 degree corners. SUPER NEAT!

I hope you enjoy the all the updates. Feel free to leave comments.