Android button with custom area

Question

What is the best way to create buttons like on image below ??

enter image description here

i need to make 4 buttons and i dont know what kind of widget i should use for it — Gorets, Mar 05 '14 at 12:44
you can place your buttons in any layout like linear/relative based on the requirement — Naveen, Mar 05 '14 at 12:45
you can use imageButtons with the background `android:background="?android:attr/selectableItemBackground"`inside a relative layout. — Dyna, Mar 05 '14 at 12:48
@Dyna, yes, but my buttons are in the circle position, i cant add rectangle form button — Gorets, Mar 05 '14 at 12:57

score 1 · Answer 1 · edited May 23 '17 at 10:31

see https://code.google.com/p/radial-menu-widget/ or How To Create a Rotating Wheel Control? or this https://github.com/VadimDev/android-seekbar-like-ipod-clickwheel or just make it by yourself

protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub

    px = getMeasuredWidth()/2;     
    py = getMeasuredHeight();


    initial = 144;
    finalangle = 252;

    centerCircleradius  = 30;
    middleCircleRadius = 140;




        int init, fina;
        init = 160;    
        fina = 360;
        finalOVal.set(px-middleCircleRadius-4, py-middleCircleRadius-4, px+middleCircleRadius+4, py+middleCircleRadius+4);
        middleOval.set(px-middleCircleRadius, py-middleCircleRadius, px+middleCircleRadius, py+middleCircleRadius);
        while(init<fina)
        {
            circlePaint.setColor(colors[i]);
            canvas.drawArc(finalOVal,init,10,false, circlePaint);
            i++;
            if(i>=colors.length)
            {
                i=0;
            }
            init = init + 10;

        }



        canvas.drawArc(middleOval, 180, 180, false, pencil);

        midInitial = 180;


        i=0;

        //Creating the first Arc
        if(arcTouched[0])
        {

            canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        else
        {
            canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        canvas.drawBitmap(bitmap.get(0), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
        midInitial+=36;

        if(arcTouched[1])
        {

            canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        else
        {
            canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        canvas.drawBitmap(bitmap.get(1), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
        midInitial+=36;

        if(arcTouched[2])
        {

            canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        else
        {
            canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        canvas.drawBitmap(bitmap.get(2), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
        midInitial+=36;
        //Creatring the second Arc

        if(arcTouched[3])
        {

            canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        else
        {
            canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        canvas.drawBitmap(bitmap.get(3), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
        midInitial+=36;

        if(arcTouched[4])
        {

            canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        else
        {
            canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
            canvas.drawArc(middleOval, midInitial, 36, true, pencil);
        }
        canvas.drawBitmap(bitmap.get(4), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);           
        canvas.drawCircle(px, py-10, 40, pencil);
        canvas.drawCircle(px, py-10, 39, smallCircleCore);

        canvas.drawCircle(px, py-10, 35, bigArc);
        canvas.drawCircle(px, py-10, 20, smallCircleCore);

        canvas.drawCircle(px, py-10, 15, bigArc);
        canvas.drawLine(px-8, py-10, px+8, py-10, lineCore);

    canvas.save();
}

score 0 · Answer 2 · answered Mar 05 '14 at 12:44

0

I would suggest building a custom component and overriding onTouch(View, MotionEvent). In that method, do some basic math to check if the touch is inside a circular region, returning true when the method consumes the touch event.

Don't forget to allow other touch listeners to propagate by returning false when you don't wish to consume the touch event.

answered Mar 05 '14 at 12:44

Paul Lammertsma

37,593
16
136
187

thx, if it would be a simple circle i have not a problems at all, but i need forms like around red cirle on the image – Gorets Mar 05 '14 at 12:49
I believe I've misunderstood the question. – Paul Lammertsma Mar 05 '14 at 14:56

Android button with custom area

2 Answers2