CODEWITHSUNDEEP
androidandroid-layoutlistviewandroid-listview
Fearghal
Fearghal

Reputation: 11407

Android custum listview layout issue

I am struggling to get my custom listview row layout to handle differing image sizes whilst keeping its overall shape correct.

I want to achieve the following Listview row with differing images of differing sizes. Each row should be of identical size by scaling its images to a specific size.

My desired row layout enter image description here

My code (note i have tried several different methods but all either don't scale correctly (ie one image bigger than the other when it shouldn't be) or they dont' stay in correct position relative to one another.

<ImageView
    android:id="@+id/iv_logo"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:src="@drawable/logo1" />

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_weight="1"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/league_name"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginRight="6dip"
        android:layout_weight="1"
        android:text="Text" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv_image1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginRight="6dip"
            android:layout_weight="1"
            android:src="@drawable/image1" />

        <ImageView
            android:id="@+id/iv_image2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginRight="6dip"
            android:layout_weight="1"
            android:src="@drawable/image2" />

        <ImageView
            android:id="@+id/iv_image3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_marginRight="6dip"
            android:layout_weight="1"
            android:src="@drawable/image3" />
    </LinearLayout>
</LinearLayout>

What this yeilds is several prpoblems, spaces around each imagview or textview and not scaling to same size as designed in the xml layout... enter image description here

Upvotes: 0

Views: 94

Answers (3)

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

// Try this way,hope this will help you...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher"
        android:layout_weight="0.25"
        android:scaleType="fitXY"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.75"
        android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:gravity="center"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher"/>
            <ImageView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher"/>
            </LinearLayout>
        </LinearLayout>
</LinearLayout>

Upvotes: 0

araut
araut

Reputation: 576

I used RelativeLayout and following is the solution. You will have to edit the xml little bit as I used background colors. Anyways, check whether this works; if not I will start looking into LinearLayout solution:

<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="128dp"
    >
<ImageView
android:id="@+id/iv_logo"
android:layout_width="128dp"
android:layout_height="128dp"
android:background="@color/blue" 
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:layout_toRightOf="@id/iv_logo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="@color/red"

>
<TextView
    android:id="@+id/league_name"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@color/orange"
    android:textColor="@color/white"
    android:text="Text" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="3"
    android:orientation="horizontal"
    android:background="@color/black"
     >
   <ImageView
        android:id="@+id/iv_image1"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/gray" />

    <ImageView
        android:id="@+id/iv_image2"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/yellow" />

    <ImageView
        android:id="@+id/iv_image3"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@color/green" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Upvotes: 2

Al&#233;cio Carvalho
Al&#233;cio Carvalho

Reputation: 13647

try with this:

<ImageView
    android:id="@+id/iv_logo"
    android:layout_width="0px"
    android:layout_height="match_parent"
    android:src="@drawable/logo1" android:layout_weight="3"/>

<LinearLayout
    android:layout_width="0px"
    android:layout_height="match_parent"
    android:orientation="vertical" android:layout_weight="7">

    <TextView
        android:id="@+id/league_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginRight="6dip"
        android:layout_weight="1"
        android:text="Text" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal" android:weightSum="3">

        <ImageView
            android:id="@+id/iv_image1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="6dip"
            android:layout_weight="1"
            android:src="@drawable/image1" />

        <ImageView
            android:id="@+id/iv_image2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="6dip"
            android:layout_weight="1"
            android:src="@drawable/image2" />

        <ImageView
            android:id="@+id/iv_image3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginRight="6dip"
            android:layout_weight="1"
            android:src="@drawable/image3" />
    </LinearLayout>
</LinearLayout>

Upvotes: 1

Related Questions