Obtener Android Studio
Antes de comenzar, descarga e instala Android Studio
Download Android Studio
Descomprime el zip y ejecuta el lanzador studio.sh
Estructura del proyecto
El proyecto creado es una aplicación básica de "Hello World"
que contiene algunos archivos por defecto.
Veamos los más importantes:
-
app/src/main/AndroidManifest.xml
El archivo de manifiesto describe las características fundamentales de la aplicación y define cada uno de sus componentes. Aquí especificaremos las Activities que tiene nuestra app y los permisos que requiere (Cámara, Contactos, Internet, etc.)
-
app/src/main/java/com.example.helloworld/MainActivity.java
Contiene la definición de clase para la
Activity (pantalla) principal.
En este fichero programaremos el comportamiento de
esta Activity.
-
app/src/main/res/layout/activity_main.xml
Este archivo XML define el layout de la
actividad, es decir los elementos (widgets) que tiene
la pantalla. Por defecto, contiene un elemento
TextView con el texto
¡Hola mundo!.
-
app/build.gradle
Android Studio utiliza Gradle para compilar y construir
la aplicación. Hay un archivo build.gradle
para cada módulo del proyecto, así como un archivo
build.gradle de todo el proyecto.
Por lo general, sólo estaremos interesados en el
archivo build.gradle (module: app).
Ahí es donde se encuentran las dependencias de
construcción de la aplicación, incluyendo los
ajustes defaultConfig:
- compiledSdkVersion es la versión
de la plataforma con la que va a compilar la aplicación.
Por defecto, se establece en la última versión del SDK
instalado en el ordenador.
- applicationId es el nombre
de paquete completo para la aplicación, que se especificó
en el asistente de Nuevo Proyecto.
- minSdkVersion es la versión del
SDK mínimo especificado durante el asistente
Nuevo proyecto. Es la versión más antigua del
SDK de Android que soporta la aplicación.
- targetSdkVersion indica la
versión más alta de Android con la que se ha probado
la aplicación.
Más adelante usaremos el fichero build.gradle (module: app)
para instalar nuevas bibliotecas y componentes para nuestra App,
en el apartado dependencies.
Veamos también los subdirectorios
/res que contienen los
recursos
para la aplicación:
-
drawable/
Directorio de imágenes.
-
layout/
Directorio para los archivos que definen la
interfaz de usuario de la aplicación,
como activity_main.xml, que describe
un diseño básico para la MainActivity.
-
mipmap/
Contiene los iconos Lanzadores.
-
values/
Directorio para otros archivos XML que contienen
una colección de recursos.
-
En el archivo colors.xml se definen
los colores de la app.
-
En el archivo strings.xml se definen
todos los textos que se muestren en
nuestra app.
-
En el archivo styles.xml se define
el tema de nuestra app.
Ejecutar la App
Este es el aspecto de la App "Hello World":
Ejecutar en un dispositivo real
Configurar el móvil de la siguiente manera:
- Conectar el dispositivo al equipo de desarrollo con un
cable USB.
- Habilitar la depuración USB en el dispositivo
móvil, yendo a AjustesOpciones de desarrollador.
En Android 4.2 y versiones posteriores,
Opciones de desarrollador se oculta de forma
predeterminada. Para que esté disponible, ve al menú del móvil
AjustesAcerca del teléfono
y toca el número de compilación SIETE veces.
Regresa a la pantalla anterior y encontrarás
las Opciones de desarrollador.
Ejecuta la aplicación desde Android Studio de la siguiente manera:
- Selecciona el dispositivo móvil
Haz clic en Ejecutar 
desde la barra de herramientas.
Android Studio instala la aplicación en el dispositivo conectado y la inicia.
Ejecutar en el emulador
Selecciona el emulador y haz clic
en
Si no tienes ningún emulador creado ve a
AVD Manager y crea uno:
Selecciona el Hardware y la versión de Android que desees.
Editar el Layout
En los ficheros XML de la carpeta res/layout
se define la disposición de widgets de las pantallas.
Por el momento, en la pantalla activity_main.xml
solamente hay un TextView que muestra el
texto Hello world.
Para editar los ficheros de layout hay dos formas:
- Modo gráfico: permite arrastrar los widgets de la paleta
a la pantalla, y modificar sus atributos.
- Modo código: permite modificar directamente el código XML.
Habitualmente, trabajaremos en modo código:
- Haz doble click sobre el fichero
res/layout/activity_main.xml
Haz click en el icono 
(o también Split...)
Modificaremos el layout de la siguiente forma:
- El TextView que actualmente contiene el
texto Hello World, lo usaremos para mostrar
el contador
- Añadiremos un botón que, al ser pulsado,
aumentará el contador
TextView
Para cambiar el texto que se muestra en un TextView, hay que modificar el
atributo android:text.
Cambia el valor de este atributo al texto
Has clicado 0 veces
android:text="Has clicado 0 veces"
Button
Añade también el Button que, al ser pulsado, augmentará el contador:
res/layout/activity_main.xml
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click me!"/>
Los atributos layout_width
y layout_height, especifican el ancho
y alto del elemento.
- El valor "wrap_content" indica
que el ancho/alto se debe adaptar al contenido del elemento.
En el caso del Button y el TextView, al texto que contienen.
- El valor "match_parent" indica
que el ancho/alto debe ser el mismo que el del elemento padre.
- También se puede establecer un ancho/alto de tamaño fijo
en píxeles.
ConstraintLayout
En el diseño actual del layout podemos ver que la
disposición del botón no es la más adecuada:
Quizá quedaría mejor si el botón estuviera dispuesto debajo
del TextView...
Para disponer los elementos en un ConstraintLayout
hay que definir las constraints en cada elemento.
Podemos imaginar las constraints como muelles
que tiran de un elemento en las cuatro direcciones
(arriba, abajo, izquierda y derecha). El elemento queda posicionado
en equilibrio entre las fuerzas de los muelles
que se han definido.
TextView
En el caso del TextView vemos que ya hay definidas cuatro
constraints:
En cada constraint se indica hacia dónde debe
tirar el "muelle". Podemos ver que:
- La constraintBottom tira del TextView
hacia la parte inferior (toBottomOf)
de su parent
(El elemento padre del TextView es el ConstraintLayout ).
- La constraintLeft tira del TextView
hacia la parte izquierda (toLeftOf)
de su parent.
- La constraintRight tira del TextView
hacia la parte derecha (toRightOf)
de su parent.
- La constraintTop tira del TextView
hacia la parte superior (toTopOf)
de su parent.
Como vemos, el TextView queda en equilibrio vertical entre las constraints Top y Bottom,
y horizontal entre Left y Right, y de esta manera queda centrado dentro del ConstraintLayout.
Button
Ahora, definiremos las constraints del Button para posicionarlo
de esta manera:
La constraintBottom del botón tirará de él hacia la parte inferior de su padre (el ConstraintLayout).
La constraintLeft hacia la parte izquierda de su padre.
La constraintRight hacia la parte derecha de su padre.
Hasta aquí la cosa es sencilla. Basta definir las constraints igual que en el
TextView. Estas constraints apuntan todas al elemento padre:
En la constraintTop la cosa cambia...
Observa en la imagen anterior que la constraintTop tira del
botón hacia la parte inferior del TextView.
Para hacer referencia al elemento padre hemos visto que
podemos usar parent.
Pero ¿cómo hacemos referencia al TextView? Para ello hay que asignarle un identificador al TextView.
Para asignar un identificador a un elemento hay que usar el
atributo android:id, y en el valor hay que
poner @+id/ antes del identificador que queramos asignarle.
Así pues, para asignar el identificador contadorDeClics al TextView,
le añadiremos este atributo:
android:id="@+id/contadorDeClics"
Ahora ya podemos añadir la constraintTop al botón
y hacer que tire de él hacia la parte inferior (toBottomOf) del TextView:
res/layout/activity_main.xml
<Button
android:id="@+id/augmentarElContador"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click me!"
app:layout_constraintTop_toBottomOf="@+id/contadorDeClics"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
También hemos agregado el identificador augmentarElContador al botón,
ya que en el siguiente apartado haremos referencia a este botón
desde el código Java.
El código completo del layout activity_main.xml quedará así:
app/src/main/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://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/contadorDeClics"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Has clicado 0 veces"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="@+id/augmentarElContador"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click me!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/contadorDeClics"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Programar el comportamiento
Si ejecutas la app, verás el texto y el botón. Sin embargo, cuando clicas
en el botón, este no hace nada. No se ha definido el comportamiento
de este botón.
Para agregar un comportamiento al botón debemos realizarlo en el
código Java (o también Kotlin). Escribiremos el código en el
fichero MainActivity.java.
En este fichero hay definida la clase MainActivity, y en ella
el método onCreate().
Este método onCreate() es el que el Sistema Android
ejecuta en primer lugar cuando se inicia nuestra App.
En este método lo primero que debes observar es la
llamada setContentView(R.layout.activity_main).
Esta llamada establece el layout activity_main.xml, es decir,
lo que se mostrará en pantalla es lo que hemos puesto en este fichero
de layout (el TextView y el Button).
Una vez visto esto vayamos al código necesario para nuestro contador.
Necesitaremos:
- Una variable int que vaya almacenando el contador
- Programar el Button para que, cada vez que se haga click, augmente el
contador y actualice el TextView
Crear la variable para almacenar el número de clicks es la parte más sencilla:
MainActivity.java
public class MainActivity extends AppCompatActivity {
int contador;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}
findViewById
Para programar el comportamiento del Button, y luego actualizar el
texto del TextView, necesitaremos tener
una referencia a estos dos elementos.
Para ello definiremos una variable para cada elemento y llamaremos
al método findViewById() para vincular estas variables
con los elementos del layout correspondientes.
Al método findViewById() hay que pasarle el identificador
que hayamos definido en el fichero XML.
MainActivity.java
public class MainActivity extends AppCompatActivity {
int contador;
TextView contadorDeClics;
Button augmentarElContador;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contadorDeClics = findViewById(R.id.contadorDeClics);
augmentarElContador = findViewById(R.id.augmentarElContador);
}
}
Observa que las llamadas a findViewById() las hemos
hecho después de establecer el layout activity_main.xml.
El método findViewById() buscará los elementos en este fichero.
Opcionalmente, se puede activar el ViewBinding para no
tener que hacer las llamadas a findViewById() para vincular los
elementos del XML con las variables JAVA.
Imagina que en lugar de 1 botón y 1 textview, tenemos 10 botones y 5 textviews...
son 15 variables y 15 llamadas a findViewById !!
Para activar el ViewBinding hay que ir al fichero
build.gradle (Module: app) y añadir la siguiente configuración:
build.gradle (Module: app)
android {
//...
buildFeatures {
viewBinding true
}
}
Luego, hay que definir una única variable y a partir de ésta podremos acceder
a los elementos XML. También hay que modificar la llamada a setContentView(),
de la siguiente manera:
MainActivity.java
public class MainActivity extends AppCompatActivity {
ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// setContentView(R.layout.activity_main);
setContentView((binding = ActivityMainBinding.inflate(getLayoutInflater())).getRoot());
}
}
De esta forma, para acceder al Button y al TextView
(u otros elementos que tuviésemos) podemos hacerlo directamente a
través de la variable binding y el identificador de los
elementos, así:
binding.contadorDeClics
binding.augmentarElContador
OnClickListener
Un vez tenemos vinculados el Button y el TextView, el siguiente paso es
programar el botón para que responda al CLICK (aumentando el contador
y mostrando el texto en el TextView).
Para que el botón responda al evento CLICK, hay que hacer una llamada
al método setOnClickListener() y pasarle un objeto de clase
View.OnClickListener.
En el método onClick() de este objeto programaremos lo
que queremos que se haga cuando se pulse el botón:
MainActivity.java
public class MainActivity extends AppCompatActivity {
int contador;
TextView contadorDeClics;
Button augmentarElContador;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contadorDeClics = findViewById(R.id.contadorDeClics);
augmentarElContador = findViewById(R.id.augmentarElContador);
augmentarElContador.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// aumentar el contador
// mostrar el contador en el TextView
}
});
}
}
Si has usado ViewBinding, recuerda poner binding.augmentarElContador
en lugar de augmentarElContador.
Ahora, dentro del método onClick() del listener,
solo hay que incrementar el contador y cambiar el texto del TextView. Para cambiar
el texto hacemos una llamada al método setText() del
TextView.
contador++;
contadorDeClics.setText("Has clicado " + contador + " veces");
Finalmente, el código de la aplicación queda así:
MainActivity.java
public class MainActivity extends AppCompatActivity {
int contador;
TextView contadorDeClics;
Button augmentarElContador;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
contadorDeClics = findViewById(R.id.contadorDeClics);
augmentarElContador = findViewById(R.id.augmentarElContador);
augmentarElContador.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
contador++;
contadorDeClics.setText("Has clicado " + contador + " veces");
}
});
}
}
Si has usado ViewBinding, el código quedaría así:
public class MainActivity extends AppCompatActivity {
int contador;
ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView((binding = ActivityMainBinding.inflate(getLayoutInflater())).getRoot());
binding.augmentarElContador.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
contador++;
binding.contadorDeClics.setText("Has clicado " + contador + " veces");
}
});
}
}
Práctica: MultiContador
Desarrolla una app llamada P1 MultiContador que haga la función de un contador de personas.
La app debe tener 4 contadores independientes y un contador global (que lleve la suma de los 4 contadores).
Debe haber un botón de reset para cada contador y un botón de reset global que resetee los 4 contadores a la vez.
Puedes utilizar la siguiente app como modelo para el multicontador
En la siguiente imagen puedes ver las constraints que se han definido en el layout:
Valida la disposición de los elementos en el ConstraintLayout utilizando el "Layout Validator":
