Develop Reference

How to make a pin markers clickable on Imageview

I'm using Dave Morrissey's Subsampling Scale Image View. I'm using his Pinview example (as shown here: https://github.com/davemorrissey/subsampling-scale-image-view/blob/master/sample/src/com/davemorrissey/labs/subscaleview/sample/extension/views/PinView.java)
What I've done differently is that I've created an ArrayList of Bitmaps that are Pins. But I want to make each pin clickable to set off an on click function. I know Bitmaps can not be clicked on. I have multiple pins on a map image and would like for each pin to be associated with an object.
What would be the best approach to accomplish this?
Note: I did override the setOnClickListener method inside of the Pinview class, but what happens that all pins that were dropped become associated to the same object. And that clearing 1 pin would then clear all pins.

The model that stores the bitmap, pointF and point name:
public class CategoryPoint {
private String category;
private Bitmap image;
private PointF pointF;
public CategoryPoint(String category, Bitmap image, PointF pointF) {
this.category = category;
this.image = image;
this.pointF = pointF;
}
// getters/setters
}
View looks like this:
public class PinsView extends SubsamplingScaleImageView {
private OnPinClickListener onPinClickListener;
private final Paint paint = new Paint();
private List<CategoryPoint> categoryPoints;
public PinsView(Context context) {
this(context, null);
}
public PinsView(Context context, AttributeSet attr) {
super(context, attr);
categoryPoints = new ArrayList<>();
initTouchListener();
}
public void addCategories(List<CategoryPoint> categoryPoints) {
this.categoryPoints = categoryPoints;
invalidate();
}
public void removeCategories(List<CategoryPoint> categoryPoints) {
this.categoryPoints.removeAll(categoryPoints);
invalidate();
}
public void removeAllCategories() {
this.categoryPoints.clear();
invalidate();
}
public void setOnPinClickListener(OnPinClickListener listener) {
onPinClickListener = listener;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (!isReady()) {
return;
}
paint.setAntiAlias(true);
for (CategoryPoint categoryPoint: categoryPoints) {
Bitmap pinIcon = categoryPoint.getImage();
if (categoryPoint.getPointF() != null && categoryPoint.getImage() != null) {
PointF point = sourceToViewCoord(categoryPoint.getPointF());
float vX = point.x - (pinIcon.getWidth()/2);
float vY = point.y - pinIcon.getHeight();
canvas.drawBitmap(pinIcon, vX, vY, paint);
}
}
}
private void initTouchListener() {
GestureDetector gestureDetector = new GestureDetector(getContext(), new GestureDetector.SimpleOnGestureListener() {
#Override
public boolean onSingleTapConfirmed(MotionEvent e) {
if (isReady() && categoryPoints != null) {
PointF tappedCoordinate = new PointF(e.getX(), e.getY());
Bitmap clickArea = categoryPoints.get(0).getImage();
int clickAreaWidth = clickArea.getWidth();
int clickAreaHeight = clickArea.getHeight();
for (CategoryPoint categoryPoint : categoryPoints) {
PointF categoryCoordinate = sourceToViewCoord(categoryPoint.getPointF());
int categoryX = (int) (categoryCoordinate.x);
int categoryY = (int) (categoryCoordinate.y - clickAreaHeight / 2);
if (tappedCoordinate.x >= categoryX - clickAreaWidth / 2
&& tappedCoordinate.x <= categoryX + clickAreaWidth / 2
&& tappedCoordinate.y >= categoryY - clickAreaHeight / 2
&& tappedCoordinate.y <= categoryY + clickAreaHeight / 2) {
onPinClickListener.onPinClick(categoryPoint);
break;
}
}
}
return true;
}
});
setOnTouchListener((v, event) -> gestureDetector.onTouchEvent(event));
}
}
Fragment:
pinView.setOnImageEventListener(this);
pinView.setOnPinClickListener(this);
// implementation

Android: Scroller Animation?

I'm a newbie in Android development, and I would just like to know a little bit about the Scroller widget (android.widget.Scroller). How does it animate the view? Can the Animation object, if it exists, be accessed? If so, how? I've read the source code, but could find no clues, or maybe I'm too new?
I just wanted to do some operations after a Scroller finishes scrolling, something like
m_scroller.getAnimation().setAnimationListener(...);

The Scroller widget doesn't actually do much of the work at all for you. It doesn't fire any callbacks, it doesn't animate anything, it just responds to various method calls.
So what good is it? Well, it does all of the calculation for e.g. a fling for you, which is handy. So what you'd generally do is create a Runnable that repeatedly asks the Scroller, "What should my scroll position be now? Are we done flinging yet?" Then you repost that runnable on a Handler (usually on the View) until the fling is done.
Here's an example from a Fragment I'm working on right now:
private class Flinger implements Runnable {
private final Scroller scroller;
private int lastX = 0;
Flinger() {
scroller = new Scroller(getActivity());
}
void start(int initialVelocity) {
int initialX = scrollingView.getScrollX();
int maxX = Integer.MAX_VALUE; // or some appropriate max value in your code
scroller.fling(initialX, 0, initialVelocity, 0, 0, maxX, 0, 10);
Log.i(TAG, "starting fling at " + initialX + ", velocity is " + initialVelocity + "");
lastX = initialX;
getView().post(this);
}
public void run() {
if (scroller.isFinished()) {
Log.i(TAG, "scroller is finished, done with fling");
return;
}
boolean more = scroller.computeScrollOffset();
int x = scroller.getCurrX();
int diff = lastX - x;
if (diff != 0) {
scrollingView.scrollBy(diff, 0);
lastX = x;
}
if (more) {
getView().post(this);
}
}
boolean isFlinging() {
return !scroller.isFinished();
}
void forceFinished() {
if (!scroller.isFinished()) {
scroller.forceFinished(true);
}
}
}
The details of using Scroller.startScroll should be similar.

like Bill Phillips said, Scroller is just an Android SDK class helping with calculating scrolling positions. I have a full working example here:
public class SimpleScrollableView extends TextView {
private Scroller mScrollEventChecker;
private int mLastFlingY;
private float mLastY;
private float mDeltaY;
public SimpleScrollableView(Context context) {
this(context, null, 0);
}
public SimpleScrollableView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SimpleScrollableView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
if (mScrollEventChecker != null && !mScrollEventChecker.isFinished()) {
return super.onTouchEvent(event);
}
final int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
mLastY = event.getY();
return true;
case MotionEvent.ACTION_MOVE:
int movingDelta = (int) (event.getY() - mLastY);
mDeltaY += movingDelta;
offsetTopAndBottom(movingDelta);
invalidate();
return true;
case MotionEvent.ACTION_UP:
mScrollEventChecker = new Scroller(getContext());
mScrollEventChecker.startScroll(0, 0, 0, (int) -mDeltaY, 1000);
post(new Runnable() {
#Override
public void run() {
if (mScrollEventChecker.computeScrollOffset()) {
int curY = mScrollEventChecker.getCurrY();
int delta = curY - mLastFlingY;
offsetTopAndBottom(delta); // this is the method make this view move
invalidate();
mLastFlingY = curY;
post(this);
} else {
mLastFlingY = 0;
mDeltaY = 0;
}
}
});
return super.onTouchEvent(event);
}
return super.onTouchEvent(event);
}
}
The demo custom view above will scroll back to original position after the user release the view. When user release the view, then startScroll() method is invoked and we can know what the distance value should be for every single message post.
Full working example: Github repository

Great answer above. Scroller#startScroll(...) indeed works the same way.
For example, the source for a custom scrolling TextView at:
http://bear-polka.blogspot.com/2009/01/scrolltextview-scrolling-textview-for.html
Sets a Scroller on a TextView using TextView#setScroller(Scroller).
The source for the SDK's TextView at:
http://grepcode.com/file/repository.grepcode.com/java/ext/com.google.android/android/2.2_r1.1/android/widget/TextView.java#TextView.0mScroller
Shows that TextView#setScroller(Scroller) sets a class field which is used in situations like bringPointIntoView(int) where Scroller#scrollTo(int, int, int, int) is called.
bringPointIntoView() adjusts mScrollX and mScrollY (with some SDK fragmentation code), then calls invalidate(). The point of all this is that mScrollX and mScrollY are used in methods like onPreDraw(...) to affect the position of the drawn contents of the view.

We can extend the Scroller class then intercept corresponding animation start methods to mark that was started, after computeScrollOffset() return false which means animation finished's value, we inform by a Listener to caller :
public class ScrollerImpl extends Scroller {
...Constructor...
private boolean mIsStarted;
private OnFinishListener mOnFinishListener;
#Override
public boolean computeScrollOffset() {
boolean result = super.computeScrollOffset();
if (!result && mIsStarted) {
try { // Don't let any exception impact the scroll animation.
mOnFinishListener.onFinish();
} catch (Exception e) {}
mIsStarted = false;
}
return result;
}
#Override
public void startScroll(int startX, int startY, int dx, int dy) {
super.startScroll(startX, startY, dx, dy);
mIsStarted = true;
}
#Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, duration);
mIsStarted = true;
}
#Override
public void fling(int startX, int startY, int velocityX, int velocityY, int minX, int maxX, int minY, int maxY) {
super.fling(startX, startY, velocityX, velocityY, minX, maxX, minY, maxY);
mIsStarted = true;
}
public void setOnFinishListener(OnFinishListener onFinishListener) {
mOnFinishListener = onFinishListener;
}
public static interface OnFinishListener {
void onFinish();
}
}

Problem with View Invalidate() and Handler

i'm trying to fix this problem for more than 2 days now and have become quite desperate.
I want to write a 'Checkers-like' board game for android. The game engine itself is kinda complete but i have problems with updating the views.
I wrote a little example class to demonstrate my problem:
public class GameEngineView extends View {
private static final String TAG = GameEngineView.class.getSimpleName();
private int px;
private int py;
private int cx;
private int cy;
private boolean players_move;
private int clickx;
private int clicky;
Random rgen;
private RefreshHandler mRedrawHandler = new RefreshHandler();
class RefreshHandler extends Handler {
#Override
public void handleMessage(Message msg) {
GameEngineView.this.update();
GameEngineView.this.invalidate();
Log.d(TAG, "invalidate()");
}
public void sleep(long delayMillis) {
this.removeMessages(0);
sendMessageDelayed(obtainMessage(0), delayMillis);
}
};
public GameEngineView(Context context) {
super(context);
setFocusable(true);
players_move = true;
rgen = new Random();
}
public void update() {
updateGame();
Log.d(TAG, "update -> sleep handler");
mRedrawHandler.sleep(100);
}
public void updateGame() {
if(players_move) {
px = clickx;
py = clicky;
} else {
calcAIMove();
switchMove();
}
}
public void switchMove() {
players_move = !players_move;
}
public void calcAIMove() {
for(int i = 0; i < 20000; i++) {
cx = rgen.nextInt(getWidth());
cy = rgen.nextInt(getHeight());
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
Log.d(TAG, "event");
int eventaction = event.getAction();
if(eventaction == MotionEvent.ACTION_DOWN) {
Log.d(TAG, "action_down");
clickx = (int) event.getX();
clicky = (int) event.getY();
switchMove();
update();
}
return super.onTouchEvent(event);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
Paint green = new Paint();
green.setColor(Color.GREEN);
Paint red = new Paint();
red.setColor(Color.RED);
canvas.drawColor(Color.BLACK);
canvas.drawCircle(px, py, 25, green);
canvas.drawCircle(cx, cy, 25, red);
}
}
The function calcAIMove() just burns time to simulate a real evaluation of the position in a board game.
Now my Problem is: If the player clicks(makes a move) the green ball is first drawn when the ai move calculation has been complete. So both moves are drawn at the same time.
I wonder HOW to accomplish this:
-Player clicks
-green Ball is drawn
-AI calculates
-red ball is drawn
-and so on..
When searching the web i found a lot of game loop examples but they all need a Thread with constant polling.. it should be possible without this since the whole program runs sequentially .. right?
Hoping for advice.
thanks,
Dave

Here is how your game could work:
user makes a move
game view is updated
game switches to CPU's turn
sleep to simulate CPU player thinking (if move computation is trivial)
compute CPU's move
game view is updated
game switches to player's turn
There is no need for constant polling in a turn-based game like this. The only place you should have sleep is in step 4, so you can remove it from the other areas (no need for the old update() method which is just a delayed call to updateGame()).
One way to implement this is to simply delay the call to calcAIMove() and switchMove() by putting it into a Runnable and using Handler.postDelayed() or similar.
I don't see how you are disabling touch events when it is the CPU's turn, which can lead to a host of other problems if switchMove() and update() are still being called...

In your game loop you can use a instance of TimerTask to ensure certain delay between greenBall and some other drawing task. Game tutorials like Snake and LunarLander are great references on when and if you need to invalidate your View. Hope this helps a little!

ok so the answer provided by antonyt helped me solve this.. I provide the corrected code for other interested ones.
public class GameEngineView extends View {
private static final String TAG = GameEngineView.class.getSimpleName();
private int px;
private int py;
private int cx;
private int cy;
private boolean players_move;
private int clickx;
private int clicky;
Random rgen;
/**
* Create a simple handler that we can use to cause animation to happen. We
* set ourselves as a target and we can use the sleep()
* function to cause an update/invalidate to occur at a later date.
*/
private RefreshHandler mRedrawHandler = new RefreshHandler();
class RefreshHandler extends Handler {
#Override
public void handleMessage(Message msg) {
GameEngineView.this.update();
}
public void sleep(long delayMillis) {
this.removeMessages(0);
sendMessageDelayed(obtainMessage(0), delayMillis);
}
};
public GameEngineView(Context context) {
super(context);
setFocusable(true);
players_move = true;
rgen = new Random();
}
public void update() {
if(players_move) {
Log.d(TAG, "new player x");
px = clickx;
py = clicky;
GameEngineView.this.invalidate();
switchMove();
mRedrawHandler.sleep(100);
} else {
Log.d(TAG, "new ai x");
calcAIMove();
GameEngineView.this.invalidate();
switchMove();
}
Log.d(TAG, "update -> sleep handler");
}
public void switchMove() {
players_move = !players_move;
}
public void calcAIMove() {
for(int i = 0; i < 100000; i++) {
cx = rgen.nextInt(getWidth());
cy = rgen.nextInt(getHeight());
}
}
#Override
public boolean onTouchEvent(MotionEvent event) {
Log.d(TAG, "event");
int eventaction = event.getAction();
if(players_move && eventaction == MotionEvent.ACTION_DOWN) {
Log.d(TAG, "action_down");
clickx = (int) event.getX();
clicky = (int) event.getY();
update();
}
return super.onTouchEvent(event);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.BLACK);
Paint green = new Paint();
green.setColor(Color.GREEN);
Paint red = new Paint();
red.setColor(Color.RED);
canvas.drawCircle(px, py, 25, green);
canvas.drawCircle(cx, cy, 25, red);
}
}

Jumping ImageView when dragging in Android [duplicate]

I'm not a programmer, but I'm trying to learn android development, and having a blast.
Lately I've hit a fork in the road, and I don't know that any of the directions I can identify will meet all my needs. This is where you (the experts) can help ;)
Endpoint: I want to have the user touch a ball, and drag it to any location on the screen. I would also like to animate this ball when it gets drawn, and when it gets dropped.
I can accomplish the dragging part using a custom class (that doesn't extend anything... just a class like is found in this tutorial: basic drag & drop, however, I don't know how to apply the tween animation to it since it's not a view.
I have also developed an animated version of an ImageView with my image in it, however, I can't manage to apply the same drag & drop functionality without using AbsoluteLayout, which I know is a no-no.
So... how do I move an ImageView around a ??? layout using MotionEvents, or how do I animate (using tweens defined in XML) a non-view based custom class?
Please ask questions if this is not clear. I don't know all the terminology as well as most of you might.
There is also a copy of this question on the anddev.org forums, so I'll keep this post updated with any responses I get over there.

Why can't you extend View? Then, you have complete control over how it draws because you can override the OnDraw() method. Just make the ColorBall class extend View. Change its position when you move and then invalidate just that one view and have it draw itself instead of having the DrawView class draw it.
Edit - Here is an example class
public class Card extends View
{
private Bitmap mImage;
private final Paint mPaint = new Paint();
private final Point mSize = new Point();
private final Point mStartPosition = new Point();
public Card(Context context)
{
super(context);
}
public final Bitmap getImage() { return mCardImage; }
public final void setImage(Bitmap image)
{
mImage = image;
setSize(mCardImage.getWidth(), mCardImage.getHeight());
}
#Override
protected void onDraw(Canvas canvas)
{
Point position = getPosition();
canvas.drawBitmap(mCardImage, position.x, position.y, mPaint);
}
public final void setPosition(final Point position)
{
mRegion.set(position.x, position.y, position.x + mSize.x, position.y + mSize.y);
}
public final Point getPosition()
{
Rect bounds = mRegion.getBounds();
return new Point(bounds.left, bounds.top);
}
public final void setSize(int width, int height)
{
mSize.x = width;
mSize.y = height;
Rect bounds = mRegion.getBounds();
mRegion.set(bounds.left, bounds.top, bounds.left + width, bounds.top + height);
}
public final Point getSize() { return mSize; }
#Override
public boolean onTouchEvent(MotionEvent event)
{
// Is the event inside of this view?
if(!mRegion.contains((int)event.getX(), (int)event.getY()))
{
return super.onTouchEvent(event);
}
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
mStartPosition.x = (int)event.getX();
mStartPosition.y = (int)event.getY();
bringToFront();
onSelected();
return true;
}
else if(event.getAction() == MotionEvent.ACTION_MOVE)
{
int x = 0, y = 0;
if(mLock == DirectionLock.FREE || mLock == DirectionLock.HORIZONTAL_ONLY)
{
x = (int)event.getX() - mStartPosition.x;
}
if(mLock == DirectionLock.FREE || mLock == DirectionLock.VERTICAL_ONLY)
{
y = (int)event.getY() - mStartPosition.y;
}
mRegion.translate(x, y);
mStartPosition.x = (int)event.getX();
mStartPosition.y = (int)event.getY();
invalidate();
return true;
}
else
{
return super.onTouchEvent(event);
}
}
}

Android Drag/Animation of Views

I'm not a programmer, but I'm trying to learn android development, and having a blast.
Lately I've hit a fork in the road, and I don't know that any of the directions I can identify will meet all my needs. This is where you (the experts) can help ;)
Endpoint: I want to have the user touch a ball, and drag it to any location on the screen. I would also like to animate this ball when it gets drawn, and when it gets dropped.
I can accomplish the dragging part using a custom class (that doesn't extend anything... just a class like is found in this tutorial: basic drag & drop, however, I don't know how to apply the tween animation to it since it's not a view.
I have also developed an animated version of an ImageView with my image in it, however, I can't manage to apply the same drag & drop functionality without using AbsoluteLayout, which I know is a no-no.
So... how do I move an ImageView around a ??? layout using MotionEvents, or how do I animate (using tweens defined in XML) a non-view based custom class?
Please ask questions if this is not clear. I don't know all the terminology as well as most of you might.
There is also a copy of this question on the anddev.org forums, so I'll keep this post updated with any responses I get over there.

Why can't you extend View? Then, you have complete control over how it draws because you can override the OnDraw() method. Just make the ColorBall class extend View. Change its position when you move and then invalidate just that one view and have it draw itself instead of having the DrawView class draw it.
Edit - Here is an example class
public class Card extends View
{
private Bitmap mImage;
private final Paint mPaint = new Paint();
private final Point mSize = new Point();
private final Point mStartPosition = new Point();
public Card(Context context)
{
super(context);
}
public final Bitmap getImage() { return mCardImage; }
public final void setImage(Bitmap image)
{
mImage = image;
setSize(mCardImage.getWidth(), mCardImage.getHeight());
}
#Override
protected void onDraw(Canvas canvas)
{
Point position = getPosition();
canvas.drawBitmap(mCardImage, position.x, position.y, mPaint);
}
public final void setPosition(final Point position)
{
mRegion.set(position.x, position.y, position.x + mSize.x, position.y + mSize.y);
}
public final Point getPosition()
{
Rect bounds = mRegion.getBounds();
return new Point(bounds.left, bounds.top);
}
public final void setSize(int width, int height)
{
mSize.x = width;
mSize.y = height;
Rect bounds = mRegion.getBounds();
mRegion.set(bounds.left, bounds.top, bounds.left + width, bounds.top + height);
}
public final Point getSize() { return mSize; }
#Override
public boolean onTouchEvent(MotionEvent event)
{
// Is the event inside of this view?
if(!mRegion.contains((int)event.getX(), (int)event.getY()))
{
return super.onTouchEvent(event);
}
if(event.getAction() == MotionEvent.ACTION_DOWN)
{
mStartPosition.x = (int)event.getX();
mStartPosition.y = (int)event.getY();
bringToFront();
onSelected();
return true;
}
else if(event.getAction() == MotionEvent.ACTION_MOVE)
{
int x = 0, y = 0;
if(mLock == DirectionLock.FREE || mLock == DirectionLock.HORIZONTAL_ONLY)
{
x = (int)event.getX() - mStartPosition.x;
}
if(mLock == DirectionLock.FREE || mLock == DirectionLock.VERTICAL_ONLY)
{
y = (int)event.getY() - mStartPosition.y;
}
mRegion.translate(x, y);
mStartPosition.x = (int)event.getX();
mStartPosition.y = (int)event.getY();
invalidate();
return true;
}
else
{
return super.onTouchEvent(event);
}
}
}