Develop Reference

ImageViews in LinearLayout - messing up the scale

I been struggeling with this for a whole day now. I want 3 Image Views in my LinearLayout. As you can see the scale is not correct at all. All of my icons have a size of 24x24 px. Been experimenting with different propertiers inside of my ImageViews.
Here is my XML-code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginTop="45dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/tList"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_home_black_24px" />
<ImageView
android:id="#+id/ist"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_help_black_24px"
/>
<ImageView
android:id="#+id/ations"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:background="#drawable/ic_settings_black_24px"
/>
</LinearLayout>

I pasted your code on a layout file in my Android Studio, an it seems that the weight and scaleType attributes are messing up your view. This is how I declared a 24 by 24 ImageView:
<ImageView
android:id="#+id/ations"
android:layout_width="24dp"
android:layout_height="24dp"
android:background="#drawable/your_drawable"
/>
You can check full doc about weight here, but what is basically saying is that if you put weight on several attributes under a LinearLayout, you're adding a priority to grow when the screen does. Since the 3 ImageViews have 1 as weight, they grow with the same priority, and since the fill_parent is being called also, they will force to fit in the parent layout params, looking oddly.

Change all of your ImageView's width to "0dp" and replace background to src like this :
<ImageView
android:id="#+id/ations"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:scaleType="fitXY"
android:src="#drawable/ic_settings_black_24px"
/>

android -- hide part of linear layout off-screen to the right

I have two linear layouts inside a parent linear layout. all horizontal. I want all of l_child to show and part of r_child to show; while the rest of r_child will be off-screen to the right. How do I accomplish that?
<LinearLayout
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/l_child"
android:orientation="horizontal" >
</LinearLayout>
<LinearLayout
android:id="#+id/r_child"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

Try giving the parent LinearLayout a negative right margin.
android:layout_marginRight="-50dp"
Other solution might be to put the parent LinearLayout inside a ScrollView, and set the widths of children layouts to the desired width. In this case, you'll be able to scroll the right layout back to the screen.

Layout weights are only for distributing layouts to fill a view, so no overflowing can be done this way.
Assigning layout_width with density independent pixels will result in varied success for different size devices.
So I believe you would have more success adding your layouts programmatically based on the screen size.
See this post for getting the screen width:
Get screen dimensions in pixels
Once you have the screen width, you can assign the inner-layout dimensions by pixels (with LinearLayout.LayoutParams), calculated as percentages of the screen width.
If you want the left layout to take up 80% of the screen, use .8*screen_width for the size, and if you want the right layout to then overflow by 20% of the screen, use .4*screen_width for that size.

Do you mean something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_weight="1"
android:orientation="horizontal"
>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="70dp"
android:layout_gravity="center_horizontal|top">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView1"
android:src="#drawable/ic_launcher"
/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView3"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="70dp"
android:layout_gravity="center_horizontal|top">
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView1"
android:layout_marginRight="200dp"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView2"
android:src="#drawable/ic_launcher"/>
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
android:id="#+id/imageView3"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</LinearLayout>

You can try using ViewPager, but I don't know if you can get the "bleeding canvas" effect that you're describing using that UI component.
EDIT: Maybe you can try using Gallery widget.
Is this what you're describing?
http://www.bangkokpost.com/media/content/20110915/309542.jpg

Picture is too big to see all views

I have a PizzaOverview.
XML:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
If the picture is too big the date is invisible.

add scroll view to your layout or fix the size of imageview
add the scroll view to your layout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<TextView android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="" android:id="#+id/pizza_tv" android:gravity="center_horizontal" android:textSize="15pt"></TextView>
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
<RatingBar android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_rb" android:layout_gravity="center_horizontal"></RatingBar>
<TextView android:layout_height="wrap_content" android:text="" android:id="#+id/pizza_date" android:gravity="center|center_horizontal" android:layout_width="fill_parent"></TextView>
<RelativeLayout android:id="#+id/relativeLayout2" android:layout_width="fill_parent" android:layout_height="fill_parent">
<Button android:text="close" android:layout_height="wrap_content" android:id="#+id/pizza_bt" android:layout_alignParentBottom="true" android:layout_width="fill_parent"></Button>
</RelativeLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

Ensure that the images you supply to the activity are the correct resolution and size.
Also make sure that you have separate layouts for separate screen size categories.
Read this section of the android documentation for more details on layouts and managing different screen sizes. It tells you the basics you'll need.

You could place your image with the rating bar and the text below it in a RelativeLayout. Give a marginBottom to your RelativeLayout equal to the height of your Button. Then place your text, give it an id and add android:layout_alignParentBottom="true". Set the height of the image to fill_parent and add attribute android:layout:below="id_of_text".

You can as the other answer states make the screen scrollable. But if your content is dynamic (and depending on device it is arguable to say you content will ALWAYS by dynamic) you should make sure the that ImageView has it's bounds set correctly.
In the source code you have:
<ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:id="#+id/pizza_iv" android:src="#drawable/icon" android:layout_gravity="center_horizontal"></ImageView>
You should instead have:
<ImageView android:layout_height="0dp"
android:weight="1"
android:layout_width="match_parent"
android:id="#+id/pizza_iv"
android:src="#drawable/icon"
android:layout_gravity="center_horizontal"
android:scaleType="centerInside"/>
The extra attribute of weight will make your view fill any available space along the orientation set in the bounding LinearLayout. This is dependant on the weight of other views along that orientation (as the other views have no weight value in this case it will fill all space up until the edge of your fixed views).
The extra attribute of scaleType="centerInside" will make your image sit in the center of the bound's you have suggested (which are the width of the screen and all available space vertically) without ever growing large enough to overlap the bounding container.
When using ImageView you should keep in mind that the ImageView is a bounding container for an Image. It can be as large or as small as possible but is only a mechanism for telling the UI where to place an image. The scaleType attribute is what you use to say how you want the image placing within this bounding countainer. Using "wrap_content" on an ImageView isn't effective and can lead to trouble later in the design (especially when considering different devices).

Android - Two ImageViews side-by-side

I am trying to create an Activity for an Android app with two imageViews aligned side-by-side. my current layout config is as follows:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:paddingTop="15dip" android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:scaleType="fitStart"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
The first image will be a square (lets say 100x100) and the second image will be rectangular (300x100) - and I want them to be aligned next to each other but always be scaled to fit within the width of the device - is this possible just with layout config?
The current config just shows the first image the entire width (and almost height) of the screen and the second image is not shown at all. I have tried changing wrap_content with fill_parent and hardocding widths but that has just resulted in the both images being shown but the first image on top of the second image (both anchored left).
Thanks
UPDATED AGAIN:
I have updated my layout to look like this now including the ScrollView as recommended but no joy:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:gravity="top"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<!-- Header for activity - this has the countdown in it -->
<ScrollView android:id="#+id/ScrollView01" android:layout_height="wrap_content" android:layout_width="fill_parent">
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:gravity="right"
android:background="#drawable/dark_bg" android:orientation="horizontal">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="2"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/daysText"/>
</LinearLayout>
</ScrollView>
<!-- main body for the rest of the info -->
<LinearLayout android:orientation="horizontal" android:gravity="center"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:background="#drawable/light_bg">
</LinearLayout>
</LinearLayout>
Using the layout_weight as suggested has given both the images the right ratios and appear to be scaled perfectly, however, I am still having the problem whereby they are both anchored to the far left of the screen, so the first image is actually overlaid on top of the second image, rather than having them side by side.
Below is a screenshot of the Eclipse display:

try using layout_weight for both of the ImageView components. So something like:
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingTop="15dip"
android:paddingBottom="15dip"
android:background="#drawable/dark_bg">
<ImageView android:id="#+id/numberDays"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:src="#drawable/counter_01" />
<ImageView android:src="#drawable/counter_days"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:scaleType="fitStart"
android:layout_weight="1"
android:id="#+id/daysText"></ImageView>
</LinearLayout>
i added android:layout_weight="1" to each of them. Read up on layout_weight for LinearLayout definitions, it's very useful!

You can try creating a horizontal ScrollView with a layout_width of a pixel value greater than the two ImageViews combined, rather than fill_parent. Then place your LinearLayout inside of it.

ImageView Weight Inverse Scaling

Hey, I'm having some trouble with ImageView in my XML file.
My layout is as follows:
<LinearLayout android:id="#+id/row"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView android:id="#+id/image"
android:src="#drawable/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="fitXY"/>
<TextView android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello"
android:layout_weight="4"/>
</LinearLayout>
Basically, what I am trying to achieve in something similar to the android contact list, where there is a picture (taking up about 1/5 width of the screen), followed by a text box with information in the other part of the screen. I tried to use weight to make the TextView more important, and thus receive more space, but that doesn't seem to what.
What's even stranger is that the scale seems to be working in reverse. If I set the weight of the ImageView to something high, like 10, it scales the image down.