Bienvenidos sean a este post, hoy veremos como agregar una barra de acciones a nuestra app creada en este post, la barra de acciones la vimos en este post pero volveremos a repasar un poco y especialmente remarcaremos un par de cosas pero no desperdiciemos mas tiempo y comencemos con nuestro caso.

Anuncios

Primero abramos nuestra app con Android Studio, una vez dentro deberemos hacer click con el boton derecho el recurso res y debemos seleccionar New -> Android Resource File como se ve en la siguiente imagen

android00

Una vez seleccionado nos aparecera el siguiente cuadro

android01

Aca deberemos completar el campo File Name con el valor menu_main y en Resource type debemos seleccionar Menu y nada mas, con estas modificaciones presionamos Ok para poder cerrar este cuadro y debera quedarnos de la siguiente forma

android02

Antes de continuar debemos modificar el archivo strings.xml ubicado en res/values/strings.xml, donde tendremos el siguiente codigo:

<resources>
    <string name="app_name">Mis Lugares</string>
</resources>

Le agregaremos las siguientes lineas:

<resources>
    <string name="app_name">Mis Lugares</string>
    <string name="menu_conf">Configuracion</string>
    <string name="menu_about">Acerca De...</string>
    <string name="menu_buscar">Buscar</string>
</resources>
Anuncios

Con esta modificacion estableceremos los titulos para los elementos de nuestra barra, vamos a tener uno para la configuracion (menu_conf), otro para el Acerca de (menu_about) y por ultimo para buscar (menu_buscar), con esta modificacion realizada vamos a proceder a modificar nuestro archivo de la barra de acciones, menu_main.xml, el cual se encuentra en res/menu/menu_main.xml, el codigo fuente del archivo es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

</menu>

Ahora vamos a modificar el codigo de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto">
    <item android:title="@string/menu_conf"
         android:id="@+id/config"
         android:icon="@android:drawable/ic_menu_preferences"
         android:orderInCategory="95"
         app:showAsAction="ifRoom" />

    <item android:title="@string/menu_about"
         android:id="@+id/about"
         android:icon="@android:drawable/ic_menu_info_details"
         app:showAsAction="ifRoom|withText" />

    <item android:title="@string/menu_buscar"
         android:id="@+id/buscar"
         android:orderInCategory="90"
         android:icon="@android:drawable/ic_menu_search"
         app:showAsAction="always|collapseActionView" />
</menu>

Como pueden ver en este codigo vamos a agregar los tres items a la barra de acciones, el primero de configuraciones va a tener dos opciones a destacar primero el orderInCategory donde va a estar ubicado, hablaremos de esto luego, y el showAsAction donde tiene un seteo que significa si tiene un lugar disponible lo ubique en la barra de lo contrario lo mostrara en un boton de menu (ifRoom), el siguiente item no tiene un orderInCategory pero si tiene un showAsAction donde al igual que el anterior lo muestra si hay un lugar en la barra y en caso de mostrarlo que lo haga con el contenido de @android:title, y en el ultimo item tendremos el orderInCategory seteado a 90 y el showAsAction con el primer valor donde siempre lo mostrara en la barra y que la vista relacionada puede ser colapsada, en todos los casos utilizamos iconos del sistema por medio del recurso drawable, el titulo lo extraen por medio del @string del archivo strings. xml (previamente modificado) y bueno los id’s para saber cual es cual cuando necesitemos interactuar con nuestros codigos java, por ultimo hablemos sobre el orderInCategory porque en este caso mientras menor sea mas a la izquierda estara ubicado y si no informan ninguno y esta configurado para aparecer en la barra este sera el primero ubicado siempre de izquierda a derecha, ahora solamente nos falta modificar la clase MainActivity para poder ejecutar nuestro nuevo menu, veamos el codigo actual del archivo:

package org.example.mislugares;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

Ahora agreguemos la nueva funcion para poder aplicar nuestro menu:

package org.example.mislugares;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends AppCompatActivity {

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

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
}
Anuncios

Si escriben directamente la funcion, en un punto el editor les va a pedir presionar Alt+Enter para agregar el nuevo paquete faltante, en cambio si agregaron la linea import desde un principio no solicitara nada, en cualquiera de los dos casos este metodo se encargara de mostrar el contenido de nuestro archivo menu_main.xml en la barra de acciones quedando de la siguiente forma

android03

Ahora vamos a crear un nuevo recurso para crear nuestra vista para mostrar el Acerca De de nuestra app, para ello vamos a crear un nuevo recurso en layout, haciendo click con el boton derecho y eligiendo New -> Layout resource file como se ve en la siguiente imagen

android04

Una vez seleccionado nos aparecera el siguiente cuadro

android05

En este cuadro haremos un par de modificaciones, primero File Name con el valor de acercade, Root element lo pasaremos a LinearLayout y el resto quedara como se ve en la imagen, una vez hecho esto pulsamos Ok y se nos cerrara el cuadro. Con esto se creara el archivo acercade.xml, antes de modificarlo procederemos a agregarle un nuevo elemento en este caso un TextView, lo seleccionamos y presionemos Enter, una vez agregado nos debera quedar de la siguiente manera

