How to fix scale of image - android

I want to have a ImageView of fixed x / y ratio on all of the screens.
for example famous 16/9 ratio.
And I also want that The ImageView be as large as possible.
how could I do it in android?
Thanks a lot.

The above answer will alter the aspect ratio.
You cannot achieve your goal by only modifying the xml layout file. You have to do this in Java code.
The basic steps are:
read your image file into a Bitmap, and obtain the initial width and height and aspect ratio of the Bitmap.
calculate the scaling factors for x and y dimension respectively, and use the smaller one of the two factors to scale your image
factorX= ScreenWitdhInPixel/ImgWidth
factorY= ScreenHeightInPixel/ImgHeight
factor= (factorX<factorY?factorX:factorY)
scale your image up using the factor value calculated in step 2
Matrix matrix = new Matrix();
matrix.postScale(factor, factor);
Bitmap scaledBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
Please refer to this post for a full example: ImageView fit without stretching the image

You must set android:scaleType="fitXY" to your imageView.
And if you want your ImageView be as large as its parent, you can write this lines of codes:
android:layout_width="match_parent"
android:layout_height="match_parent"

Related

Android - Set Drawable to Canvas but keep Aspect Ratio

I'm having a small issue with my android code . This is the first time i'm using canvas and i want to set an image to it but keep some type of aspect ratio.
This is what i'm doing right now and this maps the image onto the canvas completely . It sets the image width-height to canvas width-height.
Drawable drawable = image; // gets the image
drawable.SetBounds(0, 0, canvasWidth, canvasHeight);
drawable.Draw(canvas);
This works well on certain devices but when the device is large , the stretching is really bad . I want to set the bounds in such a way that it keeps an aspect ratio . If the canvas width-height is not the same aspect ratio , it will try to fill the canvas with an aspect ratio but might leave some space off in x or y axis .
int imgWidth = 500;
int imgHeight = 800;
I want to map the image on the canvas based on these values and stretch as necessary but keeping this aspect ratio even if part of the canvas is not filled .
What is the best way to do this ?
Thanks
I've already answered a similar question here.
To preserve the aspect ratio I did this:
val drawable = resources.getDrawable(R.drawable.my_vector, null)
val aspectRatio = drawable.intrinsicWidth.toFloat() / drawable.intrinsicHeight
val desiredWidthInPx = 100 // could be your view size or canvas size
val derivedHeightInPx = (desiredWidthInPx / aspectRatio).toInt()
drawable.setBounds(0, 0, desiredWidthInPx, derivedHeightInPx)
drawable.draw(canvas)
The above is for when the drawable width is smaller than its height.
If the drawable height is larger than its width, then first set the height to your desired size and then calculate the width.
Provide correct images in each resource folder. Correct images means correct resolution and screen density. Refer to this link http://developer.android.com/guide/topics/resources/providing-resources.html

How to convert coordinates on Bitmap to real coordiates on Image View displayed on screen

