Develop Reference

Creating button dynamically inside relative layout ontouch android

What I am doing:
I am trying to create a button dynamically onTouch
What is Happening:
I am able to create the button but the button is not created exactly
in the place I touch, instead its little bit in the bottom
right(might be adjustment of button in pixel).
How can i make sure i create the button exactly in the same place i
touch
#Override
public boolean onTouch(View v, MotionEvent event) {
//Get the x & y co-ordinates from the event
float x = event.getX();
float y = event.getY();
//Convert into Integer
int mX = (int) x;
int mY = (int) y;
//Perform Event on touch of canvas
performEventOnTouchOfCanvas(event, mX, mY);
return true;
}
private void performEventOnTouchOfCanvas(MotionEvent event,int mX, int mY) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
Point mPoint=new Point(mX,mY);
createButton(mPoint.x,mPoint.y);
break;
}
}
private void createButton(float x, float y) {
Button btn = new Button(ActDrawAreaTwo.this);
RelativeLayout.LayoutParams bp = new RelativeLayout.LayoutParams(40, 40);
bp.leftMargin = (int) x;
bp.topMargin = (int) y;
//Assign the Id to the button
btn.setLayoutParams(bp);
CommonFunctions.setBackgroundDrawable(btn, ActDrawAreaTwo.this, R.drawable.white_circle_dot);//Set Button Drawable
String mTag=String.valueOf((int)x )+","+ String.valueOf((int) y);
btn.setTag(mTag);
canvasLayoutId.addView(btn);
}
Note: canvasLayoutId is a relative layout

Android start drawing from views topmost left side. So when you pass coordinates, it will assume those are topmost left side of the button. If you want your button to appear in the middle of where you touch you need to change your coordinates with these:
x = x + button_width / 2
y = y + button_height / 2
In Android default padding is also same button's border, so you can find button's width and height with using this:
button_width = mButton.getPaddingRight() - mButton.getPaddingLeft();
button_height = mButton.getPaddingBottom() - mButton.getPaddingTop();
You can also use button.getWidth() and button.getHeight() assuming you are not using MATCH_PARENT or WRAP_CONTENT as your paramters.

GraphView how to Display Toast near the user click point

Hello i would like to ask, how can i Display Toast near the user click point Like on image below using GraphView library:
http://android-graphview.org/
Thanks for any advice
EDIT:
I tried it using
seriesSin = new GraphViewSeries("Sinus curve", new GraphViewSeries.GraphViewSeriesStyle(Color.rgb(200, 50, 00), 3), data);
// SET ON TOUCH
graphView.setOnTouchListener(new View.OnTouchListener(){
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction() == MotionEvent.ACTION_DOWN) {
int size = seriesSin.size();
float screenX = event.getX();
float screenY = event.getY();
float width_x = v.getWidth();
float viewX = screenX - v.getLeft();
float viewY = screenY - v.getTop();
float percent_x = (viewX/width_x);
int pos = (int) (size*percent_x);
System.out.println("X: " + viewX + " Y: " + viewY +" Percent = " +percent_x);
System.out.println("YVal = " +seriesSin.getY(pos));
return true;
}
return false;
}
});
But I cannot to get seriesSin.size and seriesSin.getY(pos)

You can't decide where to display the Toast. However, you could set up a custom view and show it using the coordinates (x and y) you get when detecting the touch. When you show the view, simply use those values to set up the layout params of the view, and voila.

Version 4.0.0 added an onTap() listener, that replicates your onTouch method above, it doesn't solve your Toast positioning issue, but could save you a few lines of code.

How can I move and scale an image like the Facebook profile image selection tool does?

I want crop image like Facebook profile image selection on Android, where the user can move and scale an image, causing it to be resized and/or cropped:
How might I accomplish this?