android06
Anuncios

Ahora seleccionaremos la solapa Text para pasar a ver el codigo fuente de este archivo:

<?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">

    <TextView
         android:id="@+id/textView6"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="TextView" />
</LinearLayout>

Ahora lo modificaremos de la siguiente manera:

<?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">

    <TextView
         android:id="@+id/textView6"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Este es un ejemplo de Aplicacion para aprender
            a programar en Android y poder tener una utilidad practica" />
</LinearLayout>

En este caso modificaremos tanto el ancho (width) como la altura (height) a wrap_content y por ultimo modificaremos el campo text por el visto en el ejemplo o pueden utilizar otro porque es solamente de ejemplo pero recuerden siempre entre las comillas. Prosiguiendo con nuestro ejemplo agregaremos la clase java que controlara a este archivo, para ello iremos al recurso contenedor de todos nuestras clases java y haremos click con el boton derecho y elegiremos New -> Java class como se ve en la siguiente imagen

android07

Una vez seleccionado nos aparecera el siguiente cuadro

android08

Aca cambiaremos el campo Name por AcercaDe y el resto debe quedar todo como se ve en la imagen, pulsamos Ok y se cerrara la ventana. Con esto se creara una nueva clase de java abrimos este archivo y tendremos este codigo fuente:

package org.example.mislugares;

public class AcercaDe {
}

Lo modificaremos por el siguiente codigo fuente:

package org.example.mislugares;

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

public class AcercaDe extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.acercade);
    }
}
Anuncios

Una vez realizada esta modificacion lograremos mostrar el contenido de nuestro archivo acercade.xml cuando sea necesario por medio del metodo setContentView(), ahora pasaremos a hacer una simple modificacion primero en AndroidManifest.xml y luego en el MainActivity. Primero veamos la modificacion en AndroidManifest.xml, el codigo fuente actual es:

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

    <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>
    </application>
</manifest>

Y este es el nuevo codigo modificado:

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

    <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=".AcercaDe"
             android:label="Acerca De..."
             android:theme="@android:style/Theme.Dialog" />
    </application>
</manifest>

En este caso nuestra modificacion es para agregar la nueva actividad, donde por medio de name le diremos con quien estara relacionada, luego le daremos una etiqueta (label) y por ultimo le asignaremos un tema de los disponibles en Android, con esta modificacion realizada pasemos ahora a modificar la clase MainActivity, su codigo actual es:

package org.example.mislugares;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends AppCompatActivity {

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

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
}

El codigo modificado se vera de la siguiente manera:

package org.example.mislugares;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    public void lanzarAcercaDe(View view){
        Intent i = new Intent(this,AcercaDe.class);
        startActivity(i);
    }
}
Anuncios

En este caso solamente agregamos un nuevo metodo pero debemos agregar dos nuevos paquetes para poder utilizarlos, en este caso View e Intent, para ambos casos se pueden agregar a medida que van tipeando el codigo donde pedira por medio de Alt+Enter agregarlos o agregarlos antes de comenzar a tipear el metodo, en cualquiera de los dos casos deben existir estos paquetes sino no va a funcionar, y el metodo lo que basicamente hace es crear una actividad relacionada a la clase de java AcercaDe e invocarla, si necesitan mas informacion les recomiendo leer este post donde hablo mas sobre este tema. Con todo esto realizado solo nos falta una modificacion mas en nuestro codigo de MainActivity, pasemos a ver directamente la modificacion:

package org.example.mislugares;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

    public boolean onCreateOptionsMenu(Menu menu){
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

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

    public boolean onOptionsItemSelected(MenuItem item){
        int id = item.getItemId();
        if (id == R.id.config){
            return true;
        }
        if (id == R.id.buscar){
            return true;
        }
        if (id == R.id.about){
            lanzarAcercaDe(null);
        }
        return super.onOptionsItemSelected(item);
    }
}

Con este metodo procederemos a darle interactividad a nuestra barra:

public boolean onOptionsItemSelected(MenuItem item){
    int id = item.getItemId();
    if (id == R.id.config){
        return true;
    }
    if (id == R.id.buscar){
        return true;
    }
    if (id == R.id.about){
        lanzarAcercaDe(null);
    }
    return super.onOptionsItemSelected(item);
}

En este metodo estara a la expectativa de nuestras acciones en la barra, funciona de manera similar a un listener (escuchador) donde esperara el evento de un item seleccionado, donde por medio de una variable id de tipo entero almacenara el id del item seleccionado, luego por medio de varios condicionales intentaremos descubrir cual fue seleccionado, en este caso el unico funcional es el relacionado al elemento AcercaDe (about) porque cuando sea apretado este ejecutara el metodo antes creado, lanzarAcercaDe(), si todo salio bien debera verse como el siguiente video

Anuncios

Si llegaron a realizar la modificacion tal como se ve en el video, Felicitaciones!!! Ya tenemos una pequeña parte realizada.
En resumen, hoy hemos repasado como crear una barra de accion para nuestra app, como se implementa, como crear un nuevo recurso y como dejarlo operativo para la actividad con el usuario. 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.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00