CODEWITHSUNDEEP
androidandroid-layout
user1882163
user1882163

Reputation: 11

custom shaped button for android activity

In my android application activity, I need to arrange 6 buttons as shown.

enter image description here

When I try to add each button as background to the buttons, there is a problem that the buttons are overlapping each other .I can place them in a format like the below screenshot. Also I don't which layout suits most for this type pattern. So please do suggest that also..

Upvotes: 1

Views: 425

Answers (1)

Richard Le Mesurier
Richard Le Mesurier

Reputation: 29762

I had a similar problem where I needed 10 buttons arranged similarly - with different colours as below: hex buttons

I ended up using a single image, rather than 8 individual buttons.

In order to figure out which colour (i.e. which "petal") was pressed, I set a touch listener on the image, with the following code:

public boolean onTouch(View v, MotionEvent event)
{
    // touch coords
    int y = (int) event.getY();
    int x = (int) event.getX();

    /* SELECT PETAL */
    if (MotionEvent.ACTION_DOWN == event.getAction())
    {
        // find petal
        MyApp.angle = PetalMaths.angleFromOrigin(midX, midY, x, y);
        selectedIndex = PetalMaths.petalFromAngle(MyApp.angle);
    }

    return true;
}

Where PetalMaths contains this code:

public static int angleFromOrigin(int oX, int oY, int x, int y)
{
    int dX = oX - x;
    int dY = oY - y;

    int degrees = (int) Math.toDegrees(Math.atan2(dY, dX));
    return (degrees + 270) % 360;
}

public static int petalFromAngle(int angle)
{
    return (int) angle / (360 / MyApp.MAX_PETALS);
}

And MyApp.MAX_PETALS is 

public static final int MAX_PETALS = 10;

This calculates which segment / petal / colour was pressed (looking at the field selectedIndex).

In your case, you replace the colours with your cricket picture and redefine MAX_PETALS to be 8 instead of 10.

Upvotes: 2

Related Questions