HorizontalListView not working

Question

I need a HorizontalListView in my app and as there is no such existent widget in Android SDK, I am using this one instead of building one on my own. But the problem is the list item is not maintaining its size and taking the whole width of the screen.

Here's the layout of the list item:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="106dp"
    android:layout_height="140dp"
    android:background="@drawable/list_bck" >

    <CheckBox
        android:id="@+id/mail_marker"
        android:layout_width="25dp"
        android:layout_height="25dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_marginBottom="4dp"
        android:layout_marginRight="5dp" />

    <View
        android:id="@+id/h_rule1"
        android:layout_width="100dp"
        android:layout_height="1dp"
        android:layout_above="@+id/mail_marker"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="2dp"
        android:background="#CDC1C5" />

    <TextView
        android:id="@+id/date_txt"
        android:layout_width="40dp"
        android:layout_height="15dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:text="FEB 4"
        android:textSize="11dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/time_txt"
        android:layout_width="50dp"
        android:layout_height="12dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/date_txt"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:text="12:34 PM"
        android:textSize="9dp" />

    <ImageButton
        android:id="@+id/flag_mail"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginRight="5dp"
        android:layout_marginTop="4dp"
        android:background="@android:color/transparent"
        android:scaleType="fitXY"
        android:src="@drawable/star" />

    <ImageView
        android:id="@+id/read_unread"
        android:layout_width="22dp"
        android:layout_height="22dp"
        android:layout_alignParentTop="true"
        android:layout_marginRight="2dp"
        android:layout_marginTop="4dp"
        android:layout_toLeftOf="@+id/flag_mail"
        android:background="@android:color/transparent"
        android:scaleType="fitXY"
        android:src="@drawable/mail_unread" />

    <TextView
        android:id="@+id/count_txt"
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:layout_alignParentTop="true"
        android:layout_marginRight="1dp"
        android:layout_marginTop="10dp"
        android:layout_toLeftOf="@+id/read_unread"
        android:text="3"
        android:textSize="8dp"
        android:textStyle="bold" />

    <View
        android:id="@+id/h_rule"
        android:layout_width="95dp"
        android:layout_height="1dp"
        android:layout_below="@+id/time_txt"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="2dp"
        android:background="#CDC1C5" />

    <TextView
        android:id="@+id/sub_txt"
        android:layout_width="95dp"
        android:layout_height="16dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/h_rule"
        android:layout_marginLeft="6dp"
        android:layout_marginTop="2dp"
        android:ellipsize="middle"
        android:singleLine="true"
        android:text="Subject Line goes here"
        android:textSize="13dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/sender_txt"
        android:layout_width="92dp"
        android:layout_height="15dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/sub_txt"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="2dp"
        android:ellipsize="middle"
        android:singleLine="true"
        android:text="Name of sender"
        android:textSize="11dp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/mail_txt"
        android:layout_width="92dp"
        android:layout_height="24dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/sender_txt"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="4dp"
        android:layout_marginTop="2dp"
        android:ellipsize="middle"
        android:maxLines="2"
        android:text="This is the body of the mail."
        android:textSize="9dp" />

</RelativeLayout>

I have used absolute sizes after seeing that fill_parent or wrap_content aren't having any effect but no luck, still the item is stretching to the width of the screen.

Below is the code for the adapter I am using:

private class EmailAdapter extends ArrayAdapter<EmailItem> {

    ArrayList<EmailItem> items;

    public EmailAdapter(Context context, int textViewResourceId, ArrayList<EmailItem> Items) {
        super(context, textViewResourceId, Items);
        this.items = Items;
        // TODO Auto-generated constructor stub
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        if (v == null) {
            LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = vi.inflate(R.layout.list_item, null);
        }
        final EmailItem o = items.get(position);
        if (o != null) {
            TextView date = (TextView) v.findViewById(R.id.date_txt);
            TextView time = (TextView) v.findViewById(R.id.time_txt);
            TextView count = (TextView) v.findViewById(R.id.count_txt);
            TextView sub = (TextView) v.findViewById(R.id.sub_txt);
            TextView sender = (TextView) v.findViewById(R.id.sender_txt);
            TextView body = (TextView) v.findViewById(R.id.mail_txt);

            ImageView read = (ImageView) v.findViewById(R.id.read_unread);
            ImageButton flag = (ImageButton) v.findViewById(R.id.flag_mail);

            date.setText(o.date);
            time.setText(o.time);
            count.setText(String.valueOf(o.count));
            sub.setText(o.sub);
            sender.setText(o.sender);
            body.setText(o.body);
            if (o.read) {
                read.setImageResource(R.drawable.mail_read);
                View vrule = (View) v.findViewById(R.id.h_rule);
                vrule.setVisibility(View.INVISIBLE);
            } else {
                read.setImageResource(R.drawable.mail_unread);
            }

            if (o.flag) {
                flag.setImageResource(R.drawable.star_full);
            } else {
                flag.setImageResource(R.drawable.star);
            }
        }
        return v;
    }
}

Please help me solve this issue.

I'll need to add the selection feedback (glow on tap or selection) and stop at the end (after scrolling the list will show items completely no partial item visibility).

Any insight on how can I achieve those will be very appreciable.

Answer 1

Have a look at the addAndMeasureChild() function in HorizontalListView. You can specify a maximum width/height when measuring like

child.measure(
    MeasureSpec.makeMeasureSpec(yourWidth, MeasureSpec.AT_MOST),
    MeasureSpec.makeMeasureSpec(yourHeight, MeasureSpec.AT_MOST));

However, this workaround only applies, if your items will always have the same (maximum) width/height, but for me it did the trick.

As for the selection feedback simply register an OnItemClickListener to your HorizontalListView and specify the desired behavior in the OnItemClick method.

Answer 2

Such a thing as an horizontal ListView does not exist, and customizing the adapter, if you set it on an actual ListView will not get the required result.

Why don't you look into the Gallery Class? it is much closer to what are looking for, and you can change the getView of the adapter to render the views as you want.