ImageView fills different screen sizes, but maintaing the aspect ratio - android

I have a rectangular image in an image view. I want to fit the image in the screen for different screen sizes while maintaining the aspect ratio.
In smaller screen its working fine, but its not getting stretched in biggerscreens. Some gap remains in the bottom of the image.
This is my code:
LayoutParams params = new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT);
LayoutParams params1 = new LayoutParam(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
mMainLayout = new LinearLayout(context);
mMainLayout.setLayoutParams(params);
backgroundImage = new ImageView(context);
backgroundImage.setId(0);
backgroundImage.setAdjustViewBounds(true);
backgroundImage.setScaleType(ScaleType.FIT_CENTER);
backgroundImage.setLayoutParams(params1);
backgroundImage.setImageResource(R.drawable.background_circles_en);
mMainLayout.addView(backgroundImage);
I have used many combinations of fill_parent, wrap_content with multiple scaleTypes: fitCenter, centerInsideand they all draw the images in the right aspect ratio, but none of them actually scale the images up and the ImageView itself, resulting in either the TextViews get pushed all the way down off the screen, blank spaces inside the ImageView, or image not scaled.
Please give a right combination so that it will work properly for different screen sizes.

Privide ScaleType FIT_XY, it will scale image to x and y dimensions, irrespective of aspect ratio.

Related

Android image 1/3rd of the screen with scrollview

In my app, I download images from my web server (each having a different resolution) but I would like to show these images on a fragment screen consistently.
Ideally, I would like the image to have width="match_parent" and height to take 1/3 of the screen EXACTLY. Furthermore, the image should be shown in a as it's part of a content layout with other controls that could possibly grow larger than the screen height (hence the need for scrolling).
I have tried putting the image and the rest of the content in a LinearLayout and then setting the weight to 1 (with max weight being 3), but since the image and the other contents are in a scrollview, it doesn't quite seem to work. the image is either too large or too small (depending on the orientation and the resolution of the image) and my 1/3rd settings don't seem to be respected.
Is there any way to do this other than fixing the height to a pre-determined (dp) value? I would like to avoid that unless there's no other choice.
Many thanks,
You could always set the height for each of the images programatically to 1/3 the height of the screen, like so
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int height = metrics.heightPixels;
ImageView img = (ImageView) findViewById(R.id.image);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) img.getLayoutParams();
params.height = (int)height / 3;
img.setLayoutParams(params);

Gravity TOP not working when using ScaleType.CENTER_CROP in a ImageView

I have an activity that shows a imageview with a random bitmap from assets folder. I'm loading the image view with this code:
ImageView imv = new ImageView(ctx);
imv.setAdjustViewBounds(true);
imv.setScaleType(ImageView.ScaleType.CENTER_CROP);
imv.setImageBitmap(this.myBitmap);
Also the gravity of the image is set to top of the screen with layout params containing Gravity.TOP
I must use CENTER_CROP because my image sometimes is longer than the height of the screen, and because some other particualirities of my app. I can't use FIT_XY because it deforms my image. I tryed removing center_CROP and did not work, because i want that the image haves the full width of the screen, and without center_crop the image is scaled down.
The problem is that when the bitmap haves more height than the screen height, the image is not starting on the top of the screen, some portion of the upper zone of the image is not being displayed.
How can i avoid that problem?
Thanks

scaling/formatting multiple imagebutton array in Android

