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.
Related
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
I am having two different circular images with different sizes.I have to place both in same place where the center point will be same.These two imageviews are in a relative layout.
please help..
When using a relative layout the only option to do that is to center both images in the layout, but if you start adding more elements, such as some text above/below any of the images, the result will not be as expected.
So my recommendation is to do it programatically. You can define a View and override the onDraw() method. Then you would load the bitmaps by means of two ImageView (or BitmapFactory). Then you paint it to the canvas at the desired location. To find out the center of each image you can use the Rect class that you obtain from the View method getDrawingRect after you apply the layout properties (so the size is calculated),, or by hand (create a Rect with de dimensions of the loaded Bitmap if you use BitmapFactory)
Other alterative is using LayerDrawable and define the image positions so they are centered (you need to know the image dimensions before hand).
Difficult to help without your layout XML code. Having said that, the moment you see "one on top of the other", you need to consider FrameLayout.
Use Framelayout, and set the background for the same with an image and then add images on top with setting layout gravity to left or right or middle.
In stead of creating a new sublayout, you can potentially have the ImageViews align on all sides and set the scaleType attribute to something like center:
<ImageView
android:id="#+id/circle_a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:scaleType="center"/>
<ImageView
android:id="#+id/circle_b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/..."
android:layout_alignTop="#+id/circle_a"
android:layout_alignBottom="#+id/circle_a"
android:layout_alignLeft="#+id/circle_a"
android:layout_alignRight="#+id/circle_a"
android:scaleType="center" />
This will give the circle_b ImageView actually the same dimensions as circle_a, but setting the appropriate scaleType will prevent the image from being stretched or misaligned.
//Edit: ups, I meant to say center... corrected.
I created a 9patch image and somehow it does only stretch vertically.
I tried other 9-patch images, but they have the same effect, whyle they work in other situations. So the 9patch should be fine I think.
This is my XML code:
..
<ImageView
android:id="#+id/bottombar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:contentDescription="#string/app_name"
android:src="#drawable/bar" />
</RelativeLayout>
Anybody had the same issue and know how to solve it?
Thanks
If you are sure that the height of your View is really taller than the current image (as the others have suggested) then you should change your ImageViews scaleType. The default is FIT_CENTER which does not stretch the image, you should set it to FIT_XY.
Also you may try to set your 9-png file as the background of your ImageView not as the src and I think this will also stretch the file.
Did you add a black dot to the top dead center as well as the left side center?
The issue may be in layout_width="match_parent" you have mentioned width to match parent this may be the reason of 9 patch image to stretch vertically. But for height you have written height="wrap_content" So it doesnt stretch in height
You have wrap_content specified for the height. Are you sure the content is tall enough to make the image stretch?
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 ?
I've got an ImageView that I've wrapped in a LinearLayout. The LinearLayout has a background drawable which is basically a border, so the effect is that my image has a border around it.
However no matter what I try, I get a big chunk of empty space underneath my image, which is pushing the lower border of my LinearLayout down. I want the LinearLayout to wrap tightly around the image with no padding (except for the 1sp that I specify)
This is how I've defined the two
<LinearLayout
a:orientation="vertical" a:layout_width="wrap_content"
a:layout_height="wrap_content"
a:gravity="top"
a:padding="1sp"
a:background="#drawable/heading_background">
<ImageView a:src="#drawable/photo"
a:layout_width="wrap_content"
a:layout_height="wrap_content"
a:scaleType="fitStart"/>
</LinearLayout>
Can anyone tell me what I'm doing wrong?
Thanks
I don't know how big your drawable is, but if it's really big* then your imageview tries to size itself to that format (wrap_content), but also is restricted by the actual space it's got. What happens exactly is a bit fuzzy for me, but with pictures that get resized (even when keeping aspect ratio like your fitStart does) I had to add the adjustviewbounds attribute: http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
It resizes the ImageView back to the format I'd think it would allready have, but in my case it was needed to get it to actually "wrap" the content....
*And I don't mean enormous, just "big enough so it has to be scaled down a bit)
You will want to set a:adjustViewBounds as true in your ImageView. This ensures that the layout will wrap tightly around the image.
android:adjustViewBounds="true"