Why does my spinner not look like a spinner?

Question

I have a spinner that looks like extremly ugly like this:

When I click on it looks a little bit better:

But still, in the default it doesn't even looks like a spinner. Any idea how can I improve its looks?

Here is the code:

adapter=new SpinAdapter(this,com.Orange.R.layout.spinnerrowlist,spinnerInfo);
adapter.setDropDownViewResource(com.Orange.R.layout.multiline_spinner_dropdown_item);
previousVisitCommentsSpinner.setAdapter(adapter);

spinnerrowlist.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:background="#FFFFFF"
    android:orientation="horizontal" >

    <TextView
        android:id="@+id/textview_spinner1"
        style="?android:attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:layout_alignParentLeft="true"
        android:textColor="@drawable/textorange_selected" />

    <TextView
        android:id="@+id/textview_spinner2"
        style="?android:attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_toRightOf="@+id/textview_spinner1"
        android:paddingLeft="5dp"
        android:textColor="@drawable/textorange_selected" />

    <TextView
        android:id="@+id/textview_spinner3"
        style="?android:attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:paddingLeft="5dp"
        android:textColor="@drawable/textorange_selected" />

</RelativeLayout>

And here is the spinner:

<Spinner
    android:id="@+id/previousVisitComments"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:layout_below="@+id/previousvisit"
    android:layout_marginTop="15dp"
    android:background="@drawable/spinner_selector"
    android:textColor="@color/medium_orange"
    android:textAppearance="?android:attr/textAppearanceMedium"
    />

The items in the spinner should be on the same line, that's why I use a horizontal layout! Thank you for your answers!

Answer 1

try adding this

android:layout_toRightOf="@+id/textview_spinner1 

and you can also add the following just to see if it makes a difference

android:layout_below 

and let me know how it goes :)

Answer 2

The items in the spinner should be on the same line, that's why I use a horizontal layout!

The problem is that you are trying to squeeze a lot of text into a narrow area. However you have two options:

First using what you have, simply add the layout_toLeftOf attribute to textview_spinner2 :

<TextView
    android:id="@+id/textview_spinner2"
    style="?android:attr/spinnerItemStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_toLeftOf="@+id/textview_spinner3"
    android:layout_toRightOf="@+id/textview_spinner1"
    android:paddingLeft="5dp" />

Also you said that you are using a horizontal layout but a RelativeLayout does not have the attribute orientation , so this line does nothing:

android:orientation="horizontal"

The organization of the child elements is determined by individual attributes like: layout_toLeftOf , layout_toRightOf , layout_above , etc.

Second if you a RelativeLayout behaves in unruly ways and you have a simple layout like this, you can always switch to a LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp" >

    <TextView
        android:id="@+id/textview_spinner1"
        style="?android:attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:textColor="@drawable/textorange_selected" />

    <TextView
        android:id="@+id/textview_spinner2"
        style="?android:attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="5dp"
        android:textColor="@drawable/textorange_selected" />

    <TextView
        android:id="@+id/textview_spinner3"
        style="?android:attr/spinnerItemStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:paddingLeft="5dp"
        android:textColor="@drawable/textorange_selected" />

</LinearLayout>

Now none of the columns in your Spinner overlap.

Answer 3

You could try (android.R.layout.simple_spinner_dropdown_item) in your Java code. Instead of this (com.Orange.R.layout.multiline_spinner_dropdown_item) Hope this helps.