Make ImageView take up all available vertical space and grow width to scale up/down proportionally in RelativeLayout

Question

I'm targeting API level 21 and min is also 21 (I support Lollipop only for now, it's a pet project to learn). I'm having problems with a custom ListView item layout. Here is my XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/test_list_item_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_marginEnd="10dp"
        android:background="#FF0000"
        android:src="@drawable/ic_test"
        tools:ignore="ContentDescription"/>

    <TextView
        android:id="@+id/test_list_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/test_list_item_icon"
        android:textSize="50sp"/>

</RelativeLayout>

And here is what it looks like (the icon's red background color is only to see how big the actual view is): list item current

I would like the image view to behave like the following: take up the available vertical space at the 'start'/left of the layout, have the image scale proportionally, and have the width be grown so that the image can be fully shown, like this (pardon my gimp skills):

list item wanted

Is it possible?

Did you try this http://stackoverflow.com/questions/19398828/how-proportionally-scale-any-image-of-imageview-with-width-equal-to-match-par — Krish, Jan 10 '15 at 14:15
With one of the layouts here the icon does get scaled up, but then the text view is invisible. Anyway, I know how to perform the resizing in code if need be, I would just prefer to do this in the XML. — wujek, Jan 10 '15 at 15:27
@Krish: silly me, it does work when I flip the width and height (that question is about width fitting, mine is about height), but as said, I asked about an XML solution. Thank you nonetheless. — wujek, Jan 10 '15 at 15:29
What about a custom imageview ? that also you can used in the xml file? — Krish, Jan 10 '15 at 15:50
Yes, but I was hoping maybe what I wanted were already supported by the stock layouts/widgets. In the end, I will probably use some code based solution if nothing else works. — wujek, Jan 10 '15 at 15:55
You need to set the `adjustViewBounds` attribute to true. However, there is a [bug](http://stackoverflow.com/questions/5403970/imageview-adjustviewbounds-does-not-work-with-layout-height-fill-parent) in the measuring logic in `LinearLayout` and `RelativeLayout` (and probably all the `ViewGroup` implementations in the framework) in that they use only the default measurement of their children and then force their own modification, without querying for the preferred dimensions given the constraints. You can solve this by hardcoding the `layout_height` to match what the parent's height would be. — corsair992, Jan 10 '15 at 17:37
@corsair992: The other stackoverflow post you linked to seems to be a minor modification of the problem I'm having, I must put some effort into my SO searches... It's a pity. I can't hardcode a height for the layout, as I actually don't know what it will be. The example code here is a simplification of my real layout, where I have 2 text fields one below the other to the right of the image view, and if the lower field has no value, it is GONE and the row's height gets smaller. It's a pity, but thanks for the explanation. — wujek, Jan 10 '15 at 20:34

Himanshu Agarwal · Answer 1 · 2015-01-10T13:02:57.140

Try this for your ImageView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


 <ImageView
        android:id="@+id/test_list_item_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerVertical="true"
        android:layout_marginEnd="10dp"
        android:background="#FF0000"
        android:src="@drawable/ic_test"
        android:adjustViewBounds="true"
        android:scaleType="fitXY"
        tools:ignore="ContentDescription"/>

    <TextView
        android:id="@+id/test_list_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/test_list_item_icon"
        android:textSize="50sp"/>

</RelativeLayout>

score 1 · Accepted Answer · answered Jan 11 '15 at 12:21

1

In the end I decided to create one more icon size, xxxhdpi, and it all looks nice now. Many thanks to @corsair992 for information about the bug in one of the comments.

answered Jan 11 '15 at 12:21

wujek

10,112
12
52
88

Arun Antoney · Answer 3 · 2015-01-10T13:28:16.117

HI wujek the reason for your problem is you set height as wrap content for your relative layout . so it will take the textview's height as its height .then image view will use this as its height .so change relative layout height to match parent. Please try and let me know thanks

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content" >

<ImageView
    android:id="@+id/test_list_item_icon"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_centerVertical="true"
    android:layout_marginEnd="10dp"
    android:adjustViewBounds="true"
    android:background="#ff0000"
    android:src="@drawable/ic_launcher"
    tools:ignore="ContentDescription" />

<TextView
    android:id="@+id/test_list_item_name"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_toRightOf="@+id/layout_1"
    android:gravity="center"
    android:text="bhsbd"
    android:textSize="50sp" />

This doesn't work. But I don't think this makes sense to change it to match parent. Anyways, if you color the text view's background you will see that it is actually much higher than the image view - you can also see it because there is 'padding' at the top and bottom of the image view - and I want the image view to grow to the text view. — wujek, Jan 10 '15 at 13:15
The image view is now the correct height, but the image is not scaled up and the width is as it was. Also, as I wrote in one of the other comments, you are using the ic_launcher icons, which are bigger than mine is and that's why it might look like your solution works. But as a proof: the launcher icons are square, wheres in your solution you will notice that the width of the image view is smaller than its height, which is not what I would like to achieve. This actually doesn't change anything except making the image view bigger, and the icon stays the same. — wujek, Jan 10 '15 at 13:41

M S Gadag · Answer 4 · 2015-01-10T13:45:22.607

try this

if u want to image should capture imageview size use background insted src. if red background is mandatory use another relative layout as parent for imageview.

hope it works fo u..

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/layout_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:background="#FF0000" >

        <ImageView
            android:id="@+id/test_list_item_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="10dp"
            android:background="@drawable/ic_launcher"
            android:adjustViewBounds="true"
            tools:ignore="ContentDescription" />
    </RelativeLayout>

    <TextView
        android:id="@+id/test_list_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/layout_1"
        android:textSize="50sp" />

</RelativeLayout>

edit 2

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <RelativeLayout
        android:id="@+id/layout_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/test_list_item_name"
        android:layout_alignTop="@+id/test_list_item_name"
        android:background="#FF0000" >

        <ImageView
            android:id="@+id/test_list_item_icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher"
            android:adjustViewBounds="true"
            tools:ignore="ContentDescription" />
    </RelativeLayout>

    <TextView
        android:id="@+id/test_list_item_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/layout_1"
        android:textSize="50sp"
        android:text=" text 5>" />

</RelativeLayout>

None of them work. The first one is better but only because the launcher xxhdpi icon is bigger than the one that I use (144 vs 96; yes, mine is too small, that's why I would like to scale it up), which is just a proof that no scaling is done. The second one anchors the image view to the top of the relative layout. — wujek, Jan 10 '15 at 13:21
Yes I tried edit 2. The result is: the image view does get the full height of the parent, but its width is not resized, and the icon stays at the same size. So, for a transparent background, there is not visual difference. — wujek, Jan 10 '15 at 15:19

score -1 · Answer 5 · answered Jan 11 '15 at 12:31

-1

Define a LineatLayout with weightsum.

<LinearLauyout 
----
    android:orientation="horizontal"
    android:weightSum="5">

<ImageView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1">

<TextView
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="4">

</LinearLayout>

you can adjust the weightsum as per your requirement.

answered Jan 11 '15 at 12:31

Hardik Chauhan

2,750
15
30

1

I don't want to define the weights myself, I want the layout to just scale as much as it needed. Anyway, I found a solution that I'm happy with. Thanks. – wujek Jan 11 '15 at 13:13

Make ImageView take up all available vertical space and grow width to scale up/down proportionally in RelativeLayout

5 Answers5