Expandablelistview background turns black when expanded

Question

I am facing this issue on Android 2.3.5 (and possibly earlier Android versions)

When my expnadablelistview is collapsed background is displayed correctly. As soon as one group row is expanded its background turns black.

Here is the listview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
android:background="@drawable/bg"
>

    <TextView  
        android:id="@+id/ExpandableListText"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:textColor = "#490600"
        android:paddingRight = "25sp"
        android:paddingLeft = "25sp"
    />

    <ExpandableListView 
        android:id="@+id/ExpandableListView01" 
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
        android:divider="#000000"
        android:dividerHeight="1sp"
        android:childDivider="#000000"
        android:headerDividersEnabled="true"
        android:footerDividersEnabled="true"
        android:scrollingCache="false"
        android:cacheColorHint="#00000000"
         android:drawSelectorOnTop="true"
    />
</LinearLayout>

Here is XML for group row

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

>

    <TextView
        android:id="@+id/TextViewGroup" 
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_marginLeft="50sp"
        android:gravity="center_vertical"
        android:textColor = "#490600"
        android:paddingTop="7dip"
        android:paddingBottom="7dip"
    ><!--  -->
    </TextView>

</LinearLayout>

Here is child_row XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"

>
 <!-- android:background="#666666" -->
    <!--  -->
    <TextView
        android:id="@+id/TextViewChild01" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30sp"
        android:textColor = "#000000"
    >
    </TextView>

    <TextView
        android:id="@+id/TextViewChild02" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10sp"
        android:textColor = "#000000"
    >
    </TextView>

    <TextView
        android:id="@+id/TextViewChild03" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10sp"
        android:textColor = "#000000"
    >
    </TextView>

</LinearLayout>

Any help is highly appreciated

Answer 1

Customize your ExpandableListView class and then -

package com.test
//....................

View getView(.....) {
   View v = super.getView(....);

   //........
   //change it your color or or set the text you want.
   return(v);
}

and then set it into your layout -

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/bg"
>

<TextView  
    android:id="@+id/ExpandableListText"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:textColor = "#490600"
    android:paddingRight = "25sp"
    android:paddingLeft = "25sp"
/>

<com.test.ExpandableListView 
    android:id="@+id/ExpandableListView01" 
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    android:divider="#000000"
    android:dividerHeight="1sp"
    android:childDivider="#000000"
    android:headerDividersEnabled="true"
    android:footerDividersEnabled="true"
    android:scrollingCache="false"
    android:cacheColorHint="#00000000"
     android:drawSelectorOnTop="true"
/>

Answer 2

Before you start creating new views, make sure you have set the 'Cache color hint' attribute for the view in your layout file. The attribute should be set to your preferred background color during selection / scrolling --- otherwise the view will default to black.

Answer 3

我有同样的问题，显然它是2.3版本的一个错误，并与android：childDivider =“＃000000”相关，只需删除它，黑色背景将消失。

Answer 4

Expanding on Suvam Roy's answer, what worked for me was to make sure that the child view's background, which is returned from GetChildView, is explicitly assigned, either in code or in an associated layout file (whichever technique is used define the view).

The drawback with this is that you loose the default item click highlighting. It's easy enough to set the background to a selector drawable, but I haven't yet been able to replicate the fade-out effect (even by copying all the android built-in drawable's involved over to my app's space).

For reference, the default drawable for most lists (which provides this nice click highlighting with the fade-out effect) is

Android.Resource.Drawable.ListSelectorBackground

It ends up being to simply set the cacheColorHint on the ExpandableListView to '#00000000' (translucent)

Expandable List Android Black background while scrolling