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.
Related
I have attached a image in my android app but when i launch the app it is very small.Please suggest how to increase its size in app so that its clearly visible.
Below is the snippet code of my activity_main.xml :
<ImageView
android:id="#+id/power_image"
android:src="#mipmap/ic_launcher"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_above="#+id/logButton"
android:scaleType="fitCenter"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="false"
android:visibility="visible"
/>
Change your scaleType to centerCrop and it will be worked. Here is full guide about ScaleType in ImageView in Android. The following is a list of all the most common types of scaleType:
center : Displays the image centered in the view with no scaling.
centerCrop : Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining
the image aspect ratio; centers the image in the view.
centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller
than the view, then this is the same as center.
fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly
match the view, and the result is centered inside the view.
fitStart Same as fitCenter but aligned to the top left of the view.
fitEnd Same as fitCenter but aligned to the bottom right of the view.
fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.
matrix Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be
used to apply transformations such as rotations to an image.
In the imageView you have set dimensions as 200dp x 200dp for the imageView.
Set a background color for the imageView eg yellow. This will let you know the amount of area the imageView covers. In case if the imageView doesn't cover the area desirable to you, increase the height and width of the imageView.
In case if the imageView covers enough space but the image is still small and covers only a portion of the yellow area (bg of imageView). Then you can use scaleType = fitxy in imageView, if you dont want to maintain aspect ratio else go for scaleType = centerCrop or centerInside
I've an app that display list of images along with some text in a listview.
It actually fetches those images through web service.
If i use wrap_content for ImageView, it may stretch and the list will be irregular if the image size varies.
If i hardcode by giving some width and height (in dp), does it affects our multi screen support concept?
I wouldn't advise you to use wrap_content for the ImageView.
You could try setting a fixed height to it and use it full-width.
For the fixed size you have to use dp(Density Independent Pixels) which will result in having the size of this view 'almost' the same on any device. An by almost I mean you won't have the exact same percentage on the screen(for obvious reasons) but Android will scale it appropriately.
Second and most important is to set the scale_type property to the ImageView component in the xml file. There are various options but probably center_crop would fit your needs the best(I advise you to try out all the rest of them too, so you can understand the difference between, center, centerCrop, centerInside, fitCenter, fitEnd, fitStart, fitXY, matrix - these are all the possible values scale_type can have).
EDIT:
Here is the documentation description for these types:
center Displays the image centered in the view with no scaling.
centerCrop Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.
centerInside Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.
fitCenter Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.
fitStart Same as fitCenter but aligned to the top left of the view.
fitEnd Same as fitCenter but aligned to the bottom right of the view.
fitXY Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.
If You want to display it in a ListView then it is better to hard-code the dimension. and add ScaleType you want to the image.
If you want to use GridView then use this property
android:stretchMode="columnWidth"
android:numColumns="auto_fit"
the columns are adjusted dynamically according to the density of the screen when using auto_fit
I know about the matrix, its structure and working about image view's scale-type. but,
I can't find the exact meaning of ImageView.ScaleType="MATRIX". By declaring this, what exactly happens while drawing the image view.
When can I use ImageView.ScaleType="MATRIX" ?
How does it differ from FIT_END & FIT_START
I googled about it and also referred the official link but was not able to find the exact answer.
ImageView.ScaleType.MATRIX lets you use a Matrix to scale the image. You can set the Matrix using ImageView.setImageMatrix(matrix). So by declaring the scaleType to MATRIX you are saying that you want to use an explicit Matrix to do that.
You can use imageView.setScaleType(ImageView.ScaleType.MATRIX) whenever you want to customize the way the your image scales, rotates, etc. at your desire.
FIT_END and FIT_START are default types of scale. So, if you use FIT_END for instance, your image will maintain the original aspect ratio and it will align the result of the right and bottom edges of your image view. So basically, the difference is that FIT_END and FIT_START are "presets" while with MATRIX you declare that you want to use your own matrix to scale.
Read the docs for more info
As per my understanding, Use below details for each ImageView's ScaleType attributes
center
Displays the image centered in the view with no scaling.
centerCrop
Scales the image such that both the x and y dimensions are greater than or equal to the view, while maintaining the image aspect ratio; crops any part of the image that exceeds the size of the view; centers the image in the view.
centerInside
Scales the image to fit inside the view, while maintaining the image aspect ratio. If the image is already smaller than the view, then this is the same as center.
fitCenter
Scales the image to fit inside the view, while maintaining the image aspect ratio. At least one axis will exactly match the view, and the result is centered inside the view.
fitStart
Same as fitCenter but aligned to the top left of the view.
fitEnd
Same as fitCenter but aligned to the bottom right of the view.
fitXY
Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio.
matrix
Scales the image using a supplied Matrix class. The matrix can be supplied using the setImageMatrix method. A Matrix class can be used to apply transformations such as rotations to an image.
The documentation you linked to provides the answer you are looking for.
Scale using the image matrix when drawing. The image matrix can be set using setImageMatrix(Matrix). From XML, use this syntax: android:scaleType="matrix"
Although you mentioned that you already know what a Matrix is in the context of graphics, I will explain briefly for the sake of other users who come across this question- A matrix can be used to manipulate the canvas when drawing graphics. In the case of an ImageView's matrix, you can use it to translate, flip, rotate, or otherwise move the image around on the screen.
when i can use ImageView.ScaleType="MATRIX"
You can use it whenever you want with an ImageView. You can call setScaleType() in your Java code to use a matrix scale type or you can add the android:scaleType="matrix" attribute in your layout XML.
how it differs from FIT_END & FIT_START
FIT_END and FIT_START both actually use a Matrix to scale your image. Both maintain the original aspect ratio and fit the image entirely within the view, but just align the result differently. End will align the scaled image to the end of the ImageView, whereas start will align the scaled image to the start of the ImageView
ScaleType="MATRIX"
A Matrix is constructed and scaled based on the user’s pinch gesture scale factor and then the ImageView set based on this scaled Matrix.
Please visit here Android ImageView ScaleType
Check the Effect.And https://guides.codepath.com/android/Working-with-the-ImageView
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.
I want to scale an image in an ImageView in the following way. The ImageView has some dimensions Width (W) and Height (H). The image I'm putting into the image view could be smaller or bigger than WxH. I want it to scale while preserving aspect ratio to fill WxH space.
It seems like the closest thing to what I want is android:scaleType="centerInside", but what I'm seeing is that if the image is smaller than WxH, it will put a small-unscaled version of that image in the center of the ImageView (like the documentation says), but I want it to scale it to "fit", while showing the entire image, and stretching it to the maximum possible size of the container without cropping anything. In other words, stretch preserving aspect ratio until either the width or the height bumps into the edge of the container (ImageView).
This seems like an obvious thing to want to do, but I can't get it to work this way!!!
From the Android docs...
public static final Matrix.ScaleToFit CENTER
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. The result is centered inside dst.
The XML attribute for this is...
android:scaleType="fitCenter"