Aadesh Kulkarni Aadesh Kulkarni - 1 month ago 10
Android Question

How to remove Irregularity in layout of items in listview in android?

This is how the cart screen looks like. The layout changes as per the length of item name.
I want to keep a fixed ratio for all columns in the listview and at the same time, keep the size of button fixed.
How to achieve this ?

Below is the Screenshoot and layout code:

Cart Screenshot]1

Layout file:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*"
android:background="#ffffff">
<TableRow>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/cartlist_layout"
android:orientation="horizontal">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/t1"
android:textStyle="normal|bold"
android:padding="5dip"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="@+id/t2"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/t2"
android:padding="5dip"
android:textStyle="normal|bold"
android:layout_centerHorizontal="true"
/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_toRightOf="@+id/t2"
android:id="@+id/t3"
android:textStyle="normal|bold" />

<Button
android:layout_width="5dp"
android:layout_height="50dp"
android:id="@+id/button6"
android:background="@drawable/delete1" />
</TableRow>>
</TableLayout>


Edit1: The Listview layout code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/fragment_mycart">
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/listView1" />

<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_margin="16dp"

android:clickable="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:background="@color/colorPrimary"
app:backgroundTint="@android:color/holo_orange_light"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"
app:srcCompat="@drawable/cart" />
</RelativeLayout>

Answer

You can use a LinearLayout as root view of the item instead of TableLayout. You can add weights to the views inside the LinearLayout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:background="#ffffff">

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:id="@+id/t1"
        android:textStyle="normal|bold"
        android:padding="5dip"
        android:maxLines="1"
        android:ellipsize="end" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/t2"
        android:padding="5dip"
        android:textStyle="normal|bold" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_weight="1"
        android:id="@+id/t3"
        android:textStyle="normal|bold" />

    <LinearLayout
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button6"
            android:background="@drawable/delete1" />

    </LinearLayout>

</LinearLayout>

Note : You may want to adjust the weights a bit.