CODEWITHSUNDEEP
androidandroid-layoutandroid-relativelayout
wujek
wujek

Reputation: 11040

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

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?

Upvotes: 2

Views: 1574

Answers (5)

Hardik Chauhan
Hardik Chauhan

Reputation: 2746

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.

Upvotes: -1

wujek
wujek

Reputation: 11040

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.

Upvotes: 1

M S Gadag
M S Gadag

Reputation: 2057

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>

Upvotes: 0

Arun Antoney
Arun Antoney

Reputation: 4382

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

Upvotes: 0

Himanshu Agarwal
Himanshu Agarwal

Reputation: 4683

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>

Upvotes: 1

Related Questions