I had the same requirement. I solved it combining PhotoView and Cropper by replacing the ImageView with PhotoView in cropper lib.
I had to modify the CropWindow class in order to avoid touch events not being correctly handled:
public void setImageView(PhotoView pv){
mPhotoView = pv;
}
#Override
public boolean onTouchEvent(MotionEvent event) {
// If this View is not enabled, don't allow for touch interactions.
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
boolean dispatch = onActionDown(event.getX(), event.getY());
if(!dispatch)
mPhotoView.dispatchTouchEvent(event);
return dispatch;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
onActionUp();
return true;
case MotionEvent.ACTION_MOVE:
onActionMove(event.getX(), event.getY());
getParent().requestDisallowInterceptTouchEvent(true);
return true;
default:
return false;
}
}
In CropImageView class changed few things as well:
private void init(Context context) {
final LayoutInflater inflater = LayoutInflater.from(context);
final View v = inflater.inflate(R.layout.crop_image_view, this, true);
mImageView = (PhotoView) v.findViewById(R.id.ImageView_image2);
setImageResource(mImageResource);
mCropOverlayView = (CropOverlayView) v.findViewById(R.id.CropOverlayView);
mCropOverlayView.setInitialAttributeValues(mGuidelines, mFixAspectRatio, mAspectRatioX, mAspectRatioY);
mCropOverlayView.setImageView(mImageView);
}
You can notice that I have replaced ImageView with PhotoView inside R.layout.crop_image_view in Cropper library.
Cropper library supports fixed size and PhotoView allows you to move and scale the photo, giving you the best from both worlds. :)
Hope it helps.
Edit, for those that asked how to get the image that is only inside the crop area:
private Bitmap getCurrentDisplayedImage(){
Bitmap result = Bitmap.createBitmap(mImageView.getWidth(), mImageView.getHeight(), Bitmap.Config.RGB_565);
Canvas c = new Canvas(result);
mImageView.draw(c);
return result;
}
public Bitmap getCroppedImage() {
Bitmap mCurrentDisplayedBitmap = getCurrentDisplayedImage();
final Rect displayedImageRect = ImageViewUtil2.getBitmapRectCenterInside(mCurrentDisplayedBitmap, mImageView);
// Get the scale factor between the actual Bitmap dimensions and the
// displayed dimensions for width.
final float actualImageWidth =mCurrentDisplayedBitmap.getWidth();
final float displayedImageWidth = displayedImageRect.width();
final float scaleFactorWidth = actualImageWidth / displayedImageWidth;
// Get the scale factor between the actual Bitmap dimensions and the
// displayed dimensions for height.
final float actualImageHeight = mCurrentDisplayedBitmap.getHeight();
final float displayedImageHeight = displayedImageRect.height();
final float scaleFactorHeight = actualImageHeight / displayedImageHeight;
// Get crop window position relative to the displayed image.
final float cropWindowX = Edge.LEFT.getCoordinate() - displayedImageRect.left;
final float cropWindowY = Edge.TOP.getCoordinate() - displayedImageRect.top;
final float cropWindowWidth = Edge.getWidth();
final float cropWindowHeight = Edge.getHeight();
// Scale the crop window position to the actual size of the Bitmap.
final float actualCropX = cropWindowX * scaleFactorWidth;
final float actualCropY = cropWindowY * scaleFactorHeight;
final float actualCropWidth = cropWindowWidth * scaleFactorWidth;
final float actualCropHeight = cropWindowHeight * scaleFactorHeight;
// Crop the subset from the original Bitmap.
final Bitmap croppedBitmap = Bitmap.createBitmap(mCurrentDisplayedBitmap,
(int) actualCropX,
(int) actualCropY,
(int) actualCropWidth,
(int) actualCropHeight);
return croppedBitmap;
}
public RectF getActualCropRect() {
final Rect displayedImageRect = ImageViewUtil.getBitmapRectCenterInside(mBitmap, mImageView);
final float actualImageWidth = mBitmap.getWidth();
final float displayedImageWidth = displayedImageRect.width();
final float scaleFactorWidth = actualImageWidth / displayedImageWidth;
// Get the scale factor between the actual Bitmap dimensions and the displayed
// dimensions for height.
final float actualImageHeight = mBitmap.getHeight();
final float displayedImageHeight = displayedImageRect.height();
final float scaleFactorHeight = actualImageHeight / displayedImageHeight;
// Get crop window position relative to the displayed image.
final float displayedCropLeft = Edge.LEFT.getCoordinate() - displayedImageRect.left;
final float displayedCropTop = Edge.TOP.getCoordinate() - displayedImageRect.top;
final float displayedCropWidth = Edge.getWidth();
final float displayedCropHeight = Edge.getHeight();
// Scale the crop window position to the actual size of the Bitmap.
float actualCropLeft = displayedCropLeft * scaleFactorWidth;
float actualCropTop = displayedCropTop * scaleFactorHeight;
float actualCropRight = actualCropLeft + displayedCropWidth * scaleFactorWidth;
float actualCropBottom = actualCropTop + displayedCropHeight * scaleFactorHeight;
// Correct for floating point errors. Crop rect boundaries should not exceed the
// source Bitmap bounds.
actualCropLeft = Math.max(0f, actualCropLeft);
actualCropTop = Math.max(0f, actualCropTop);
actualCropRight = Math.min(mBitmap.getWidth(), actualCropRight);
actualCropBottom = Math.min(mBitmap.getHeight(), actualCropBottom);
final RectF actualCropRect = new RectF(actualCropLeft,
actualCropTop,
actualCropRight,
actualCropBottom);
return actualCropRect;
}
private boolean onActionDown(float x, float y) {
final float left = Edge.LEFT.getCoordinate();
final float top = Edge.TOP.getCoordinate();
final float right = Edge.RIGHT.getCoordinate();
final float bottom = Edge.BOTTOM.getCoordinate();
mPressedHandle = HandleUtil.getPressedHandle(x, y, left, top, right, bottom, mHandleRadius);
if (mPressedHandle == null)
return false;
mTouchOffset = HandleUtil2.getOffset(mPressedHandle, x, y, left, top, right, bottom);
invalidate();
return true;
}

I have some additions to #Nikola Despotoski answer.
Firstly, you don't have to change ImageView in R.layout.crop_image_view to PhotoView, because PhotoView logic can be simply attached in code as new PhotoViewAttacher(mImageView).
Also in default logic, a CropView's overlay size calculates only on its initialization according to imageView bitmap size. So it is not appropriate logic for us, becouse we change bitmap size by touches according to the requirement. So, we should change stored bitmap sizes in CropOverlayView and invalidate it each time when we change the main image.
And the last is that a range, where user can make cropping normally based on the image size, but if we made image bigger, it can go beyond the border of screen, so it will be possible to user to move a cropping view beyond the border, which is incorrect. So we also should handle this situation and provide limitation.
And the corresponding part of code for this three issues:
In CropImageView:
private void init(Context context) {
final LayoutInflater inflater = LayoutInflater.from(context);
final View v = inflater.inflate(R.layout.crop_image_view, this, true);
mImageView = (ImageView) v.findViewById(R.id.ImageView_image);
setImageResource(mImageResource);
mCropOverlayView = (CropOverlayView) v.findViewById(R.id.CropOverlayView);
mCropOverlayView.setInitialAttributeValues(mGuidelines, mFixAspectRatio, mAspectRatioX, mAspectRatioY);
mCropOverlayView.setOutlineTouchEventReceiver(mImageView);
final PhotoViewAttacher photoAttacher = new PhotoViewAttacher(mImageView);
photoAttacher.setOnMatrixChangeListener(new PhotoViewAttacher.OnMatrixChangedListener() {
#Override
public void onMatrixChanged(RectF imageRect) {
final Rect visibleRect = ImageViewUtil.getBitmapRectCenterInside(photoAttacher.getVisibleRectangleBitmap(), photoAttacher.getImageView());
imageRect.top = Math.max(imageRect.top, visibleRect.top);
imageRect.left = Math.max(imageRect.left, visibleRect.left);
imageRect.right = Math.min(imageRect.right, visibleRect.right);
imageRect.bottom = Math.min(imageRect.bottom, visibleRect.bottom);
Rect bitmapRect = new Rect();
imageRect.round(bitmapRect);
mCropOverlayView.changeBitmapRectInvalidate(bitmapRect);
}
});
}
In CropOverlayView:
#Override
public boolean onTouchEvent(MotionEvent event) {
// If this View is not enabled, don't allow for touch interactions.
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
return onActionDown(event.getX(), event.getY());
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
getParent().requestDisallowInterceptTouchEvent(false);
return onActionUp();
case MotionEvent.ACTION_MOVE:
boolean result = onActionMove(event.getX(), event.getY());
getParent().requestDisallowInterceptTouchEvent(true);
return result;
default:
return false;
}
}
public void changeBitmapRectInvalidate(Rect bitmapRect) {
mBitmapRect = bitmapRect;
invalidate();
}
private boolean onActionDown(float x, float y) {
final float left = Edge.LEFT.getCoordinate();
final float top = Edge.TOP.getCoordinate();
final float right = Edge.RIGHT.getCoordinate();
final float bottom = Edge.BOTTOM.getCoordinate();
mPressedHandle = HandleUtil.getPressedHandle(x, y, left, top, right, bottom, mHandleRadius);
if (mPressedHandle == null){
return false;
}
// Calculate the offset of the touch point from the precise location
// of the handle. Save these values in a member variable since we want
// to maintain this offset as we drag the handle.
mTouchOffset = HandleUtil.getOffset(mPressedHandle, x, y, left, top, right, bottom);
invalidate();
return true;
}
/**
* Handles a {#link MotionEvent#ACTION_UP} or
* {#link MotionEvent#ACTION_CANCEL} event.
* #return true if event vas handled, else - false
*/
private boolean onActionUp() {
if (mPressedHandle == null)
return false;
mPressedHandle = null;
invalidate();
return true;
}
/**
* Handles a {#link MotionEvent#ACTION_MOVE} event.
*
* #param x the x-coordinate of the move event
* #param y the y-coordinate of the move event
*/
private boolean onActionMove(float x, float y) {
if (mPressedHandle == null)
return false;
// Adjust the coordinates for the finger position's offset (i.e. the
// distance from the initial touch to the precise handle location).
// We want to maintain the initial touch's distance to the pressed
// handle so that the crop window size does not "jump".
x += mTouchOffset.first;
y += mTouchOffset.second;
// Calculate the new crop window size/position.
if (mFixAspectRatio) {
mPressedHandle.updateCropWindow(x, y, mTargetAspectRatio, mBitmapRect, mSnapRadius);
} else {
mPressedHandle.updateCropWindow(x, y, mBitmapRect, mSnapRadius);
}
invalidate();
return true;
}
For properly getting cropped image you should use the second part of #Nikola Despotoski answer

what you want can be exactly achieved by this lib simple-crop-image-lib

Thanks to all. Able to achieve this using the answers above, using Photoview and Cropper library. Added options to pick images from Camera or Gallery. Sharing the project on Github. Added an apk file in the project. Use real device for testing camera as emulator doesn't handle camera well. Here's the link to my project.
https://github.com/ozeetee/AndroidImageZoomCrop

How to get the coordinates of a button in android?

I want to get the coordinate positions of a button in my application.I used the following method.But its not working.Please help.
public Point currentPosition(View view)
{
int[] loc = new int[2];
view.getLocationOnScreen(loc);
int x = loc[0];
int y=loc[1];
Toast.makeText(getApplicationContext(),"coordinate is"+x+","+y,Toast.LENGTH_SHORT).show();
return new Point(loc[0], loc[1]);
}
Also i used this
btn_show.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View arg0)
{
int x = (int)btn_show.getX();
int y= (int)btn_show.getY();
Toast.makeText(getApplicationContext(), "button x is......"+x,Toast.LENGTH_SHORT ).show();
Toast.makeText(getApplicationContext(), "button y is......"+y,Toast.LENGTH_SHORT ).show();
}
});

The method you use expect integer values as references of R.string.whatever. Cast the getTop() return value to String should work.
Toast.makeText(MainActivity.this, String.valueOf(button1.getTop()), Toast.LENGTH_LONG).show();
To get the x/y of the button (since API 11):
Toast.makeText(MainActivity.this, (int)button1.getX() + ":" + (int)button1.getY(), Toast.LENGTH_LONG).show();
Doc:
The visual x position of this view, in pixels.
For API below 11 you are on the right way: getTop() is the equivalent of getY() but without a possible animation/translation. getLeft() is the quivalent of getX() with the same restriction.
or
You can use View.getTop(), View.getBottom(), View.getLeft(), and View.getRight(). These will return the location of the top, bottom, left and right edge of the View relative to the parent.
or Use
View.getLocationOnScreen()
and/or
getLocationInWindow().
If you are using onTouch lister means use this one.
code for your onTouch method:
float screenX = v.getLeft() + event.getX(); // X in Screen Coordinates
float screenY = v.getTop() + event.getY(); // Y in Screen Coordinates

You have to wait until the View is measured, otherwise it will always return 0. Use an OnGlobalLayoutListener:
view.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
public void onGlobalLayout() {
int x = view.getLeft();
int y = view.getTop();
}
});

There are a lot of ways to get the coordinator position.
If you want to center a floating button such as a tutorial with tourguide library.
I suggest create this method
public Rect getRectFromAView(View view){
Rect rect=new Rect(); // create a new rect
view.getGlobalRect(rect);// draw the rect
return rect;
}
If I want to get the coordinate position of x or y
Rect rect=getREctFromAView(view);
rect.exactCenterX(); //Return the position X
rect.exactCenterY(); //Return the position Y
This is the case when I try to get the center position of a view.

try :-
float x = button.getX();
float y = button.getY();

Android 2.2 Click and Drag Image Centered Under Touch

I am trying to drag and drop a crosshair onto a MapView. I have an ImageView button on the screen. When I touch it, the button disappears and a new ImageView appears. The new ImageView is supposed to sit centered under my finger until I release it somewhere, but for some reason the offset is incorrect. The crosshair appears down-right of where I am touching.
The image does move proportionately so I believe the problem is with the offset_x and offset_y which I define in the ACTION_DOWN section. Then, in ACTION_UP I need to createMarker(x,y) on the correct coordinates under my finger, but that is offset incorrectly as well.
I have tried various ways to make it centered, and some are better than others. I have so far been unable to make it work without using magic numbers.
As it is, I am using the click location and subtracting half the picture size. This makes sense to me. It's closer to correct if I subtract the whole picture size. I have tried various examples from the web, all of them suffer from inaccuracies with the View location.
Can you give me some advice?
crosshair = (ImageView)findViewById(R.id.crosshair);
frameLayout = (FrameLayout)findViewById(R.id.mapframe);
params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
crosshairImage = BitmapFactory.decodeResource(getResources(), R.drawable.crosshair);
crosshair.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_DOWN) {
dragStatus = START_DRAGGING;
// hide the button and grab a mobile crosshair
v.setVisibility(View.INVISIBLE);
image = new ImageView(getBaseContext());
image.setImageBitmap(crosshairImage);
// set the image offsets to center the crosshair under my touch
offset_x = (int)event.getRawX() - (int)(crosshairImage.getWidth()/2) ;
offset_y = (int)event.getRawY() - (int)(crosshairImage.getHeight()/2) ;
// set the image location on the screen using padding
image.setPadding(offset_x, offset_y, 0, 0);
// add it to the screen so it shows up
frameLayout.addView(image, params);
frameLayout.invalidate();
if(LOG_V) Log.v(TAG, "Pressed Crosshair");
return true;
} else if (event.getAction() == MotionEvent.ACTION_UP) {
if(dragStatus == START_DRAGGING) {
dragStatus = STOP_DRAGGING;
// place a marker on this spot
makeMarker((int)event.getX() + offset_x, (int)event.getY() + offset_y);
// make the button visible again
v.setVisibility(View.VISIBLE);
// remove the mobile crosshair
frameLayout.removeView(image);
if(LOG_V) Log.v(TAG, "Dropped Crosshair");
return true;
}
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
if (dragStatus == START_DRAGGING) {
// compute how far it has moved from 'start' offset
int x = (int)event.getX() + offset_x;
int y = (int)event.getY() + offset_y;
// check that it's in bounds
int w = getWindowManager().getDefaultDisplay().getWidth();
int h = getWindowManager().getDefaultDisplay().getHeight();
if(x > w)
x = w;
if(y > h)
y = h;
// set the padding to change the image loc
image.setPadding(x, y, 0 , 0);
// draw it
image.invalidate();
frameLayout.requestLayout();
if(LOG_V) Log.v(TAG, "(" + offset_x + ", " + offset_y + ")");
return true;
}
}
return false;
}
});

You have written this code within touch_Down.
offset_x = (int)event.getRawX() - (int)(crosshairImage.getWidth()/2) ;
offset_y = (int)event.getRawY() - (int)(crosshairImage.getHeight()/2) ;
// set the image location on the screen using padding
image.setPadding(offset_x, offset_y, 0, 0);
Try writing it outside the if conditions, just to make sure, it is applied to all the touch events.

You can use new api available in drag and drop
public boolean onTouch(View view, MotionEvent motionEvent) {
if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
view.startDrag(null, shadowBuilder, view, 0);
view.setVisibility(View.INVISIBLE);
return true;
} else {
return false;
}
}