ImageView within RelativeLayout has top and bottom padding - android

I have a 640px wide, 208px tall PNG that I've placed in my /drawable folder and I'm having a very hard time properly placing it in an ImageView. I want to scale the image so that it maxes out the horizontal resolution, and I want it to scale vertically only as much as it takes to stay in proportion.
The problem I am having is that my ImageView ends up taller than it needs to be to fit the image. The image itself looks perfect; as wide as the screen and in proportion. But the ImageView appears to have padding on the top and bottom. From what I can tell it's the drawable that the ImageView contains that's actually too tall.
I can't post an image because I'm new to SO, but if I did it would be of the Graphical Layout view. When I click on the ImageView the regular blue box shows up around it, but with padding on the top and bottom, the same padding I'm seeing on the device. Even if I drag the blue box to attempt to resize the ImageView, I am not allowed to make it any smaller than it already is (perhaps because the ImageView thinks the drawable is that tall, or something). From what I can tell, this may have something to do with the density of the image...the ImageView ends up being 312 pixels tall (208*1.5) on an hdpi device.
Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/back" android:src="#drawable/categoryheader2"
android:layout_width="wrap_content" android:layout_height="wrap_content">
</ImageView>
</RelativeLayout>
Thanks in advance for any help!

I guess android:adjustViewBounds="true" on the ImageView should do the trick. I recently had a similar problem, when I was trying to scale an image to fit the whole width of the view without loosing its proportions.

did you tried the tag : android:scaleType="fitXY" or android:scaleType="centerCrop" on your ImageView ?

Related

Image scaling and positioning in ImageView inside AppWidget layout

NOTE problem solved... it was an issue in the bitmap itself and not the XML layout used to display it... see this comment. No need to read on unless you're curious!
When I set the content of an ImageView (N.B. inside an AppWidget layout) to a bitmap that is smaller than the physical pixel size of the ImageView, I'm sure that in the past (not sure how long ago) the bitmap would just get scaled up to fit... in my case the smaller image is exactly the same aspect ratio as the ImageView so this is exactly the effect I want.
But recently I noticed that this is no longer happening... the bitmap sits in the top left corner. I've tried setting various attributes in the XML layout, but nothing has any effect.
E.g. I've tried:
android:scaleType="fitCenter"
android:scaleType="centerInside"
android:layout_gravity="center"
But still the image sits in the ImageView flush with the top left corner, with gaps to right and bottom.
XML (ImageView part):
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView_port"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
The ImageView sits within a parent defined in the XML as:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/widget_margin"
android:id="#+id/widget" >
Code to put image content URI in appwidget:
remoteViews.setImageViewUri(imageViewId, uri);
appWidgetManager.partiallyUpdateAppWidget(appWidgetId, remoteViews);
How it looks for image with size that matches the widget imageview:
How it looks for an image that is smaller than the widget imageview:
I want the smaller image to be scaled up to fit the ImageView (it's the same aspect ratio, so it will fit perfectly).
try
android:scaleType="centerCrop"
OR
android:scaleType="fitXY"

TextView above ImageView: Space between the top of the scaled SVG and the bottom of the TextView is scaled

In my application, a TextView is shown above an ImageView which contains a SVG image. Depending on the screen resolution, the ImageView, which is constrained (top and bottom e.g.) by another ImageView, is scaled: thus its SVG is also scaled by decreasing its height (and width, proportionnaly). Thus, the space between the TextView and the ImageView is technically the same than the one in Android Studio but is visually longer.
What I would want is: to keep the same space in Android Studio than on all screen resolutions, i.e.: 8dp.
Example:
In the Android Studio's visualizator, the space is 8dp:
In a Samsung Galaxy S7, I think the space is still 8dp but the SVG has been scaled: the space seems longer.
Proof that the SVG is scaled and that the ImageView is really at 8dp from the TextView:
Do you know how to keep the same space than in Android Studio, whatever the screen resolution?
Warning
I really want the SVG to be scaled (so I don't want, e.g. to set scale: fitXY or something like that). But I also want the space between the bottom of the TextView and the top of the scaled SVG be 8dp on all screen resolutions.
This is a guess but I think that your image is causing the problem.
As you said - your space is the same 8dp all the time but because your image has a white background, when you use a bigger image the white background scales and it looks like the space between your text and image is larger.
You can use some view with non-white background and scale it for testing - I believe that you will see the same spacing regards the view size. If this will be the case maybe try to change your image.
You can use LinearLayout layout with constraints to ensure a fixed proportion no matter what
E.g
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/main_layout"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="40"
/>
<TextView
android:id="#+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="60"
/>
</LinearLayout>
So no matter what, in our example, the image will always be 40% of the horizontal space while the text will be 60%. I believe you can apply this idea to your situation

Android, XML: Show only portion of image in layout container without altering aspect ratio

I want to set a background to any layout.
Usually, I would go on about this like here:
<LinearLayout
android:orientation="vertical"
android:background="##drawale/somedrawable"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="100dp"/>
But this will always make the background fit the LinearLayout. But what if the layout was smaller in height than the image I set as background? I do NOT want to destroy the image's aspect ratio but just center the image inside the layout and have the height overlap so that it isn't visible anymore.
To clarify:
Left is what happens currently, but right is how I want to to be. Since the layout container is smaller than the imageview or background image is, it is supposed to stay centered but only show what fits without altering the aspect ratio.
Use an ImageView inside the linear layout with width and height match_parent and set the scaleType="centerCrop"
<ImageView
android:src="#drawable/somedrawable"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
you cannot apply the scaletype property in linearlayout its better to use imageview to achieve this following is the link how to use scaleType attribue, to avoid the stratching behaviour use the 9 patch image, follwoing is the link to convert your image into 9patch

Trimming ImageView in Android

I have an image which is 450px square below some text in a linear layout and wanted it to fill the width of the device, which I done by using;
ImageView android:id="#+id/my_image_container"
android:src="#drawable/my_image"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/orange"
android:scaleType="fitStart"
This has worked in a fashion, but the ImageView element fills the rest of the screen and any elements placed under do not show.
Does anyone know of a way to trim the bottom of the space that the ImageView uses.
Hopefully this image can explain it better - I want to crop the empty area under the image (orange background).
I recommend you to use a RelativeLayout instead of a LinearLayout. You can then use android:layout_above="" and android:layout_below="" to ensure that you get the layout you want.

Android image scaling and alignment

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.

Categories

Resources