Develop Reference

onTouchEvent() in a Game

I am developing a game application using android.
The Object(a box) slides up and down. And it has to hit the
objects(orange and pink balls) coming towards it from the right end of
the screen that would increase his score.
There will be black balls as well(shot from the right end of the
screen) which he should avoid hitting.
I am having problem with
onTouchEvent(MotionEvent me)
function while implementing the code.
I am following this tutorial in this series of tutorials.
My Questions:
To use the onTouchEvent(MotionEvent me) function do I need to import any class?
The tutorial has declared theonTouchEvent(MotionEvent me) outside the onCreate method. Which is okay. But the program has not called it anywhere. How does it work then?
After writing the code as mentioned in the tutorial, the program is not working as intended. The box appears when the activity starts. However, it disappears as soon as I click on the screen. What could be the problem?
ActivityMain.XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:id="#+id/scoreLabel"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text=" : 300"
android:paddingLeft="10dp"
android:gravity="center_vertical" />
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/startLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="130dp"/>
<ImageView
android:id="#+id/box"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/box"
android:layout_gravity="center_vertical" />
<ImageView
android:id="#+id/orange"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="#drawable/orange" />
<ImageView
android:id="#+id/black"
android:layout_width="24dp"
android:layout_height="24dp"
android:src="#drawable/black" />
<ImageView
android:id="#+id/pink"
android:layout_width="16dp"
android:layout_height="16dp"
android:src="#drawable/pink" />
</FrameLayout>
</RelativeLayout>
MainActivity.java
package com.example.catcheggs1;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
private TextView scoreLabel;
private TextView startLabel;
private ImageView box;
private ImageView orange;
private ImageView black;
private ImageView pink;
//Position
private int boxY;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
scoreLabel=(TextView)findViewById(R.id.scoreLabel);
startLabel=(TextView)findViewById(R.id.startLabel);
box=(ImageView)findViewById(R.id.box);
orange=(ImageView)findViewById(R.id.orange);
pink=(ImageView)findViewById(R.id.pink);
black=(ImageView)findViewById(R.id.black);
//Move To Out of Screen
orange.setX(-80);
orange.setY(-80);
pink.setX(-80);
pink.setY(-80);
black.setX(-80);
black.setY(-80);
//Temporary
startLabel.setVisibility(View.INVISIBLE);
boxY=500;
}
public boolean onTouchEvent(MotionEvent me)
{
if(me.getAction()==MotionEvent.ACTION_DOWN)
{
boxY -= 1 ;
}
box.setY(boxY);
return true;
}
}

1.) No, you do not need to import anything.
2.) For detailed information you can see the link.
It is an event method, it is automatically called, you do not need to call it.
https://developer.android.com/guide/topics/ui/ui-events#java
3.) you use boxY variable when touched and it is assigned an arbitrary number. Your problem is much likely to be caused by that. Rather than that, you should first get the current position than tweak it.
You can get current position with this method.
int[] location = new int[2];
imageView.getLocationOnScreen(location);
https://developer.android.com/reference/android/view/View.html#getLocationOnScreen(int[])
Bonus.) onTouchEvent is an activity method, so you should use view's own event listeners for specific tasks rather than onTouchEvent.
imageView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});

How do I draw 2D primtives to a SurfaceView that's a submember of my layout?

