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.
Related
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 a image view inside of a relative view, as per code below
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/maintenance_banner"
android:layout_alignParentTop="false"
android:layout_margin="0dp"
android:padding="0dp"/>
</RelativeLayout>
what i don't understand is the gaps at the top & bottom, as I have set both height to wrap_content, the gaps shouldn't be part of the content, only the imageview it self isn't it? Or does it means the gaps are part of the image view it self? but i set the padding to 0. also, for some reason I can get ride of them by setting scale type.
The image probably has another aspect ratio then your imageView.
Try to set the android:scaleType to centerCrop or whatever else does work for you.
The default scale type is: FIT_CENTER and FIT_XY for buttons.
Hope this helps
EDIT: Sorry I haven't seen the wrap content.
From the screenshot it looks like you have other views below, are you including this layout file into another one?
Cheers
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.
Ok here is the problem...
I have a image background that need some text and additional graphics on it. The background image needs to be in the center of the screen and may not stretch. Here is what i need to do:
The problem is that i need to align the text to the background image.
I've tried to wrap it all into a relative layout - something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bg_image"
android:layout_centerInParent="true"
android:src="#drawable/member_card"/>
<TextView
android:layout_height="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:text="#string/membercard_info"
android:layout_marginTop="40dp"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignLeft="#id/bg_image"
android:layout_marginTop="200dp"
/>
</RelativeLayout>
This will not work since android adds additional padding to the image to avoid it from stretching.
Here is what happens in two different cases:
So how do I align the text to the background image?
I've solved this problem in the past in code by baking it all into one image,- but would like to do this in xml.
If you want to remove padding, you can use manually set it. However, if you want overlapping elements, you generally want to use FrameLayout. Look here: http://mobile.tutsplus.com/tutorials/android/android-sdk_frame-layout/
Set a gravity inside the frame layout to align it.
if you want an ImageView with additional layers drawn on top of that, see this thread: How to maintain multi layers of ImageViews and keep their aspect ratio based on the largest one?
There a padding around the image because you set the imageView size to fill its parent ( using match_parent )
You should try to set it to wrap its content :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
.../>
EDIT : If your picture is bigger that the screen size, you need to have it scaled keeping the aspect ratio.
To do this, use match_parent in vertical with a scaleType to FIT_CENTER
and keep the wrap_content setting for the width ( since we want the image view left/right bounds stuck to the image content )
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scaleType="fitCenter"
.../>
Is this better ?
I recently tried to position an imageview's x and y coordinates with no luck, it seems there is no way to do it in Gingerbread. I then decided to try out paddings and margins, but when I set them, it shrinks my imageview. I set a left padding of 250dp and image view became tiny. The layout_height and width are set to wrap_content. I'm not sure what's going on. Does anyone know why setting a padding/margin would shrink an imageview?
You're confusing margin and padding. Margin is the area outside of your view, while padding affects the content inside your margin.
If you set padding, then it is going to affect your available content area, and assuming you have a ScaleType set, it's going to shrink your image down to fit the available space.
Now, you say you've tried margins, but margins will do exactly what you're asking.
For example, if you wanted an ImageView placed 10dp from the top-left corner, you can do something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/my_image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:src="#drawable/my_image_id"
/>
</RelativeLayout>
Keep in mind that this places it 10dp with respect to the parent boundaries. If your parent layout also has padding, then that will affect your content placement.
if by shrink you mean the picture's ratio is messed then you should use
android:scaleType="centerInside"
this will prevent the ratio from changing