Mi primera aplicación: cómo crear tu primera aplicación de Android paso a paso

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Para crear una aplicación nativa de Android, una que pueda usar directamente todas las características y la funcionalidad disponible en un teléfono o tableta con Android, necesitas usar el framework API para Java de la plataforma Android. Esta es la API que te permite realizar tareas comunes como dibujar texto, figuras y colores en la pantalla, reproducir sonidos o videos e interactuar con los sensores del hardware de un dispositivo. A través de los años, el framework API de Android ha evolucionado para volverse más estable, intuitivo y conciso. Como resultado, ser un desarrollador de Android hoy en día es más fácil que nunca. Más aún si usas Android Studio, la herramienta oficial para trabajar con el framework.

En este tutorial te mostraré cómo crear tu primera aplicación de Android. Al hacer esto, también te presentaré importantes conceptos específicos de Android, como vistas, diseños y actividades.

Comenzaremos desde cero para crear una aplicación muy simple en este tutorial. Sin embargo, si prefieres escribir menos código, o si necesitas desarrollar tu aplicación tan rápido como sea posible, considera usar una de las plantillas para aplicaciones de Android nativas disponibles en CodeCanyon.

CodeCanyon mobile Android app template bestsellers

Mediante el uso de una plantilla para aplicaciones, puedes tener una aplicación pulida y lista para ser publicada en cuestión de horas. Puedes aprender a usar una plantilla para aplicaciones de Android consultando el siguiente tutorial:

Android

Cómo comenzar con una plantilla para aplicaciones de Android

Ashraff Hathibelagal

Requisitos previos

Para poder seguir los pasos, necesitarás:

la versión más reciente de Android Studio
un dispositivo o emulador que ejecute Android Marshmallow o una versión posterior

Si no tienes Android Studio, consulta el siguiente tutorial para aprender cómo instalarlo y configurarlo:

SDK de Android

Cómo comenzar a crear aplicaciones de Android

Ashraff Hathibelagal

1. Crea un proyecto nuevo

Necesitarás un proyecto de Android Studio para diseñar, desarrollar y generar tu aplicación. Así que ejecuta Android Studio y haz clic en el botón Start a new Android Studio project (Iniciar un nuevo proyecto de Android Studio).

En la siguiente pantalla elige Add No Activity (No añadir actividad), ya que no queremos usar ninguna de las plantillas ofrecidas por Android Studio. Luego presiona Next (Siguiente) para continuar.

Ahora verás un formulario en el que puedes escribir detalles importantes acerca de tu aplicación, tales como su nombre y el nombre del paquete. El nombre es, por supuesto, el nombre que tus usuarios verán en sus teléfonos cuando instalen tu aplicación.

Por otro lado, el nombre del paquete es un identificador único para tu aplicación en Google Play. Debes seguir las convenciones de nomenclatura para paquetes de Java al especificarlo. Por ejemplo, si el nombre de tu aplicación es MyFirstApp (MyPrimeraAplicación) y trabajas para una organización cuya dirección de sitio web es example.com (ejemplo.com), el nombre del paquete idealmente sería "com.example.myfirstapp" ("com.ejemplo.miprimeraaplicación").

A continuación, debes decidir cuál es el lenguaje de programación que quieres usar al escribir el código de la aplicación. Por ahora selecciona Java y presiona Finish (Finalizar).

Ahora, Android Studio tomará uno o dos minutos para generar y configurar el proyecto.

2. Crea una actividad

Una actividad es uno de los componentes más importantes de una aplicación de Android. Es lo que te permite crear y mostrar una interfaz de usuario a tus usuarios. Una aplicación puede tener una o más actividades, y cada una permite al usuario llevar a cabo alguna acción. Por ejemplo, una aplicación de cliente de correo electrónico puede tener tres actividades: una para que el usuario se registre, una para iniciar sesión y una para escribir un correo electrónico.

Para mantener la simplicidad de este tutorial, vamos a crear una aplicación con tan solo una actividad. Para crear la actividad, en el panel Project (Proyecto) de Android Studio haz clic con el botón derecho en app (aplicación) y selecciona New > Activity > Empty Activity (Nuevo > Actividad > Actividad vacía).

En el cuadro de diálogo que aparece, escribe MainActivity (ActividadPrincipal) como nombre de la actividad, marca la opción Launcher Activity (Actividad de lanzamiento) y presiona Finish (Finalizar).

Marcar la opción Launcher Activity (Actividad de lanzamiento) es importante, ya que es lo que permite que tus usuarios abran la actividad usando un lanzador de Android. Como tal, una actividad de lanzamiento sirve como un punto de entrada a tu aplicación.

3. Crea un diseño

Generalmente cada actividad tiene al menos un diseño asociado a ella. Cuando creaste tu actividad en el paso anterior, también generaste un diseño vacío para ella. Para echarle un vistazo, abre el archivo activity_main.xml.

El diseño de una actividad está compuesto principalmente por vistas y grupos de vistas. Una vista, a veces denominada widget, es un componente individual de tu interfaz de usuario. Los botones, campos de texto, etiquetas y barras de progreso son ejemplos comunes de vistas. Un grupo de vistas es un componente que puede servir como un contenedor de vistas. Usualmente, los grupos de vistas también te ayudan a posicionar y establecer las dimensiones de tus vistas.

