I am having a layout in with root Relative layout and and ImageView inside it when i set it source the Image is not fitting inside into Image view leaving Top and and bottom padding which is in preview but not defined in xml. I want to know how to stretch image to fit completely in ImageView.
XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#fff">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/place_demo_2"
android:id="#+id/back_ground_place"
android:layout_alignParentBottom="true"
android:layout_marginBottom="400dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Manila Main"
android:id="#+id/visit_place_title"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="68dp"
android:textColor="#fff"/>
</RelativeLayout>
Using Code:
YourImageView.SetScaleType(ImageView.ScaleType.FIT_XY);
Using xml:
android:scaleType="fitXY"
See also below snapshots for other alternative options.
Use android:scaleType in your ImageView
android:scaleType="fitXY"
Check other available options for scaleType here
You're going to want to use android:scaleType in your XML file. There are several options you will probably want to play with until you get the exact product you are looking for but, if you don't care about aspect ratio, it sounds like you might want to use android:scaleType="fitXY".
You can find more information here:
https://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Below are the rest of the options:
ImageView.ScaleType="CENTER"
Center the image in the view, but perform no scaling.
ImageView.ScaleType="CENTER_CROP"
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to
or larger than the corresponding dimension of the view (minus
padding).
ImageView.ScaleType="CENTER_INSIDE"
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to
or less than the corresponding dimension of the view (minus padding).
ImageView.ScaleType="FIT_CENTER"
Scale the image using CENTER.
ImageView.ScaleType="FIT_END"
Scale the image using END.
ImageView.ScaleType="FIT_START"
Scale the image using START.
ImageView.ScaleType="FIT_XY"
Scale the image using FILL.
ImageView.ScaleType="MATRIX"
Scale using the image matrix when drawing.
either make width of Imageview to wrap_content
or
you have to set android:scaleType of Imageview to fitXY
Add to ImageView attr android:scaleType="fitXY"
That's because you have aligned the ImageView to parent's bottom BUT there is a margin at the bottom of 400dp.
Long story short, remove
android:layout_alignParentBottom="true"
android:layout_marginBottom="400dp"
Also set the layout_height to match_parent if you want the image to fill the whole screen.
P. S. Also fill_parent is deprecated, so use match_parent instead.
Related
Please don't mark this a duplicate, as I am unable to find the solution.
Hi, I am trying to add src image with some background color
Here is what I am doing
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="20dp"
android:background="#drawable/bg_layout_corners"
android:backgroundTint="#color/color_fbfbfa"
android:gravity="center">
<ImageView
android:id="#+id/iv_dashboard_niggle"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:scaleType="centerInside"
android:background="#color/colorAccent"
android:src="#drawable/niggle2_3_3_3" />
</RelativeLayout>
and here is the output I am getting
When I try to decrease the width or height of imageView, the actual image is placing at the center and some border is visible.
I also checked for scaleType="center", this is also not working
Please help me.
Hope this solves your problem.
iv_dashboard_niggle.setScaleType(ImageView.ScaleType.fitXY);
Set wrap_content as height for your relative layout.
Then the space will go.
The image that you wanted to set in a image view needed to be in the same aspect ratio to fit exactly without applying scaleType...
for example
If you want to set a square image that have height and width ratio 1:1 then ImageView ratio needs to be 1:1
Well but also we have ScaleType if images not according ratio then we can set scale type to match the size of image view by resizing our image
In your case it's completely depend on what you want to show.
If you don't want background border then simply set background color to transparent by using
android:background="#android:color/transparent"
Best way is define ImageView size according aspect ratio if you don't want to use scale type
I have an ImageView in my xml -
<ImageView
android:id="#+id/image"
android:layout_centerHorizontal="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
I am using Glide library to fetch image from an url and set that into the ImageView.
All i want is to match the width of image with parent width and then adjust the height of image without affecting the aspect ratio.
if the image dimension is very less, it should be expanded to match parent width and if image dimension are more than screen size it should be shrinked to match parent width.
ImageView img = (ImageView) findViewById("image");
Glide.with(this).load("url here").into(img);
Which scaleType should i use ?
Is it possible in XML or it needs java code ?
Thanks in advance. :)
It is possible from the xml. I achieved it using the following code.
<ImageView
android:id="#+id/ivImage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"/>
Scale XY scales the image using FILL and adjust view bounds preserves the aspect ratio.
I do not think you need center horizontal property.
After this I called a photo loader library to just download the image into the image view.
It helps me. Just use in imageView xml
android:adjustViewBounds="true"
And add override in glide:
GlideApp.with(context)
.load(url)
.override(Resources.getSystem().getDisplayMetrics().widthPixels)
.into(imageView)
use android:scaleType:fitXY
<ImageView
android:id="#+id/image"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
and java code
Glide.with(this).load(url)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(img);
You may use ConstraintLayout for this purpose.
You can set the view size to a ratio such as 16:9 if at least one of the view dimensions is set to "match constraints" (0dp)
As quoted from android developers. Also you can refer this medium article for reference on how to achieve this ratio thing.
i'm new in android development and i'm trying rotating an image view inside a listview. I have the follow xml for the custom cell:
<RelativeLayout
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true">
<ImageView
android:id="#+id/borderImageView"
android:layout_width="#dimen/photoReceiverWidth"
android:layout_height="#dimen/photoReceiverHeight"
android:scaleType="fitXY"
android:rotation="-10"/>
</RelativeLayout>
When it display, it cut a peace of the image. The view is not calculating the size for the rotation.
I don't want to create a new bitmap because the cost is too high.
android:adjustViewBounds="true"
This is an image view property, so place it within the image view rather than the relative layout. I am not sure if adjustViewBounds works on a fixed size ImageView.
You could change the width and height to wrap_content and use a maxHeight or minHeight property to define some additional bounding rules.
The scale type should also probably be centerInside, but play with these to see what suits.
I have an ImageView that is defined in the following way:
<ImageView
android:id="#+id/cover_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#id/title"
android:layout_above="#id/divider"
android:adjustViewBounds="true"
android:src="#drawable/image_placeholder"
android:scaleType="fitStart"/>
Now after downloading a new bitmap I change the drawable. The image now appears in the top left corner of the ImageView. Is there a way to have the image fill up the whole height that is possible and then adjust the width of the view to enable scaling the image without changing the ascpect ratio?
The image fills up all the space on a standard screen but on a WVGA Resolution the image takes only about half of the actual height of the ImageView.
If I'm understanding you correctly, what you need to use is the centerCrop scaleType. fitStart scales the image proportionally, but neither the width nor height will exceed the size of the view, and the image will, as you said, have a top|left gravity.
Using centerCrop scales the image proportionally, but causes the shortest edge of the image to match the size of the view, and if there is additional data on the long side that does not fit, it is simply cropped off. The gravity is, of course, center. The below worked for me:
<ImageView
android:src="#drawable/image_placeholder"
android:id="#+id/cover_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop"
/>
You can change scale type to fitXY via call to
imageView.setScaleType(ScaleType.FIT_XY);
simply do it in xml like
android:scaleType="fitXY"
Basically the answer here is that there is no predefined value for what you are trying to achieve. The solution is to create a Matrix that fits to your needs and call setImageMatrix(matrix) on your ImageView.
I'm trying to show an image scaled while preserving its aspect ratio, but at the same time align it to the bottom.
Using android:scaleType="FitXY" causes the image to be centered vertically and horizontally, so it doesn't get aligned to the bottom.
Using "FitEnd" causes the image to be aligned to the bottom right corner, so it isn't centered horizontally.
Is there any way to get around this? Maybe using some matrix to scale it (scaleType="matrix")?
EDIT: To clarify a bit on what it is I want exactly...
I have an ImageView, whose layout (location, size, gravity, etc.) I can't change. I want to load a bitmap as its source image, but have that bitmap get scaled to the ImageView's size (preserving the aspect ratio of the bitmap) and then aligned to the ImageView's bottom.
EDIT: After trying everything I could think of (and everything that was suggested here), we ended up sub-classing ImageView and doing the scaling/translation ourselves in onDraw.
Try using android:scaleType="centerInside" instead of fitXY.
Layout being used in a Blrfl Labs application to scale an image to fit the area the layout gives it without hosing up the aspect ratio:
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1.0"
android:gravity="center"
android:src="#drawable/blah_blah_blah"
android:scaleType="centerInside"
android:adjustViewBounds="false"
/>
You can use
android:layout_centerHorizontal="true"
android:scaleType="fitEnd"
if your ImageView is inside a RelativeLayout.
Untested, but try adding:
android:layout_gravity="bottom|center_horizontal"
to your ImageView along with FitXY scaling.