I'm just learning Android and Java. I'm familiar with graphics and programming in general in other languages.
I have a simple layout with some buttons, text views, and a SurfaceView all inside a RelativeLayout like this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quit"
android:id="#+id/buttonShutdown"
android:layout_below="#+id/textView2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:onClick="shutdown"/>
<SurfaceView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/surfaceView"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/buttonShutdown"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
Then I have a simple MainActivity.java which is like this:
public class MainActivity extends AppCompatActivity
{
SurfaceView surfaceView;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
surfaceView = (SurfaceView) findViewById(R.id.surfaceView);
holder = surfaceView.getHolder();
holder.getSurface();
}
protected void shutdown(View view)
{
System.exit(0);
}
}
Obviously there's a little more to my code because I have a couple buttons and a couple textviews, but the point is I have a layout with several widgets and the SurfaceView is just one of them.
I've seen a number of examples of drawing to a surface view but they all seem to take over the whole screen and stuff.
How can I simply draw 2D lines and stuff to my SurfaceView as is without obliterating the rest of my code or layout widgets?
I've been working for days on this and it has never taken me this much effort in any other language/framework to simply draw some 2D lines!
I would be most grateful for any working examples that work with my existing layout.
UPDATE:
To clarify, the problem I'm having trouble with is how to get a handle on the surfaceView in order to get a handler in order to get a canvas on it. Once I get a canvas interface then I can lock, draw, and unlock. But I cannot figure out how to get the Canvas attached to the surfaceView.
UPDATE:
I think I have a holder for the surface view now, but how do I Get the canvas for it?
Thank you very much,
Jesse

Okay after much hair pulling I got it working.
Now please a note to you grownups out there: this is intended to be a very very simple educational demonstration of the minimal code to draw lines on the screen in a Surface View. I also know that holder.getSurface(); takes some time to come alive and so drawing cannot happen right away. That's why it's in an onClick. I also know that SurfaceView rendering should be done from its own thread, and that it should be set up with 3 callbacks.
This is just a simple sample so please do not flame me for not writing the ideal fully fledged app! Thank you kindly.
My MainActivity.java:
package com.gladeworks.gwscope ;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity
{
TextView textView = null;
SurfaceView surfaceView;
SurfaceHolder holder;
Canvas canvas;
Paint paint;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.textView);
textView.setText("Press the Draw button!");
surfaceView = (SurfaceView) findViewById(R.id.surfaceView);
holder = surfaceView.getHolder();
holder.getSurface();
paint = new Paint();
final Button buttonDraw = (Button) findViewById(R.id.buttonDraw);
buttonDraw.setOnClickListener(new View.OnClickListener()
{
public void onClick(View view)
{
draw(view);
}
});
}
protected void draw(View view) //This gets called when the Draw button is clicked.
{
paint.setColor(Color.GREEN);
paint.setStrokeWidth(5);
canvas = holder.lockCanvas();
if (canvas == null) {
textView.setText("Canvas is still null");
} else {
canvas.drawRGB(32, 32, 255); //Clear the canvas to light blue
canvas.drawLine(0,0,1000,1000,paint);//Draw a line from top left corner down and right.
holder.unlockCanvasAndPost(canvas);
textView.setText("Done drawing!");
}
}
}
And here's my activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.gladeworks.gwscope.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Uninitialized"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignBottom="#+id/buttonExit"
android:layout_toLeftOf="#+id/buttonExit"
android:layout_toStartOf="#+id/buttonExit"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Quit"
android:id="#+id/buttonExit"
android:layout_alignTop="#+id/buttonDraw"
android:layout_toLeftOf="#+id/buttonDraw"
android:layout_toStartOf="#+id/buttonDraw"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Draw"
android:id="#+id/buttonDraw"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"/>
<SurfaceView
android:id="#+id/surfaceView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/buttonExit"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
</RelativeLayout>
Things to improve:
The line drawing code should really be in its own thread so it doesn't block the user interface thread.
The labels for buttons and stuff should really be defined int he resources file for easier translation efforts.
The canvas and SurfaceView shuold be set up with callbacks for dealing with Creation, Change, and Destruction.
But this should provide a clear path to beginners for understanding the needed sequence of steps to draw line graphics to a SurfaceView.

Android: Need help in accurate position of shape drawing

In my Android project, I encountered some difficulties in the drawing code, so I made up a MCVE below to demonstrate the problem I have.
By running this example, and perform a touch in the screen, you can see two circles coming up.
You can see that the red one is positioned accurately and consistently around the point of touch.
For the green one, you can see that its position is somehow random on repeat touching of the screen.
The red circle is created using an ImageView with the source as ball.xml. For the green one, it is done by Canvas.drawCircle().
So:
How do I correct the code to make the red circle and green circle
appear at exactly the same spot on a touch, regardless of the resolution and dpi of the screen?
Also, btw, the 500X1000 dimension (Bitmap.createBitmap(500, 1000))is just set arbitrarily, it should be according to the screen size of the device.
MainActivity
package com.prime.testdraw;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.drawable.BitmapDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
public class MainActivity extends AppCompatActivity {
ImageView ivPhoto;
FrameLayout fl;
ImageView ivBall;
private Canvas myCV;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ivPhoto = ((ImageView) findViewById(R.id.ivPhoto));
fl = ((FrameLayout) findViewById(R.id.fl));
ivBall = ((ImageView) findViewById(R.id.ivBall));
myCV = initDraw(ivPhoto);
ivPhoto.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent motionEvent) {
myCV = initDraw(ivPhoto);
ivBall.setX(motionEvent.getX() - ivBall.getWidth()/2);
ivBall.setY(motionEvent.getY() - ivBall.getHeight()/2);
Paint p = new Paint();
p.setStrokeWidth(3);
p.setColor(Color.GREEN);
p.setTextSize(100);
int radius = 40;
p.setStyle(Paint.Style.STROKE);
myCV.drawCircle(motionEvent.getX() - radius, motionEvent.getY() - radius, radius, p);
ivPhoto.invalidate();
return false;
}
});
}
private Canvas initDraw(ImageView imageView) {
Bitmap bmp = Bitmap.createBitmap(500, 1000, Bitmap.Config.RGB_565);
Canvas cv = new Canvas(bmp);
imageView.setImageDrawable(new BitmapDrawable(getResources(), bmp));
imageView.invalidate();
return cv;
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fl">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ivPhoto"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageView
android:layout_width="52dp"
android:layout_height="52dp"
android:id="#+id/ivBall"
android:layout_gravity="left|top"
android:src="#drawable/ball" />
</FrameLayout>
ball.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
<stroke
android:width="4dp"
android:color="#FF0000" />
<gradient android:startColor="#FFFF0000" android:endColor="#80FF0000"
android:angle="270"/>
</shape>

Canvas.drawCircle works with these parameters :
cx float: The x-coordinate of the center of the cirle to be drawn
cy float: The y-coordinate of the center of the cirle to be drawn
radius float: The radius of the cirle to be drawn
paint Paint: The paint used to draw the circle
Therefore instead of substracting the radius when calling it, simply call drawCircle directly :
myCV.drawCircle(motionEvent.getX(), motionEvent.getY(), radius, p);
Source : Android Canvas doc

getMeasuredHeight() and width returning 0 after measure()

I'm really confused with this whole measuring thing that android does for layouts. Basically, I want to get the actual computed height and width of a view when it has been laid out BEFORE it gets laid out. I need to get the computed height and width because I have a hidden LinearLayout that I want to animate when opening using viewpropertyanimator. I need to supply the target width (which is the computed width) to the animator before it animates it. The width of this layout is dynamic because it relies on its android:weight parameter for the width, so I can't give a static value.
Here's my activity class:
package com.example.testproject;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
public class TestActivity extends Activity
{
private LinearLayout gmailListContainer, yahooMailListContainer, windowsLiveListContainer;
private LinearLayout emailMessageContainer;
private Display display;
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_test);
gmailListContainer = (LinearLayout) this.findViewById(R.id.email_activity_gmail_layout);
yahooMailListContainer = (LinearLayout) this.findViewById(R.id.email_activity_yahoo_mail_layout);
windowsLiveListContainer = (LinearLayout) this.findViewById(R.id.email_activity_windows_live_layout);
emailMessageContainer = (LinearLayout) this.findViewById(R.id.email_activity_email_content_layout);
gmailListContainer.setBackgroundColor(Color.CYAN);
yahooMailListContainer.setBackgroundColor(Color.MAGENTA);
windowsLiveListContainer.setBackgroundColor(Color.GREEN);
emailMessageContainer.setBackgroundColor(Color.RED);
display = getWindowManager().getDefaultDisplay();
setMeasuredDimensions();
}
private void setMeasuredDimensions()
{
View v = this.findViewById(R.id.email_activity_layout);
v.measure(display.getWidth(), display.getHeight());
Log.v("EmailActivity", v.getMeasuredHeight() + ", " +v.getMeasuredWidth());
}
private void setWeight(LinearLayout container, float weight)
{
LinearLayout.LayoutParams params = (LayoutParams) container.getLayoutParams();
params.weight = weight;
container.setLayoutParams(params);
container.setVisibility(View.VISIBLE);
}
}
Here's the relevant layout resource:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/email_activity_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:baselineAligned="false">
<LinearLayout
android:id="#+id/email_activity_gmail_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<LinearLayout
android:id="#+id/email_activity_yahoo_mail_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<LinearLayout
android:id="#+id/email_activity_windows_live_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
/>
<LinearLayout
android:id="#+id/email_activity_email_content_layout"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="0"
/>

