En este tutorial se explica cómo agregar botones o ítems, a la toolbar (barra superior de la app). Esto se logra creando un menú y agregándolo a la Toolbar de la Activity. Además se explica el código para efectuar una acción cuando el Usuario presione un Ítem.
En la barra superior de la App es común agregar diversos Botones o Ítems, los cuales tienen la gran ventaja de ahorrar espacio y de estar a la mano cuando se requieran.
Para agregar botones en la Toolbar/Actionbar se hace lo siguiente:
- Necesitamos tener una Toolbar ya creada. Puedes ver nuestro tutorial como agregar una Toolbar.
- El segundo paso es crear un Menú en los recursos XML. En este menú agregamos los botones como Ítems. Y configuramos cada uno con su texto, imagen y el orden que tendrán.
- Luego en la Activity indicamos que el menú va a estar en la Toolbar, con el método onCrearedOpionsMenu(). El menú se agrega por el nombre del archivo.
- Por último, debemos configurar la acción que se ejecutará cuando el Usuario presione cada Ítem. Para esto se crea el método onOptiosItemSelected() Donde cada ítem se identifica por su ID.
A continuación mostramos un ejemplo para agregar botones a la Toolbar en Android Studio.
Antes de empezar.
Primero necesitamos tener una Toolbar en la Activity. Puedes ver el tutorial: como agregar una Toolbar.
En seguida te mostramos como tener la toolbar a grandes rasgos. Primero necesitas elegir un tema de la app, sin ActionBar, esto se hace en el Manifest, asi:
<application
....
....
....
android:theme="@style/AppTheme.NoActionBar">
....
....Te mostramos el código en xml de nuestra toolbar, esta dentro de un Relative Layout.
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:id="@+id/main_toolbar" >
</android.support.v7.widget.Toolbar>Y el código en Java:
private Toolbar toolbar;
protected void onCreate(Bundle savedInstanceState) {
....
....
....
toolbar = findViewById(R.id.tr_toolbar);
setSupportActionBar(toolbar);
final ActionBar ab = getSupportActionBar();
ab.setDisplayShowHomeEnabled(false);
ab.setDisplayHomeAsUpEnabled(true);
ab.setDisplayShowCustomEnabled(true);
ab.setDisplayShowTitleEnabled(true);
ab.setTitle(R.string.titulo_toolbar);
}Creando el menú.
Los botones que se agregarán a la Toolbar, se agregan mediante un menú. A continuación te mostramos como crear un menú a grandes rasgos.
Para más detalles ve el tutorial como crear un Menú.
Primero buscamos la carpeta de res aquí damos clic derecho, luego la opción New y por ultimo xml resource file.
En la ventana seleccionamos que es un Menú, y le damos por nombre “menu_toolbar.xml”
Aquí se agregan los Ítems, con el comando <Item> </item>. Cada ítem puede tener una imagen, descripción, nombre, etc. Y de lo más importante es el comando app:showAsAction=”always” />. El cual indica cuando se muestra el ítem, o cuando se esconde.
En este caso queremos que se muestre así que se usa:
<item
android:id="@+id/item_home"
android:icon="@drawable/icono_home"
android:title="HOME"
app:showAsAction="always" />Vamos a agregar 3 ítems, uno con texto, otro con imagen y otro con imagen obtenida de los recursos de Android.
El código del menú es:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_home"
android:icon="@drawable/icono_home"
android:title="HOME"
app:showAsAction="always" />
<item
android:id="@+id/item_dos"
android:icon="@drawable/icono_dos"
android:title="DOS"
app:showAsAction="always"
/>
<item
android:id="@+id/item_tres"
android:icon="@drawable/icono_tres"
android:title="TRES"
app:showAsAction="always"
/>
</menu>
Así es la vista previa:
Relacionar el menú con la Activity.
Una vez que creamos el menú, el siguiente paso es decirle a la Activity que ese menú lo usará en la Toolbar. Para esto se crea un método como se muestra a continuación:
@Override
public boolean onCreateOptionsMenu(Menu menu)
{
getMenuInflater().inflate(R.menu.menu_toolbar,menu);
return true;
}Hasta aquí, si corremos la app veremos cómo aparecen los ítems en la Toolbar. Lo siguiente es que efectúan alguna acción cuando el usuario los presione.
Agregar una acción cuando se presionen los ítems del menú.
Para saber cuándo se presionó algún ítem, se usa el siguiente método:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
}Después, vamos a identificar cuál de los Ítems se presionó. Para esto se usa la ID de los Ítems y el comando switch (link switch).
Obtenemos la ID con:
item.getItemId()
Luego mediante un Switch elegimos el ítem que se presionó.
El código es:
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId())
{
case R.id.item_home:
//Hacer algo cuando presionen Home
break;
case R.id.item_dos:
//Hacer algo cuando presionen Dos
break;
case R.id.item_tres:
//Hacer algo cuando presionen tres
break;
default:
//Hacer algo cuando por default
break;
}
return super.onOptionsItemSelected(item);
}En el código anterior agregamos un Toast, solo para ver que funciona bien.
Al correr la app, veremos que tiene una Toolbar con los Items del menú. Y al presionarlos observamos que nos efectúa la acción que indicamos según el ítem.