I have the following android layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainTopLevel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="#+id/orbitImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:scaleType="fitStart"
android:src="#drawable/earthorbit"
android:padding="0dp"
android:background="#android:color/white"
/>
<TextView
android:id="#+id/positionDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minHeight="40dp"
android:layout_below="#id/orbitImage"
android:text="should appear below image"
/>
</RelativeLayout>
The image scales down quite a bit, but since the aspect ratio is maintained, it only takes up the top half of the screen.
The problem is that the image view itself has the original height, which takes the entire screen and the text never shows up.
(So the original image is about 620 X 430, the scaled image is about 250 X 200, but the image view is about 250 X 430)
Is there a way to get the size of the image view to exactly match the scaled size of the image?
It looks similar to this problem: Android ImageView size not scaling with source image, to which to the solution was to add android:adjustViewBounds="true" to the ImageView
Since the sizes are fixed by the image file in resources, then there is no reason why you should not be able to fix the height on your ImageView: android:layout_height="200dp"
Related
I am developing an android app thap show some photos in a listview.
This is layout for each item in listview.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/exam_page_item_imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"/>
</RelativeLayout>
My listview displays
I want to display imageview that fits the width of device. (fit width only)
Could you give me suggestion or have any idea to resolve this problem ?
Try this :
<ImageView
android:id="#id/imgview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter" />
android:adjustViewBounds = "true"
Will help when your images are larger than the imageview. It will not strech the image but will shrink it.
android:scaleType="fitCenter"
For times when your image is smaller than imageview, it will strech the image to the width of its parent.
:)
I am using an ImageView and I display gifs in it. The problem is for example this gif: http://media3.giphy.com/media/110U0ZUA6mPxqE/200.gif has different dimensions than this: http://media0.giphy.com/media/10YsmVhdN1S6wE/200.gif and I display the gifs in a listview. The gif which has more or less the same height and width is shown good. But the gif which has unreasonably different width and heigt shows only a part of the gif..
This is my Item:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/imageViewGif"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:minWidth="300dp"
android:visibility="visible" />
</LinearLayout>
<ProgressBar
android:id="#+id/progressBarSearchedGif"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>
To sum up, the question is how can I show the full gif in my imageview even when the dimensions of the gifs are different.
you can try removing android:scaleType="fitCenter" , and set android:adjustViewBounds="true" to your imageview.
If you always want the entire image to display in an ImageView, you have two choices. You can either stretch it to fit the size of the ImageView with this option:
android:scaleType="fitXY"
Or you can reduce the size of the image to fit the ImageView without changing its aspect ratio:
android:scaleType="centerInside"
Refer to the javadoc for details.
I have two ImageViews with the same image source inside LinearLayout, but why the second image is smaller than the first?
This is the source code:
<?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:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/background_landscape" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/background_landscape" />
</LinearLayout>
</RelativeLayout>
The error can be reproduced clearly on 800x1280 pixel resolution.
How can make both images have the same size with the second image cropped on the right side of the screen. (NOT SCALED DOWN)
... why the second image is smaller than the first?
Because the first image gets its real width due to wrap_content value of layout_width attribute. And the second image receives the rest width (width of layout minus width of first image) from LinearLayout, which is obviously smaller, than the real width of the image. That's why it gets scaled down.
How can make both images have the same size with the second image
cropped on the right side of the screen. (NOT SCALED DOWN)
You might use ScrollView, which allows children to go out of parent's boundaries.
Update: as mentioned by CommonsWare:
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="false"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/background_landscape" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/background_landscape" />
</LinearLayout>
</HorizontalScrollView>
Like beworker said the first image is getting its width due to the wrap_content and the second image gets the remaining available horizontal space.
Use android:layout_weight="1" in both ImageViews if you want them each to ocuppy half the available screen width
I am using a relativelayout to overlay to images. On all screen sizes so far that I have tested (from 2.7 to 10.1 inch) I always get white space on top of my image. In my IDE I always see that my relativelayout is causing the extra space on top and on the bottom of my image.
Why is that? I have set all height attributes to wrap_content and even added the adjustViewBounds attribute.
Note: You should know that my image is a lot bigger in size, meaning that there will be some sort of scaling.
Thanks for your tips!
Here is the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/bgf"
android:textColor="#000000"
android:textSize="25sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:paddingRight="5dp"
android:paddingLeft="5dp"
android:paddingBottom="5dp"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/cde"
android:contentDescription="#string/cde" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:src="#drawable/fgh"
android:contentDescription="#string/abc" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
I had the exact problem. After struggling for quite some time, I solved it by following this
and add the following to my program
android:adjustViewBounds="true"
It works perfectly
This is occuring as the image is scaled down to fit the area available without losing the image's aspect ratio. You are getting white space because the image first occupied the available width and according to the aspect ratio of the original image the height of the was brought down.
To get a clearer understanding, I suggest you to do the following :
Set the background color of the relative layout to some color
Now you can understand the space between the imageView and the relativelayout.
Once you have checked that on your device, Do the following change and try again
Set the attribute scaleType = "fitXY" in your imageView.
This will make the image to scale and occupy the complete area available to the imageView. (The aspect ratio of the original image will be lost in this case). Now you will come to know the amount of area the imageView occupied.
I suppose once you do this you can conclude that :
In the first run if you had set the background of relativeLayout as black, it won't be visible since the imageView occupies the entire area without leaving any gap.
In the second run the image will cover the entire height and width, although the aspect ratio was lost. Hence this ascertains that imageView does cover the width and height and no space is left, its the image's aspect ratio ie the problem
In case you arrive at a different result altogether please do inform, we can work it out
EDIT :
Please do remove the paddings you have given for imageView too
I would like to display an image with a border. The solution below works fine for some images, but not for others.
So far my best guess is, that it works fine for smaller images but not for large ones.
With a smaller picture, the solution displays the image nicely with a 2 pixel border. With a large picture the background is too wide in height.
I was testing this with an image that I scaled manually from say 2000 * 400 to 200 * 40. So it was the same image, only prescaled.
Any idea why the large pictures wont scale in the same way as the smaller ones?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center" >
<ImageView
android:id="#+id/testimage"
android:background="#000000"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/testimage2"
android:padding="2dip"
android:scaleType="fitCenter"
/>
</LinearLayout>
Remove the scaletype and use android:adjustViewBounds="true" for your Imageview.