Fundamentos de Android: Plantilla de Actividad Básica

Ya hemos visto que cuando iniciamos un nuevo proyecto, Android Studio proporciona plantillas de diseño para nuestra aplicación. Cada plantilla incorpora el esquema básico de una actividad y una interfaz de usuario, lo que nos pueden resultar útil para ahorrar tiempo y para seguir las prácticas recomendadas para el diseño, puesto que a partir de una estructura básica podemos ampliar y personalizar cada plantilla según nuestras necesidades.

Hasta ahora para nuestros proyectos hemos utilizado la plantilla de Actividad vacía (Empty Activity), pero ahora vamos a utilizar una plantilla algo más completa como la plantilla de Actividad básica (Basic Activity) para explorar la estructura de una actividad con objeto de identificar y personalizar algunos de sus componentes básicos.

Para ello abrimos Android Studio y creamos un proyecto nuevo seleccionando la plantilla Basic Activity:



Le asignamos un nombre al proyecto (en nuestro caso 'Actividad Base'), seleccionamos Kotlin para el lenguaje y marcamos la casilla 'Use AndroidX artifacts':



Como ya sabemos, Android Studio genera, además de otros, dos archivos fundamentales: MainActivity.kt y activity_main.xml. Junto a este último vemos otro: layout/content_main.xml. Ahora ejecutamos la aplicación en el emulador de Android para identificar los componentes de una actividad básica en la interfaz de usuario (si al intentar ejecutar la app te aparece un error que empieza así: 'Error Default interface methods are only supported starting with Android N...' revisa la solución en Anatomía de una app básica):



Barra de estado (status bar). Barra horizontal que se ubica en la parte superior para mostrar distinta información del sistema como el estado de la conexión wifi, cobertura, el estado de la batería o la hora, entre otras cosas. Aunque no está visible en el código de la plantilla, podemos acceder a la barra de estado desde la actividad (por ejemplo, desde MainActivity.kt podemos ocultar la barra de estado).

Barra de aplicación o barra de acción (app bar / action bar). Barra horizontal ubicada inmediatamente bajo la barra de estado para proporcionar una guía visual de la aplicación con elementos estandarizados y de navegación. Su código lo encontramos en activity_main.xml, en la etiqueta AppBarLayout. Cambiando los valores de sus atributos podemos cambiar el aspecto de la barra de la aplicación. Podemos, por ejemplo, cambiar su color de fondo para que sea del mismo color que la barra de estado, la cual suele ser del mismo color primario pero más oscura. Para ello abrimos layout/activity_main.xml y pulsamos sobre la pestaña vertical Preview que está a la derecha:



En la etiqueta Toolbar cambiamos:

android:background="?attr/colorPrimary"

por:

android:background="?attr/colorPrimaryDark"

Este valor establece el color de la barra de la aplicación del mismo color primario oscuro que la barra de estado, como podemos comprobar en la vista previa.

Uno de los elementos que usualmente contiene la barra de la aplicación es el nombre de la aplicación, que inicialmente coincide con el nombre del paquete, y el código que hace referencia a él está en app/src/main/AndroidManifest.xml, en la etiqueta activity, en el atributo android:label="@string/app_name". Podemos cambiar el nombre de la aplicación que se muestra en la barra de la aplicación modificando el recurso de texto en values/strings.xml:

<string name="app_name">Actividad Base</string>

por:

<string name="app_name">Mi App</string>

Otro elemento común en la barra de la aplicación es el botón derecho (los tres puntitos verticales) que despliega los elementos ocultos del menú de opciones de la aplicación (por ejemplo, ajustes o acerca de). Su código está en MainActivity.kt, en el método onOptionsItemSelected() que implementa lo que sucede cuando el usuario selecciona un elemento del menú. Podemos ver los elementos del menú de opciones en menu/menu_main.xml (en este ejemplo solo aparece el elemento <item android:id="@+id/action_settings"...>).

Coordinador de diseño (CoordinatorLayout) que es un contenedor de otros elementos visuales (ViewGroup) que proporciona mecanismos para que los elementos de la interfaz de usuario interactúen. La interfaz de usuario de nuestra aplicación está en el archivo layout/content_main.xml, que especifica los elementos visuales o vistas (views) de la aplicación que se incluyen en este ViewGroup, y en el archivo activity_main.xml se incluye la instrucción para su inclusión (<include layout="@layout/content_main"/>). Fíjate que activity_main.xml no especifica vistas de diseño, pero en su lugar incluye el diseño de content_main donde sí se especifican las vistas de la aplicación, y de esta forma las vistas del sistema se mantienen separadas de las vistas exclusivas de la aplicación.

En nuestra aplicación la plantilla utiliza un TextView para mostrar el texto "Hello World". Este view se encuentra en el archivo content_main.xml, y en este archivo añadiremos todos los elementos de la interfaz de usuario de la aplicación.

En activity_main.xml tenemos un botón flotante de acción (FAB: FloatingActionButton), que es un elemento de la interfaz de usuario que está utilizando un icono de clip-art (app:srcCompat="@android:drawable/ic_dialog_email"), y MainActivity.kt incluye, dentro de onCreate, un controlador onClick (fab.setOnClickListener) para el FAB.

Al pulsar el botón flotante de acción (FAB) vemos que aparece durante un momento una barra con un texto. Para cambiar este texto abrimos MainActivity y buscamos el controlador para el botón (fab.setOnClickListener), y allí cambiamos el argumento texto de Snackbar.make(), por ejemplo:

fab.setOnClickListener { view ->
    Snackbar.make(view, "Botón flotante pulsado...", Snackbar.LENGTH_LONG)
        .setAction("Action", null).show()
}

Este botón utiliza el color de énfasis de la aplicación, por lo que una forma de cambiar su color es cambiando el color definido de énfasis. Para ello, abrimos el archivo de recursos values/colors.xml y cambiamos el valor del atributo colorAccent (<color name="colorAccent">#D81B60</color>):

<color name="colorAccent">#FF9800</color>

Ejecutamos nuevamente la aplicación (botón 'Run app') o aplicamos los cambios (botón 'Apply changes') y comprobamos estos cambios: