How to tune width of listview, header and footer correctly?

Question

I am using ListView and it has header and footer. The problem is that I need the list of items itself to be more narrow then a header. And I can't achieve that. The thing is that if I set paddings or margins to ListView, it will be set to list items, header and footer (the header and footer for some reason will be more narrow then list items). Settings margins just for item layout itself is no use. Here are the layouts:

main_layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical" >

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

header_list_layout.xml:

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

    <EditText
        android:inputType="textPersonName" />

</RelativeLayout>

footer_list_layout.xml:

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

    <TextView
        android:layout_width ="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

list_item_layout.xml:

<?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="wrap_content"
    android:orientation="vertical" >

    <TextView
        android:textStyle="bold"
        android:textColor="@android:color/black"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </TextView>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </TextView>

</LinearLayout>

So what can I do to make everything right?

The image how I want it to look: listview

goofyz · Accepted Answer · 2014-04-25T10:30:27.757

You can set custom layout for the items in the ListView in the adapter. For example, if you use the ArrayAdapter, you can do something like this (Pay attention to the getView method):

public class MySimpleArrayAdapter extends ArrayAdapter<String> {
  private final Context context;
  private final String[] values;

  public MySimpleArrayAdapter(Context context, String[] values) {
    super(context, R.layout.rowlayout, values);
    this.context = context;
    this.values = values;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    LayoutInflater inflater = (LayoutInflater) context
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View rowView = inflater.inflate(R.layout.list_item, parent, false);
    TextView textView = (TextView) rowView.findViewById(R.id.label);
    ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);
    textView.setText(values[position]);
    // change the icon for Windows and iPhone
    String s = values[position];
    if (s.startsWith("iPhone")) {
      imageView.setImageResource(R.drawable.no);
    } else {
      imageView.setImageResource(R.drawable.ok);
    }

    return rowView;
  }
}

(Code copied from this tutorial)

Then in your list_item.xml, add the padding to the LinearLayout, you will have a narrower view:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#0000ff"
              android:paddingLeft="10dp"
              android:paddingRight="10dp"
    >
        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#AAAA00"
            />
        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00aAAA"
            />
</LinearLayout>

You will get: layout1

Or you can applying the margin to the individual TextView

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#0000ff"
    >
        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#AAAA00"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00aAAA"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            />
</LinearLayout>

you will get: layout2

Or if you have many children views in the layout, you can wrap it with another LinearLayout (though it may impact performance) and apply margin on it

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="#0000ff"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="#AAAAAA"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        >

        <TextView
            android:id="@+id/tv1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#AAAA00"
            />
        <TextView
            android:id="@+id/tv2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#00aAAA"
            />
        </LinearLayout>
</LinearLayout>

You will get: layout3

Yes, I am using custom layout for list item. As I said in main post setting margins or paddings in this custom layout doesn't solve the problem. — Ov3r1oad, Apr 24 '14 at 14:14
I have no problem in my adapter. Please post your layout file and adapter code so that we can help you. — goofyz, Apr 24 '14 at 14:23
May be I didn't make myself clear: my problem is that list items (the part that is between header and footer) is wider than header. I need the opposite thing. And my layouts have no specific information. But okey, I'll update the question. — Ov3r1oad, Apr 24 '14 at 14:48
So you want to make the list items to be narrower than the header. What I initially proposed is to have a custom layout for the list item, so that you can change its look (like make it narrower). My answered is updated to include a layout with a padding. — goofyz, Apr 25 '14 at 01:03
Adding padding is just making list item wider. :) And adding layout_margin doesn't make any effect. — Ov3r1oad, Apr 25 '14 at 08:34
It is strange that it make the list item wider, as I have no problem in my app. Maybe it is caused by the `match_parent` of the `TextView` `layout_width`, can you change it to `wrap_content` instead? Another method is add padding/margin to the `TextView` inside the layout. — goofyz, Apr 25 '14 at 08:59
Okey, I can work with the extra layout as a wrap. But this whole situation is just a mess :) . For example, how can I make space between header and first list item? Just programmatically set margin/padding for the first list item? — Ov3r1oad, Apr 25 '14 at 11:47
Either set it programmatically, wrap it with another layout or add margin/padding to the childs in the Header view. It is the same as what you have to do with the list item view. And you can check out [this post](http://stackoverflow.com/questions/5026926/making-sense-of-layoutinflater) if you want to know why the padding/margin of the inflated view does not work. — goofyz, Apr 28 '14 at 02:05

How to tune width of listview, header and footer correctly?

1 Answers1