Bienvenidos sean a este post, hoy veremos como se trabaja con la barra de acciones (ActionBar).

Anuncios

Este es un elemento agregado a partir de la version 3.0 de Android, el cual nos permite tener acciones a nuestra disposicion junto al titulo de la app, en el caso de tener pestañas estas estaran en nuestra barra y en caso de no alcanzar la pantalla comenzara a reubicarlas automaticamente para poder aprender sobre como utilizarlo vamos a volver a usar el ejemplo creado en el post anterior, en caso de no tenerlo les dejo todos los datos necesarios para crear los archivos necesarios:

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

Los codigos de los archivos son los siguientes:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    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>
Anuncios

MainActivity.java

package org.example.actividadesplus;

import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    @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);
        i.putExtra("texto","La otra actividad");
        startActivity(i);
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item){
        int id = item.getItemId();
        if (id == R.id.actividad_1){
            return true;
        }
        if (id == R.id.actividad_2){
            lanzarOtraVista(findViewById(R.id.otravista));
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}
Anuncios

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:id="@+id/otravista"
    android:padding="20dp">

    <TextView
        android:id="@+id/otrotexto"
        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>
Anuncios

OtraVista.java

package org.example.actividadesplus;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class OtraVista extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.otravista);
        TextView texto;
        Bundle extras = getIntent().getExtras();
        String t = extras.getString("texto");
        texto = (TextView) findViewById(R.id.otrotexto);
        texto.setText(t.toString());
    }

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

menu_ppal.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity" >
    <item android:id="@+id/actividad_1"
        android:title="Actividad 1"
        android:icon="@android:drawable/ic_menu_preferences"
        android:orderInCategory="100"
        app:showAsAction="never" />

    <item android:id="@+id/actividad_2"
        android:title="Actividad 2"
        android:icon="@android:drawable/ic_menu_info_details" />

</menu>
Anuncios

AndroidManifest.xml

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

    <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>
Anuncios

Una vez generado nuestro proyecto, en caso de no tenerlo creado, pasemos a modificar el archivo menu_ppal.xml con el siguiente codigo:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context=".MainActivity" >
    <item android:id="@+id/actividad_1"
        android:title="Actividad 1"
        android:icon="@android:drawable/ic_menu_preferences"
        android:orderInCategory="5"
        app:showAsAction="never" />

    <item android:id="@+id/actividad_2"
        android:title="Actividad 2"
        android:icon="@android:drawable/ic_menu_info_details"
        android:orderInCategory="10"
        app:showAsAction="ifRoom|withText"/>

    <item android:id="@+id/Buscar"
        android:title="Buscar"
        android:icon="@android:drawable/ic_menu_search"
        android:orderInCategory="115"
        app:showAsAction="always|collapseActionView" />

</menu>
Anuncios

Vamos a ver la primera modificacion en nuestro archivo, en este caso vamos a tomar el elemetno de actividad 1 donde modificamos esta linea:

android:orderInCategory="100"

De la siguiente manera:

android:orderInCategory="5"
Anuncios

Esto es para establecer el orden de ubicacion de nuestro elemento y como tiene el showAsAction seteado con never no se va a mostrar en la barra sino en el boton de menu, pasemos a la siguiente modificacion:

android:orderInCategory="10"

Sirve para lo mismo que en el caso anterior pero esta vez agregaremos esta linea:

app:showAsAction="ifRoom|withText"
Anuncios

La cual se encargara de ubicar nuestro elemento en la barra de acciones, con dos condiciones, la primera ifRoom es para verificar si existe algun lugar disponible en la barra en caso contrario lo deja en el boton de menu, y la segunda opcion mostrara el valor almacenado en la propiedad android:title en caso de ser posible, ahora vamos a analizar el nuevo item agregado:

<item android:id="@+id/Buscar"
     android:title="Buscar"
     android:icon="@android:drawable/ic_menu_search"
     android:orderInCategory="115"
     app:showAsAction="always|collapseActionView" />
Anuncios

Este seria una opcion para buscar, observen como definimos el icono, utilizando uno de los recursos propios del sistema, en orderInCategory es para ubicarlo luego del item asignado como Actividad 2, y por ultimo en showAsAction le dimos dos opciones, la primera es que siempre este en la barra de acciones y la segunda es para hacer colapsable a la vista asociada a este elemento. Si lo probamos deberemos tener una app como se ve en el siguiente video

Anuncios

Si lograron lo mismo que en el video, Felicitaciones!!! Ahora vamos a ver dos opciones mas disponibles con la barra de acciones, la primera va a ser la posibilidad de ocultarla o removerla y la segunda es ponerla a Pantalla completa pero de eso hablaremos luego, ahora veremos como hacer desaparecer la barra y para eso debemos hacer la siguiente modificacion en el archivo AndroidManifest.xml, primero modificaremos el siguiente tag:

<activity android:name=".MainActivity">

De la siguiente forma:

        <activity android:name=".MainActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
Anuncios

En este nueva modificacion agregue una sola linea, la cual es la siguiente:

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

Esta linea se debe agregar dentro de las actividades y sirve para eliminar nuestra barra de acciones y al mismo tiempo poner la app en FullScreen (Pantalla completa), este es el mejor metodo que encontre para hacer estas dos acciones pero en realidad la forma sugerida por Android son otros dos metodos para realizar estas acciones, el primero es:

android:theme="@android:style/Theme.NoTitleBar"

Con esta accion, en teoria, hariamos desaparecer a la barra de acciones unicamente, veamos la siguiente accion:

android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
Anuncios

Con esta accion deberia desaparecer no solamente la barra de acciones sino ademas pasar a pantalla completa. Por alguna extraña razon, a mi no me anduvo, busque varias opciones en internet pero ninguna funciono pero se los paso como dato, cuando encuentre la raiz de la falla y pueda hacerlos funcionar, escribire un post dedicado solo a esto, antes de continuar como quedo nuestro manifiesto:

AndroidManifest.xml

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

    <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"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar">
            <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>

Ahora les mostrare un video de como queda nuestra app con estas modificaciones, veamoslo a continuacion

Como dato adicional si en lugar de usar AppCompatActivity usaramos Activity al momento de extender nuestra clase principal tambien desaparece la barra de accion, por ejemplo tenemos el inicio de nuestra clase principal de esta forma:

public class MainActivity extends AppCompatActivity

Y nosotros lo modificamos de la siguiente manera:

public class MainActivity extends Activity

Esto en la actualidad hara que nuestra aplicacion se vea de la siguiente forma

En resumen, hoy hemos visto como trabajar con la barra de acciones, como se pueden implementar, como configurar distintas opciones, como eliminarla y pasar a nuestra app a pantalla completa. 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.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00