Irregular shaped button in Android UI

Trust me on this.. For hours together I tried, kept Googling for this one thing.. RANDOM/IRREGULAR SHAPED BUTTONS IN ANDROID. OMG!!!!!!!!! Tiring job.. :(

Went through many articles, blog posts and forum threads.. Got some help but was a bit hefty for my small application. I just wanted a solution which is simple and at the same time gets my job done. The below statement sums up my requirement.

For my app, I wanted few irregular shaped buttons with the capability of handling clicks and responding to the same

When I say this, the first option which comes to everybody’s mind is to use ImageButtons or a custom drawable component using Shape tag.

Unfortunately, these things didn’t work for me :( :( Reasons being:

1) ImageButtons come with a fixed rectangular area which occupies some considerable real estate on the view which was really not what I expected. I wanted my button/component to appear naturally/freely on my view.. In its original shape.. Not like a caged animal ;) Lol…

2) No matter how calculated you are using Shapes, you won’t be satisfied at the final outcome.(Atleast, in my case, I wasn’t).

So, I had to find other alternatives. As I told you before, I found other techniques like Bitmap based approach or pixel mapping.. Thanks to all those ideas. I really learnt some new techniques and I am really waiting to test out those techniques myself at some point.

But coming to my problem, it still hadn’t found its mark. So after doing some more analysis, I found a simple solution very much like what I expected. :) :) Thank god!!! Mercy me!!!

Solution: I was planning to use some images/sections of them cropped in different shapes  as my components. Whatever drawables I had in my app were obtained using GIMP(Simple yet effective tool for handling Graphics). To spread them across my view freely, I had to use ImageView class of Android(android.widget.ImageView).

The below extract from my view layout shows the ImageView configurations.

<ImageView
 android:id="@+id/imageView1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:clickable="true"
 android:contentDescription="@string/hello_world"
 android:onClick="clickTest"
 android:src="@drawable/sample_img" />

As you can see from the above listing, the properties in red did the magic :) What this does is it just enables the image to act as a “hot zone”/”clickable area”(clickable) and provides us a chance to handle those clicks using a handler method(onClick). This handler method is implemented in the Activity source file which is the container for this UI component(In my case it’s ‘MainActivity.java’). The handler method takes a View(android.view.View) as a parameter. The below listing shows the handler method.

 public void clickTest(View v) {
    Toast.makeText(this, "Hello", Toast.LENGTH_SHORT).show();
 }

I am just creating a Toast object(android.widget.Toast) and displaying “Hello”. We can handle more complex actions in the handler like performing some business logic/invoking other activities/calling services etc.. PFB the snapshot of the finished layout with a tweety button in the middle :)

Untitled

Note: To get the sharpness and transparency, I have used GIMP and added an Alpha Channel of Transparency.

Finally, I got my Tweeeety free and flying in my app :) :) I wish this article was of some help to those whose are searching for ideas like me. Remember, I am not suggesting this as “The Best” technique. There are always better ways to do things. It all depends on how we approach it. :) :)

Have a great time ahead… All the best!!!

About these ads

About Naveen N Bharadwaj

Leonardo Da Vinci said: "Learning never exhausts the mind" So, learning never ends. No matter how small or how big, we are always learning.
This entry was posted in Technical and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

2 Responses to Irregular shaped button in Android UI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s