ConstraintLayout es uno de los grupos de vistas más potentes y flexibles disponibles hoy en día. Por defecto, este es el nodo raíz del archivo XML del diseño de tu actividad. Se ve así:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
    <!-- More code here -->
    
</androidx.constraintlayout.widget.ConstraintLayout>

Vamos a crear una simple aplicación de reloj en este tutorial. Además de la hora local, podrá mostrar la hora actual en dos países diferentes: India y Alemania.

Para permitir que el usuario elija el país en el que esté interesado, nuestro diseño tendrá dos vistas Button, una para Alemania y una para India. Y para mostrar la hora, nuestro diseño tendrá una vista TextClock.

De acuerdo a esto, agrega el siguiente código en el interior del ConstraintLayout:

<TextClock
    android:id="@+id/my_clock"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    android:format12Hour="h:mm:ss a"
    android:textSize="32sp"/>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="parent"
    android:text="Time in Germany"
    android:onClick="onClickGermany"
    android:id="@+id/germany_button"/>

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toTopOf="@id/germany_button"
    android:text="Time in India"
    android:onClick="onClickIndia"
    android:id="@+id/india_button"/>

Nota que cada vista debe tener las propiedades layout_width y layout_height. Estas deciden qué tan grande es la vista. Otras propiedades, tales como layout_constraintBottom_toBottomOf y layout_constraintLeft_toLeftOf, son necesarias para posicionar la vista. Con el código anterior, la vista TextClock se colocará en el centro de la pantalla, y ambas vistas Button hacia la parte inferior de la pantalla.

Por defecto, la vista TextClock solamente muestra las horas y los minutos. Sin embargo, la propiedad format12Hour te permite cambiar eso. En el código anterior, su valor está establecido en h:mm:ss a. Esto le indica a la vista TextClock que debe mostrar las horas, minutos, segundos y también un sufijo AM/PM.

También ten en cuenta que cada vista Button tiene una propiedad onClick. Esta propiedad se usa para asignar manejadores de eventos clic a los botones.

Los manejadores aún no existen, pero puedes pedir a Android Studio que los genere por ti. Para hacer eso, coloca el cursor sobre el nombre del manejador hasta que veas aparecer una bombilla roja a su lado. Luego haz clic en la bombilla y selecciona la segunda opción, la que tiene la bombilla de color amarillo.

Create onClick handlers with Android Studio

En este punto, puedes intentar presionar Shift-F10 para ejecutar la aplicación. Si no hay errores en tu código XML, deberás ver algo como esto en tu teléfono o emulador:

Aunque los botones aún no funcionan, la vista TextClock deberá mostrar la hora local actualizándose cada segundo.

4. Implementa manejadores de eventos

Cuando generaste manejadores de eventos para los dos botones, Android Studio agregó dos métodos al archivo Java de tu actividad, MainActivity.java. Si lo abres, deberás encontrar el siguiente código en él:

public void onClickGermany(View view) {
    
}

public void onClickIndia(View view) {
    
}

Dentro de los manejadores de eventos, todo lo que necesitamos hacer es cambiar la zona horaria de la vista TextClock. Pero ¿cómo puedes hacer referencia a una vista que se encuentra en el archivo XML de tu diseño desde el interior de tu archivo de Java? Bueno, simplemente usas el método findViewById().

Una vez que tengas una referencia a la vista TextClock, puedes llamar a su método setTimeZone() para cambiar su zona horaria. Por lo tanto, agrega el siguiente código en el interior del método onClickGermany():

1	TextClock clock = findViewById(R.id.my_clock);
2	clock.setTimeZone("Europe/Berlin");

De manera similar, agrega el siguiente código en el interior del método onClickIndia():

1	TextClock clock = findViewById(R.id.my_clock);
2	clock.setTimeZone("Asia/Kolkata");

Si te preguntas qué es R, se trata de una clase autogenerada que contiene, entre otras cosas, los IDs de todas las vistas que tienes en tus diseños. El método findViewById() asume que estás utilizando esta clase al enviarle un ID.

En este punto, puedes presionar Shift + F10 de nuevo para volver a ejecutar la aplicación. Ahora deberás poder hacer clic en los botones para cambiar la zona horaria del reloj.

Conclusión

¡Acabas de crear tu primera aplicación nativa completamente funcional para Android! Te animo a que le hagas algunos cambios. Por ejemplo, podrías intentar usar otros formatos de horas o zonas horarias. También podrías intentar cambiar la posición de las vistas para los botones y el reloj.

Hay docenas de vistas y grupos de vistas que puedes usar para crear tus aplicaciones. Consulta la documentación oficial para aprender sobre ellas.

Plantillas y kits de interfaces de usuario para aplicaciones de Android de CodeCanyon

Quizá hayas notado que nuestra aplicación se ve muy simple y sencilla. Eso es porque estamos usando el tema predeterminado, sin aplicar ningún estilo a nuestras vistas. CodeCanyon está lleno de kits de interfaces de usuario para Android que ofrecen estilos hermosos hechos a mano que puedes aplicar a tus vistas.

Generalmente, los kits también tienen una variedad de vistas y diseños personalizados. Puedes consultar los siguientes tutoriales para obtener más información sobre ellos: