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
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've read all there is to read in terms of supporting different screen desnities. And, I have supplied proper variations of the images being display to appropriate folders. However, I am bewildered by something.
The documentation for ImageView says that setting android:layout_width and android:layout_height to "fill_parent"/"match_parent" will result in the image stretching to fill the screen. (This seems necessary since not all screen densities offer the same size/pixel count screens and I don't want those extra few pixels to result in padding on the bottom of the screen)
This seems to work any other time, but is not working for me when the ImageView is placed inside of a Horizontalscrollview and the width of the image is longer than that of the screen.
My code below:
(The activity is set to landscape in my manifest)
<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/hscrollview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp"
android:fadingEdge="none"
android:scrollbars="none"
android:overScrollMode="never" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="0dp"
android:fadingEdge="none"
android:scrollbars="none"
android:overScrollMode="never" >
<ImageView
android:id="#+id/MapImageView"
android:src="#drawable/map"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</RelativeLayout>
</HorizontalScrollView>
Edit: I replaced :src with :background to no effect.
This is the effect I get on devices like tablets. Ideally I want the image to fill the entire screen, like it does, below, on a phone with typical 480x800 resolution or the like.
Try using android:scaleType="fitXY" in your ImageView.
This is working for me:
<ImageView
android:id="#+id/main_imageView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="42dp"
android:alpha="0.5"
android:src="#drawable/img_alchemy2" />
It is a portrait image that fills the screen in portrait mode, and in landscape it fills it vertically without stretching it horizontally.
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"
..../>
I have the following XML layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/IVLEFT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:background="#ff0000"
android:padding="1dp"
/>
<ImageView
android:id="#+id/IVRIGHT"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/IVLEFT"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/IVLEFT"
android:layout_alignTop="#+id/IVLEFT"
android:src="#drawable/shadow_pages"
android:background="#00ff00"
android:padding="1dp" />
</RelativeLayout>
I would expect my layout to have 2 ImageViews - one to the left, one to the right.
But what actually happens is:
During runtime I set IVLEFT's image to a large image (say 1024X768) - and it covers all of my layout, abandoning IVRIGHT (I cant even see it)
Any ideas?
It is because your RelativeLayout is wrap_content in width. it takes all the space it needs even if it is outside the screen.
Use fill_parent instead.
Its because you have given first ImageView width and height to fill_parent. So it will acquire the whole layout. Then also, your layout depends on your first image, because if you give a large image to the first Imageview, it will take the whole layout.
If you want to show 2 images side by side, try using linearlayout with layout_weights to two imageViews.
Also give your RelativeLayout width and height to fill_parent
Change the RelativeLayout width to fill_parent
There is no ImageView with the id = "#+id/magazineImageView" in your xml, if you mean "#+id/IVLEFT", then the 1st image itself is occupying the whole Screen width, hence you cannot see the 2nd image.
If you want to see the 2nd image make both the ImageView width as wrap_content or some hard coded value
More importantly when you are using any View id as a reference dont use + sign in the id. + sign is used to define an id for a view, for the first time
use:
android:layout_toRightOf="#id/magazineImageView"
Try this::
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|center_vertical">
<ImageView
android:id="#+id/IVLEFT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#ff0000"
android:padding="1dp"
android:src="#drawable/ic_launcher"/>
<ImageView
android:id="#+id/IVRIGHT"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/IVLEFT"
android:layout_alignParentRight="true"
android:layout_alignBottom="#+id/IVLEFT"
android:layout_alignTop="#+id/IVLEFT"
android:src="#drawable/ic_launcher"
android:background="#00ff00"
android:padding="1dp" />
</RelativeLayout>
<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