Tip Android #16: Estilos para EditText

  1. 10/04/2013 (Primera publicación)
  2. 02/08/2015:Color del texto (problema con el estilo por defecto en Lollipop)

10/04/2013

Nota: aunque este artículo sigue siendo válido, recomiendo consultar el tutorial Diseño Android: EditText con Material Design y TextInputLayout y seguir las especificaciones y estándares de Material Design y Android Lollipop.

android tip

Seguimos en la sección tips Android apendiendo cómo podemos personalizar los widgets y elementos gráficos más comunes para conseguir darle un estilo propio a nuestras apps y, lo más importante, que este estilo sea igual en cualquier dispositivo independientemente del fabricante y la versión de Android.

En el caso de los EditText, la praxis a seguir es utilizar un drawable selector para los distintos estados posibles del widget que queramos personalizar (habilitado, presionado, con foco, etc) y aplicar en cada caso una imagen 9-patch tal y como hace la API de Android (aquí tenéis un interesante artículo). De hecho, lo más cómodo es basarnos en los que ésta proporciona y que podemos encontrar en la instalación de la SDK dentro de platforms/android-/data/res/.

Vamos a utilizar como ejemplo el siguiente layout con dos EditText, a uno de ellos aplicamos un estilo personalizado consistente en establecer un drawable como background (también se puede hacer indirectamente como un estilo) mientras que para el otro dejamos que el dispositivo le aplique el estilo por defecto que depende tanto de la versión de Android como del fabricante (no es lo mismo Android 2.3 en el emulador que en un Samsung o en un HTC por poner un ejemplo).

<?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:orientation="vertical" 
    android:background="@color/mainbackground"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="10dp">

    <EditText
        android:id="@+id/editText_estilo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10" 
        android:hint="@string/estilo"
        android:textColor="@android:color/black"
        android:background="@drawable/edittext_selector"/>        

    <EditText
        android:id="@+id/editText_nativo"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:ems="10" 
        android:hint="@string/nativo"
        android:layout_marginTop="20dp"/>

</LinearLayout>

El fichero /res/drawable/edittext_selector.xml es el siguiente:

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/textfield_default" android:state_enabled="true" android:state_window_focused="false"/>
    <item android:drawable="@drawable/textfield_disabled" android:state_enabled="false" android:state_window_focused="false"/>
    <item android:drawable="@drawable/textfield_pressed" android:state_pressed="true"/>
    <item android:drawable="@drawable/textfield_selected" android:state_enabled="true" android:state_focused="true"/>
    <item android:drawable="@drawable/textfield_default" android:state_enabled="true"/>
    <item android:drawable="@drawable/textfield_disabled_selected" android:state_focused="true"/>
    <item android:drawable="@drawable/textfield_disabled"/>
  
</selector> 

Los drawables a los que se hace referencia dentro de este selector se corresponden tal y como hemos dicho con imágenes 9-patch. Como ejemplo, voy a utilizar los empleados en Muspy for Android que son los siguientes para una densidad mdpi (y que a su vez están vez basados en los de Gingerbread):

nombre imagen
textfield_default.9.png textfield_default.9 patch
textfield_disabled_selected.9.png textfield_disabled_selected.9.patch
textfield_disabled.9.png textfield_disabled.9.patch
textfield_pressed.9.png textfield_pressed.9.patch
textfield_selected.9.png textfield_selected.9.patch

Ejecutando este proyecto de ejemplo podemos cómo el primer EditText siempre tiene el mismo estilo mientras que el segundo depende del dispositivo.

5 Responses to Tip Android #16: Estilos para EditText

  1. Alfonso dice:

    Me sale un error en el archivo edittext.xml an introducir :

    dice que no encuentra referencias de @drawable,textfield_disabled en la carpeta drawable.

    Podrias ayudarme? no entiendo mucho este error.

    • Alfonso dice:

      al introducir
      item android:drawable=”@drawable,textfield_disabled”

      • danielme.com dice:

        Acabo de descargarme el proyecto y funciona correctamente, los 9-patch están todos incluídos aunque sólo para la resolución mdpi. He aprovechado para subir una nueva versión del proyecto ya que la que había tenía ficheros de otro ejemplo aunque no afectan a este tip.
        Prueba a refrescar el proyecto y ejecutar manualmente el Lint, a veces Eclipse o el plugin ADT fallan y provocan errores desconcertantes.

  2. miguel dice:

    Buenas, he estado mirando algunos tips android, y me parecen bastante buenos y claros, sigue así, muchas gracias por el esfuerzo

  3. hola se puede cambiar el tipo de letra a la propiedad hint???
    Saludoss

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: