Tu primera App con Android Studio

En este capítulo número 2, vas a ver unas cuantas cosas básicas a medida que creas tu primera App con Android Studio. No va a ser una app como la de Uber, Maps, Facebook, etc. Va a ser una aplicación para que practiques con los primeros elementos básicos que debes conocer.

Tu primera App con Android Studio - Máster en desarrollo de APPS #2

Los recursos de proyecto y el código

Lo primero para crear apps, es tener clara la separación de elementos como son los recursos de proyecto y el código.

Los recursos, son todos esos archivos que llamamos "media", imágenes, vídeos, audios, aunque también, son recursos los fragmentos de texto, los colores, los formularios, botones, etc. Básicamente, todo lo que el usuario verá en la pantalla.

Por otro lado, tenemos los archivos de código. Con este código, crearemos la lógica de la app. Por ejemplo, indicar en el código, que cuando se pulse un botón, nos abra una nueva ventana.

Una vez aprendida esta división básica, te será más fácil entender lo que hacemos con cada archivo que forma la app.

Las vistas de Android

Empecemos con un tema básico de Android, muy fácil de entender y que considero que debe ser el primero. Las vistas.

¿Qué son las vistas de Android?

Las vistas (views) son rectángulos en la pantalla. Estos rectángulos son los contenedores para colocar cualquier recurso de los antes mencionados, una imagen, un vídeo, texto, etc.

Por cierto, lo de "rectángulo", tomará mayor sentido cuando empecemos a colocar elementos en la pantalla.

En la siguiente app de ejemplo, tenemos una vista para la imagen, otra para el texto, otra para el botón y otra más para la imagen de mi logo.

Pues toda esta parte que ves, es la interfaz de usuario (UI (User Interface) en inglés. IU en español), creada enteramente con recursos. Aún no hay código que le diga al botón que debe hacer cuando se pulsa.

A las vistas para imágenes, se las conoce en Android Studio como "ImageView" (vista de imagen), a las vistas para texto, se les conoce como "TextView" (vista de texto).

¿Y la vista que muestra el botón? ¿Cómo crees que se llama? ¿ButtonView? no, algunas vistas no siguen la misma nomenclatura. En el caso del botón, será solo "Button" (botón).

Por supuesto, hay muchos tipos de vistas en Android. Las iremos viendo poco a poco.

Mira, aquí las tenemos en Android Studio (si no las ves aún, pronto te mostraré como ver estos elementos):

¿Por qué se escriben las vistas con esas mayúsculas?

Las vistas siguen la convención de nombres denominada UpperCamelCase o PascalCase. Esto es solo una forma de escribir, donde la primera letra de cada palabra, va en mayúscula, con el fin de distinguir varias palabras sin dejar espacios entre ellas, ya que la programación y la informática, en general, no se suele llevar muy bien con los nombres que contengan espacios.

¿Es importante memorizar estos dos nombres? No, solo recuerda la norma de como se escriben los nombres de cualquier vista.

Crear la primera app de Android

En este segundo apartado del capítulo, vamos a construir la pequeña app que has visto un poco más arriba.

Para ello, deberás crear una app vacía con la plantilla "Empty Activity" que te mostré en el capítulo anterior.

Busca el archivo "activity_main.xml" este va a ser con el que vamos a trabajar en este capítulo.

Añadir un ImageView a la app

Lo primero que haremos, será añadirle a la app la vista de imagen para que muestre el avatar.

Para añadir una imagen (ImageView), solo tienes que arrastrar el elemento que pone ese nombre a la parte en blanco que representa la vista que tendrá el usuario final.

Arrástrala donde quieras, no hace falta que te quede exactamente igual que la mía.

Te dejará elegir la imagen que quieras, pero de momento, no vamos a cargar recursos propios en el proyecto. Utiliza alguna imagen de prueba como la que he puesto yo.

Añadir un TextView a la app

Lo siguiente, es añadir un TextView para poner un texto como "Hello PCMaster!".

Arrástralo igual que la ImageView.

Te saldrá de esta forma, con un texto por defecto. Aún no edites nada.

Añadir la vista Button

La vista de tipo Button, nos sirve para añadir botones a la app. Añade también uno. Nuevamente, no lo edites.

¿Cómo se editan las vistas de Android Studio?

Para editar las vistas, lo podemos hacer de dos formas, una es mediante el modo diseño ("Design") de Android Studio, que es el que tenemos ahora mismo o editando código en el modo "code".

Antes de editar nada, debes conocer los atributos de las vistas.

¿Qué son los atributos de las vistas de Android Studio?

Los atributos de las vistas de Android Studio, son cada una de las características que hacen que cada vista, se vea de una forma.

Por ejemplo, las personas, tenemos atributos, uno puede ser el color del pelo, otro la altura, la edad, el peso y tantos otros atributos que tenemos.

Pues bien, los atributos de las vistas, nos sirven para describir como van a verse.

Las vistas, por defecto, toman siempre valores predeterminados al crearse. Si queremos modificar uno o varios, solo tenemos que especificar dichos atributos en concreto. Los valores que les demos, sustituirán a los que vienen por defecto.

La anatomía de un atributo, es NombreAtributo = Valor.

El atributo text de Android en el modo diseño

Para editar un TextView desde el modo diseño, haz click en dicha vista. Verás que hay un panel a la derecha que pone "Attributes" (atributos). El atributo correspondiente al valor del texto que vemos en la app, es "text" (texto). Borra el valor que viene por defecto y dale uno nuevo.

Ignora el "warning" (advertencia) que se muestra con el triángulo amarillo. Eso lo dejamos para otro día.

Si se te descoloca un poco la vista de texto, colócala a tu gusto.

Ahora, vamos con el botón. El botón también tiene un atributo llamado "text". Verás que la mayoría de vistas comparten casi los mismos atributos. El atributo "text", es uno de los más comunes.

Una vez cambiado el mensaje del botón, pasemos a ejecutar ya tu primera app. Sí, ya está lista para ser ejecutada. Aún no hará nada, pero la podrás visualizar en un smartphone virtual, como si la tuvieras ya instalada y todo.

Ejecutar una app en Android Studio

Para ejecutar una app en Android Studio, solo tienes que pulsar el botón verde marcado en la imagen o pulsar SHIFT+F10.

Opps. Hay un problema...

Error No target device found de Android Studio

Nos sale el siguiente error, el cual dice:

Error ejecutando la 'app'

No se ha encontrado un dispositivo.

¿Por qué aparece este error? ¿Cómo lo solucionamos?

Pues bien, al igual que en la vida real, necesitas un dispositivo para ejecutar una app. Este dispositivo, tiene unas características de memoria, procesador, versión de Android, etc.

Pues en Android Studio, lo mismo, hay que crear un dispositivo virtual. Para quien no sepa nada de máquinas virtuales, es como recrear un dispositivo real, pero en tu PC, para poder ir haciendo pruebas, sin tener que hacerlo con un dispositivo de verdad. De esta forma, podrás ejecutar versiones de smartphone de todo tipo y podrás ver como funcionan tus apps en todos ellos, sin tener que comprar varios smartphones.

Crear un nuevo dispositivo para Android Studio

Para crear un primer dispositivo con el que poder hacer las pruebas, hay que ir a "Device Manager" (administrador de dispositivos). Puedes llegar de varias formas. Aquí una de ellas:

En el lateral derecho, te aparecerá esto:

Haz click en "Virtual" > "Create device" (Virtual > Crear dispositivo).

Por cierto, como verás, te hace falta una buena pantalla para manejar cómodamente Android Studio, debido a la cantidad de paneles que tiene. Si no tienes la posibilidad de tener una pantalla grande, si puedes conseguir un par de pantallas extra, aunque sean viejas y pequeñas, te irá mejor, ya que puedes desplegar paneles en otras ventanas. Ya dedicaré tiempo en otro capítulo a esto.

Al darle al botón "Create device", te saldrá esta ventana. Te deja elegir el smartphone que quieras. No repares en nada, es gratis :).

No obstante, de momento, hasta que explique más cosas, elige uno como el Pixel 4, que tiene el icono de la Play Store.

Haz click en un modelo y pulsa el botón "Next".

System image Android Studio

Ahora saldrá una complicada ventana que nos pide elegir una imagen del sistema.

¿Qué son las imágenes del sistema?

Para quien no tenga conocimientos de Virtualización ni de instalación de sistemas operativos, comento brevemente, que una imagen de sistema, es un archivo, un paquete, que contiene todos los archivos necesarios para instalar un sistema operativo.

El instalador de Windows, te lo encuentras en una imagen de sistema, ese es el archivo que te descargas y luego despliegas en un pendrive o antiguamente en un CD/DVD.

Pues en Android Studio, igual, los smartphones virtuales, también necesitan una imagen de sistema para instalar todo el sistema. No tienes que hacer nada complicado, solo dale al botón descargar marcado en la imagen. De momento, te recomiendo que elijas lo que yo elijo, "S".

Esta imagen tiene Android 12 (bastante moderno en la fecha que escribo esto) y cuenta con un "nivel de API" de 31, lo que quiere decir, que nos deja utilizar casi todas las novedades de Android y todo lo anterior (creo que en este momento, vamos por la API 33).

Te pedirá aceptar otra cosa más. Si quieres continuar, marca la opción "Accept" y dale a "Next". En caso contrario, hasta aquí el curso. Ha sido un placer :D.

Espero que hayas continuado con el curso, jejeje. Espera a que realice la descarga (es más de 1GB) y pulsa el botón "Finish" para finalizar.

Volverás a la ventana "System Image". Ahora, la opción "S", no saldrá con el icono de descargar. Esto quiere decir, que ya tienes esa imagen. Pulsa el botón "Next".

Ahora, te deja poner un nombre para la máquina virtual, y algunos ajustes avanzados. De momento, dejamos todo esto por defecto. El nombre, lo dejaría tal cual está, ya que esto nos dice que dispositivo es y la API que tiene. Por cierto, ya explicaré más detalladamente lo que es una API y como funciona. Recuerda que en el primer capítulo dije que no quería presuponer que sabéis algo.

Dale al botón "Finish" y ya tendrás tu Pixel 4 listo para funcionar.

Ejecutar un dispositivo Android virtual

Para ejecutar el dispositivo que acabas de instalar, haz click en el botón de "play".

Ahora, ten paciencia y espera, tu dispositivo tardará unos minutos en iniciarse. Si tienes un equipo muy justito, puedes ir a hacerte un bocadillo, ya que es un proceso lento.

Cuando salga el logo de Google, ya queda poco.

Generalmente, después de la primera carga, se ejecuta mucho más rápido.

Ya está listo.

Android Studio, ahora puede que te esté consumiendo dos GB de RAM tranquilamente, piensa que tu PC, ahora está ejecutando el sistema operativo y además, el de la máquina virtual del smartphone, por eso se necesita un buen equipo para manejar Android Studio.

Verás que los controles táctiles de cualquier smartphone, los puedes emular con el mouse (ratón).

Ejecutar una app en Android Studio

La app no aparece por ningún lado, eso es porque te falta darle al botón "Run 'app'" de Andorid Studio. Este será el que pulsarás cada vez que quieras ejecutar y probar los cambios de tus apps.

Este proceso también puede llevar un rato, sobre todo la primera vez que pruebas una app, de modo, ten paciencia.

En la barra inferior del todo, pegada a la barra de tareas (al menos en Windows). Te va informando de todo el trabajo que está haciendo, de forma que si siguen apareciendo cosas ahí, es que está procesando lo que le has pedido, en este caso, ejecutar la app.

La app, finalmente, se ejecuta correctamente tal y como indica el mensaje informativo de abajo del todo. Sin embargo, no se ve nada parecido a lo que hemos diseñado en la vista diseño de la app. Aparece el botón y detrás están las otras vistas.

Las anclas o restricciones de Android

El problema que ha ocurrido, es el de las anclas más comúnmente llamadas restricciones ("constraints").

En la sección "Component Tree" (árbol de componentes), que está debajo de la paleta de vistas, encontrarás tres errores de este tipo:

Missing Constraints in ConstraintLayout

Faltan restricciones en el diseño de restricciones.

La parte que te interesa para solucionar esto es la de sección de atributos. Uno de ellos, es "Layout" (diseño), el cual, posee cuatro iconos "+" azules. Estos sirven para fijar la vista frente a la pantalla.

En otro capítulo, hablaré más sobre este atributo tan importante. De momento, déjalo todo como yo.

Para la imagen, presiona los cuatro "+". Esto añadirá una serie de valores en "dp", medida que explicaré en otro momento.

• layout_marginStart (margen de la izquierda).
• layout_marginEnd (margen de la derecha).
• layout_marginTop (margen de arriba).
• layout_marginBottom (margen inferior).

Los valores, los puedes modificar desde la parte marcada de arriba en la imagen o en la marcada de abajo. Además, estos números, no serán iguales para ti. Todo depende de donde hayas colocado la imagen exactamente, de forma que ves probando unos valores que veas que quedan bien.

Con el texto, no pongas la restricción de arriba ("layout_marginTop"), la imagen que ya tiene el atributo "layout_marginBottom", ya se encarga de empujar al elemento que encuentra debajo.

Ya sé que a esto, puede que no le veas totalmente el sentido. No te preocupes, dedicaré tiempo a ir mostrándote bien como utilizar estos atributos, ya que si no sabes colocar los elementos en la aplicación final, vas a tener constantes problemas. Ya verás como pronto lo manejas totalmente.

Para el bóton, tampoco hará falta la parte de arriba, el TextView, ya se encarga de posicionar al elemento que tiene debajo, de la misma forma que ha hecho el ImageView.

Ejecuta la app de nuevo. Ahora, se visualiza todo como toca. Solo que la imagen, no aparece. Esta imagen de muestra, no la vas a poder mostrar así. Te la he puesto para ir explicándote todo lo anterior.

Ahora, llegamos a la parte de cargar tus propios recursos y mostrarlos.

¿Cómo se añade un recurso a una app de Android?

Bien, descárgate una imagen de internet pequeñita, parecida a la que he estado utilizando.

¿Cómo añado imágenes al proyecto de Android Studio?

Para añadir imágenes, de momento, arrástralas a la carpeta res > drawable de tu proyecto. Ya hableremos con detalle sobre este tema, ya que trae muchas posibilidades, así que de momento, vamos a tratarlo de la manera más sencilla que se me ocurre.

La que yo he añadido se llama "navegador.png".

Ahora, selecciona el "ImageView" de tu app. Busca en la zona de atributos, uno llamado "srcCompat". Este atributo sirve para especificar la ruta del recurso a mostrar en el "ImageView".

Haz click en el icono marcado en esta imagen.

Selecciona la imagen que has cargado en el proyecto y pulsa "Ok".

Se te sustituirá en la "ImageView" la imagen anterior por la nueva. Al ser seguramente de un tamaño diferente, es posible que te salga muy pegada al elemento "TextView" de abajo. Modifica la restricción "Layout_marginBottom" de la "ImageView".

El resultado final es este de aquí:

Con esto, ya habrá podido crear tu primera app con Android Studio. Todavía queda un gran camino por delante, así que nos vemos en el siguiente capítulo.

Por cierto, si necesitas recursos gratuitos y utilizables para motivos comerciales y personales, entre otras, está Pixabay. Un sitio web con miles de imágenes, sonidos, vectores, etc.