I'm building an Android app where I have to edit a picture which has been picked from the phone gallery and cropped.
So in my layout, I have an ImageView where I am placing the cropped image
xml file
<ImageView
android:id="#+id/ivEditPhoto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_weight=".90"
android:src="#drawable/app_icon_big" />
Placing the cropped image in ImaveView
bitmapPic = (Bitmap) getIntent().getParcelableExtra(
"CroppedBitmapImage");
picView = (ImageView) findViewById(R.id.ivEditPhoto);
picView.setImageBitmap(bitmapPic);
The image is getting placed correctly. But the problem is when I try to edit it.
I have an edit button and on click of that I do the following which includes registering of On Touch Listener.
DisplayMetrics displaymetrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
Bitmap alteredPastedBitmap = Bitmap.createBitmap(bitmapPic.getWidth(),
bitmapPic.getHeight(), bitmapPic.getConfig());
pasteCanvas = new Canvas(alteredPastedBitmap);
paint = new Paint();
paint.setColor(Color.GREEN);
paint.setStrokeWidth(5);
matrix = new Matrix();
pasteCanvas.drawBitmap(bitmapPic, matrix, paint);
picView.setOnTouchListener(this);
Then the following
public boolean onTouch(View v, MotionEvent event) {
Toast.makeText(this, v.getId(), Toast.LENGTH_SHORT).show();
if (v.getId() == R.id.ivEditPhoto) {
Toast.makeText(this, "onTouch", Toast.LENGTH_SHORT).show();
int action = event.getAction();
x = event.getX();
y = event.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
sX = event.getX();
sY = event.getY();
break;
case MotionEvent.ACTION_UP:
if (skewedBitmap == null) {
int resID = 0;
if (imageId == 0)
resID = R.drawable.green_arrow;
else
resID = imageId;
bitmapToPaste = BitmapFactory.decodeResource(
getResources(), resID);
} else {
bitmapToPaste = skewedBitmap;
skewedBitmap = null;
}
pasteCanvas.drawBitmap(bitmapToPaste, sX- (bitmapToPaste.getWidth() / 2),sY- (bitmapToPaste.getHeight() / 2), null);
picView.invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
}
return true;
}
The issue is:
the bitmapPic.getWidth() and bitmapPic.getHeight() is 160*160 and the onTouch event.getX(); and event.getY(); is beyond the co-ordinates (For example: 150.33 & 500.89) although the image seems to be occupying the whole screen and the touch is on the image. So onTouch doesn't place the bitmap and returns a false.
Could any of you please guide me on this?
I had the same issue in one of my applications. I need to see more of your code but this could be related to the onInterceptTouch() method you need to implement.
If that is not the case, then maybe you can look into this code for help on how to move, modify and rotate bitmaps:
http://adblogcat.com/custom-view-to-draw-rotate-erase-and-convert-images-to-black-and-white/
I wrote this tutorial btw and this is my website and I think is easier for you to follow that tutorial than just paste it here.
Related
I've tried many different solutions and none worked.
So, how do I drag and drop a Bitmap?
Here is a possible solution that also doesn't work, but I would love to know why:
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.our_image);
And then activate the OnTouchListener:
#Override
public boolean onTouch (View v, MotionEvent event)
{
Imageview iv = new ImageView(this);
iv.setImageBitmap(bm);
if (v == iv)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
eventX = event.getXPrecision();
eventY = event.getYPrecision();
break;
case MotionEvent.ACTION_MOVE:
distX = event.getX() - eventX;
distY = event.getY() - eventY;
iv.setX(distX + eventX);
iv.setY(distY + eventY);
eventX = event.getXPrecision();
eventY = event.getYPrecision();
}
return true;
}
return false;
}
and when I move the ImageView, I update the Bitmap's location to it's coordinates
by creating a canvas and redrawing the Bitmap:
Paint p = new Paint()
Canvas canvas = new Canvas(bm);
canvas.drawBitmap(bm, iv.getLeft(), iv.getTop(), p);
Do I need to put invalidate() here? And if so, why?
Any kind of help would be greatly appreciated! ^_^
I want to move any normal view in my app along with swipe.
I am able to detect swipe using OnTouchListener in onTouch method. But am not able to move the view along with the swipe.
I want to move the view along with the swipe.
I think so that something i need to implement inside onTouch method to move the view or item along with swipe, but what i don't know.
Any help will be highly appreciated.
You just need to use view.setTranslationX(diffX) for X coordinate and view.setTranslationY(diffY) for Y coordinate while its MotionEvent.ACTION_MOVE under onTouch() method.
view.setOnTouchListener(new View.OnTouchListener() {
float downX, downY, nowX, nowY, diffX, diffY;
#Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getRawX();
downY = event.getRawY();
break;
case MotionEvent.ACTION_MOVE:
nowX = event.getRawX();
nowY = event.getRawY();
diffX = nowX - downX;
diffY = nowY - downY;
v.setTranslationX(diffX);
v.setTranslationY(diffY);
break;
case MotionEvent.ACTION_UP:
break;
}
return true;
}
});
How is Skype managing to show video call drag able pop up on home screen after minimizing Skype app during call. You can select and start other application from home screen and Skype popup is still on screen even parallel with other application. If it is App widget then how do I add or remove on home screen and in top of other application UI.
Use WindowManager to add a Float view:
private void createFloatView()
{
Button btn_floatView = new Button();
btn_floatView = new Button(getApplicationContext());
btn_floatView.setText("FloatView");
wm = (WindowManager) getApplicationContext().getSystemService(
Context.WINDOW_SERVICE);
params = new WindowManager.LayoutParams();
params.type = WindowManager.LayoutParams.TYPE_SYSTEM_ALERT;
params.format = PixelFormat.RGBA_8888;
params.flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL
| WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE;
params.width = 100;
params.height = 100;
btn_floatView.setOnTouchListener(new OnTouchListener()
{
int lastX, lastY;
int paramX, paramY;
public boolean onTouch(View v, MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
lastX = (int) event.getRawX();
lastY = (int) event.getRawY();
paramX = params.x;
paramY = params.y;
break;
case MotionEvent.ACTION_MOVE:
int dx = (int) event.getRawX() - lastX;
int dy = (int) event.getRawY() - lastY;
params.x = paramX + dx;
params.y = paramY + dy;
wm.updateViewLayout(btn_floatView, params);
break;
}
return true;
}
});
wm.addView(btn_floatView, params);
isAdded = true;
}
I want to create an application which will simply load the selected the image to a canvas and the user will have freedon to overlay text on the image anywhere on the image. i.e is after he have overlayed text on the image he should be able to move the text, edit the text.
How can this be achieved. Is it that i have to load a frame layout and then on that i have to dynamically place text view to get the text overlay or anything else can be done.
I want to achieve something like the picture given below
When a "Add text" is clicked from action bar I want to add the text to the Picture loaded by user.
Searched a lot but could not get any answers.
I just want how to get this text on the image and move it anywhere on the picture.
Also the final image that will be saved on the device will be just with the text overlayed on the image. the box appearing in picture should not be present in the image.
All the experts out their please guide me.
You can add ImageView and EditText to FrameLayout, then EditText will overlay your image. To drag view you should set OnTouchListner:
mEditText.setOnTouchListener(new OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
final int action = event.getAction();
mLastTouchX = event.getRawX();
mLastTouchY = event.getRawY();
switch (action) {
case MotionEvent.ACTION_DOWN: {
RelativeLayout.LayoutParams lParams = (RelativeLayout.LayoutParams) getLayoutParams();
mDeltaX = mLastTouchX - lParams.leftMargin;
mDeltaY = mLastTouchY - lParams.topMargin;
break;
}
case MotionEvent.ACTION_MOVE: {
mLastTouchX = event.getRawX();
mLastTouchY = event.getRawY();
final RelativeLayout.LayoutParams params = (LayoutParams) getLayoutParams();
params.leftMargin = (int) (mLastTouchX - mDeltaX);
params.topMargin = (int) (mLastTouchY - mDeltaY);
setLayoutParams(params);
break;
}
}
invalidate();
return true;
}
});
To create final image you can draw on canvas your
original image and text.
UPDATED:
You can add view with addView:
final EditText et = new EditText(getContext());
et.setLayoutParams(new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
mFramLayout.addView(et);
Also it's possible to adjust position with margins.
I would like to ask on how to implement or add a marker on an imageView.
I rendered an SVG using svglib and used a customImageView so that I can zoom and pan around the image.
here is my code on how i used my customImageView
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
SVG svg;
switch (mNum) {
case 1:
svg = SVGParser.getSVGFromResource(getResources(), R.raw.t1);
break;
case 2:
svg = SVGParser.getSVGFromResource(getResources(), R.raw.t2);
break;
case 3:
svg = SVGParser.getSVGFromResource(getResources(), R.raw.t3);
break;
case 4:
svg = SVGParser.getSVGFromResource(getResources(), R.raw.t4);
break;
default:
svg = SVGParser.getSVGFromResource(getResources(),
R.raw.android);
}
View v = inflater.inflate(R.layout.hello_world, container, false);
View tv = v.findViewById(R.id.text);
imageView = (GestureImageView) v.findViewById(R.id.imageView1);
imageView.setStrict(false);
imageView.setStartingScale(lastScale);
// if(lastXPosition!=0 && lastYPosition!=0)
imageView.setStartingPosition(lastXPosition, lastYPosition);
// Log.i("tag",
// "lastXPosition" + lastXPosition);
// Log.i("tag",
// "lastYPosition" + lastYPosition);
// Log.i("tag",
// "lastScale" + lastScale);
// imageView.setRotation(45);
// imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
if (Build.VERSION.SDK_INT > 15)
imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
imageView.setImageDrawable(svg.createPictureDrawable());
((TextView) tv).setText("Floor number: " + mNum);
imageView.setBackgroundColor(Color.WHITE);
// tv.setBackgroundDrawable(getResources().getDrawable(
// android.R.drawable.gallery_thumb));
// imageView.setScaleType(ScaleType.CENTER);
// ((GestureImageView)imageView).setScale(x);
return v;
}
Now I would like to add a pin just like the image below...
(source: modality.com)
But my problem is that when I pan around the marker I added is not bonded with the image SVG thus left behind at a certain position when panning...
Here's my code...
NOTE: Not yet final... I'm still looking for a way to get this working and I am using a zoomed in imageview as a map...
#Override
protected void onDraw(Canvas canvas) {
if (layout) {
if (drawable != null && !isRecycled()) {
canvas.save();
float adjustedScale = scale * scaleAdjust;
canvas.translate(x, y);
if (rotation != 0.0f) {
canvas.rotate(rotation);
}
if (adjustedScale != 1.0f) {
canvas.scale(adjustedScale, adjustedScale);
}
drawable.draw(canvas);
canvas.restore();
}
if (drawLock.availablePermits() <= 0) {
drawLock.release();
}
}
// ---add the marker---
Bitmap marker = BitmapFactory.decodeResource(getResources(),
R.drawable.search_marker_icon);
canvas.drawBitmap(marker, 40, 40, null);
Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
canvas.drawCircle(60, 60, 5, mPaint);
super.onDraw(canvas);
}
Thanks.... I'm new to android :) hope you can help me....
This is a nice library for displaying images, which supports zooming/panning and adding pins over the image
https://github.com/davemorrissey/subsampling-scale-image-view
drawable.draw(canvas);
// ---add the marker---
Bitmap marker = BitmapFactory.decodeResource(getResources(),
R.drawable.search_marker_icon);
canvas.drawBitmap(marker, 40, 40, null);
Paint mPaint = new Paint();
mPaint.setColor(Color.RED);
canvas.drawCircle(60, 60, 5, mPaint);
canvas.restore();
}
if (drawLock.availablePermits() <= 0) {
drawLock.release();
}
}
super.onDraw(canvas);
}
You need to do this before canvas.restore..... :D got this solution last year...... thnx for the help guys.... my app is almost done :)
An implementation of an HTML map like element in an Android View:
Supports images as drawable or bitmap in layout
Allows for a list of area tags in xml
Enables use of cut and paste HTML area tags to a resource xml (ie, the ability to take an HTML map - and image and use it with minimal editing)
Supports panning if the image is larger than the device screen
Supports pinch-zoom
Supports callbacks when an area is tapped.
Supports showing annotations as bubble text and provide callback if the bubble is tapped
try this link you will find your solution https://github.com/catchthecows/AndroidImageMap