En la entrada sobre la creación del primer proyecto en Android, posteriormente vimos como crear nuestra aplicación básica, revisamos la estructura de proyectos y diferentes conceptos como el SDK, Manifest y las actividades y su ciclo de vida, ahora continuaremos modificando el proyecto actual con el fin de ir produndizando en la creación de aplicaciones.
Como se mencionó vamos a modificar la aplicación creada en esta entrada donde construimos el primer proyecto Android, allí nos quedamos en esta pantalla
ahí podemos ver que la app por defecto crea un componente TextView con el texto "Hello World", desde la vista Split. (si hasta este punto no sabes como crear la aplicación, te recomeniendo que revises la entrada mencionada más arriba.)
estando aquí, vamos a modificar esta vista agregando nuevos componentes, si pasamos entonces a la vista de diseño, podemos modificar la pantalla a nuestro gusto, en este caso crearemos la siguiente interfaz.
Como vemos agregamos un componente PlainText qué en realidad corresponde a un campo de edición o <EditText/> el cual puede tener propiedades como texto plano, password, Teléfono, Correo entre otros, así mismo el Layout definido nos permite modificar el tamaño de los componentes y asignarle una posición relativa, en este caso el campo de texto tiene una posición relativa al textView del titulo.
Si pasamos a la vista Split vemos entonces el código xml generado y desde aquí podemos modificar las propiedades de forma manual, en este caso se agregó un color al titulo y un tamaño de 25sp, nótese que cada componente tiene una propiedad id, así como propiedades para controlar la ubicación del componente en la pantalla.
Encontramos otros componentes como el hint que corresponde a un placeHolder el cual se muestra mientras el campo esté vacío, se podrían agregar de la misma manera otras propiedades para estilizar el componente.
Ahora se agrega un componente de tipo <Button/> el cual también tiene la propiedad id la cual es relativa al componente del campo de texto, para este caso modificamos el identificador.
Lógica de Aplicación.
Para realizar la lógica y procesamiento de información, vamos a la clase MainActivity.kt, desde allí obtenemos los componentes gráficos por medio de su id utilizando el método findViewById()
Agregamos el evento clic del botón y creamos una función llamada onClick() (Puede ser llamada de cualquier forma)
En esta función se agrega la lógica para capturar el valor del campo de texto el cual se referencia igual que el botón pero en este caso creando un componente de tipo EditText que referencia el id del campo de texto.
Posteriormente se obtiene el valor del campo y se agrega a una variable String que luego se muestra en un componente de tipo Toast el cual permite mostrar un mensaje temporal en pantalla.
Cuando ejecutamos la aplicación se lanza el emulador y podemos probar el sistema agregando el nombre del usuario y presionando el botón “ingresar”, vemos entonces como se muestra el Toast el cual dura algunos segundos.