Android / Actividades

Bienvenidos sean a este post, hoy hablaremos sobre de una las bases de Android comos son las actividades.

Se llama actividad a la interaccion del usuario con lo que hay en pantalla, estas pueden ser varias e inclusive interactuar entre ellas, como por ejemplo avanzar a otra pantalla y luego volver a la anterior, estas son llamada serie de actividades.

Para estudiar un poco mejor este tema vamos a crear un ejemplo, para ello vamos a crear un nuevo proyecto con los siguientes datos:

• Dispositivos: Phone and Tablet
• Actividad: Empty Activity
• Nombre: Actividades
• Nombre de paquete: org.example.actividades
• API Minimo: API 14 (Android 4.0)

Nota: Si quieren ver el paso a paso con imagenes de como crear un proyecto les recomiendo este post.

Con esto hemos creado nuestra aplicacion base, nuestro siguiente paso sera establecer nuestro layout para ello vamos a tomar nuestro archivo activity_main.xml y lo reemplazaremos con el sigueinte codigo:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="30dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal|center_vertical"
        android:textSize="24sp"
        android:layout_marginBottom="20dp"
        android:text="Actividad 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:onClick="lanzarOtraVista"
        android:text="Prox. Actividad" />
</LinearLayout>

Este layout simple pero no deja de ser interesante porque en este estableceremos varias opciones interesantes, la primera sera que estableceremos en el layout que todo los elementos esten en el centro para ello usamos a gravity con el valor center, luego usamos un padding para generar un espacio de 30dp, al final de este post explique sobre las unidades de medida, nuestro siguiente paso ser agregar un TextView para mostrar un mensaje en pantalla.

En este elemento primero asignaremos tambien a gravity pero en esta ocasion en lugar de usar center usaremos dos valores:

• center_horizontal
• center_vertical

Estos dos valores haran que todo lo que escribamos tengan la ubicacion central de nuestro ejes, si quieren pueden agregar mas valores para ello vuelven a usar el simboo de pipeline (|) con el valor sin dejar espacios en blanco, el siguiente valor sera el tamaño de la fuente para finalmente establecer la separacion de la parte inferior con otro elemento, esto se vera mejor en el siguiente elemento.

Este sera un boton, para este caso estableceremos el valor de texto de nuestro boton, tambien estableceremos el texto a mostrar en pantalla y volveremos a usar onClick para llamar a una actividad que aun no existe y por ende nos genera un error pero ya lo solucionaremos a continuacion, antes veo como quedo nuestra pantalla

Con esto concluid vamos a proceder a la creacion de nuestro segundo recurso, para poder crear la actividad, y para ello vamos a crear un nuevo recurso dentro de layout.

Para eso hacemos click con el boton derecho sobre el recurso llamado layout y seleccionamos New -> Layout resource file

Una vez hecho, aparecera el siguiente cuadro

Aca lo dejaremos como esta, con la salvedad de modificar el File Name por otravista, tambien deben cambiar el valor de Root element por LinearLayout, una vez hecho esto pulsamos Ok, esto cerrara la ventana y nos quedara asi

Con nuestro nuevo layout modificaremos el archivo generado con el siguiente codigo:

otravista.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="Otra Vista" />

</LinearLayout>

En este codigo tenemos un LinearLayout como en el caso anterior pero haremos menos modificaciones, la primera es gravity con el valor center y establecemos un padding de 20dp, despues agregamos un TextView para mostrar un mensaje en pantalla cuando sea invocada, nuestro siguiente paso sera crear una clase Java para mostrar este layout en pantalla y para ello haremos click con el boton derecho sobre el contenedor de clases de java y seleccionaremos New -> Java Class como se ve a continuacion

Una vez seleccionado aparecera el siguiente cuadro

Aca solamente setearemos el valor de Name por OtraVista luego dejamos todo como se ve en la imagen y pulsamos Ok, se cerrara el cuadro y se generara la clase java quedando de la siguiente forma

Si estan usando el Android Studio en Linux la imagen de creacion de la clase puede variar de la siguiente forma

Donde solo seleccionaremos que tipo de archivo sera:

• Class
• Interface
• Enum
• Annotation

Y tambien le ingresaremos el nombre pero no decidiremos si es publica o privada, si va a ser abstracta o final todo esto lo definiremos luego de ser creada, nuestro siguiente paso sera modificar el codigo generado automaticamente por el siguiente:

OtraVista.java

package org.example.actividades;

import android.app.Activity;
import android.os.Bundle;

public class OtraVista extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.otravista);
    }
}

Este codigo se encargara de mostrar el contenido del recurso otravista.xml, a medida que lo vayan escribiendo, si no agregaron las lineas import previamente, el editor les pedira que presionen Alt+Enter para agregar los paquetes necesarios para que funcione correctamente, ahora debemos modificar la clase MainActivity para agregar al nuevo metodo de nuestra actividad, seleccionamos el archivo MainActivity.java ubicado en java/org.example.actividades/MainActivity.java al cual modificaremos su codigo actual por el siguiente:

MainActivity.java

package org.example.actividades;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    public void lanzarOtraVista(View vista){
        Intent i = new Intent(this, OtraVista.class);
        startActivity(i);
    }
}

Basicamente solamente agregamos el siguiente metodo para ser invocado y utilizado:

public void lanzarOtravista(View view){
       Intent i = new Intent(this, OtraVista.class);
       startActivity(i); 
}

Este metodo se encargara de lanzar la clase de Java llamada OtraVista.class, esto por medio de Intent, el cual es un tipo de clase utilizada para lanzar nuevas actividades por medio del metodo startActivity() y como pueden ver se genero un objeto llamado i, el cual sera ejecutado por el metodo antes citado.

Ahora procederemos a hacer las ultimas modificaciones para dejar funcionando nuestra actividad, debemos abrir el archivo AndroidManifest.xml ubicado en manifests/AndroidManifest.xml, una vez abierto tendremos agregaremos el siguiente bloque:

        <activity android:name=".OtraVista"
            android:label="Esta es otra vista" />

Este bloque debe estar dentro de los tags application pero por fuera de los tags activity correspondiente a .MainActivity, con este bloque agregado podemos ver como quedo el codigo final de nuestro archivo de manifiesto:

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.example.actividades">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity android:name=".OtraVista"
            android:label="Esta es otra vista" />
    </application>

</manifest>

Con estas modificaciones ya habilitamos a nuestro listener onClick que asignamos en el principio para nuestro layout activity_main.xml y con esto solucionado todos nuestros inconvientes, este ultimo de declarar en el manifiesto se debe hacer por todas y cada una de las actividades creadas en nuestras aplicaciones sin excepciones, por ultmo podemos compilar y probr nuestra aplicacion como se ve en el siguiente video

Si lograron lo mismo que se ve en el video, Felicitaciones!!! Ahora vamos a proceder a crear un nuevo elemento y otra nueva actividad para poder volver a la actividad anterior, para ello vamos nuevamente al archivo otravista.xml y agregaremos el siguiente bloque dentro de nuestro layout:

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Volver a vista anterior"
        android:textSize="20sp"
        android:onClick="volverVista"/>

Para esta ocasion agregamos un nuevo elemento tambien de tipo Button el cual nos servira para una funcion que agregaremos despues como es volverVista, le estableceremos el mensaje a mostrar por medo de text y el tamaño de la fuente, por ultimo el listener del evento click para llamar a la nueva funcion, con esto cubrimos la modificacion en nuestro layout veamos como quedo su codigo final:

otavista.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:text="Otra Vista" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Volver a vista anterior"
        android:textSize="20sp"
        android:onClick="volverVista"/>

</LinearLayout>

Nuestro siguiente paso sera agregar la siguiente funcion dentro de nuestra clase OtraVista:

    public void volverVista(View vista){
        Intent i = new Intent(this,MainActivity.class);
        startActivity(i);
    }

En este caso al igual que en MainActivity volveremos a usar a Intent para crear la intencion pero en esta ocasion la apuntaremos a MainActivity para despues iniciar la actividad, la diferencia mas importante va a ser que no necesitamos modificar al manifiesto porque al ser la actividad principal esta ya esta registrada, veamos el codigo final de OtraVista:

OtraVista.java

package org.example.actividades;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class OtraVista extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.otravista);
    }

    public void volverVista(View vista){
        Intent i = new Intent(this,MainActivity.class);
        startActivity(i);
    }
}

Con esto ya tenemos listo para probar nuestras nuevas modificaciones, para ello vamos a compilarlo y probarlo como se ve en el siguiente video

Si lograron lo visto en el video, Felicitaciones!!! Hemos logrado crear una serie de actividades.

En resumen, hemos visto como se crea una actividad, como se la define en el manifiesto del programa (AndroidManifest.xml), cuales son los metodos (startActivity) y clases (Intent) para poder utilizar las actividades, hemos visto como crear una nueva actividad para poder pasar de una vista a la otra sin demasiadas complicaciones para el usuario, con esto ultimo hemos visto lo llamado serie de actividades y proximamente agregaremos algunas utilidades de las actividades. Espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.