Ahora que ya hemos iniciado, vamos a añadir 2 componentes más:
un TextView. A modo de etiqueta para que muestre un texto, por ejemplo: ¿Cuál es tu nombre?
un EditText. Es un cuadro de texto donde poder escribir. En el ejemplo anterior, la respuesta a la pregunta.
Simplemente se debe arrastar los dos componentes al centro de la pantalla (uno debajo de otro) y le asignaremos un ID. Los componentes se llaman «TextView» y «Plain Text» en la columna izquierda.
Cuando se inserten en la pantalla, debemos referenciarlos. Para este ejemplo, cada elemento se ha referenciado con el posterior: la etiqueta con el cuadro de texto y, este, con el botón.
Para mejorar el aspecto, arreglaremos el XML asignando algunos atributos.
Modificando los atributos desde el código, empezaremos por el TextView añadiendo la siguiente línea:
android:id="@+id/tvNombre"
Lo primero que hacemos es llamar a Android, accediendo a la propiedad ID. Acto seguido, con @+id estamos creando una referencia del componente en el archivo R.java de android y, para acabar, se le da el nombre que se quiera, en este caso, tvNombre. Aunque se puede añadir en cualquier parte del XML, la línea del ID como norma general en las prácticas del buen uso, suele ir la primera.
Lo siguiente será cambiar el texto que trae por defecto por el que queremos. Así que localizamos la línea “android:text=»TextView” y cambiamos el texto a “¿Cuál es tu nombre?”.
Ahora ya lo tendríamos listo, pero en comparación con el EditText, se ve bastante pequeño, así que accederemos a un atributo más.
Es muy parecida a las anteriores, textAppearance lo único que hace es decirle al componente que su apariencia será controlada a través de un estilo. Un style o estilo es simplemente una serie de atributos reutilizables. Imaginemos que tenemos una App que tiene varios textos iguales (fondo de un color, un tamaño de texto predefinido, etc), podemos añadir los mismos atributos a cada uno de ellos, con los riesgos que conlleva (si luego hay que cambiar el color del texto, habría que ir a todas las pantallas que llevasen textos y cambiarlos uno a uno) o podemos asignarles un mismo estilo al que todos accederán, así si se cambia algo, automáticamente todos los textos lo harían. Piensa en el CSS.
Ahora nos toca el EditText que sería hacer básicamente lo mismo, añadir un ID y listo. Este se llamará etNombre. Habrás observado que también se han generado algunas líneas automáticamente:
android:layout_below: Este atributo es solo para los RelativeLayout y los que hereden de él. Además del below tenemos algunos muy parecidos como layout_above, que haría lo mismo pero en vez de ponerse debajo, se pondría encima.
android:layout_centerHorizontal="true": Nos pondrá siempre el componente en el centro de la vista en el eje horizontal. Así aunque el móvil sea muy grande o muy pequeño siempre se mantendrá centrado.
android:ems="10": Añade una anchura al EditText suficiente para que se vean X caracteres en la pantalla. Por ejemplo ahora tenemos puesto 10, si se añaden más, irán desapareciendo de la vista, probad a cambiar el número para que no os quede duda alguna.
android:inputType="textPersonName": El atributo inputType nos permite que una vez hagamos click en el editText, el teclado que se muestre, esté adecuado al tipo de información que veremos. Prueba a cambiar "textPersonName" por "textWebEmailAddress". ¿Notas alguna diferencia?
Por último tenemos un text en el EditText. El problema de dicho atributo en este tipo de componentes es que cuando hagamos click en él, ese texto tendremos que borrarlo para añadir el nuestro. Para evitar esto, con android:hint="Nombre", cuando el usuario escriba, el texto desaparecerá y no habrá que borrarlo previamente.
