Develop Reference

How to stuff multiple imageViews into a single row (allow overlapping)?

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>

How to resize an ImageView within a given Layout in Android?

I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.
I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.
On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
Question:
How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.
I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.
Any help is highly appreciated. If you need any more information please let me know.
Below is the main content of my layout.xml, that is needed for this problem.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout_Top"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/blue" >
</RelativeLayout>
<LinearLayout
android:id="#+id/linearLayout_Big"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/LinearLayout_BigLeft"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/transparent" >
<ImageView
android:id="#+id/imageView_OrangeImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/black" />
<LinearLayout
android:id="#+id/linearLayout_BelowImage"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/blue_white_blue" >
<Button
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
<TextView
android:id="#+id/textView_BelowImageMiddle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#color/white" />
<Button
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/blue" />
</LinearLayout>
</LinearLayout>
<ScrollView
android:id="#+id/scrollView_BigRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#color/grey" >
</ScrollView>
</LinearLayout>
</LinearLayout>

android:adjustViewBounds="true"
This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.
AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead
get it from this site
OR
Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.
You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!
get it here

Extra Padding On Top Of My Images

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"
..../>

android layout scaling with fixed aspect ratio on different phones

I have a layout with two ImageView inside. Each image has a fixed aspect ratio, for example first image is 320x160, second is 320x320. Layout is aligned vertically. I want this two images be glued together and scale to fit one of the screen sides (width or height) and scale the other side proprotionally.
I tried to use scaleType=fitCenter, but the problem is that on different phones with different aspect ratio, images are not together, there is a black area between them.
It seems that I can not use layout:weight because the screens have different ratio (480x854 and 480x800) and I need my layout stays the same scaled proportion.
Any help is appreciated.
Here is my layout for now:
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView android:src="#drawable/im_menu"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.7"
>
</ImageView>
<ImageView android:src="#drawable/im_field"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:layout_weight="0.3"
>
</ImageView>
</LinearLayout>

You can use:
android:adjustViewBounds="true"
and set fill_parent to height for example
<ImageView
...
android:layout_height="fill_parent"
...>
adjustViewBounds for my details

You can use layout weight with relative values too. For example, if you want a field with 30% and other with 70%, just set the children views weight with 0.3 and 0.7, and don't specify width nor height in children.
It is explained in the developer guide (tip section):
developer guide - linear layout
Also you may have to use RelativeLayout instead of LinearLayout.

Need help with an ImageView always displaying incorrectly

My ImageView for some odd reason is always displaying a picture in the middle, left of my screen despite the xml code insisting it to be in the center.
I force portrait orientation in my app and here is my xml code for my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:gravity="center">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/image_view"
android:layout_weight="1.0"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/message"
android:gravity="center_horizontal"
android:padding="10dip"/>
<Button
android:layout_gravity="center_horizontal"
android:layout_width="fill_parent"
android:textStyle="bold" android:id="#+id/action_button" android:selectAllOnFocus="false" android:layout_height="100dip" android:text="Click here to preform actions"/>
</LinearLayout>
So, the page should display as Picture in the middle, extending the width of the screen, the text below that and the button below that. But for some reason, the picture is displayed as a small, box thumbnail in the middle left of the screen - any ideas on a workaround?

Assuming you want your picture centered inside a top box here, you don't want android:gravity="center", you actually just want android:scaleType set on the ImageView itself. "center" is the right value if you don't want scaling; centerInside is probably appropriate if you do (in which case you'll need to define some sort of dimensions or weight on your ImageView). For more on scaleType values, see the documentation.
You also don't want the image height set to fill_parent, or it will do that (which means no text below it, since the image fills the entire parent LinearLayout leaving no room for text). You probably want the ImageView's height set to wrap_content or some fixed height (e.g. 100dip).