So I have this task to create a horizontal scrolling array of image buttons that are basically photo avatars of users. These avatars aren't constrained by aspect ratio or size, and so I've been playing with ways to scale them and format them. I've gotten them scaling via the scaletype="fitCenter" and using static width and height. But what I really want them to do is to butt up against one another. Currently if an image is taller than it is high, you get the kind of letterboxing but on the sides vs. the top (blank areas). I've tried all the different scaling values, wrapping each imagemap within a linearlayout, etc., but nothing I try seems to get rid of those (while displaying the entire image to scale). Is there any way to do this?
Just to reiterate what I think you're doing, you have three image scenarios:
Square image
Landscape image (wider than tall)
Portrait image (taller than wide)
Laying out a row of fixed-size ImageViews (or ImageButtons) using FIT_CENTER works great for what you need if all the images were either square or landscape, because the scaling will always make the image stretch to the horizontal bounds of the view (the largest dimension). However, with portrait images, the scaling causes the view to be inside the bounds of your fixed-size view so that the entire image height can be visible.
If you need to maintain the aspect ratio of the image, there really is no ScaleType to help with this because the logic would be circular (fit the view to the image, while simultaneously fitting the image to the view). The solution is to adjust the size (specifically, the width) of each ImageView to match what the image will be scaled to. Here's a sample of a factory method you might use to generate the ImageView to fit the image you want to put inside it. You could also modify this slightly to reset parameters on an existing ImageView if you like:
private ImageView getImageViewForThumbnail(Bitmap thumbnail) {
float viewHeight = //Your chosen fixed view height
float scale = ((float)thumbnail.getHeight()) / viewHeight;
float viewWidth = thumbnail.getHeight() / scale;
ImageView view = new ImageView(this);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams((int)viewWidth, (int)viewHeight);
view.setLayoutParams(params);
view.setScaleType(ScaleType.FIT_XY);
view.setImageBitmap(thumbnail);
return view;
}
You're basically just calculating what the aspect width of the ImageView should be to match the fixed height you've chosen for all of them.
HTH
Use the scaleType fitXY, it stretches the image to the layout params you assigned, if the image has less dimensions and also shrinks the image to the layout params you assigned, if the image is large. The key point is to mention the image layout params to the imageView , that is the width and height of the image.

Change size of FrameLayout when screen size has been found

At the moment I have a FrameLayout which will hold a preview of a picture taken. The size of this is determined in the layout xml file I created for it, at the moment its just set to fill_parent. However the image taken is at 4:3 aspect ratio, but this isn't always going to be the right aspect ratio for the users screen.
For example with my Xperia X10 which is 480 X 854, the 4:3 image taken by the camera always stretches to fit the FrameLayout.
What I want to do is change the size of the FrameLayout outside of the XML file so that it is 4:3 and a size appropriate for the users screen size. Any ideas?
I guess you are using an ImageView inside your FrameLayout to display the actual picture? In this case, use scaleType to define how the picture should be stretched.
You can set that in your XML, just use android:scaleType=".." inside your ImageView tag.
Framelayout.LayoutParams lp = new LinearLayout.LayoutParams(width, height);
lv.setLayoutParams(lp);
Try using the above code...

Image doesnt cover image view fully

I am trying to apply image on an image view instance...but it doesnt cover it properly...
please advise
here it is my image view code:
android:id="#+id/imageViewVessel"
android:layout_width="fill_parent"
android:scaleType="fitStart"
android:layout_height="170dip"
android:src="#drawable/vessel"
EDIT by kcoppock: Adding code from devaditya's comment below
TableRow rowImage = new TableRow(this);
rowImage.setBackgroundColor(Color.GRAY);
rowImage.setMinimumHeight(150);
rowImage.setGravity(Gravity.CENTER);
rowImage.setMinimumWidth(LayoutParams.FILL_PARENT);
ImageView imgViewVessel=new ImageView(this);
imgViewVessel.setImageResource(R.drawable.vessel);
imgViewVessel.setMinimumHeight(150);
imgViewVessel.setMinimumWidth(LayoutParams.FILL_PARENT);
imgViewVessel.setScaleType(ScaleType.FIT_XY);
rowImage.addView(imgViewVessel);
To expand on Gao's answer, you do need to set a scaleType for your ImageView, but it is unlikely that fitXY is the scaleType that you are looking for. You can find the complete list at the above link, but a few of the most common are:
centerCrop: This will maintain the aspect ratio of the image, filling the frame entirely, but cropping off either the left and right, or top and bottom of the if the aspect ratio of the frame and source image are different.
centerInside: This also maintains the aspect ratio, but the image is scaled to fit entirely within the view, so that the longest edge is the same size as the frame. This can give you a letterbox type of effect if the aspect ratios of the frame and source image are different. fitStart and fitEnd are the same scaling method, but they have different placement of the image (top-left and bottom-right, respectively).
fitXY: This one should only be used if disproportionate scaling does not affect the graphic. In the case of bitmap graphics, this is almost always bad to use. This sets the width of the source image to the width of the view, and the height of the source image to the height of the view, without maintaining the aspect ratio of the source image.
You can set scale type in the layout file : android:scaleType="fitXY" or call setScaleType with fitXY.

Categories

Resources