Adding headers above ListView in XML

Question

I'm trying to add 3 headers going from left to right above a ListView. I'm trying to add TextViews to achieve this. I've attached a picture to better demonstrate. Picture

My ListView works as i want it to by itself but I can't seem to get the textViews to align as i want them to.

activity_visualise.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <TextView
        android:id="@+id/latitudeHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/listView"
        android:layout_alignLeft="@+id/longitudeHeader"
        android:text="@string/latitudeHeader"/>
    <TextView
        android:id="@+id/longitudeHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/listView"
        android:text="@string/longitudeHeader"/>
    <TextView
        android:id="@+id/syncHeader"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/listView"
        android:layout_alignRight="@+id/longitudeHeader"
        android:text="@string/syncHeader"/>
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >
    </ListView>
</RelativeLayout>

activity_visualise_row.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_visualise_database"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="org.softshack.VisualiseDatabaseActivity">

    <TextView
        android:id="@+id/dbLatitude"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/dbLongitude"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/dbReportTime"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1" />

    <TextView
        android:id="@+id/dbSyncStatus"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.35"/>

</LinearLayout>

Nenco · Answer 1 · 2016-10-18T19:19:41.037

As the parent of your header view use a linear layout (horizontal) and apply a weightSum of 1 on it. then add 4 textviews as the childs of the linear layout and apply a layout weight of 0,25 on every one of them. do the same for the single list row view and you will get the result that you want.

UPDATED ANSWER:

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

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView" android:layout_weight="0.25"/>
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView2" android:layout_weight="0.25"/>
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView3" android:layout_weight="0.25"/>
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="New Text"
        android:id="@+id/textView4" android:layout_weight="0.25"/>
</LinearLayout>

P.S. you can use a gridview widget to get the same result.

score 0 · Answer 2 · answered Oct 15 '16 at 18:37

0

Didn't see the rest of your code but you can try and put the headers as the first row on your ListView instead of the TextViews..

answered Oct 15 '16 at 18:37

David.K

61
3

score 0 · Accepted Answer · edited May 23 '17 at 12:06

0

Couldn't align it properly in XML so I added the headers into the listview as strings. Had issues with them randomly repeating and this fixed it List view items changes position when scrolling android?

edited May 23 '17 at 12:06

Community

1
1

answered Oct 15 '16 at 19:15

Yoklan

191
2
11

check my answer above yoklan. It works. Or you can use the hardcode approach but that kind of depends if you want your app to look nice on all devices or only the one you are working on now – Nenco Oct 16 '16 at 10:06

Adding headers above ListView in XML

3 Answers3