Add the below method to your Activity and call your method from it.
#Override
public void onWindowFocusChanged(boolean hasFocus) {
setMeasuredDimensions();
super.onWindowFocusChanged(hasFocus);
}
In onCreate() you can't assure that your view is drawn. It might take some time. But this above method gets called only when the view is drawn completely. So YOu should be able to get the width and height exactly here.

How to draw on an ImageView

Why will this code not draw a circle where the user touches in an imageview and output the coordinates to a textview?
package com.smallbore.smallbore;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.os.Bundle;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.TextView;
public class targetenter extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.targetenter);
}
public class ImageView1 extends ImageView {
public int x;
public int y;
public ImageView1(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
public boolean dispatchtouchevent(MotionEvent event){
x = (int) event.getX();
y = (int) event.getY();
TextView t1 = (TextView)findViewById(R.id.textView2);
t1.setText("x="+x);
TextView t2 = (TextView)findViewById(R.id.textView3);
t2.setText("y="+y);
invalidate();
return true;
}
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawCircle(x,y,10, null );
}
}
}
and the xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:id="#+id/linearLayout1" android:layout_height="fill_parent" android:layout_width="fill_parent">
<TextView android:layout_height="wrap_content" android:text="#string/cposition" android:id="#+id/textView1" android:layout_width="wrap_content"></TextView>
<com.smallbore.smallbore.targetenter.Imageview1 android:id="#+id/imageView1" android:layout_width="300dip" android:layout_height="300dip" android:background="#drawable/target" android:layout_gravity="center_horizontal"></com.smallbore.smallbore.targetenter.Imageview1>
<TextView android:text="TextView" android:id="#+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
<TextView android:text="TextView" android:id="#+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
</LinearLayout>

Change onTouchEvent to dispatchTouchEvent. Also, make sure that you are using imageView1 in your XML, and not just ImageView.

You are not calling invalidate() in your onTouchEvent. When ever you change something on a canvas it must be redrawn. fyi, if you are not on UI thread you must call postinvalidate(). refer to this api demo to learn more about dealing with drawing on canvas. http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/graphics/FingerPaint.html

I'm not sure that Cristian's suggestion of using dispatchTouchEvent() is a good one, that method makes sense in ViewGroup descendants to dispatch touch events to its children. Yet his recommendation of using the custom view in xml layout declaration is important. You do that like:
<package.that.contains.targetenter.imageView1 android:id ....
that is, you need to specify the full package to your custom ImageView class (btw, in Java there's the convention of using capital letter for class names: imageView1 -> ImageView1). You simply have to use it were you were using ImageView, and I think you will have to make it public or better declare it in another file.
To have your onDraw() method called, you'll need to call invalidate() as Veeresh suggests, so that your imageView1 will redraw. But you have to call its super, or you will only get the circles drawn:
#Override
public void onDraw(Canvas canvas){
super.onDraw(canvas);
canvas.drawCircle(x,y,10, null );
}
If you're still having problems it might be useful to see your targetenter.xml layout.