Cómo crear aplicaciones Android para principiantes

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

¿Eres un desarrollador nuevo que está aprendiendo Java? Sigue leyendo para aprender cómo crear tu primera aplicación Java para Android como principiante.

Crear una aplicación móvil es un gran paso para convertir tu idea en realidad. Pero la principal preocupación entre los nuevos desarrolladores es cómo crear una aplicación Android con todos los recursos a su disposición. Si eres principiante, no conocerás el propósito de muchos de esos recursos.

Por lo tanto, es importante comenzar desde lo básico y saber cuál es el punto de partida.

Esta guía te dará un recorrido a través de los conceptos básicos de la construcción de una aplicación Android y responderá tus preguntas sobre cómo crear una aplicación con Java.

Vamos a crear una aplicación Java para Android usando Android Studio como nuestro IDE (Integrated Development Environment, o entorno de desarrollo integrado).

Cómo crear una aplicación en Java

Para comenzar a crear una aplicación Java para Android, debes empezar con un IDE. Existen varias opciones de IDE, pero dos de los más eficientes son Eclipse y Android Studio.

Para esta guía, vamos a usar Android Studio 3.1.3.

Android Studio es un IDE completo que ofrece herramientas que hacen que el desarrollo de aplicaciones sea muy simple y sencillo. Tiene un editor de código avanzado y varias plantillas para el diseño de aplicaciones. También hay herramientas para el desarrollo, la depuración y las pruebas.

Puedes aprender cómo instalar Android Studio en nuestra publicación sobre cómo comenzar a crear aplicaciones Android.

Android

Cómo comenzar a crear aplicaciones Android

Ashraff Hathibelagal

Ejecuta Android Studio

Comencemos con un proyecto nuevo en Android Studio. Este programa te da la opción de Crear un nuevo proyecto en la pantalla de bienvenida.

También puedes continuar con tu proyecto actual, si tienes uno.

Una vez que elijas crear un nuevo proyecto, el siguiente paso es elegir tu actividad. Se te proporcionarán varias opciones, pero comenzaremos con una Actividad vacía para este tutorial sobre la creación de una aplicación Java.

El siguiente paso es configurar tu actividad asignándole un nombre. Nombremos MyBasicApp a nuestra aplicación. Desde el menú desplegable, elige el lenguaje Java. Haz clic en Finalizar.

¡Ahora estamos listos para comenzar a crear nuestra aplicación!

Comienza a trabajar en el desarrollo de aplicaciones Java

En esta etapa, Android Studio ha creado dos carpetas que se encuentran visibles en la esquina izquierda. Estas son:

Una carpeta para MyBasicApp: esta carpeta contiene el código de tu aplicación.
Una carpeta de scripts de Gradle: Gradle es una herramienta gratuita y de código abierto usada por Android Studio para convertir el código en un archivo .apk para tu aplicación.

Dado que hemos seleccionado la plantilla de actividad básica, Android Studio ha creado algunos archivos preestablecidos para nuestro proyecto. Puedes expandir las carpetas para verlos.

Al hacer clic en la carpeta app, aparecerá un menú desplegable con tres o cuatro subcarpetas: manifests, Java, Java (generated) y res. Si expandes cada una de ellas, se abrirán más carpetas. Cada carpeta almacena un componente separado de tu proyecto.

En la carpeta MyBasicApp, ve a la carpeta Java y haz clic en com.example.mybasicapp. Esta carpeta contiene el código fuente de tu aplicación Java para Android.

Ahora haz clic en la carpeta res y abre la carpeta layout. Esta contiene un archivo activity_main.xml. Se trata del diseño de tu aplicación. Haz clic para abrirlo.

Ahora la vista de tu proyecto ha abierto el código fuente y el diseño en dos pestañas separadas. Se ve así:

El archivo .xml te proporciona un diseño en el que puedes arrastrar y soltar elementos para construir tu archivo. También puedes cambiar al editor de código haciendo clic en texto en la esquina inferior izquierda. Ahora puedes editar el código fuente en lugar de añadir elementos a la distribución del diseño.

En el editor de diseño, el panel izquierdo contiene todos los elementos que puedes añadir al diseño. Si ves el árbol de componentes, solamente hay un elemento (Hello World) en nuestra aplicación.

Los elementos que agreguemos a nuestro diseño se mostrarán en el árbol de componentes, junto con la manera en la que fueron agregados en relación con los demás.

Aquí, ConstraintLayout es la raíz de la jerarquía de vista (se trata de las dimensiones de la página en la que se agregarán los componentes).

ConstraintLayout tiene un TextView llamado Hello World.

El TextView es el componente que venía con la actividad vacía. En esta etapa, el diseño se ve así:

El código XML para este diseño será el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Tiene una jerarquía raíz con tan solo un elemento de texto.

