0% encontró este documento útil (0 votos)
53 vistas29 páginas

TextInputLayout en Android - Material Design

Material Design

Cargado por

Eduardo Perdomo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
53 vistas29 páginas

TextInputLayout en Android - Material Design

Material Design

Cargado por

Eduardo Perdomo
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

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
[Link]

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
[Link]

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,
[Link]
el usuario nunca pierda el contexto del contenido que
estdigitando.

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


[Link]
de12sp.Entotalelreacompletamide72dp,contando
elpaddingentreloscomponentes.

[Link]

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 .

[Link]
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
[Link]

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:
[Link]

[Link];
[Link]
[Link];
[Link];

publicclassActividadPrincipalextendsAppCompatActivity

@Override
protectedvoidonCreate(BundlesavedInstanceState
[Link](savedInstanceState);
setContentView([Link].actividad_principal
Toolbartoolbar=(Toolbar)findViewById
setSupportActionBar(toolbar);
}
}

Ellayoutdelaactividadseveraas:
actividad_principal.xml

<?xmlversion="1.0"encoding="utf8"?>
<[Link]
[Link]

5/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="[Link]"
<[Link]
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/[Link]"
<[Link]
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/[Link]"
</[Link]>
<includelayout="@layout/contenido_actividad_principal"

</[Link]>

el

segmento

central

contenido_actividad_principal.xml puedesdejarlocon

sucontenidopredeterminado

Paso2:AadirDesignSupportLibrary
Abre tu archivo [Link] del mdulo principal y
aadelaslibrerasparasoportedeversionesylalibrera
dediseo.

dependencies{
compilefileTree(dir:'libs',include:['*.jar'
testCompile'junit:junit:4.12'
[Link]

6/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

compile'[Link]:appcompatv7:23.1.1'
compile'[Link]: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
[Link]
acento ser ocupada por el tono 400 de Rosa como se
muestraenlaherramientaMaterialDesignColors:

El archivo [Link] quedara con los siguientes


valores:

[Link]

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

[Link]

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="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
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="[Link]"
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"
<[Link]
[Link]

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"/>
</[Link]>
</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"
<[Link]
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"/>
</[Link]>
</LinearLayout>
[Link]

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"
<[Link]
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"/>
</[Link]>
</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
[Link]

11/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

android:id="@+id/boton_cancelar"
style="@style/[Link]
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.

<[Link]
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"/>
</[Link]>

[Link]

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 [Link] obtn la instancia
del botn con la accin de guardado para tener su
[Link] setOnClickListener() una
nueva escucha annima. Sobrescribe su controlador
onClick() y deja expresado que deseas ejecutar un
mtodofuturollamado validarCampos() .

ButtonbotonAceptar=(Button)findViewById(R.
[Link]([Link]
@Override
publicvoidonClick(Viewv){
//validarDatos()
}
});

Paso2:ValidacindeDatos
Validar los campos de tus edit texts depende
directamente de las reglas de negocio de tu aplicacin.
[Link]

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
[Link]
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=[Link]("^[azAZ]+$"
[Link](nombre).matches()||
}
[Link]

14/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

ValidacindeltelfonoEltipodeentradaparaeste
campodetextoteayudaalimitaralusuarioalingresode
caracteresrelacionadosconunnmerodetelfono.
Por otro lado, puedes usar el patrn predefinido
[Link] para una validacin adicional de la

sintaxis del nmero. Aade esta lgica a un nuevo


mtodollamado validarTelefono() .

privatebooleanvalidadTelefono(Stringtelefono
[Link](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
[Link]

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.
[Link]

[Link];
[Link]
[Link]
[Link];
[Link];
[Link];
[Link];
[Link];
[Link];
publicclassActividadPrincipalextendsAppCompatActivity
privateTextInputLayouttilNombre;
privateTextInputLayouttilTelefono;
privateTextInputLayouttilCorreo;
@Override
protectedvoidonCreate(BundlesavedInstanceState
[Link](savedInstanceState);
setContentView([Link].actividad_principal
Toolbartoolbar=(Toolbar)findViewById
setSupportActionBar(toolbar);
//ReferenciasTILs
tilNombre=(TextInputLayout)findViewById
tilTelefono=(TextInputLayout)findViewById
tilCorreo=(TextInputLayout)findViewById
//ReferenciaBotn
ButtonbotonAceptar=(Button)findViewById
[Link](newView
@Override
[Link]

16/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

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

}
privatebooleanesNombreValido(Stringnombre
Patternpatron=[Link]("^[azAZ]+$"
if(![Link](nombre).matches()
[Link]("Nombreinvlido"
returnfalse;
}else{
[Link](null);
}
returntrue;
}
privatebooleanesTelefonoValido(Stringtelefono
if(![Link](telefono).
[Link]("Telfonoinvlido"
returnfalse;
}else{
[Link](null);
}
returntrue;
}
privatebooleanesCorreoValido(Stringcorreo
if(!Patterns.EMAIL_ADDRESS.matcher(correo
[Link]("Correoelectrnicoinvlido"
returnfalse;
}else{
[Link](null);
}
returntrue;
}
privatevoidvalidarDatos(){
Stringnombre=[Link]
Stringtelefono=[Link]
[Link]

17/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Stringcorreo=[Link]
booleana=esNombreValido(nombre);
booleanb=esTelefonoValido(telefono
booleanc=esCorreoValido(correo);
if(a&&b&&c){
//OK,sepasaalasiguienteaccin
[Link](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([Link].campo_nombre
[Link]

18/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

campoTelefono=(EditText)findViewById([Link].
campoCorreo=(EditText)findViewById([Link].campo_correo
[Link](newTextWatcher
@Override
publicvoidbeforeTextChanged(CharSequence
}
@Override
publicvoidonTextChanged(CharSequences,
[Link](null);
}
@Override
publicvoidafterTextChanged(Editables)

}
});

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

[Link](newTextWatcher
@Override
publicvoidbeforeTextChanged(CharSequence
}
@Override
publicvoidonTextChanged(CharSequences,
esCorreoValido([Link](s));
}
@Override
publicvoidafterTextChanged(Editables)
}
[Link]

19/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

});

[Link]
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

[Link]

20/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

animacindela
[Link]
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:
[Link]

<stylename="Error"parent="[Link]"
<itemname="android:textColor">#FF9800</item>
[Link]

21/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

</style>

TILdelnombre

<[Link]
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
[Link]
o [Link] .
Elsiguienteejemplocambiaalcolorprimariolaetiqueta:
[Link]

<stylename="Hint"parent="[Link]"
[Link]

22/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

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

Campodelcorreo

<[Link]
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.
[Link]

23/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

Por ejemplo, pongamos un contador con lmite de 30


caracteresenelcampodelnombre.

<[Link]
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
[Link]
esparacuandosetraspasadicholmite.
Porejemplo
Crear dos estilos para el contador donde cambiar los
tonosanaranjaprofundoparaeldesbordeyazulparael
estadonormal.
[Link]

[Link]

24/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

<stylename="Counter"parent="[Link]"
<itemname="android:textColor">#42A5F5</item>
</style>
<stylename="CounterOverFlow"parent="[Link]"
<itemname="android:textColor">#FF7043</item>
</style>

Ahoraselosasignoalcampodelnombre:

<[Link]
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.

[Link]

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
[Link]
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
[Link]

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!!
[Link]

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:
[Link]

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!

[Link]

Hermosa Programacin Copyright 2016.

[Link]

28/29

26/5/2016

TextInputLayoutEnAndroid:MaterialDesign

[Link]

29/29

También podría gustarte