26/5/2016

Curso Android

TextInputLayoutEnAndroid:MaterialDesign

SQL

ANDROID STUDIO

DATOS

DATOS

FUNDAMENTOS

WEB SERVICES

ANDROID STUDIO

Contacto

UI

CONEXIN DE RED

UI

CONEXIN DE RED

RECURSOS

FUNDAMENTOS

WEB SERVICES

RECURSOS

Inicio DesarrolloAndroid UI
TextInputLayoutEnAndroid:MaterialDesign

TextInputLayout En
Android: Material
Design
JamesRevelo febrero10,2016
Android,UI 5Comments

Desarrollo

El TextInputLayout hace parte de la lista de

componentes presentados en el Material Design con el
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

Qu buscas?

Search

Lo Ms Popular
Aplicacin Android
Con Navigation
Drawer Y Tabs
1/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

fin de estilizar los campos de texto con etiquetas

flotantes.

Cmo Sincronizar
Sqlite Con Mysql En
Android?

Este presenta una animacin del texto auxiliar que

poseenlosedittextshacialapartesuperiorparacrearun
comportamiento prctico entre el significado del campo

NavigationView:
Navigation Drawer
Con Material Design

de texto y su contenido. Adems permite asignar

mensajes de error al momento de validar el formato en
suinterior.

TabLayout: Cmo
Aadir Pestaas En
Android?

Servicio Web RESTful

Para Android Con

Php, Mysql y Json

TextInputLayout en Android: Material Desi...

Toolbar En Android:
Creacin De Action
Bar En Material
Design
Consumir Un Servicio
Web REST Desde
Android
Como Crear
Dilogos En Android?
Tutorial De Parsing
Xml En Android Con
XmlPullParser
Usar Transiciones En
Android Con Material
Design

DescargarCdigo
Apyanosconunasealenturedsocialfavoritay
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

2/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

consigueelcdigocompleto.
Share

43

Share

76

Template
recomendada

Tweet

Etiquetas Flotantes En Material

Design
El nuevo esquema de diseo de Google exige que
cuando el usuario establezca el foco en un campo de
texto, su hint debe flotar hacia la parte superior,
proporcionandoespacioparaeltexto.Estoaseguraque
el usuario nunca pierda el contexto del contenido que
estdigitando.

Para el texto de la entrada y el hint usa tamaos de

16sp.Enelcasodelaetiquetaseasignaelestilocaption
de12sp.Entotalelreacompletamide72dp,contando
elpaddingentreloscomponentes.

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

3/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Graciasalalibreradesoporteparadiseo,esposible
crear etiquetas
flotantes
travs

a
del

componente

TextInputLayout. Este acta como una envoltura del

widget EditText (o sus descendientes) con el fin de
crearlaetiqueta.
A continuacin vers un ejemplo donde crear un
formularioparaaadirunnuevoclientehipotticoenuna
app. Este consta de tres campos de texto para el
nombre, el telfono y el correo. La idea es asignar una
etiqueta flotante a cada uno y mostrar los posibles
comportamientosdel TextInputLayout .

1.UsoDelTextInputLayout
Paso 1: Crear Proyecto en Android
Studio
Entra a Android Studio y ve a File > New > New
Project para crear un nuevo proyecto llamado
Etiquetas

Flotantes.

Asigna

las

siguientes

caractersticas:

VersinmnimadeSDK: 11
BlankActivity comoactividadprincipal.

ActivityName: ActividadPrincipal
LayoutName: actividad_principal
Title: ActividadPrincipal
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

4/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

MenuResourceName: menu_actividad_principal
Luegoabretulayout actividad_principal.xml yelimina
el floating action button. De la misma forma en la clase
Java,eliminalareferenciadelfabparalaasignacinde
laescucha.
Laclasequedaraas:
ActividadPrincipal.java

importandroid.os.Bundle;
importandroid.support.v7.app.AppCompatActivity
importandroid.support.v7.widget.Toolbar;
importandroid.view.View;

publicclassActividadPrincipalextendsAppCompatActivity

