I have a vertical linearlayout that won't stretch beyond a certain limit.
This is the layout with centerCrop in the imageview
http://tinypic.com/r/20nm6s/5
This is the layout with no crop set (so it should be full width and huge)
http://tinypic.com/r/vzk7kw/5
So my thought is that there is some implicit max height that I'm not seeing in my layout but I can't see where it is, can you spot my error?
<?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="wrap_content"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/dropshadow"
>
<TextView
android:id="#+id/heading"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
/>
<ImageView
android:id="#+id/featuredimage"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:maxHeight="1000dp"
android:scaleType="centerCrop"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
/>
</LinearLayout>
</RelativeLayout>
The "implicit" max height of the layout is the height of its parent. Since you're using wrap_content on both layouts, that means the parent is effectively the screen area, minus whatever other views you're using (such as the TextView). Unless you place it in a scrolling container, such as a ScrollView, it won't ever exceed the size of the screen.
The reason your ImageView isn't showing up "full width and huge" when you remove the crop is because the default scaleType for an ImageView is fitCenter. This particular view is bounded by the layout's width, so it shrinks the image while maintaining aspect ratio.
Related
i'm trying to make ImageView take match_parent of RelativeLayout
like this picture :
when i run my app ImageView looks like that :
this my xml :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linealL"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/khdar">
<RelativeLayout
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_margin="10dp"
android:id="#+id/RelativeLayout02"
android:layout_width="wrap_content"
android:background="#color/colorGriviewBorder"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_margin="5dp"
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/gradient"
android:orientation="vertical" >
<TextView
android:text="GIF"
android:textSize="16sp"
android:layout_gravity="center"
android:textColor="#color/colorGriviewBorder"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dev"/>
</LinearLayout>
<ImageView
android:padding="8dp"
android:layout_below="#+id/LinearLayout01"
android:contentDescription="#string/app_name"
android:id="#+id/imageSelectTo"
android:scaleType="fitXY"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>
</RelativeLayout>
</RelativeLayout>
Change layout_width of ImageView to match_parent and add one new attribute to it: android:adjustViewBounds="true".
If you want to fit the ImageView width then You have to ignore height. And by default will not strech for you to keep aspect ratio, so you need to add another attributes for adjust view bounds. So lastly you will have your code chages as follows for an ImageView:
android:layout_width="match_parent"
android:adjustViewBounds="true"
The adjust View bounds will adjust to a particular height while keeping the aspect ratio.
More
Also to avoid future mistakes again in your code you have nested two RelativeLayout's which I guess is due backgrounds. If there is no need for that If do not care about space. The inner RelativeLayout View height and width should be set to match_parent!. Happy Coding!
Your ImageView's layout_width and layout_height are set to wrap_content instead of match_parent.
I use match_parent for height,but I don't want to use wrap_content or fill_parent for width. I want to set height as same as width. How can I do that in layout.xml?
Your question largely depends on whether you are in portrait or landscape.
If you are trying to make a layout width to match the height in portrait, then your layout will be going off screen, which does not seem possible in xml. And vice-versa, matching the height to the width in landscape would make the layout go offscreen as well.
If you are trying to make a square layout the same dimension as the smallest dimension of the screen, then a round about way to do that in xml is to make a shape drawable that is square, transparent and larger than your screen size. Then set the drawable to be an imageview inside a relativelayout and set your width and heights to the proper settings (match_parent or wrap_content). Then add views to the relativelayout as needed and reference them to the parent and not the image, making the new views reside "on top" of the imageview.
In portrait, the following relativelayout is square:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/square_draw" />
</RelativeLayout>
</LinearLayout>
In landscape, the following relativelayout is square:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/square_draw" />
</RelativeLayout>
</LinearLayout>
Also, make sure that adjustViewBounds is set to true. For some reason, this solution does not allow the image to grow larger than the screen size and it also uses more resources due to the overdraw.
I am struggling with newbie question.
I have a layout defined like this: (it is used as listview item)
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="horizontal" >
<ImageView
android:id="#+id/articleSmallImageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:adjustViewBounds="true"
android:scaleType="fitStart" />
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_weight="2"
android:orientation="vertical" >
<TextView
android:id="#+id/newsIntroText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:text="TextView"
android:textColor="#color/black" />
</LinearLayout>
</LinearLayout>
What i want to achieve is this:
Parent layout height to resize according to the highest child. In this case if TextView is higher then ImageView, ImageView aspect ratio should be intact, with max width possible, and if ImageView i higher then TextView, again, width should be maximal, and parent should have height as ImageView.
This is actually screenshot from my app, running on JB 4.3. and is looks as expected. But on ICS 4.0.3, 4.0.4 it looks like this.
I cannot see any reason why ImageVIew is not filling that blank space.
Help..
Try the value fitXY for scaleType. Btw unless I'm missing something, I think your LinearLayout1 is useless. Also, like YouYou said.. If a weight has been set in a vertical layout, the height should be 0dp and in a horizontal linear layout, the width should be set to 0dp for better performance.
I have a horizontal linear layout that contains 3 image views. Each image view contains the same image which is 200x200 pixels. Here is my layout xml:
<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="fill_parent"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/image200" />
</LinearLayout>
</RelativeLayout>
And here is what it looks like:
Notice how the third image from the left is resized I assume because there is not enough real estate to contain 3x 200 pixel wide images.
What I would rather happen is instead of shrinking only the last image, all three images are resized evenly so that they all fit across the screen. How do I setup my layout to evenly fit all three images?
Thank you
UPDATE - after changing my settings here is what things look like:
Notice that the border around the image view is still 200 px high. Why is this happening?
Set Width and height to match_parent for imageviews and set layout_weight=1 for all imageviews. Also set Attribute android:scaleType="fitXY"
This worked perfectly for me:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<ImageView
android:adjustViewBounds="true"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
Layout width when set to 0dp, layout width is what came into picture. And here layout width of the LinearLayout is match parent. So it will take the whole width, and as per the layout width of the images, they take space in the ratio of there weight.
make your three images a width of 0dp
and add them a layout_weight of 1
;)
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/image200" />
#JanTacci Regarding your follow up question "Note, however, that even though the image has been shrunk the actual layout height is still 200 px. Why is this happening?"
I just had the same issue and fixed it by adding this property to each ImageView:
android:adjustViewBounds="true"
I have a layout like this one:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabBar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#272727"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/BtnSlide"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#null"
android:src="#drawable/lin" />
<TextView
android:id="#+id/textView1"
android:layout_width="275dp"
android:layout_height="50dp"
android:gravity="center"
android:paddingLeft="20dp"
android:paddingRight="100dp"
android:text="HEADER"
android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="2.2dp"
android:src="#drawable/logo" />
The ImageView is placed to the right of the screen. But I'm facing an issue, the ImageView increases and decreases in height and width depending on the length of the TextView, how can I make this work properly, without the ImageView changing size?
The problem here is that your ImageView matches the size of your parent, that is your LinearLayout (with id tabBar).
That LinearLayout wraps the content on his height, so, it sums all "heights" of his contents. The LinearLayout will take the height of TextView + the height of the ImageButton. Then, the ImageView will match that height.
A solution depends on what you are trying to do, but you can try to:
Set a predefined height in your ImageView
Use a RelativeLayout instead of a LinearLayout and align all your views depending on each other
My suggestion is to set layout_weight to all the components so that their size is fixed regardless of their contents:) See here for more details