Las actividades en Android, dentro del desarrollo de aplicaciones móviles, son componentes de la aplicación que proporcionan la pantalla que permite al usuario interactuar con el dispositivo móvil. Por ejemplo el tomar una foto, el escribir un correo o realizar la consulta de un mapa, todas las interfaces visuales de una aplicación móvil son llamadas actividades.

Componentes de las actividades

Dentro de la programación de aplicaciones, las actividades en android, se conforman por dos partes, la parte lógica que corresponde a un archivo con código java y que normalmente se ubica dentro de un proyecto android studio en la carpeta java y la parte gráfica que comprende un archivo xml que se ubica en la carpeta de recursos (res), dentro de la sub carpeta layout, tal como se aprecia en la siguiente imagen:

android-actividades

Diseño de las Actividades en Android

Para el diseño de las actividades debemos trabajar en el layout, es decir en el archivo XML, es en dicho archivo que debemos ingresar componentes que represetan la vista (view) de la actividad. Se nos fijamos en la interfaz de Android Studio nos daremos cuenta que nos ofrece una interfaz muy amigable para trabajar en este diseño.

android-actividades1

En la captura enterior podemos notar la interfaz para poder diseñar nuestras actividades en android, contamos con una paleta de layouts (contenedores de componentes) y widgets (componentes de vista), árbol de componentes, propiedades de los componentes, y en la parte inferior izquierda tenemos las pestañas de Diseño (Design) y Texto (Text), en este caso tenemos la vista diseño, en la vista texto tendremos el archivo con el código XML que se genera por cada componente.

En este ejemplo vamos a colocar los sigiuentes componentes dentro del diseño del Layout.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.gydsoluciones.grva.actividades.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Número 1:"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/etNum1"
        android:layout_below="@+id/textView"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Número 2:"
        android:id="@+id/textView2"
        android:layout_below="@+id/etNum1"
        android:layout_alignParentStart="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:ems="10"
        android:id="@+id/etNum2"
        android:layout_below="@+id/textView2"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sumar"
        android:id="@+id/button"
        android:layout_below="@+id/etNum2"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Resultado"
        android:id="@+id/tvResultado"
        android:layout_alignBottom="@+id/button"
        android:layout_alignParentEnd="true" />
</RelativeLayout>

Cómo podemos apreciar tenemos 3 TextView, que son como las etiquetas de texto para indicar algo al usuario, el tercer TextView tiene como id tvResultado, ya que es ahí en donde vamos a mostrar los resultados del cáculo de la suma. También tenemos dos EditText para ingresar los número a calcular, y tienen el id etNum1 y etNum2 respectivamente, finalmente colocamos un botón, para la ubicación de estos componentes estamos utilzando un Layout conteneder por defecto llamado RelativeLayout que nos permite posicionar los componentes en relación a otros dentro de la interfaz.

Relación entre al Layout y el códgio Java

Una vez que tenemos nuestro diseño listo debemos realizar la relación entre el Layout y el código Java de nuestra actividad, para ello nos ubicamos en el archivo MainActivity.java, y colocamos el siguiente código:

public class MainActivity extends AppCompatActivity {

    private EditText etNum1, etNum2;
    private TextView tvResultado;

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

        etNum1 = (EditText)findViewById(R.id.etNum1);
        etNum2 = (EditText)findViewById(R.id.etNum2);
        tvResultado = (TextView)findViewById(R.id.tvResultado);
    }

    public void CalcularSuma(View view)
    {
        int num1, num2;
        num1 = Integer.parseInt(etNum1.getText().toString());
        num2 = Integer.parseInt(etNum2.getText().toString());
        int suma = num1 + num2;
        tvResultado.setText("Resultado:" + suma);
    }
}

Pasamos a explicar el código anterior, para empezar podemos notar que la clase MainActivity hereda de la clase AppCompatActivity que es un componente que expande funcionalidades de la clase padre Activity sobre todo para dispositivos pre Lollipop y puedan integrar diseños de Material Design.

Podemos notar que agregamos 3 atributos del tipo privado y son objetos de las clases EditText y TextView respectivamente, los mismos serviran de enlace o nexo con los componentes ubicados anteriormente en el Layout, al momento de ejecutar nuestra actividad en una primera instancia llamará al método onCreate que es el punto principal de cada actividad, y es allí donde podemos ver el enlace entre el archivo Java y al archivo xml, mediante el método setContentView, el cuál recibi como parámetro el id del layout.

En las siguientes líneas hacemos la referencia de los atributos de la clase con los componentes ubicados en el layout y para ello utilizamos el método findViewById, que recibe como parámetro el id de cada componentes de nuestro layout con el que vamos a interactuar.

Finalmente tenemos un médoto publico llamado CalcularSuma, esté método será llamado al momento de dar click en el botón sumar que agregamos a nuestro layout, y como podemos apreciar es código Java en donde declaramos tres variables enteras para guardar los valores de etNum1, etNum2  y la suma de ambos. Finalmente mostramos el resultado de la suma en el componente tvResultado.

Ejecutar nuestra aplicación y probar la Actividad

Para la ejecución y prueba de nuestra actividad, debemos primero indicar al botón que cuando se haga click este llame al método CalcularSuma, para ello dentro del layout seleccionamos el botón y nos ubicamos en su propiedad onClick, y le indicamos el nombre del método a invocar.

android-actividades2

Para ejcutar la aplicación ya debemos tener nuestro emulador de Android corriendo y ejecutamos la aplicación donde tendremos el siguiente resultado:

android-actividades3

Espero que está pequeña explicación te pueda dejar claro el uso de actividades en android, sobre todo si estas iniciandote en el desarrollo de aplicaciones móviles, si te gusto el artículo compártelo en tus redes sociales, te lo agradecería mucho. Además te invito a suscribirte a nuestro boletín para que este y futuros artículos los tengas en tu buzón de correo.

[maillite]