How to set accessibility to circles drawn using Canvas?

Question

I have a custom view where in I'm drawing 6 circles using canvas in Android. Those circles act as Page indicators; which means that on the click of each circle (drawn using canvas), the different items are being displayed in a view pager. Now my requirement is to set individual focus to each circles and set different accessibility to each one. Please help. Thanks in advance. Thanks, Rakesh

Answer 1

I had to use ExploreByTouchHelper to achieve my requirement as explained by @alanv and @pskink in the comment.

https://youtu.be/ld7kZRpMGb8?t=1196

Thanks guys!

Answer 2

You should take position of the view with View.getX() and View.getY() to get x and y of the upper left corner and also assuming You know the radius (or able to obtain width/height of the view to determine radius). After that, obtain :

xTouch = MotionEvent.getX();
yTouch = MotionEvent.getY();

Then check the condition if:

     (xTouch - (x + radius)) * (xTouch - (x + radius)) + (yTouch - (y + radius)) * (yTouch - (y + radius)) <= radius * radius

The formula is just interpretation of schools geometry for determining if dot is inside circle area or not. Refer to circle equation for Cartesian coordinates for more details.

Values explanation is:

(x + radius) and (y + radius) is the center of circle.

(xTouch - (x + radius)) is distance from touch point to center by X.

(yTouch - (y + radius)) is distance from touch point to center by Y.

for the accessibility of the each circle and the accessibility text to be read it out if the TackBack is turned on then so the code for the complete scenario is:

package com.example.hello_world;

import java.util.Locale;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.graphics.Path.Direction;
import android.graphics.RectF;
import android.graphics.Region;
import android.os.Bundle;
import android.speech.tts.TextToSpeech;
import android.speech.tts.TextToSpeech.OnInitListener;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends Activity implements OnInitListener {
    String mText_To_Speach_text;
    private int MY_DATA_CHECK_CODE = 0;
    TextToSpeech myTTS;
    int initStatus = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));

        Intent checkTTSIntent = new Intent();
        checkTTSIntent.setAction(TextToSpeech.Engine.ACTION_CHECK_TTS_DATA);
        startActivityForResult(checkTTSIntent, MY_DATA_CHECK_CODE);
    }

    class MyView extends View {

        private Path mPath, mPath2, mPath3, mPath4, mPath5;
        private Paint mPaint;
        private RectF mOval, mOval2;
        Region mRegion1, mRegion2, mRegion3, mRegion4, mRegion5, mRegion6;

        public MyView(Context context) {
            super(context);
            mPath = new Path();
            mPath2 = new Path();
            mPath3 = new Path();
            mPath4 = new Path();
            mPath5 = new Path();
            mPaint = new Paint();
            mPaint.setColor(0xffff0000);
        }

        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            mPath.reset();
            mPath.addCircle((w / 2) - 120, h / 2, 30, Direction.CW);
            mPath.close();

            mPath2.reset();
            mPath2.addCircle((w / 2) - 60, h / 2, 30, Direction.CW);
            mPath2.close();

            mPath3.reset();
            mPath3.addCircle(w / 2, h / 2, 30, Direction.CW);
            mPath3.close();

            mPath4.reset();
            mPath4.addCircle((w / 2) + 60, h / 2, 30, Direction.CW);
            mPath4.close();

            mPath5.reset();
            mPath5.addCircle((w / 2) + 120, h / 2, 30, Direction.CW);
            mPath5.close();

        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(0xffffffff);

            mPaint.setStyle(Style.FILL);
            canvas.drawPath(mPath, mPaint);
            canvas.drawPath(mPath2, mPaint);
            canvas.drawPath(mPath3, mPaint);
            canvas.drawPath(mPath4, mPaint);
            canvas.drawPath(mPath5, mPaint);

            RectF rectF1 = new RectF();
            mPath.computeBounds(rectF1, true);
            mRegion1 = new Region();
            mRegion1.setPath(mPath, new Region((int) rectF1.left,
                    (int) rectF1.top, (int) rectF1.right, (int) rectF1.bottom));

            RectF rectF2 = new RectF();
            mPath2.computeBounds(rectF2, true);
            mRegion2 = new Region();
            mRegion2.setPath(mPath2, new Region((int) rectF2.left,
                    (int) rectF2.top, (int) rectF2.right, (int) rectF2.bottom));

            RectF rectF3 = new RectF();
            mPath3.computeBounds(rectF3, true);
            mRegion3 = new Region();
            mRegion3.setPath(mPath3, new Region((int) rectF3.left,
                    (int) rectF3.top, (int) rectF3.right, (int) rectF3.bottom));

            RectF rectF4 = new RectF();
            mPath4.computeBounds(rectF4, true);
            mRegion4 = new Region();
            mRegion4.setPath(mPath4, new Region((int) rectF4.left,
                    (int) rectF4.top, (int) rectF4.right, (int) rectF4.bottom));

            RectF rectF5 = new RectF();
            mPath5.computeBounds(rectF5, true);
            mRegion5 = new Region();
            mRegion5.setPath(mPath5, new Region((int) rectF5.left,
                    (int) rectF5.top, (int) rectF5.right, (int) rectF5.bottom));

        }

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            int x = (int) event.getX();
            int y = (int) event.getY();

            if (event.getAction() == MotionEvent.ACTION_DOWN) {
                if (mRegion1.contains(x, y)) {
                    mText_To_Speach_text = "Circle1";
                    speakWords(mText_To_Speach_text);
                } else if (mRegion2.contains(x, y)) {
                    mText_To_Speach_text = "Circle2";
                    speakWords(mText_To_Speach_text);
                } else if (mRegion3.contains(x, y)) {
                    mText_To_Speach_text = "Circle3";
                    speakWords(mText_To_Speach_text);
                } else if (mRegion4.contains(x, y)) {
                    mText_To_Speach_text = "Circle4";
                    speakWords(mText_To_Speach_text);
                } else if (mRegion5.contains(x, y)) {
                    mText_To_Speach_text = "Circle5";
                    speakWords(mText_To_Speach_text);
                }
            }
            return true;
        }
    }

    private void speakWords(String speech) {
        myTTS.speak(speech, TextToSpeech.QUEUE_FLUSH, null);
    }

    @Override
    public void onInit(int status) {
        if (initStatus == TextToSpeech.SUCCESS) {
            if (myTTS.isLanguageAvailable(Locale.US) == TextToSpeech.LANG_AVAILABLE)
                myTTS.setLanguage(Locale.US);
        } else if (initStatus == TextToSpeech.ERROR) {
            Toast.makeText(this, "Sorry! Text To Speech failed...",
                    Toast.LENGTH_LONG).show();
        }

    }

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == MY_DATA_CHECK_CODE) {
            if (resultCode == TextToSpeech.Engine.CHECK_VOICE_DATA_PASS) {
                myTTS = new TextToSpeech(this, this);
            } else {
                Intent installTTSIntent = new Intent();
                installTTSIntent
                        .setAction(TextToSpeech.Engine.ACTION_INSTALL_TTS_DATA);
                startActivity(installTTSIntent);
            }
        }
    }

}