ListView headers without list item delimiters

I am currently writing an Android application that uses a ListView with headers. This works fine, but not the way I want. Each item in a ListView has a 1-2px separator at the top and bottom of it. Same title - and this is the problem. It doesnโ€™t look very beautiful ...

Ugly separators between items and headers

The interesting part is that system applications (for example, "Settings") do not have such a problem.

Settings app

Here is my adapter example:

setListAdapter(new BaseAdapter() { @Override public int getCount() { return 10; } @Override public Object getItem(int i) { return i; } @Override public long getItemId(int i) { return i; } @Override public View getView(int i, View view, ViewGroup viewGroup) { View v = ((LayoutInflater)getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE)) .inflate(i % 3 == 0 ? R.layout.list_header : android.R.layout.simple_list_item_1, viewGroup, false); ((TextView)v.findViewById(android.R.id.text1)).setText("test"); return v; } }); 

And the header list layout file:

 <?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Hello, World" style="?android:attr/listSeparatorTextViewStyle"> </TextView> 

So, the question arises: how to get rid of element separators between headers and regular elements, such as a settings application?

EDIT: After reading the answers, I want to clarify one thing. I do not want to completely remove the delimiters. I want to remove them only between headers and regular elements. In addition, half measures, such as โ€œremoving separators completely and adding them to some itemsโ€, also do not satisfy me.

+7
java android user-interface android-listview listview
source share
4 answers

It seems that you need to use a custom element for delimiters and a bit of a workaround. Let me explain how to do this:

  • Do not use default delimiters, remove it .
  • Create your own layout with a View at the bottom to be a sublining for headings.
  • Create your own layout with a View on top to have a separator for the elements.

Then the two types of separators will be glue to make only one subline for part of the header, so the separators must be the same height to create a good bedding. This will avoid having a separator over the header sections, but keeping separators for the list of items.

Therefore, let me show you some code to achieve it. First, remember to avoid the default divider on the ListView :

 <ListView android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="match_parent" android:divider="@null" android:dividerHeight="0dp"/> 

Create a mock element with a divider at the top set to 1dp (or something else):

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- this is the divider for items --> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/darker_gray"/> <!-- and the rest of item content in another ViewGroup --> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher"/> <TextView android:id="@+id/item_text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingLeft="15dp" android:textColor="@android:color/white"/> </LinearLayout> </LinearLayout> 

Finally, a header layout with a divider at the bottom (with the same height as the element separator):

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/item_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" style="?android:attr/listSeparatorTextViewStyle"/> <!-- this is the ("half-")divider for header section --> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@android:color/darker_gray"/> <!-- this view above will be merged with item dividers --> </LinearLayout> 

And it gives the following result:

6bBXv.jpg

0
source share

Remove the style you set for the TextView header

Create your own style with the desired divider and set it to TextView

  <style name="CustomListSeperatorTextViewStyle" parent="Widget.TextView.ListSeparator"> <item name="android:background">@drawable/your_own_here</item> 

-one
source share

The separator is related to the style you set using the text box, just delete the style that will work.

-one
source share

I just found these options that you think you need, you can try adding them to your ListView :

 android:headerDividersEnabled="false" android:footerDividersEnabled="false" 

The documentation is available here and indicates:

If set to false, the ListView will not draw a separator after each kind of header. The default value is true.

-one
source share

All Articles