Make super-smooth rounded borders on Android Titanium

On Android a common problem when creating UI elements with rounded borders is, they become pixelated. This behaviour is native and not Titanium specific. There is an easy way to fix this!

note: iOS doesn’t have this problem

On the left an example what it looks like when you created a View with rounded corners.

Let’s break the myth of this being a Titanium problem today and come join me to learn different methodologies to how to quickly fix this issue.

Case 1: Set borderWidth on corresponding view.

This is the most common case devs use to solve this problem, but it does not give 100% results. Setting borderWidth removes the pixelated borders but ends up showing empty pixels with no color. See left-side image and notice the small white pixels inside the round-edges.

This case doesn’t fit in requirements when you need to set a background image instead of plain colour, again ended up showing same results.

Case 2: Put an overlay view with a different & little more borderWidth to overcome underlying view

This is second useful method which overcomes above case and you can happily use plain colour or any image in background. The idea is that you create another view with same width/height/borderRadius and a little more borderWidth than the underlying view, and then you put this view over your content which further are both put in a single view (which is parent view).

It also comes up with a drawback that it can be used only when you need to implement a single click event listener on views, i.e, if you have different UI elements like Share button, Like Button, Textfield, etc., then this case is simply useless. But if you need to process only single kind of task like closing/opening a window or anything else like a single task, then this could be one of your solutions. The reason is that overlay view will prevent the touches on underlying view and can only pass your clicks to parent view.

Case 3: Best method — Use Ti.UI.Android.CardView

Here comes the best approach which is super easy to implement and use. Just create a CardView with same width/height/borderRadius and you’re all done.

You can download & review the sample app & code here: https://github.com/prashantsaini1/rounded_views_android

That’s all folks! Enjoy coding!