For a layout in a prototype I need a button that overlays a section (an inner rectangle) of an ImageView with an image that is scaled-up preserving aspect ratio.
Is there some way to overlay the button over the imageview with defined margins, then scale up this combination preserving the margins? I tried putting both in an additional relativelayout, but the child elements did not scale within the relativelayout (like 2 UIViews might scale when scaling the parent UIView). I also tried hooking into the imageview using adjustViewBounds to shrink the imageview to the scaled-up image, but this didn't work either.
Here is the current layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/placeholderImage"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/placeholder"
android:padding="0dp"
android:adjustViewBounds="true"/>
<Button
android:id="#+id/btn"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/darker_gray"
android:onClick="show"/>
</RelativeLayout>
I ended up doing this programmatically using some of the answers here:
Find the position of a bitmap...
To summarize the approach:
in onCreate use a globalLayoutListener
in the onGlobalLayout callback, get the scale of the drawable using getImageMatrix, then getValues. Since I'm maintaining aspect ratio either MSCALE_X or MSCALE_Y will work.
get the bounds of the drawable, which will vary from the resource png's dimensions due to pre-scaling for target density. Since the resource png's size is known, compute this 'prescale' and multiply by the Matrix scale to get totalScale
apply totalScale to the button size and offsets using LayoutParams.
Related
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"
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.
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 this problem frequently, and I refuse to believe that it can't be solved without creating a custom layout:
How do you align a view with an ImageView that get scaled to match it's parent bounds but keeps the aspect ratio ( scale type is anything but fitXY ). I was under the assumption that f you set adjustViewBounds to true, the view bounds get adjusted to match the actual size of the image ("Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable."). But that is not the case. And it doesn't make and difference if the image has to get scaled up or down to fit its bounds.
Take a look at this layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
>
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/square" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/imageView1"
android:layout_alignTop="#+id/imageView1"
android:text="#string/hello_world" />
</RelativeLayout>
This layout looks like this:
As you can see the bounds do not get adjusted and the TextView is aligned to the incorrect bounds. I created a custom Layout to creates the proper bounds, but maybe I'm missing something and it should be possible using the standard layout features...
EDIT: to clarify: i'm looking for a way to align the TextView with the actual image. that is with the red square in the given example.
Ok, so it's been three years and you probably figured this out long ago. But you were halfway there when you specified adjustviewBounds=true. You just needed to change the ImageView layout width and height to wrap_content at the same time.
Your TextView IS aligning to your ImageView just as you requested. If you were to give your ImageView a background color you would see that it occupies the same area as your TextView. It's just that the actual image is centered within the view as you requested.
And you can continue to use scaleType=fitCenter or centerInside depending upon what you want. Neither will crop or stretch the image and your TextView will remain aligned.
What if you use - android:scaleType="centerCrop" on the ImageView?
The image will be cropped to cover the entire layout, but the aspect ratio will be maintained.
I have an image button with a background image .png of a circle. I am testing it on different resolution screens and it looks different on every one. Most of them distort the circle shape by stretching it on one dimension.
What is the correct way to handle this? I am familiar with the 3 density levels needed for the highest quality image, but I think the problem is with the layout type attributes on either the image button itself or the parent container.
Snippet from main.xml...
<LinearLayout
android:id="#+id/buttonArea"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="30dp">
<ImageButton
android:id="#+id/button1"
android:background="#drawable/button_inactive"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
removing the layout_weight attribute from the ImageButton fixed most cases, but not all. It seems that the padding is still changing the ratio of the circle. Scale types have no effect. Is it because my image is set as the background and not the src?
I think android:layout_weight="1" in your ImageButton is the cause of this. It will make your ImageButton the same size of your screen, no matter what size the screen is.
Try to remove that attribute. If that doesn't fix your problem, have a look at android:scaleType attribute
<ImageButton
android:id="#+id/button1"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_gravity="center"
android:background="#null"
android:src="#drawable/button_inactive"
android:scaleType="centerInside"/>
You can set the scaleType attribute of your ImageView, to one that keeps the aspect ratio of your image.
They all behave slightly different, so you'll have to use one that suits your needs (CenterInside is a good one to start with).
If this doesn't work, you can always specify set heigh/widths of your image (e.g. layout_width="128dp).