Could you help me how can I make Android view with images as on the screenshot:
It must fit screen width.
I can transform the first image, from left, like:
ImageView img;
float degrees = 70;
Camera mCamera = new Camera();
final float mCenterX = img.getWidth() / 2.0f;
final float mCenterY = img.getHeight() / 2.0f;
final float centerX = mCenterX;
final float centerY = mCenterY;
final Camera camera = mCamera;
Matrix matrix = new Matrix();
camera.save();
camera.rotateY(degrees);
camera.getMatrix(matrix);
camera.restore();
matrix.preTranslate(-centerX, -centerY);
matrix.postTranslate(centerX, centerY);
img.setImageMatrix(matrix);
In the layout imageViews are stored inside Horizontal LinearLayout. But image width isn't recalculated with matrix transformation.
Please, help me to implement this layout, as on the picture.
Related
I've generated a circle bitmap programatically like so:
private Bitmap drawDotCircle() {
int circleSize = 100;
circleBitmap = Bitmap.createBitmap(
circleSize,
circleSize,
Bitmap.Config.ARGB_8888
);
canvas = new Canvas(circleBitmap);
CanvasRadius = Math.min(canvas.getWidth(), canvas.getHeight() / 2);
// Create a Paint object used to paint the circle
paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
paint.setAntiAlias(true);
canvas.drawCircle(
canvas.getWidth() / 2,
canvas.getHeight() / 2,
CanvasRadius - CanvasPadding,
paint
);
return circleBitmap;
}
I would like to place it at an absolute X and Y that I've calculated; let's assume its the absolute center of the screen as follows:
int dotX =getResources().getDisplayMetrics().widthPixels / 2;
int dotY = getResources().getDisplayMetrics().heightPixels / 2;
How do I ensure that the circle is centered in the view? I have tried the following code, but the circle is always off-center for some reason:
RelativeLayout.LayoutParams layoutParams =
new RelativeLayout.LayoutParams(circleDot.getHeight(), circleDot.getHeight());
// Setting position of our ImageView
layoutParams.leftMargin = dotX;
layoutParams.topMargin = dotY;
// Finally Adding the imageView to RelativeLayout and its position
relativeLayout.addView(dotView, layoutParams);
The leftMargin should be dotX - imageWidth/2 and topMargin should be dotY - imageHeight/2
Try that
So I have an ImageView where I set png as a background. Let's assume the png picture is a circle, so it doesn't take all the space of the ImageView.
I need to catch the event of clicking only the content of the ImageView (the circle) and not the remaining empty area.
Is this actually possible at all or with any other Android control?
Edit:
I still can't get this to work.
So to be more precise I have this picture of an egg which I set as ImageView src
And I want to be able to click only on it. Foe example if I click slightly outside the egg I want to know that and prevent code inside the ImageView click event.
I tried this code but I don't have any idea how this helps me:
ImageView imageView = (ImageView)findViewById(R.id.imageview);
Drawable drawable = imageView.getDrawable();
Rect imageBounds = drawable.getBounds();
//original height and width of the bitmap
int intrinsicHeight = drawable.getIntrinsicHeight();
int intrinsicWidth = drawable.getIntrinsicWidth();
//height and width of the visible (scaled) image
int scaledHeight = imageBounds.height();
int scaledWidth = imageBounds.width();
//Find the ratio of the original image to the scaled image
//Should normally be equal unless a disproportionate scaling
//(e.g. fitXY) is used.
float heightRatio = intrinsicHeight / scaledHeight;
float widthRatio = intrinsicWidth / scaledWidth;
//do whatever magic to get your touch point
//MotionEvent event;
//get the distance from the left and top of the image bounds
int scaledImageOffsetX = event.getX() - imageBounds.left;
int scaledImageOffsetY = event.getY() - imageBounds.top;
//scale these distances according to the ratio of your scaling
//For example, if the original image is 1.5x the size of the scaled
//image, and your offset is (10, 20), your original image offset
//values should be (15, 30).
int originalImageOffsetX = scaledImageOffsetX * widthRatio;
int originalImageOffsetY = scaledImageOffsetY * heightRatio;
here is how you would get the click event:
int[] viewCoords = new int[2];
imageView.getLocationOnScreen(viewCoords);
//From this and the touch coordinates you can calculate the point inside the ImageView:
int touchX = (int) event.getX();
int touchY = (int) event.getY();
int imageX = touchX - viewCoords[0]; // viewCoords[0] is the X coordinate
int imageY = touchY - viewCoords[1]; // viewCoords[1] is the y coordinate
I need a way to scale an image down to 78x78. I have found ways of doing this by cutting part of the image off, like this:
Bitmap image = Bitmap.createBitmap(image, 0, 0, 78, 78);
but I need to maintain as much of the image as possible. I had thought of scaling the image down and then making it square:
Bitmap image = Bitmap.createScaledBitmap(imageTest, 78, 78, true);
but of course this creates a square image that is squashed.
Can anyone suggest how I can create a 78x78 image that doesn't rescale and maintains as much of the original image as possible?
From what I understood, you should scale down and center crop the image. Try this code out.
public Bitmap scaleCenterCrop(Bitmap source, int newHeight, int newWidth) {
int sourceWidth = source.getWidth();
int sourceHeight = source.getHeight();
// Compute the scaling factors to fit the new height and width, respectively.
// To cover the final image, the final scaling will be the bigger
// of these two.
float xScale = (float) newWidth / sourceWidth;
float yScale = (float) newHeight / sourceHeight;
float scale = Math.max(xScale, yScale);
// Now get the size of the source bitmap when scaled
float scaledWidth = scale * sourceWidth;
float scaledHeight = scale * sourceHeight;
// Let's find out the upper left coordinates if the scaled bitmap
// should be centered in the new size give by the parameters
float left = (newWidth - scaledWidth) / 2;
float top = (newHeight - scaledHeight) / 2;
// The target rectangle for the new, scaled version of the source bitmap will now
// be
RectF targetRect = new RectF(left, top, left + scaledWidth, top + scaledHeight);
// Finally, we create a new bitmap of the specified size and draw our new,
// scaled bitmap onto it.
Bitmap dest = Bitmap.createBitmap(newWidth, newHeight, source.getConfig());
Canvas canvas = new Canvas(dest);
canvas.drawBitmap(source, null, targetRect, null);
return dest;
}
Hope it helps
Try this:
Bitmap image = Bitmap.createScaledBitmap(testImage, (int) 78 * (testImage.getWidth() / testImage.getHeight()), 78, true);
image = Bitmap.createBitmap(image, (int) (image.getWidth() - 78) / 2, 78);
Haven't tested this, as I'm on my way to bed, but it should accomplish what you want, so long as your image has a width greater than or equal to its height.
Regardless, I'd suggest you use BufferedImage instead of Bitmap.
The idea here would be resize your image using the same resize rate for width and height keeping the smaller size in 78. After that you can use a center point based crop to get the middle of your image and making it a squared image.
Image srcImage;
int widthSrc = 150;
int heightSrc = 180;
float resizeRate = 78 / min(widthSrc, heightSrc);
Image resizedImage = resizeImage($srcImage, resizeRate);
int widthDest = 78;
int heightDest = 78;
int cropX = ($widthSrc - $widthDest)/2;
int cropY = ($heightSrc - $heightDest)/2;
Image croppedImage = cropImage(resizedImage,$widthDest, $heightDest, $cropX, $cropY);
If the image is already square you can skip the crop part.
I am saving an image from the camera that was in landscape mode. so it gets saved in landscape mode and then i apply an overlay onto it that too is in landscape mode. I want to rotate that image and then save. e.g. if i have this
I want to rotate clockwise by 90 degrees once and make it this and save it to sdcard:
How is this to be accomplished?
void rotate(float x)
{
Bitmap bitmapOrg = BitmapFactory.decodeResource(getResources(),R.drawable.tedd);
int width = bitmapOrg.getWidth();
int height = bitmapOrg.getHeight();
int newWidth = 200;
int newHeight = 200;
// calculate the scale - in this case = 0.4f
float scaleWidth = ((float) newWidth) / width;
float scaleHeight = ((float) newHeight) / height;
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
matrix.postRotate(x);
Bitmap resizedBitmap = Bitmap.createBitmap(bitmapOrg, 0, 0,width, height, matrix, true);
iv.setScaleType(ScaleType.CENTER);
iv.setImageBitmap(resizedBitmap);
}
Check this
public static Bitmap rotateImage(Bitmap src, float degree)
{
// create new matrix
Matrix matrix = new Matrix();
// setup rotation degree
matrix.postRotate(degree);
Bitmap bmp = Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
return bmp;
}
You can use the Canvas API to do that. Note that you need to switch width and height.
final int width = landscapeBitmap.getWidth();
final int height = landscapeBitmap.getHeight();
Bitmap portraitBitmap = Bitmap.createBitmap(height, width, Bitmap.Config.ARGB_8888);
Canvas c = new Canvas(portraitBitmap);
c.rotate(90, height/2, width/2);
c.drawBitmap(landscapeBitmap, 0,0,null);
portraitBitmap.compress(CompressFormat.JPEG, 100, stream);
Use a Matrix.rotate(degrees) and draw the Bitmap to it's own Canvas using that rotating matrix. I don't know though if you might have to make a copy of the bitmap before drawing.
Use Bitmap.compress(...) to compress your bitmap to an outputstream.
The solution of Singhak works fine.
In case you need fit the size of result bitmap (perhaps for ImageView) you can expand the method as follows:
public static Bitmap rotateBitmapZoom(Bitmap bmOrg, float degree, float zoom){
Matrix matrix = new Matrix();
matrix.postRotate(degree);
float newHeight = bmOrg.getHeight() * zoom;
float newWidth = bmOrg.getWidth() / 100 * (100.0f / bmOrg.getHeight() * newHeight);
return Bitmap.createBitmap(bmOrg, 0, 0, (int)newWidth, (int)newHeight, matrix, true);
}
Is there a formula to use to center a background in the camera of Andengine.
My camera is the size of the Screen on the particular device which i retrieve using this...
final Display display = getWindowManager().getDefaultDisplay();
CAMERA_WIDTH = display.getWidth();
CAMERA_HEIGHT = display.getHeight();
int x = //formula to center background in camera or screen on the X axis
int y = //formula to center background in camera or screen on the Y axis
For my SpriteBackground, how could i figure out what is the x, and y to center it in the camera?
The x and y is supplied like this..
Sprite sprite = new Sprite(x,y,TextureRegion);
final float x = CAMERA_WIDTH / 2 - textureRegion.getWidth() / 2;
final float y = CAMERA_HEIGHT / 2 - textureRegion.getHeight() / 2;
Sprite sprite = new Sprite(x, y, textureRegion);
This will make sprite positioned in the middle of the scene. If the camera doesn't move around, it will be the center of the camera (hence screen) too.
You should check setBackground method for your scene. It will center your sprite and move it when your camera moves.
Sprite background = new Sprite(0,0, CAMERA_WIDTH, CAMERA_HEIGHT, backgroundTextureRegion);
scene.setBackground(new SpriteBackground(background));