How to create UI like TorchLight. eg. FlashLight Zaphrox

Question

I am working in camera flash application.

I am able to start and stop the camera LED. I am having problemregarding GUI designing of Torch light.

I want to create GUI like FlashLight Zaphrox..

What i guess is :

You can see that when torch button is clicked, the image changes. View only changes when torch button is clicked.

What i tried so far is :

        Display display = getWindowManager().getDefaultDisplay(); 
        width = display.getWidth();
        height = display.getHeight();

        imageView=(ImageView)findViewById(R.id.imageId);

        imageView.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View view, MotionEvent me) {

                Toast.makeText(ImageClicker.this,me.getRawX()+" "+me.getRawY(), Toast.LENGTH_SHORT).show();

                Log.i("View--Width & Height",view.getWidth()+" "+view.getHeight());
                Log.i("View -- Measured Width & Height",view.getMeasuredWidth()+" "+view.getMeasuredHeight());
                Log.i("Simple X Y Coordiantes",me.getX()+" "+me.getY());
                Log.i("Raw Coordinates",me.getRawX()+" "+me.getRawY());
                Log.i("Display Matrix",width+" "+height);
                return false;
            }
        });

& the results i got for two different sized emulators are :

For 320x480

09-07 16:32:28.439: INFO/View--Width & Height(2305): 320 43
09-07 16:32:28.439: INFO/View -- Measured Width & Height(2305): 320 43
09-07 16:32:28.449: INFO/Simple X Y Coordiantes(2305): 160.0 21.0
09-07 16:32:28.449: INFO/Raw Coordinates(2305): 160.0 264.0
09-07 16:32:28.449: INFO/Display Matrix(2305): 320 480

For 480x800

09-07 16:33:22.454: INFO/View--Width & Height(410): 480 64
09-07 16:33:22.464: INFO/View -- Measured Width & Height(410): 480 64
09-07 16:33:22.474: INFO/Simple X Y Coordiantes(410): 240.0 31.0
09-07 16:33:22.474: INFO/Raw Coordinates(410): 240.0 437.0
09-07 16:33:22.505: INFO/Display Matrix(410): 480 800

Edited

Tried according to incrediApp's answer : Code. But no result yet.

I dont know how to handle such click events.

I want to have the same UI as of Flashlight Zaphrox.

I want to create the same effect in my application. How can i do that ? Better if one can explain with example.

Answer 1

Create a canvas that catches touch event in particular area(called flag) like -

public class CustomView extends View{

    private int mFlagX = -1;
    private int mFlagY = -1;
    private Bitmap mBitmap = null;
    private Paint mPaint = null;
    private boolean isFlagHidden = false;
    private int mBoundX = -1;
    private int mBoundY = -1;

    //play with these values to listen the click more closer to flag
    public final int CLOSER = 50;
    public final int CLOSE = 100;

    public CustomView(Context context, AttributeSet aSet) 
    { 
        super(context, aSet); 
        //load our bitmap (flag image)
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.transperent);
        //create a paint brush
        mPaint = new Paint();
        mPaint.setColor(Color.TRANSPARENT);
    }

    @Override
    public void onDraw(Canvas canvas)
    {
        //initialize
        if ((mFlagX < 1) || (mFlagY < 1)) {

                   //adjust these values for listening area
                    mFlagX = (int) (getWidth() / 2) - mBitmap.getWidth()/ 2 ;
            mFlagY = (int)getHeight() / 2) - mBitmap.getHeight() / 2 ;
            mBoundX = (int)getWidth() - mBitmap.getWidth();
            mBoundY = (int)getHeight() - mBitmap.getHeight();
        }
        //draw background
        canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint);
        //draw the flag
        if (!isFlagHidden) {
            canvas.drawBitmap(mBitmap, mFlagX, mFlagY, null);
        }
    }

    public void hideTheFlag()
    {           
        isFlagHidden = true;
        //force redraw
        invalidate();   
    }

    public void giveUp(){
        isFlagHidden = false;
        //force redraw
        invalidate();
    }   

    public int takeAGuess(float x, float y)
    {   

        //this is our "pretty closer" area
        Rect prettyClose = new Rect(mFlagX - CLOSE, mFlagY - CLOSE, mFlagX+mBitmap.getWidth() + CLOSE, mFlagY+mBitmap.getHeight() + CLOSE);
        //normalize
        if (prettyClose.left < 0) prettyClose.left = 0;
        if (prettyClose.top < 0) prettyClose.top = 0;
        if (prettyClose.right > mBoundX) prettyClose.right = mBoundX;
        if (prettyClose.bottom > mBoundY) prettyClose.bottom = mBoundY;

        //this is our "really closer" area
        Rect reallyClose = new Rect(mFlagX - CLOSER, mFlagY - CLOSER, mFlagX+mBitmap.getWidth() + CLOSER, mFlagY+mBitmap.getHeight() + CLOSER);
        //normalize
        if (reallyClose.left < 0) reallyClose.left = 0;
        if (reallyClose.top < 0) reallyClose.top = 0;
        if (reallyClose.right > mBoundX) reallyClose.right = mBoundX;
        if (reallyClose.bottom > mBoundY) reallyClose.bottom = mBoundY;

        //this is the area that contains our flag
        Rect bullsEye = new Rect(mFlagX , mFlagY , mFlagX+mBitmap.getWidth(), mFlagY+mBitmap.getHeight());

        //check to see where on the board the user pressed
        if (bullsEye.contains((int) x, (int)y)) {
            //found it
            isFlagHidden = false;
            invalidate();
            return 1;
        } else if (reallyClose.contains((int) x, (int)y)) {
            //really closer
            return 2;
        } else if (prettyClose.contains((int)x, (int)y)) {
            //pretty closer
            return 3;
        } else {
            //far away
            return 4;
        }
    }
}

Now in your activity,override onTouch() for listening to the touch on flag -

 @Override
public boolean onTouch(View v, MotionEvent event)
{
    if (v.getId() == R.id.the_canvas)
    {
        if (event.getAction() == MotionEvent.ACTION_DOWN)
        {
            if (isFlagHidden) 
            {
                switch (mCustomView.takeAGuess(event.getX(), event.getY()))
                {
                   case 1:
                         mCustomView.giveUp();  

                          /*
                             YOUR CODE GOES HERE
                          */
                         Toast.makeText(getApplicationContext(), "bull's eye", Toast.LENGTH_SHORT).show();                  

                         break;
                    case 2:
                        Toast.makeText(getApplicationContext(), "really closer", Toast.LENGTH_SHORT).show();
                        break;
                    case 3:                 
                        Toast.makeText(getApplicationContext(), "pretty closer", Toast.LENGTH_SHORT).show();
                        break;
                    case 4:
                        Toast.makeText(getApplicationContext(), "far away", Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        }
        return true;
    }
    return false;
}   

Reference: Capture the flag: A tutorial on Android’s Canvas class and Touch event handler

Answer 2

Create a custom view, override onTouchEvent and check the coordinates.