I have a LinearLayout (Horizontal) that I am using to display 3 ImageViews. When I first add the ImageViews the last one is shrunk because the images are too big to fit 3 across. Here is what my designer screen looks like:
Notice the third image is shrunk.
To fix this issue I set the following attributes on each ImageView.
width: 0dp
weight: 1
Here is how my images look after setting those attributes:
The problem I am running into is even though the images have been shrunk there is still space at the top and bottom as shown by the blue rectangle in the following image:
My question is, why is this extra padding there and how can I get rid of it?
Thank you
UPDATE - adding my layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#color/app_background_color"
android:contentDescription="#string/game_image_button"
android:gravity="center"
tools:context=".EasyActivity" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/ImageView02"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:contentDescription="#string/game_image_button"
android:src="#drawable/ruler200x200" />
</LinearLayout>
</RelativeLayout>
ImageViews support different ScaleTypes, the default is FIT_CENTER. here are the other options. FIT_CENTER means its going to start out with height and width equal to your image (what your images looked like in the first screen shot before you added weight). What I believe happened is that it then resized the width of the image based on your layout_weight, and maintained the image's aspect ratio by shrinking it to fit the new width. It left the height to be the original height and centered the result.
I think one of the other scale types would do what you want. Maybe CENTER or CENTER_INSIDE
You can use the following code
<Imageview.....
android:adjustViewBounds="true"
..../>
Related
I have a certain number of thumbnail images which I would like to lay out left-aligned but if the images don't fit on the screen I would like each image to overlap its left neighbour.
It would look like a cover flow or carousel view, but static.
The number of images to show in one row is known from the start and will not change. Also: No need for 3D effects. Just flat, horizontally stuffed, overlapping images.
I tried LinearLayout with negative margins: Can't determine how big a margin to set.
I tried PercentageRelativeLayout: Cannot achieve the left-aligned behaviour
Please show me how to do it programmatically.
A poor sketch of what I want:
I implemented Chris Parkers suggestion (although I have to do it programmatically, I test with axml):
<LinearLayout
android:id="#+id/loPreviews"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="#dimen/filePreviewHeight"
android:layout_height="#dimen/filePreviewHeight"
android:src="#drawable/img1"
android:adjustViewBounds="true" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="#dimen/filePreviewHeight"
android:layout_height="#dimen/filePreviewHeight"
android:src="#drawable/img2"
android:adjustViewBounds="true" />
</LinearLayout>
<!-- more images-->
</LinearLayout>
The problem with this solution is, that the images have different aspect ratios and they are cropped the wrong way or fit into the square with borders. No android:scaleType allows me to crop it right (preserve the full height and cut off only the right part).
That can be resolved by setting the layout_width of each ImageView according to each image's aspect ratio. Also, set the weights equal to the images' width for better distribution. The rightmost LinearLayout gets width wrap_content, in order to show the full image.
BUT this solution does not left-align the images if not all the horizontal space is used!
You could use LinearLayout as your parent layout. Then wrap every image in its own LinearLayout. Every Image container should have a weight value defined and they all should have the same value, so that the space in your parent layout is equally split into the same amount for every image container. Your images need to have width and height declared to prevent the ImageView from resizing the Image to fit the container layout. It's a very ugly solution but it works i guess.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp">
<!-- Repeat this for every image -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:src="#drawable/image1"/>
</LinearLayout>
<!-- Repeat this for every image -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:adjustViewBounds="true"
android:src="#drawable/image2"/>
</LinearLayout>
<!-- ... -->
</LinearLayout>
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
Alright so I'm trying to have an image set up such that:
the base of the image is lined up with the centre of the layout
the image scales with the layout to fit in background image
What I've done to achieve that is the following:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:weightSum="2"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9"/>
<ImageView
android:id="#+id/widget_icon"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_weight="0.1"
android:src="#drawable/widget_icon"/>
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
So I would expect the image to take up 10% of the space in the top half of the window no matter what the window height/width is set to but what I've come to realize is that it's not the case.. seems like the image doesn't scale down past its "real" size? I'm not entirely sure but I'm getting some really wonky and seemingly not linear scaling happening when it comes to widget_icon. Is this a known issue or am I doing something wrong here?
You should look into the ImageView ScaleTypes
It looks like you might also not understand how weight works
typically you would set width or height to 0dp and then set the weight. if you have 2 items and you set the weights to 1 they would both take up half of the respective width or height.. if you set one to 1 and the other to 2, then the one set to 2 would take up 2/3 of the layout's width or height and the one set to 1 would be 1/3
hope that helps
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
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:layout_x="0dip"
android:layout_y="0dip"
android:background="#drawable/mlview1" />
I'm using android emulator 2.2 . My image occupies the screen horizontally but vertically shows a large gap from the Bottom. The image size is 800X600 . should it be re-sized and then used?
Make sure that:
1. Both height and width on both parent and child is fill_parent
2. You are setting the src property and not the background one on the image
Note: You also don't need the layout_x nor layout_y