I have an Image View which displays an image (e.g 2000x1000 pixels) and I have a coordinate (X,Y) on that image (not the image view). The canvas of my Image View is 600x800 for example. How can I convert the point (X,Y) to screen coordinate so that I can draw a path with them on the OnDraw(...) method of Image View. Any help is appreciated! Thank you.
Update: If I use matrix to draw the path between coordinates, it works but the path and objects i draw become really small. Here is the code i used.
final Matrix matrix = canvas.getMatrix();
matrix.preConcat( _view.getImageMatrix() );
matrix.preScale( 1.0f /_inSampleSize, 1.0f / _inSampleSize);
canvas.setMatrix( matrix );
//I draw the path here
Update: I add a picture to show the effect when using matrix to draw the path. I would like to have the 4 line and the 4 corner balls to be in normal size. The red color is the boundary of the Image View which holds the picture.
I think that might depend on how exactly you are displaying your image. Your ImageView (600x800) is not the same aspect ratio as your bitmap (2000x1000).
You are keeping the bitmap's aspect ratio stable as you scale it down? If so, which part (height or width) takes up the full screen and which has black (or whatever else) as padding? This will help you determine your scale factor.
scale_factor = goal_height/height1; //if height is what you are scaling by
scale_factor = goal_width/width1; //if width is what you are scaling by.
I would try:
x_goal = x1 * scale_factor;
y_goal = y1 * scale_factor;
That is, if you have a point (1333, 900) in your image, and your image takes up the full width, you would multiply both x and y by 600/2000 to get (399.9, 270). (you might want to round that decimal).
If you are NOT keeping the bitmaps aspect ratio stable (that is, you're squeezing it to fit), then you'd have a height_scale_factor and a width_scale factor. So you'd take (1333,900) and multiply x by 600/2000 and y by 800/1000 to get (399.9,720).

How to scale the height but cut off the end of an image in Android ImageView?

This more of a conceptual Android question
Say I have this static image that I want to load into an ImageView -
Say the image is 600px by 200px.(width by height)
Say my image view I try fitting it into is 300 px by 200px(width by height)
I just want to scale by height and cut off the left end of the image so that the image can fit into the imageview. Also if no cuts need to take place(fits already), I don't want to cut any of it off.
So in the end the ImageView(if it was 300 px by 200px) would hold this image
(basically so the F doesn't get distorted)
I've looked Scale To Fit but none of the scale types seems to achieve this custom effect. Does anyone know of how I would go about this? In my case, I wouldn't want to maintain the original aspect ratio.
You should crop the Bitmap so that it always fits into your ImageView. If you want the bottom-right corner cropped, you could do something similar to this:
if (needsCropping()) {
int startWidth = originalImage.getWidth() - 300;
int startHeight = originalImage.getHeight() - 200;
Bitmap croppedBitmap = Bitmap.createBitmap(originalImage, startWidth, startHeight, width, height);
// TODO set imageview
}
FIT_END would do this:
Compute a scale that will maintain the original src aspect ratio, but will also ensure that src fits entirely inside dst. At least one axis (X or Y) will fit exactly. END aligns the result to the right and bottom edges of dst.
You can use ScaleType.CENTER_CROP BUT this will not rescale the image in any way.
Any combinations of those is impossible, for that you must have your own scale method (subclassing ImageView).
Or, the easy way would have .9PNGs as the source of the image, it would fit any space without distorcing.

Android - How to enlarge a bitmap

I usually download images that are larger in size and shrink them using an imageview but lately Im trying to deal with my apps not working on a lesser network connection so I was wondering how can I increase the size of an image once it gets to the device. I tried resizing the image once it was in an imageview but the imageview will get no larger than the original image. Im sure theres a really easy way to increase or blow up an image on the device but I havent come across it yet.
So.....how can I increase the size of an image. Id like to blow it up and use it in an imageview but the images Im dealing with are only 128X256 and Id like to expand them to about 512X1024.
Try using this method:
public static Bitmap scaleBitmap(Bitmap bitmapToScale, float newWidth, float newHeight) {
if(bitmapToScale == null)
return null;
//get the original width and height
int width = bitmapToScale.getWidth();
int height = bitmapToScale.getHeight();
// create a matrix for the manipulation
Matrix matrix = new Matrix();
// resize the bit map
matrix.postScale(newWidth / width, newHeight / height);
// recreate the new Bitmap and set it back
return Bitmap.createBitmap(bitmapToScale, 0, 0, bitmapToScale.getWidth(), bitmapToScale.getHeight(), matrix, true); }
refer to my answer in: ImageView OutofMemoryException
Use matrix to resize the bitmap.
Check this
Resize Bitmap
If you want to scale the Bitmap manually, there is a Bitmap.createScaledBitmap() method that you can use for this.
If you want the ImageView to handle this, you have to set the layout_width/layout_height to something other than wrap_content or it will always shrink to the size of the Bitmap. Then you need to change the scaleType attribute to a type that actually scales the bitmap.
The functionality to scale image up or down is readily available via android.graphics library:
Bitmap bitmapScaled = Bitmap.createScaledBitmap(Bitmap bitmapOrig, int widthNew, int heightNew, boolean filter);

set image size to full screen in android

I'm having an android app in which I'm taking a picture using the android camera.
This picture is taken in the activity A and after that is sent to activity B where is edited.
This is how I receive my image in activity B:
Bundle extras = getIntent().getExtras();
BitmapFactory.Options options=new BitmapFactory.Options();
options.inSampleSize = 5;
byte[] imageData = extras.getByteArray("imageData");
Bitmap myImage = BitmapFactory.decodeByteArray(imageData , 0, imageData.length,options);
Matrix mat=new Matrix();
mat.postRotate(90);
bitmapResult = Bitmap.createBitmap(myImage, 0, 0, myImage.getWidth(), myImage.getHeight(), mat, true);
ImageView imageView = (ImageView) findViewById(R.id.myPic);
imageView.setImageBitmap(bitmapResult);
As you can see I'm rotating the bitmap I receive with 90 using this:
Matrix mat=new Matrix();
mat.postRotate(90);
And here is my imageView in xml file:
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:id="#+id/myPic"
/>
The problem that I'm facing is that my picture is not full screen...it's almoust full screnn but not entirly.As you can see here:
If you could help me to increase a little bit its size I would really apreciate it.Thanks
EDIT:I wanna increase the width of my image only.Sorry!!
You can use ImageView.ScaleType
ImageView.ScaleType="CENTER_CROP"
You might have to crop the image. Because the image is not at its full height, the width of the image is proportionately scaled down, hence the black strips at the sides.
To be more specific, images taken using the phone's camera are probably intended to fit the screen exactly i.e. width-height ratio of image = width-height ratio of the screen. However, in your app the height of the image is constrained by the buttons at the top, so in order to maintain the width-height ratio of the image, the width of the image is scaled down proportionately.
Please refer to setScaleType
You could use CENTER_CROP to get full screen image and maintain the image's aspect ratio.

Categories

Resources