@Override
protectedvoidonCreate(BundlesavedInstanceState
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal
Toolbartoolbar=(Toolbar)findViewById
setSupportActionBar(toolbar);
}
}

Ellayoutdelaactividadseveraas:
actividad_principal.xml

<?xmlversion="1.0"encoding="utf8"?>
<android.support.design.widget.CoordinatorLayout
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

5/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

xmlns:app="http://schemas.android.com/apk/resauto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.herprogramacion.etiquetasflotantes.ActividadPrincipal"
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay"
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay"
</android.support.design.widget.AppBarLayout>
<includelayout="@layout/contenido_actividad_principal"

</android.support.design.widget.CoordinatorLayout>

el

segmento

central

contenido_actividad_principal.xml puedesdejarlocon

sucontenidopredeterminado

Paso2:AadirDesignSupportLibrary
Abre tu archivo build.gradle del mdulo principal y
aadelaslibrerasparasoportedeversionesylalibrera
dediseo.

dependencies{
compilefileTree(dir:'libs',include:['*.jar'
testCompile'junit:junit:4.12'
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

6/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

compile'com.android.support:appcompatv7:23.1.1'
compile'com.android.support:design:23.1.1'
}

Paso3:CambiaPaletadeColores
Los colores que se usar para la app se basan en una
paleta principal con prpura 700 para los oscuros y
prpuraentono500paraelcolorprincipal.Lapaletade
acento ser ocupada por el tono 400 de Rosa como se
muestraenlaherramientaMaterialDesignColors:

El archivo colors.xml quedara con los siguientes

valores:

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

7/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

<?xmlversion="1.0"encoding="utf8"?>
<resources>
<colorname="colorPrimary">#7B1FA2</color>
<colorname="colorPrimaryDark">#AB47BC</color>
<colorname="colorAccent">#EC407A</color>
</resources>

Paso4:DisearUIdelaActividad
El formulario de insercin tiene varias componentes a
ubicarcmomuestraelsiguientescreenshotdelaapp.

127
Apoyos

43

30

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

8/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Se tienen tres edit texts recubiertos por su respectivo

TextInputLayout . Al lado izquierdo existe una imagen

representativa del contenido de cada campo de texto.Y

al final existe una bottom bar con dos botones para
cancelaroconfirmarlainsercindelcliente.
Alcampodetextodelnombreasignaun inputType del
tipo text . Para el telfono usa el tipo phone y para el
correoeltipo textEmailAdress .
contenido_actividad_principal.xml

<?xmlversion="1.0"encoding="utf8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/resauto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.herprogramacion.etiquetasflotantes.ActividadPrincipal"
tools:showIn="@layout/actividad_principal"
<LinearLayout
android:id="@+id/area_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:orientation="horizontal">
<ImageView
android:id="@+id/img_cliente"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/ic_cliente"
<android.support.design.widget.TextInputLayout
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

9/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

android:id="@+id/til_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp">
<EditText
android:id="@+id/campo_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/hint_nombre"
android:inputType="text"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<LinearLayout
android:id="@+id/area_telefono"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/area_nombre"
android:orientation="horizontal">
<ImageView
android:id="@+id/img_correo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/ic_telefono"
<android.support.design.widget.TextInputLayout
android:id="@+id/til_telefono"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp">
<EditText
android:id="@+id/campo_telefono"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/hint_telefono"
android:inputType="phone"/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

10/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

<LinearLayout
android:id="@+id/area_correo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/area_telefono"
android:orientation="horizontal">
<ImageView
android:id="@+id/img_telefono"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/img_correo"
android:layout_column="0"
android:layout_gravity="center_vertical"
android:layout_row="2"
android:src="@drawable/ic_correo"
<android.support.design.widget.TextInputLayout
android:id="@+id/til_correo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp">
<EditText
android:id="@+id/campo_correo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/hint_correo"
android:inputType="textEmailAddress"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
</LinearLayout>
<!BottomBar>
<LinearLayout
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentBottom="true"
android:gravity="center_vertical"
android:orientation="horizontal">
<Button
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

11/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

android:id="@+id/boton_cancelar"
style="@style/Widget.AppCompat.Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/accion_cancelar"
<Button
android:id="@+id/boton_aceptar"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:backgroundTint="@color/colorAccent"
android:text="@string/accion_aceptar"
android:textColor="@android:color/white"
</LinearLayout>

</RelativeLayout>

Cmoves,el TextInputLayout solonecesitaencerraral

edittextalcualleproveerlaetiqueta.

<android.support.design.widget.TextInputLayout
android:id="@+id/til_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp">
<EditText
android:id="@+id/campo_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/hint_nombre"
android:inputType="text"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

12/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

2.
Setear
Errores
TextInputLayout

En

El

El TextInputLayout tiene la capacidad para mostrar

errores asociados al contenido digitado por usuario.
Estos pueden ser debido a un formato incorrecto, una
cantidad mnima de caracteres no satisfecha, algn
carcterindebido,etc.
El ejemplo actual mostrar los errores necesarios luego
de que se validen los campos de texto, al presionar el
botnGUARDARdelabottombar.

Paso1:ImplementarOnClickListeneren
elBotn
Dentro de ActividadPrincipal.java obtn la instancia
del botn con la accin de guardado para tener su
referencia.Luegoasignacon setOnClickListener() una
nueva escucha annima. Sobrescribe su controlador
onClick() y deja expresado que deseas ejecutar un
mtodofuturollamado validarCampos() .

ButtonbotonAceptar=(Button)findViewById(R.
botonAceptar.setOnClickListener(newView.OnClickListener
@Override
publicvoidonClick(Viewv){
//validarDatos()
}
});

Paso2:ValidacindeDatos
Validar los campos de tus edit texts depende
directamente de las reglas de negocio de tu aplicacin.
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

13/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Normalmenteestovadefinidoeneldiccionariodedatos
siesquetienesunabasededatoslocaloremota.
Supongamos que este ejemplo existen las siguientes
reglas:

Nombre: Solo caracteres alfabticos con un tamao

mximode30.
Telfono:Solocaracteresnumricosconuntamao
estndarde7.
Email: Secuencia de caracteres que cumplan la
sintaxisdecorreoselectrnicos.
Validacin del nombre del cliente Con valor text
de inputText noesposiblelimitarelcampodetexto,ya
queestefiltropermitecaracteresalfanumricos.Unade
lasformasdehacerloesatravsdelaclase Pattern ,la
cual contiene mtodos para el uso de expresiones
regulares.
Laexpresinregularparaaceptarcaracteresalfabticos
yespacioses:

^[azAZ]+$

Con

ello,

crea

un

nuevo

mtodo

llamado

validarNombre() y haz que retorne en boolean para

usarlocomodeterminantedepasoenelflujodelaapp.

privatebooleanvalidarNombre(Stringnombre){
Patternpatron=Pattern.compile("^[azAZ]+$"
returnpatron.matcher(nombre).matches()||
}
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

14/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

ValidacindeltelfonoEltipodeentradaparaeste
campodetextoteayudaalimitaralusuarioalingresode
caracteresrelacionadosconunnmerodetelfono.
Por otro lado, puedes usar el patrn predefinido
Patterns.PHONE para una validacin adicional de la

sintaxis del nmero. Aade esta lgica a un nuevo

mtodollamado validarTelefono() .

privatebooleanvalidadTelefono(Stringtelefono
returnPatterns.PHONE.matcher(telefono).matches
}

Validacin de correo electrnico Al igual que el

caso anterior, la clase de utilidades Patterns contiene
un patrn para el correo electrnico con el nombre de
EMAIL_ADDRESS . As que aade un nuevo mtodo de
validacinparaemailconelsiguientecuerpo.

privatebooleanesCorreoValido(Stringcorreo){
returnPatterns.EMAIL_ADDRESS.matcher(correo
}

Paso 3: Mostrar
TextInputLayout

Errores

en

el

El mtodo setError() se usa para mostrar los errores

en la parte inferior del EditText a travs del
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

15/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

TextInputLayout . Tambin puedes pasar null como

parmetroparalimpiarloserrores.
Teniendo en cuenta estos mtodos, dirgete a cada
mtodo de validacin y despliega un error si el formato
noesfavorable,delocontrariolmpialo.
ActividadPrincipal.java

importandroid.os.Bundle;
importandroid.support.design.widget.TextInputLayout
importandroid.support.v7.app.AppCompatActivity
importandroid.support.v7.widget.Toolbar;
importandroid.util.Patterns;
importandroid.view.View;
importandroid.widget.Button;
importandroid.widget.Toast;
importjava.util.regex.Pattern;
publicclassActividadPrincipalextendsAppCompatActivity
privateTextInputLayouttilNombre;
privateTextInputLayouttilTelefono;
privateTextInputLayouttilCorreo;
@Override
protectedvoidonCreate(BundlesavedInstanceState
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_principal
Toolbartoolbar=(Toolbar)findViewById
setSupportActionBar(toolbar);
//ReferenciasTILs
tilNombre=(TextInputLayout)findViewById
tilTelefono=(TextInputLayout)findViewById
tilCorreo=(TextInputLayout)findViewById
//ReferenciaBotn
ButtonbotonAceptar=(Button)findViewById
botonAceptar.setOnClickListener(newView
@Override
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

16/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

publicvoidonClick(Viewv){
validarDatos();
}
});

}
privatebooleanesNombreValido(Stringnombre
Patternpatron=Pattern.compile("^[azAZ]+$"
if(!patron.matcher(nombre).matches()
tilNombre.setError("Nombreinvlido"
returnfalse;
}else{
tilNombre.setError(null);
}
returntrue;
}
privatebooleanesTelefonoValido(Stringtelefono
if(!Patterns.PHONE.matcher(telefono).
tilTelefono.setError("Telfonoinvlido"
returnfalse;
}else{
tilTelefono.setError(null);
}
returntrue;
}
privatebooleanesCorreoValido(Stringcorreo
if(!Patterns.EMAIL_ADDRESS.matcher(correo
tilCorreo.setError("Correoelectrnicoinvlido"
returnfalse;
}else{
tilCorreo.setError(null);
}
returntrue;
}
privatevoidvalidarDatos(){
Stringnombre=tilNombre.getEditText
Stringtelefono=tilTelefono.getEditText
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

17/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Stringcorreo=tilCorreo.getEditText
booleana=esNombreValido(nombre);
booleanb=esTelefonoValido(telefono
booleanc=esCorreoValido(correo);
if(a&&b&&c){
//OK,sepasaalasiguienteaccin
Toast.makeText(this,"Seguardaelregistro"
}
}
}

[alertsuccess]Obtn el EditText del TextInputLayout

conelmtodo getEditText() .[/alertsuccess]
Si las tres condiciones se cumplieron, entonces puedes
procederaguardarelregistrohipottico.

Paso 4:Aadir Text Watchers a los Edit

Texts
Si requieres la comprobacin en tiempo real del texto
que contiene un EditText , entonces asigna una
escucha

TextWatcher

con

el

mtodo

addTextChangedListener() .

Porejemplo
Si quieres que los errores se limpien al momento de
escribir una caracter en el campo del nombre, usa
setError(null) enelcontrolador onTextChanged().

//ReferenciasETs
campoNombre=(EditText)findViewById(R.id.campo_nombre
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

18/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

campoTelefono=(EditText)findViewById(R.id.
campoCorreo=(EditText)findViewById(R.id.campo_correo
campoNombre.addTextChangedListener(newTextWatcher
@Override
publicvoidbeforeTextChanged(CharSequence
}
@Override
publicvoidonTextChanged(CharSequences,
tilNombre.setError(null);
}
@Override
publicvoidafterTextChanged(Editables)

}
});

Siquierescomprobarelcampodelcorreocadavezque
se escriba, entonces llama al mtodo de validacin en
onTextChanged() .

campoCorreo.addTextChangedListener(newTextWatcher
@Override
publicvoidbeforeTextChanged(CharSequence
}
@Override
publicvoidonTextChanged(CharSequences,
esCorreoValido(String.valueOf(s));
}
@Override
publicvoidafterTextChanged(Editables)
}
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

19/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

});

3.PersonalizarEtiquetasFlotantes
El elemento TextInputLayout en su definicin XML te
permite modificar el comportamiento de las etiquetas
flotantesyloserrores.
Lasiguientetablamuestraalgunosdeellos:
Atributo

Descripcin

app:counterEnabled

Determinasise
mostrarun
contadorde
caracteresparael
contenidodel
EditText .Acepta

losvalores true y
false .
app:errorEnabled

Habilitaodeshabilita
lavisibilidaddelos
erroresenlaparte
inferiordel
EditText .Acepta
true y false .

Tambin
proporcionaun
espacioenblanco
adicionalenel
layout
previsualizado
app:hintAnimationEnabled

Habilitao
deshabilitala

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

20/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

animacindela
etiqueta.Siusas
false ,laetiqueta

semover
bruscamentehacia
arribasinla
transicinquetiene
pordefecto.
app:hintTextAppearance

Cambiaelestilodel
textodelaetiqueta
flotante.

android:hint

Textoauxiliarquese
muestradentrodel
campodetexto.
Puedesdeclararlo
enel
TextInputLayout o

enel EditText ,
ambosproducenlos
mismosresultados.
Veamos algunos ejemplos para personalizar el
TextInputLayout :
Cambiar el color del error Usa el atributo
app:errorTextAppearance para asignar un estilo propio

que extienda de otro que est prefabricado por el

sistemacomo @android:style/TextAppearance .
Elsiguienteestiloasignauncolornaranjaalerror:
styles.xml

<stylename="Error"parent="TextAppearance.AppCompat.Caption"
<itemname="android:textColor">#FF9800</item>
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

21/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

</style>

TILdelnombre

<android.support.design.widget.TextInputLayout
android:id="@+id/til_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
android:layout_marginLeft="32dp"
app:errorTextAppearance="@style/Error"
android:layout_row="0">

Elresultado:

Cambiar color del hint Puedes cambiar el color la

etiqueta con el atributo app:hintTextAppearance . Al
igual que la apariencia del error, solo extindelo de un
estilo
asociado
al
texto
como
TextAppearance.Design.Hint
o TextAppearance.AppCompat.Caption .
Elsiguienteejemplocambiaalcolorprimariolaetiqueta:
styles.xml

<stylename="Hint"parent="TextAppearance.Design.Hint"
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

22/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

<itemname="android:textColor">?attr/colorPrimary
</style>

Campodelcorreo

<android.support.design.widget.TextInputLayout
android:id="@+id/til_correo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_column="1"
app:errorEnabled="true"
android:layout_marginLeft="32dp"
app:hintTextAppearance="@style/Hint"
android:layout_row="2">

Elresultadoser:

Recuerdaquelaaparienciadeltextotambinincluyesu
tamao( textSize ),suformato( textStyle ),etc.
Aadir un contador al TextInputLayout Si deseas
contar los caracteres del text input layout usa los
atributos app:counterEnabled y app:counterMaxLenght .
El primero habilita la visualizacin del contador y el
segundo establece el lmite de caracteres al cual tendr
acceso el usuario. Adicionalmente el input layout
cambiar de color el contador y la lnea inferior cuando
sesobrepaseelcontador.
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

23/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Por ejemplo, pongamos un contador con lmite de 30

caracteresenelcampodelnombre.

<android.support.design.widget.TextInputLayout
android:id="@+id/til_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:orientation="horizontal"
app:counterEnabled="true"
app:counterMaxLength="30"
app:errorEnabled="true">

Elresultadosera:
ContadorenTextInputLayout
Cmo establecer el color del contador en el
TextInputLayout?
Lo

hars con

dos atributos que te

otorgan

personalizacin:
app:counterTextAppearance
y app:counterOverflowTextAppearance .
El primero asigna un estilo para el contador mientras la
longitudseencuentreenelrangomximo.Yelsegundo
esparacuandosetraspasadicholmite.
Porejemplo
Crear dos estilos para el contador donde cambiar los
tonosanaranjaprofundoparaeldesbordeyazulparael
estadonormal.
styles.xml

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

24/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

<stylename="Counter"parent="TextAppearance.Design.Counter"
<itemname="android:textColor">#42A5F5</item>
</style>
<stylename="CounterOverFlow"parent="TextAppearance.Design.Counter.Overflow"
<itemname="android:textColor">#FF7043</item>
</style>

Ahoraselosasignoalcampodelnombre:

<android.support.design.widget.TextInputLayout
android:id="@+id/til_nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="32dp"
android:orientation="horizontal"
app:counterEnabled="true"
app:counterMaxLength="30"
app:counterOverflowTextAppearance="@style/CounterOverFlow"
app:counterTextAppearance="@style/Counter"
app:errorEnabled="true">

Alfinaltendras:
Cmo establecer el color del contador de un
TextInputLayout
Nota: Si quieres jugar ms con el estilo del
TextInputLayout , te dejo este link para que

pruebes la librera MaterialEditText, donde

encontrarstodotipodeestilospersonalizados.

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

25/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Conclusin
Lasetiquetasflotantessonexcelentes.
Nohaydudaquerealzanlavisualizacindeloscampos
de texto y adems reducen la complejidad de ubicar un
TextView paradeterminarlafuncindeun EditText .

Incluyendo que te permiten setear errores de forma

sencillaparaquelaintegridaddelosdatosdelusuariose
mantengayesteseaconscientedeella.Estorepresenta
msfiabilidadentusapps.
Y qu decir sobre la buena cantidad de atributos que
poseeel TextInputLayout para personalizarel colorde
los errores, la etiqueta y la creacin de un contador de
caracteres.

Quieresaprenderadisearbasesde
datosdesde0?

Artculos Relacionados
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

26/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

RadioButtonen

Utilizar

Android

FragmentosEn
UnaAplicacin

RadioButtonEn
Android:
ControlesDe
Entrada

Android

TutorialSobreLa
ActionBarEn
Android

Utilizar
FragmentosEn
UnaAplicacin
Android

Acerca Del Autor

James Revelo

Comentarios

Comunidad

Recomendar 3

Compartir

Iniciarsesin

ordenarporelmejor

netealadiscusin...
yolo hace2meses

Supermegarchiduperduperbueno!
1

Responder Compartir

JamesReveloUrrea
hace2meses

Moder. >yolo

ajajjajagraciasYOLO:V

Responder Compartir

victor hace3meses

Excelentee!Muchasgracias!!
http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

27/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Excelentee!Muchasgracias!!
1

Responder Compartir

JamesReveloUrrea
hace3meses

Moder. >victor

CongustoVictor:D

Responder Compartir

victor hace3meses

HolaJames,comentoporsialguiennecesita,queal
usarelcounterMaxLength,ynossaltaerrores
porquenoencuentraelitemdetextColorErroryselo
aadiremosmanualmenteanuestrotema:
<item
name="textColorError">@color/design_textinput_error_color_light</item>
Tambincomentaalgodeextenderuntema,perono
scomohacerlooaquserefiere.
ReferenciadodeStackoverflow:
http://stackoverflow.com/quest...

Responder Compartir

TAMBINENHERMOSAPROGRAMACIN

TutorialDeLayoutsEn
Android
16comentarioshace10meses

ServicioWebRESTful
ParaAndroidConPhp,
MysqlyJson
72comentarioshace8meses

LuisMiguelEstoyde

AdrianuxVeldenMuy

acuerdo!

buentutorial.....He
estadoiniciandocon
webservicesyaquemi

UsoDeRecursosEn
Android

CheckBox:ControlesEn
Android

10comentarioshace9meses

9comentarioshace2meses

JLHolaJames!

GabrielB.Hola

Hermosa Programacin Copyright 2016.

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

28/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

http://www.hermosaprogramacion.com/2016/02/textinputlayoutenandroidmaterialdesign/

29/29