Creación de layouts pt2: TextViews, Buttons, EditText

Published in

OpenLabPERU

4 min readMar 21, 2021

Introducción

En este episodio hablaremos acerca de las views más básicas que podremos encontrar en Android, el motivo final será poder crear un ejemplo de formulario simple con una pequeña validación. Recuerden que esta es la continuación de creación de layouts. Empecemos por nuestra valiosa teoría :D

Android views básicas

Ya hemos hablado de manera general de las views, a través de los distintos ViewGroups, es hora de hablar de una rama . Las diferentes implementaciones de componentes de tipo view que se usa constantemente son:

TextView: Este componente nos permite poder visualizar texto, exactamente texto dentro de un espacio determinado :D
EditText: Este componente nos brinda una caja de texto editable, un input que puedes ingresar textos de manera configurable.
ImageView: Este componente, como su mismo nombre lo dice, nos permite poder agregar una imagen en un campo predeterminado.
Button: Este componente nos permite configurar un view clickeable, exactamente un botón
Toast: Este componente nos muestra una especie de diálogo que se muestra por un espacio de tiempo, muestra mensajes predefinidos.

Con estos simples componentes se puede crear un formulario básico, es más, vamos a implementarlo en este momento :D

Implementando un formulario básico

Empezaremos implementando ConstraintLayout como ViewGroup, agregando un ícono y un texto título simple. Luego agregaremos un edit text para ingresar datos y un botón de validación. Por último haremos una lógica en el activity para pasar a mostrar un toast. Empecemos :D

Primero usamos ConstraintLayout como base. Este contenedor, como nombramos en la clase anterior, es el recomendado por la comunidad de Android. Ahora agregaremos un poco de magia a nuestro layout:

Dentro de la distribución de nuestras vistas podemos observar la inclusión de un ImageView, TextView, EditText, Button. Al usar ConstraintLayout, podemos observar que poseen distintas características que nos permiten ubicarlos con respecto al padre o a las otras vistas (para eso agregamos un id a cada una de las vistas). Ahora agregaremos un poco de lógica y veremos como podemos interactuar con nuestro layout.

En nuestro activity iniciamos asignando nuestro layout con la función setContentView. Luego vamos a agregar una función de click a nuestro botón. Aquí agregamos una validación del texto de nuestro EditText, en el cual validamos si está vacío mostraremos un Toast que dirá: “El campo email no puede ser nulo”. En el caso de éxito mostraremos: “Email validado correctamente”.
Nuestro Toast esta formado por una función estática que requiere un contexto, el texto y la duración de nuestro Toast (es preferible usar las variables estáticas dentro de la clase Toast).
Ahora veamos nuestro código en funcionamiento:

Y así podríamos crear mejores validaciones, agregar mas campos y cambiar la distribución. En las referencias se pondrá una guía de naming conventions y correcto uso, es preferible usar las funciones y nombres en inglés.