Android: Creating shaped button

Question

How can I create a custom button like this?

It should be just clickable area not a real button.

Answer 1

I use a crapload of irregular shaped buttons on my app, and to change the "hot zone" or "clickable area" of the button, I just use the Bitmap.getPixel() method to check for alpha on the image used. If the method returns 0, then don't perform click event.

Example: (1) Create your button as usual, whichever way you would like. (2) Define a Bitmap and assign to it the same image drawable used for the button. (3) Get the X and Y coordinates of the touch or click action. (4) Pass the coordinates to the .getPixel(x,y) method.

Sample Code:

// ** Declare your Bitmap somewhere **
final Bitmap TheBitmap;       
TheBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.TheImage);

// ** My onTouch code **
public boolean onTouch(View v, MotionEvent event) {

        int eventPadTouch = event.getAction();

        switch (eventPadTouch) {

            case MotionEvent.ACTION_DOWN:
                if (iX>=0 & iY>=0 & iX<TheBitmap.getWidth() & iY<TheBitmap.getHeight()) { // ** Makes sure that X and Y are not less than 0, and no more than the height and width of the image.                
                    if (TheBitmap.getPixel(iX,iY)!=0) {
                        // * A non-alpha area was clicked, do something 
                    }               
                }
                return true;                
        }           
        return false;
}

The event.getX() and event.getY() simply give you the coordinates of where you touched the button.

** The above sample is to guide you in the correct direction. There are some checks to add to the code to assure no errors occur.

Answer 2

ceate using your own canvas or make a image using photoshop like this and then using Bitmap.createScaledBitmap scale it according to dimension of your button and hence you will get this button. using canvas you have to write more code just do this it will work fine

Answer 3

Simply just create an image like that and you can use either ImageView or Button w/o text, and implement an OnClickListener. It just works!

Answer 4

save that as a png and and put it in your drawables folder. Then in your xml use something like this

<Button
android:height="wrap_content"
android:width="wrap_content"
android:background="@drawable/your_png"
/>

I am not 100% positive that the corner cut out is going to work properly. That corner area that is gone may end up being clickable. If that is the case and if you don't want it to be then you'll have to slice your picture in half somewhere create two buttons that you can set next to each other to make up that shape and use the same click listener for both. From the users perspective it will still seem like one button.