I had a Android application built in which I had 3 ImageViews placed horizontally across a LinearLayout, they were placed with a android:layout_width="0dp" and android:layout_weight="1" such that they had an even spread in the layout.
Now I have to switch to use a RelativeLayout (because I want to overlap another image and that can't be done with a LinearLayout) so I want to start with replicating the same effect of having the 3 ImageViews evenly spread/scaled across the parent layout, but I'm not sure how to achieve this.
I feel like I need to make use of the android:scaleType... maybe center crop:
Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
Which sounds good but I can't seem to get it to work right... Any thoughts on how I would achieve this even spread of ImageViews across my RelativeLayout?
Snippet of code right now:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:tag="circle"
android:layout_alignParentLeft="true"
android:layout_height="wrap_content"
android:adjustViewBounds="false"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:tag="square"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragcircle"
android:adjustViewBounds="false"
android:src="#drawable/square" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:tag="triangle"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/dragsquare"
android:adjustViewBounds="false"
android:src="#drawable/triangle" />
Note: I can't find a question with the same constraints as this one on SO. There are a number of questions like:
Android: how evenly space components within RelativeLayout?
and
android RelativeLayout, equal spacing?
But if you check out the details you'll see that they are people who have not considered the LinearLayout as an option for equal spacing and switching layout types ends up being the solution. I have, I was using it, but it does not work for me because I need to overlap an image:
Note the example, I have 3 ImageViews with basic shapes, but I also have a 4th ImageView (it starts hidden) which is overlapping the middle one. This is why I must use a RelativeLayout
I think you're going to want to go back to your original LinearLayout to meet all of your needs here.
If the size of your fourth image must match one of your existing image then either you'd want to create a resource that is a composite of the two images to swap to when it needs to be overlaid or replace your center ImageView with a RelativeLayout or FrameLayout that contains the ImageView. When you need to add the fourth image, add it to that layout.
Something like:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="circle"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="#drawable/circle" />
<FrameLayout
android:id="#+id/centerimagewrapper"
android:layout_height="wrap_content"
android:layout_width="0dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/dragsquare"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:tag="square"
android:src="#drawable/square" />
<ImageView
android:id="#+id/arrow"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/arrow"
android:visibility="invisible" />
</FrameLayout>
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="0dp"
android:layout_weight="1"
android:tag="triangle"
android:layout_height="wrap_content"
android:src="#drawable/triangle" />
You could hide the icon you want to place on existing images and keep your previous LinearLayout to achieve this. Each component of your LinearLayout would be a custom layout (inflated):
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
>
<ImageView
android:id="#+id/img"
android:layout_width="100dip"
android:layout_height="100dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:background="#android:color/transparent"
android:src="img1_src"
/>
<ImageView
android:id="#+id/imgOverlap"
android:layout_width="50dip"
android:layout_height="50dip"
android:layout_centerInParent="true"
android:scaleType="fitXY"
android:adjustViewBounds="true"
android:background="#android:color/transparent"
android:src="img2_src"
android:visibility="gone"
/>
</RelativeLayout>
It appears not possible to use "layout_weight" in a RelativeLayout.
You could also consider a GridView and set its number of columns; each item of the GridView would be the inflated layout above.
you could also do it programatically and tell them to be 33% of the screen width. Look at DisplayMetrics and the attributes of each ImageView if you want to achieve this.
Try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/dragcircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:scaleType="fitXY"
android:src="#drawable/circle"
android:tag="circle" />
<ImageView
android:id="#+id/dragtriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:src="#drawable/triangle"
android:scaleType="fitXY"
android:tag="triangle" />
<ImageView
android:id="#+id/dragsquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/dragtriangle"
android:layout_toRightOf="#id/dragcircle"
android:src="#drawable/square"
android:scaleType="fitXY"
android:tag="square" />
</RelativeLayout>
Related
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"
/>
I have a widget that uses PercentRelativeLayout to position 4 ImageViews inside it. I need the percent feature because I’m putting the images along the 4 sides of the box but with different relative sizes: the top child takes up ~60 percent of the height. I have previewed this layout by itself and it works great, no problem. This widget does wrap_content for w and h (w I don’t care about so much, but h is important, as you will see.)
I need this widget inside a larger layout. Now I have another parent RelativeLayout. This layout should contain the described widget at the top, then some buttons below it, in a mostly linear fashion: |--(group widget)--(text button)--(image button)—-|, where the ‘|’ indicates it should be snug to the parent. (The reason this is a Relative is that I want to float another view at the bottom right.)
So the goal is: this parent layout should be sized to some predefined size (basically the screen, although in my full code there is more above this level as well - but my problem occurs just isolating at this level), the 2 buttons should calculate their natural size and use it, then the PercentRelativeLayout at the top should take the ‘remaining’ height and use that for its children % sizing.
In practice, as the screenshot shows (from the layout preview tool) - the PercentRelativeLayout sucks up all the size.
In short, can you pin together a sequence of views in a relative layout and have a variable child? In iOS I would pin the first view to the parent top, the last view to the parent bottom, and everything to the thing above it, the buttons have their intrinsic size and then my mystery widget sucks up the remainder.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
xmlns:tools="http://schemas.android.com/tools"
android:animateLayoutChanges="true"
android:id="#+id/matchPlay">
<ImageView
android:src="#drawable/model_2"
tools:background="#954f47"
app:layout_heightPercent="59%"
app:layout_aspectRatio="100%"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView1"
android:scaleType="centerInside" />
<ImageView
android:src="#drawable/model_2"
tools:background="#ff0000"
app:layout_heightPercent="20%"
app:layout_aspectRatio="100%"
app:layout_marginTopPercent="2%"
android:layout_below="#id/avatarView1"
android:layout_alignParentLeft="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView2"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#00ff00"
app:layout_heightPercent="20%"
app:layout_aspectRatio="100%"
app:layout_marginTopPercent="2%"
android:layout_below="#id/avatarView1"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView3"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#0000ff"
app:layout_heightPercent="22%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView2"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView4"
android:scaleType="centerCrop" />
</android.support.percent.PercentRelativeLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/matchplay_add_shout"
android:id="#+id/shoutButton"
android:enabled="false"
android:layout_centerHorizontal="true"
android:layout_below="#id/matchPlay" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/submitButton"
android:src="#drawable/matchplay_submit"
android:layout_centerHorizontal="true"
android:layout_below="#id/shoutButton"
android:minWidth="50dp"
android:contentDescription="#string/matchplay_send_contentdesc" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/passButton"
android:src="#drawable/matchplay_pass"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/matchplay_pass_contentdesc" />
Edit: I updated this code to not use alignParentBottom, thinking that was the key issue; I instead used alignParentTop. No change. ALso tried using vertical LinearLayout at the root. :(
By the way the image group widget will be a PercentRelativeLayout subclass, so if I need to make some magic happen with some overrides there, I can do that.
I learned some things about the RelativeLayout beast:
Child size and location seem to go hand in hand. There's no attempt to compute sizes separately from location.
RelativeLayout doesn't seem to do second pass for measuring. It's quite greedy: when it reaches a given child to decide where to put it, it makes a decision then and there. Maybe there are some situations it does, I'm not sure, but they're probably not common.
Last, the thing that ties it all together: how you specify the relations matter, because RL computes a dependency order for width and height; since things that are depended on are sized first, using a greedy property from above, if that child does not have a fixed size it will suck up whatever remaining space the RL offers it. Therefore, since I arranged things to depend on what's above and matchPlay was the root, therefore matchPlay was sized first.
Thus I just made the dependencies backward, where things were pinned to the bottom, thus matchPlay was last in the dependency chain. The strange but functioning XML is below. Very strange aspect of implementation, and further the documentation does not state this lack of associativity in the relative layout_ attrs. (Clearly it should, because it can greatly affect how you use the relative attrs!)
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#f2dce8ff"
android:layout_marginTop="8dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/matchplay_add_shout"
android:id="#+id/shoutButton"
android:layout_above="#+id/submitButton"
android:layout_marginTop="15dp"
android:layout_centerHorizontal="true"
android:enabled="false" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/submitButton"
android:src="#drawable/matchplay_submit"
android:minWidth="50dp"
android:contentDescription="#string/matchplay_send_contentdesc" />
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/shoutButton"
xmlns:tools="http://schemas.android.com/tools"
android:animateLayoutChanges="true"
android:id="#+id/matchPlay">
<ImageView
android:src="#drawable/model_2"
tools:background="#954f47"
app:layout_heightPercent="60%"
app:layout_aspectRatio="100%"
app:layout_marginBottomPercent="2%"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView1"
android:scaleType="centerInside" />
<ImageView
android:src="#drawable/model_2"
tools:background="#ff0000"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView1"
android:adjustViewBounds="false"
android:id="#+id/avatarView2"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#00ff00"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_below="#id/avatarView1"
android:layout_alignParentRight="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView3"
android:scaleType="centerCrop" />
<ImageView
android:src="#drawable/model_2"
tools:background="#0000ff"
app:layout_heightPercent="23%"
app:layout_aspectRatio="100%"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:adjustViewBounds="false"
android:id="#+id/avatarView4"
android:scaleType="centerCrop" />
</android.support.percent.PercentRelativeLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/passButton"
android:src="#drawable/matchplay_pass"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:contentDescription="#string/matchplay_pass_contentdesc" />
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
I am keeping three image views with 3 different images of the same height. My code is as mentioned below..
<LinearLayout
android:id="#+id/LinearLayout06"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="left" android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/stopServiceButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:paddingRight="5dp"
android:src="#drawable/stop_service_button_selector" />
<ImageView
android:id="#+id/calibrateButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:padding="5dp"
android:src="#drawable/calibrate_button_selector" />
<ImageView
android:id="#+id/doneButton"
android:layout_width="wrap_content"
android:layout_height="80dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#null"
android:padding="5dp"
android:src="#drawable/done_button_selector" />
</LinearLayout>
In large layouts i was able to manage these images(i dont have to use weight parameter for it) but for small layout i have to keep the weight parameter as one to fit them in the screen, but then the height changes as shown below.
Can someone help me out in this ?
the android:adjustViewBounds="true" preserves the aspect ratio of the images. since the width is to wrap content, the height gets reduced accordingly.
To reduce the blurring effect that you mentioned in your comment, you can try setting android:filter the attribute to the drawables.
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).