Question

As far as I know for now (which is little), all the Views in Android have square or rectangular shapes. This is fine almost all the time until you want – what I actually want – to create non-square shapes that could handle events.

My goal is to have a circle divided in 3 sections of 120° each. Each section of the circle should behave like a button. The problem is that if we look at those 3rds of a circle and place them in a square box that strictly contains them, they are overlapping each other: not practical to know which the user meant to click…

I tried with a custom view in which I drew my sections but the events are triggering on all the surface of the view.

Any suggestion or direction is very welcome.

Thx, Paul

Answer 1

First thank you a lot for all your suggestions which helped me to reach the goal.

Since there is no way to trigger events on shapes, using onTouch() on the view which contains the shapes is the way to go.

Following, all you need to run it.

---

First, the custom view Zones.java:

package com.vector;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class Zones extends View {
    RectF rectf = new RectF(0, 0, 300, 300);
    Paint paint = new Paint();
    Canvas canvas = null;
    Integer zone = 0;

    // important: do not forget to add AttributeSet, it is necessary to have this
    // view called from an xml view file
    public Zones(Context context, AttributeSet attributeset) {
        super(context, attributeset);
        this.setBackgroundColor(0xFF207CA1);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        // set layout of the view
        layout(0, 0, 300, 300);

        // expose canvas at view level
        this.canvas = canvas;

        // check for zone 1 to 3
        if(zone >= 1 && zone <= 3)
        {
            drawTouchZones(zone);
        }
    }

    protected void drawTouchZones(Integer zone)
    {
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(2);
        paint.setColor(Color.WHITE);
        paint.setAlpha(75);

        Path path = new Path();

        if(zone == 1) {
            path.moveTo(150,150);
            path.lineTo(150,0);
            path.arcTo(rectf, 270, 120);
            path.close();
        } else if(zone == 2) {
            path.moveTo(150,150);
            path.arcTo(rectf, 30, 120);
            path.lineTo(150,150);
            path.close();
        } else if(zone == 3) {
            path.moveTo(150,0);
            path.lineTo(150,150);
            path.arcTo(rectf, 150, 120);
            path.close();
        }

        canvas.drawPath(path, paint);       
    }
}

Second, the main activity, Design.java:

package com.vector;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

public class Design extends Activity {
    /** Called when the activity is first created. */
    private Zones v;
    protected Integer zone = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        try {
            // get our custom view
            setContentView(R.layout.main);
            v = (Zones) findViewById(R.id.zone);

            // add onClick Listener
            v.setOnClickListener(new View.OnClickListener() {
                public void onClick(View view) {
                    Log.i("zone clicked", "" + zone);

                    // tell to our view which zone has been clicked
                    v.zone = zone;

                    // invalidate to call onDraw method of the custom view and draw the zone
                    v.invalidate();
                }
            });

            v.setOnTouchListener(new View.OnTouchListener() {

                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    zone = getZone(event);
                    return false;
                }
            });
        }
        catch(Exception e)
        {
            Log.e("e", e.getMessage());
        }
    }

    // detect clicked zone through MotionEvent
    public int getZone(MotionEvent e)
    {
        Float x = e.getX();
        Float y = e.getY();

        // 0:00 to 4:00
        if((x > 150 && x < 300 && y < 150) ||
           (x > 150 && x < 300 && y > 150 && (x - 150) / (y - 150) > 1.5))
        {
            return 1;
        }
        // 4:00 to 8:00
        else if((x >= 150 && x < 300 & y > 150 && (x - 150) / (y - 150) < 1.5) ||
                (x > 0 && x < 150 && y > 150 && (150 - x) / (y - 150) < 1.5))
        {

            return 2;
        }
        // 8:00 to 0:00
        else
        {
            return 3;
        }       
    }
}

… and the main xml view (which embeds our custom class view) main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <com.vector.Zones android:id="@+id/zone" android:layout_height="wrap_content" android:layout_width="wrap_content">
    </com.vector.Zones>
</LinearLayout>

Any comments appreciated!
Paul 🙂