Cómo personalizar un Spinner en Android

Quiero agregar una altura personalizada al menú desplegable de Spinner, digamos 30 dp, y quiero ocultar los divisores de la lista desplegable de Spinner.

Hasta ahora intenté implementar el siguiente estilo en Spinner:

<style name="spinner_style">
        <item name="android:paddingLeft">0dp</item>
        <item name="android:dropDownWidth">533dp</item>
        <item name="android:showDividers">none</item>
        <item name="android:dividerHeight">0dp</item>
        <item name="android:popupBackground">@drawable/new_bg</item>
        <item name="android:dropDownHeight">70dp</item>
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:dropDownSelector">@android:color/white</item>
 </style>

y el código de mi spinner es:

<Spinner
            android:id="@+id/pioedittxt5"
            android:layout_width="543dp"
            android:layout_height="63dp"
            android:layout_toRightOf="@+id/piotxt5"
            android:background="@drawable/spinner"
            style="@style/spinner_style"
            android:dropDownVerticalOffset="-53dp"
            android:spinnerMode="dropdown"
            android:drawSelectorOnTop="true"
            android:entries="@array/travelreasons"
            android:prompt="@string/prompt" />

Pero nada parece funcionar.

Jan 01 '70 08:01 Shruti

Puede crear un diseño giratorio totalmente personalizado como

Paso 1: en la carpeta dibujable, cree background.xml como borde de la ruleta.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
android:width="1dp"
   android:color="@android:color/darker_gray" />
</shape>

Paso 2: para el diseño de la ruleta use este ícono desplegable o cualquier imagen desplegable.png

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="3dp"
    android:layout_weight=".28"
    android:background="@drawable/spinner_border"
    android:orientation="horizontal">

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:layout_marginLeft="5dp"
        android:spinnerMode="dropdown" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:src="@mipmap/drop" />

</RelativeLayout>

Finalmente se ve como la imagen de abajo y se puede hacer clic en todas partes en el área redonda y no es necesario escribir, haga clic en Lister para imageView.

Paso 3: para el diseño desplegable, elimine la línea de Dropdown ListView y cambie el color de fondo. Cree un adaptador personalizado como el siguiente.

Spinner spinner = (Spinner) findViewById(R.id.spinner1);
String[] years = {"1996","1997","1998","1998"};
ArrayAdapter<CharSequence> langAdapter = new ArrayAdapter<CharSequence>(getActivity(), R.layout.spinner_text, years );
langAdapter.setDropDownViewResource(R.layout.simple_spinner_dropdown);
mSpinner5.setAdapter(langAdapter);

En la carpeta de diseño, cree R.layout.spinner_text.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layoutDirection="ltr"
android:id="@android:id/text1"
style="@style/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingLeft="2dp"
/>

En la carpeta de diseño, cree simple_spinner_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="@style/spinnerDropDownItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:singleLine="true" />

En los estilos, puede agregar dimensiones y alturas personalizadas según sus necesidades.

<style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">
</style>

<style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
</style>

Finalmente parece como

Según el requisito, puede cambiar el color de fondo y el texto del color desplegable cambiando el color de fondo o el color del texto de simple_spinner_dropdown.xml

Jun 16 '2016 12:06 Binesh Kumar

La solución más elegante y flexible que he encontrado hasta ahora está aquí: http://android-er.blogspot.sg/2010/12/custom-arrayadapter-for-spinner-with.html

Básicamente, sigue estos pasos:

1. Cree un archivo xml de diseño personalizado para su elemento desplegable, digamos que lo llamaré spinner_item.xml

2. Cree una clase de vista personalizada para su Adaptador desplegable. En esta clase personalizada, debe sobrescribir y configurar el diseño del elemento desplegable personalizado en los métodos getView() y getDropdownView(). Mi código es el siguiente:

   public class CustomArrayAdapter extends ArrayAdapter<String>{
   
   private List<String> objects;
   private Context context;
   
   public CustomArrayAdapter(Context context, int resourceId,
        List<String> objects) {
        super(context, resourceId, objects);
        this.objects = objects;
        this.context = context;
   }
   
   @Override
   public View getDropDownView(int position, View convertView,
       ViewGroup parent) {
       return getCustomView(position, convertView, parent);
   }
   
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
     return getCustomView(position, convertView, parent);
   }
   
   public View getCustomView(int position, View convertView, ViewGroup parent) {
   
   LayoutInflater inflater=(LayoutInflater) context.getSystemService(  Context.LAYOUT_INFLATER_SERVICE );
   View row=inflater.inflate(R.layout.spinner_item, parent, false);
   TextView label=(TextView)row.findViewById(R.id.spItem);
    label.setText(objects.get(position));
   
   if (position == 0) {//Special style for dropdown header
         label.setTextColor(context.getResources().getColor(R.color.text_hint_color));
   }
   
   return row;
   }
   
   }
   

3. En su actividad o fragmento, utilice el adaptador personalizado para su vista giratoria. Algo como esto:

   Spinner sp = (Spinner)findViewById(R.id.spMySpinner);
   ArrayAdapter<String> myAdapter = new CustomArrayAdapter(this, R.layout.spinner_item, options);
   sp.setAdapter(myAdapter);
   

donde opciones es la lista de cadenas de elementos desplegables.

Oct 13 '2014 02:10 Tony Vu