Toma en cuenta que este es el diseño básico que Android Studio generó por su cuenta. Todavía no le hemos hecho modificaciones.

Modifica el diseño de la aplicación

El siguiente paso es modificar el diseño añadiendo los componentes de tu elección y asociando actividades con ellos.

Aquí puedes comenzar con este ConstraintLayout con el TextView en su interior, o puedes limpiar el ConstraintLayout y comenzar con una pizarra limpia en términos de diseño.

Digamos que quieres cambiar el texto en el TextView. Puedes ir al editor de código y ver las propiedades del elemento TextView. El código se verá así:

android:text="Hello World!"

Cambia la cadena a lo que tú desees. Por ahora, yo me quedaré con Hello World.

Si tienes configurado un Android Virtual Device (AVD, o dispositivo virtual de Android) en Android Studio, la aplicación se ejecutará en el simulador de esta manera:

Este es el TextView básico con Hello World! como su cadena. Puedes modificar los atributos de este componente de texto. Edita el texto, la fuente, el tamaño y el color para darle una nueva apariencia a TextView.

El código XML para estos cambios sería el siguiente:

<TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:fontFamily="sans-serif-condensed"
        android:text="Hello World"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Hemos cambiado la fuente a Sans Serif y el color a gris más oscuro. El tamaño de la fuente también fue aumentado a 30sp, y el texto se puso en negrita.

Estos son los cambios como se visualizan en el AVD:

Agrega restricciones

Hasta ahora, solamente hemos modificado la actividad vacía predeterminada que Android Studio creó. Ahora veremos cómo añadir restricciones y vistas a la interfaz de usuario.

En el editor de diseño hay una paleta del lado derecho desde la que puedes elegir las restricciones que quieras agregar.

Puedes añadir varias vistas y restringirlas a la parte superior, inferior, izquierda o derecha. Estas vistas tienen atributos que pueden ser editados para modificarlas.

Para comprender mejor qué es un atributo, selecciona textView en el árbol de componentes y observa el widget de restricción en el panel Atributos.

El cuadrado representa las restricciones.

La caja rectangular y cada uno de los cuatro puntos representan una restricción. Puedes incrementar o disminuir su valor en base al punto en el que quieras colocar la vista.

Así es como se ve en el editor de diseño.

Puedes arrastrar y soltar las vistas desde la paleta izquierda para agregarlas al ConstraintLayout. Después de agregarlas, puedes aplicar restricciones para determinar su posición. Cada nuevo botón que se agrega al diseño recibe una identidad única.

Así es como se verá tu diseño después de agregar las restricciones a las vistas:

Este es el código XML del diseño terminado:

<TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimaryDark"
        android:fontFamily="sans-serif-condensed"
        android:text="Hello World"
        android:textColor="@android:color/white"
        android:textSize="30sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Asignación de actividad al `Button`

El diseño de la distribución es la esencia de tu aplicación. Has añadido un Button, pero no hace nada cuando se presiona. Para que sea interactivo y responsivo a las acciones de los usuarios, tenemos que asignarle una actividad.

Supongamos que este es el último paso en tu aplicación y, al hacer clic en Next (Siguiente), quieres que las personas vean el mensaje Finish (Finalizar).

A continuación puedes ver cómo lograrlo.

El botón Next (Siguiente) tiene un id llamado @+id/next. Ya que no hay otro elemento que esté usando este id, podemos emplearlo para encontrar el botón y añadirlo al código Java, de manera que la actividad no se asocie con otro botón.

El id de una vista te ayuda a identificarla, ya que cada id es diferente del id de otras vistas.

Mediante la función findViewByID() es posible encontrar next por su id, R.id.next.

Este es el código final que mostrará el mensaje de finalizar:

view.findViewById(R.id.next).setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
           	Toast myToast = Toast.makeText(MainActivity.this, "FINISH", Toast.LENGTH_SHORT);
		myToast.show();
	}
});

Ejecuta la aplicación para ver cómo funciona el Button.

Conclusiones

Esta guía cubrió todo, desde la configuración de Android Studio hasta la codificación y prueba de un `Button`. No es difícil comenzar a codificar una aplicación: el desarrollo de aplicaciones móviles con Java se ha vuelto más sencillo, ya que muchos elementos pueden arrastrarse y soltarse.

Plantillas de aplicaciones Android y kits de interfaz de usuario de CodeCanyon

Quizá hayas notado que nuestra aplicación se ve muy simple y sencilla. Eso se debe a que estamos usando el tema predeterminado, sin aplicar estilos a nuestras vistas. CodeCanyon está lleno de kits de interfaz de usuario de Android que ofrecen hermosos estilos hechos a mano que puedes aplicar a tus vistas.

CodeCanyon mobile Android app template bestsellers

Los kits generalmente también tienen varias vistas y diseños personalizados. Puedes consultar los siguientes artículos para obtener más información sobre ellos: