Question

I’m relative new to android programming and layouts, and got stuck on creating a custom listview with text and icons. I have checked and tried out several examples, and tried to make my own list view out of those. I’m now at such a point that I don’t know what I should do to get this to work like I want it to.

Here’s my current result (1st row), and the 2nd row is – my ugly MsPaint edition – of how I’d like it to be. Text which is cropped if it reaches the magnify-glass icon, with the 2 other icons after it.

I tried quite a few different layouts to accomplish this, and I’ve been told and read that I should use a relative layout, as those have a better performance and other thingies (which I can’t recall right now).

[Edit]Update and summarized issue: I have been puzzling a bit more, but I think that my real problem is the fact that the textview does not know in advance that I will put more icons on the right of the magnify glass. This means that it does not ‘reserve’ any space for those icons, and just takes all the available space, and only leaves some for the magnify icon.[/Edit]

I have 3 xml files which contain my layout. Here’s my first file, which is simply the layout I start the screen with:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/LayoutWrap">

    <ListView
        android:id="@+id/my_listview"
        style="@style/List"/>
</LinearLayout>

The ‘xml-file’ of ‘my_listview’ (I know it’s a silly name :)):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 style="@style/myListItem"
 android:id="@+id/list">


    <TextView
    android:id="@+id/my_item_title"
    style="@style/myItemName"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_toLeftOf="@+id/my_item_detail"
    android:text="Name" />



    <ImageView
        android:id="@id/my_item_detail"
        style="@style/myImageItem"

        android:src="@drawable/ic_my_detail_unselected"
        android:contentDescription="Detail"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/my_item_delete"
    />


    <ImageView
        android:id="@id/my_item_delete"
        style="@style/myImageItem"

        android:src="@drawable/ic_my_delete_unselected"
        android:text="Delete my"
        android:layout_alignParentTop="true"
    />

        <ImageView
        android:id="@+id/my_item_copy"
        style="@style/myImageItem"

        android:src="@drawable/ic_my_update_unselected"
        android:text="Copy my"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@id/my_item_delete"
    />

</RelativeLayout>

In my ‘styles.xml’ are the styles defined, which don’t have any special properties. I think the only interesting thing is that I styled the text having a specific textSize (perhaps an ?android:LargeAppearance or so is better), and that I forced it on one line.

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <style name="WrapBoth">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

    <style name="WrapHeight">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

        <style name="LayoutWrap">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">fill_parent</item>   
        <item name="android:orientation">vertical</item>        
    </style>

            <style name="List" parent="style/WrapHeight"/>

    <style name="myListItem">
        <item name="android:padding">5dp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">?android:attr/listPreferredItemHeight</item>
    </style>

    <style name="myItemName" parent="style/WrapBoth">
        <item name="android:textSize">11sp</item>
        <item name="android:textStyle">bold</item>
        <item name="android:ellipsize">end</item>
        <item name="android:lines">1</item>
        <item name="android:scrollHorizontally">true</item>
    </style>

    <style name="myImageItem" parent="style/WrapBoth">

    </style>
</resources>

I’m already grateful for any help in advance! Meanwhile, I’ll work on my ‘buttonListeners’, I don’t expect those to be much of a trouble 🙂

Answer 1

I’ve been able to solve this problem eventually, after I got more used to android and how the layouts work. And perhaps someone else might stumble upon the same issue and might get some useful info out of this.

To solve this issue, I created a relativelayout which had the 3 images inside, and position the images as I’d like them to be. I gave my relativelayout the following properties:

<RelativeLayout
        android:id="@id/options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
         >

And the textview I wanted to stay on the left, I gave it the following properties:

<TextView
    android:id="@+id/item_title"
    style="@style/ItemName"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:text="@string/dummy_title" 
    android:layout_toLeftOf="@+id/options"/>

The styles I used, I kept those the same.
Using this way, the layout knows what space should be reserved for the 3 images.

It’s all a bit like in maths, stuff in brackets go first, and in android, stuff within layouts go first :).