I am trying to place two image views side by side with the one on the left having a height matching the one on the right. The problem is, the sizes of the image view files are much larger than how they appear on the screen. When I assign wrap content to the one on the right, it takes up all of the space, though I want it to be scaled so that there is enough room for the one on the left. I don't know if this makes sense, but here is my code.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/boombox"
android:id="#+id/boombox"
/>
<ImageView
android:id="#+id/play_stop_button"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_toLeftOf="#id/boombox"
android:scaleType="fitXY"
android:src="#drawable/play_stop_button
/>
</RelativeLayout>
First try to put
android:layout_width="wrap_content"
android:layout_height="150dp"
in both imageviews to have a fixed image height
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
I am working on a android card view. Here is the code that I have now:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:orientation="vertical"
android:background="#drawable/drawable_card_bg">
<ImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/test_img" />
....
and the UI looks like:
However this is not what I am looking for. I want the image to be placed on top of the card, with the top, right, left margins to be 10dip from the background card boarder.
Meanwhile, I want to keep the ratio of the image, so don't want to hard-code the width/height of the image view. I want the image width to fit the width of the background card, and the height should be adjusted according to the width.
How should I change the layout parameters to achieve this?
Thank you
Add android:adjustViewBounds="true" to your ImageView in xml in order to let the ImageView adjust its bounds.
It's very easy......... please do this thing. Replace your imageview code using this one
<ImageView
android:id="#+id/photo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:src="#drawable/test_img" />
If my answer will help you then support this.
Thanks!!!
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"
..../>
In my layout I have a FrameLayout which contains 2 ImageViews. One ImageView is shown at a time and the change between ImageViews is done through 3D Rotation animation.
<FrameLayout
android:id="#+id/animContainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<ImageView
android:id="#+id/picture1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/malware" />
<ImageView
android:id="#+id/picture2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:src="#drawable/browsing"
android:visibility="gone" />
</FrameLayout>
The problem with my xml is that it leaves some empty space above and below the ImageView in the FrameLayout even though I have not specified any top or bottom margin/padding to it.
The ImageViews I'm using in the FrameLayout are of equal heights.
I want the height of the FrameLayout to be exactly same as the height of the ImageViews within it.
How do I achieve this?
Thank you.
EDIT:
Another thing I have observed is that in landscape mode the empty space is added to the left and right of the ImageViews and the width of the FrameLayout does not match with the width of the ImageViews.
How can have the FrameLayout width and height same as that of the ImageViews?
I think you need to use android:adjustViewBounds="true" -> in your ImageView's ... This will resize the imageview to the image inside and hopefully fix your problem.
http://developer.android.com/reference/android/widget/ImageView.html#attr_android:adjustViewBounds
I think I found a solution, in mine I had to place an image in the right hand corner for the delete icon but had to jump through hoops to get the edge of the X to line up with the top of the photo. fitCenter would create whitespace on top and bottom. fitStart worked like a charm.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/front_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:scaleType="fitStart"
android:adjustViewBounds="true"
android:onClick="imageEditClicked"
android:src="#drawable/myimage"/>
<ImageView
android:id="#+id/front_right_x"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#color/white"
android:layout_gravity="end|top"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/com_facebook_tooltip_black_xout" />
</FrameLayout>