Graphical issue with spinner control in Android

Question

My first (old) Android app (Suspension Calculator) is showing a problem I cannot find a solution for: the spinner control on some spinners is showing transparent lines in unwanted places. The pattern is this: every other spinner is having this problem, starting with the first spinner control. So while spinners 2, 4, 6, ... have no unwanted lines, spinners 1, 3, 5, ... have them.

The following image (link below) shows the spinner in selected state first, and in unselected state after the red separator. In selected state, the transparent line is at baseline height for the entire control except some places where the button text can be. It's a little different in unselected state.

I cannot provide an image directly:

[...] as a spam prevention mechanism, new users aren't allowed to post images.

But I can give you a link:

Screenshot that illustrated the graphical spinner problem

The XML file under res/layout looks like this:

<ScrollView ...>
    <TableLayout ...>
        <TableRow>
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="@string/units"
                android:gravity="center_vertical"
                android:paddingRight="5dp"
            />
            <Spinner
                android:id="@+id/unit_spinner"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:drawSelectorOnTop="true"
            />
        </TableRow>
        ...
    </TableLayout>
</ScrollView>

I see this problem at least since Froyo (Android 2.2). In earlier versions (at least Android 1.6), it wasn't there. It's not there in the Graphical Layout editor in Eclipse, but I see it running the application on the phone and in the emulator - that's at least consistent and hints to a problem I'm causing by not doing things right ;-).

Answer 1

Actually I can reproduce this behavior on Android 2.3. Not possible on Android 2.2 and lower.

It' doesn't matter if you place the Spinner in a TableLayout or RelativeLayout. Same problem there..

Only solution to get ride of the lines was to put a 1px-View between the spinner:

<Spinner android:layout_height="wrap_content" android:id="@+id/spinnerDriver"
    android:layout_width="match_parent" android:layout_below="@id/driverDesc" />

<View android:id="@+id/helper" android:layout_height="1px"
    android:layout_width="match_parent" android:layout_below="@id/spinnerDriver" />

<Spinner android:layout_height="wrap_content" android:id="@+id/spinnerDriver1"
    android:layout_width="match_parent" android:layout_below="@id/helper" />

This is actually a very, very, very... ugly solution but it works for me...