Tip Android #16: Estilos para EditText

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.

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.

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

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

• emulador 2.1
  
• Emulador 4.1
  

El proyecto completo para Eclipse ADT se encuentra en Github. Para más información sobre cómo utilizar GitHub, consultar este artículo.

<< TIPS ANDROID

Share this:

• Twitter
• Facebook
• LinkedIn
• WhatsApp
• Telegram

Me gusta esto:

Me gusta Cargando...