Teniendo un proyecto para Android básico, es momento de familiarizarnos con la interfaz. El entorno de desarrollo de Android Studio se compone de una serie de carpetas.
Las carpetas que más utilizaremos serán la de java y res. Describiendo la función de cada una tenemos que:
- Manifest sirve para configurar los permisos de la aplicación. Ejemplo: usar el internet o grabar en el disco duro son acciones que pueden provocar fallos en el sistema o permitir que sea hackeado. Por eso uno debe establecer qué si puede hacer la app aquí.
- Java. En esta carpeta se coloca todo el código y la lógica que queremos que la aplicación sea capaz de realizar. Ej: sumar, leer archivos, mandar mensajes por internet, guardar en memoria, etc.
- res. En esta carpeta se almacena toda la información visual del programa. Se divide en subcarpetas:
- drawable. Esta carpeta almacena todas las imágenes e iconos de la aplicación.
- layout. Esta carpeta almacena las ventajas y estructuras visuales que se utilizan para que el usuario interactúe con ellas.
- values. Esta carpeta guarda números y letras que usemos con regularidad en el programa.
- Gradle Scripts. En ocasiones ocuparemos modificar algo del programa como agregar nuevas librerías, para eso haremos uso de Gradle.
Todo programa en Android se divide en 2 cosas:
- Actividades / Activities. Estas son las ventajas principales que tenemos en un programa y los que usaremos principalmente.
- Fragmentos / Fragments. Estos son controles más avanzados que en ocasiones tendremos que usar para crear interfaces más intuitivas. De momento no los utilizaremos.
De momento nuestra aplicación tiene una Actividad llamada Main Activity (actividad principal) y esta configurada de manera que al abrir la aplicación sea lo primero que aparezca. En este tutorial vamos a crear un botón que muestre un mensaje en Android.
Administrar el Layout
Lo primero es abrir el layout donde vamos a modificar la ventana de la aplicación. En este caso entraremos a la carpeta res -> layout y encontraremos un objeto llamado activity_mail.xml. En éste archivo modificaremos la ventana. Hacemos doble clic.
Por default la aplicación muestra un texto que dice Hello World!!! / Hola Mundo que será lo primero que aparezca en la aplicación. Si hacemos clic en el texto y presionamos la tecla SURP/DEL podemos borrarlo.
En la sección superior izquierda aparecen todos los controles disponibles para Android por default. Vamos a colocar un nuevo texto y un botón que será lo que mostrará al usuario.
Los textos que mostramos al usuario se conocen como TextView y los botones se conocen como Button.
Para colocar un control, solo hay que hacer clic en el control que deseamos, en este caso en TextView y dejarlo presionado para arrastrarlo a la ventana del celular muestra. El control se quedará donde lo hayamos indicado.
Para cambiar el texto que indica adentro del TextView, su tamaño o su posición podemos modificar los atributos haciendo clic en la pestaña Attributes que aparece en la esquina superior derecha.
- El id representa el identificador del objeto, y es como vamos a poder reconocerlo en código. Vamos a cambiarle su identificador a titleLbl.
- El text representa el texto que vamos a poder ver en el control. Vamos a cambiarlo por un texto de bienvenida.
Ahora haremos lo mismo con un Button cambiando su id por startBtn y el texto por “Haz clic aquí“.
Para finalizar con el Layout, vamos a hacer clic en el botón Infer Constraints de manera que automáticamente fije la posición de los controles. Si no hacemos esto, la aplicación marcará error.
Crear eventos en el programa
Ahora sigue crear la lógica del programa. Para eso nos vamos a ir a la carpeta java -> NOMBRE DE NUESTRO PROGRAMA -> MainActivity.kt. En este vamos a crear el código de programación. Usualmente se hace clic en la primer a carpeta que veamos.
Veremos que dentro ya hay código precargado. Vamos a agregar la lógica después de setContentView(R.layout.activity_main). Lo primero es detectar donde se encuentra el botón que creamos.
Para eso teclearemos el siguiente código:
//Crea una variable que representa nuestro botón.
//findViewById localiza el botón dentro del layout que fabricamos.
//Button lo transforma en tipo botón.
val startBtn = findViewById<Button>(R.id.startBtn)Debe quedar de esta forma:
Con eso Android ya reconoce nuestro botón dentro de la plataforma. Ahora vamos a hacer que muestre un mensaje al hacer clic. Debajo de val startBtn agregamos el siguiente código:
//Ejecutará lo que le coloquemos dentro de las llaves al hacer clic al botón.
startBtn.setOnClickListener {
//Muestra un mensaje corto en el programa.
Toast.makeText(this, "Hiciste clic en el botón", Toast.LENGTH_SHORT).show()
}Con lo que el código debe quedar de esta forma.
Ejecutar el programa
Por último ya solo queda ejecutar el programa. En caso de contar con un celular Android, hay que conectarlo y activar el modo desarrollador. Para aprender cómo, haz clic en el siguiente tutorial.
Finalmente hacemos clic en el botón ejecutar. ¡Y listo!
Debe aparecer la aplicación y mostrar un mensaje al hacer clic en el botón.