Creación de un botón en la barra de herramientas de Android

¿Cómo puedo crear un botón dentro de la Toolbar de Toolbar de Android que se parece a este ejemplo de iOS ?

Ejemplo de iOS

Barra de herramientas con el botón Tutorial

1 – Añadir compatibilidad de biblioteca dentro de build.gradle

 dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:21.0.3' } 

2 – Cree un nombre de archivo color.xml para definir los colores de la Toolbar

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="ColorPrimary">#FF5722</color> <color name="ColorPrimaryDark">#E64A19</color> </resources> 

3 – Modifique su archivo style.xml

 <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/ColorPrimary</item> <item name="colorPrimaryDark">@color/ColorPrimaryDark</item> <!-- Customize your theme here. --> </style> </resources> 

4 – Crear un archivo xml como tool_bar.xml

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/ColorPrimary" android:elevation="4dp" > </android.support.v7.widget.Toolbar> 

5 – Incluya la Toolbar en su main_activity.xml

 <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" tools:context=".MainActivity"> <include android:id="@+id/tool_bar" layout="@layout/tool_bar" ></include> <TextView android:layout_below="@+id/tool_bar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="@dimen/TextDimTop" android:text="@string/hello_world" /> </RelativeLayout> 

6 – Luego, póngalo dentro de su clase MainActivity

 package com.example.hp1.materialtoolbar; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.MotionEvent; import android.view.View; import android.widget.Toast; public class MainActivity extends ActionBarActivity { /* When using Appcombat support library you need to extend Main Activity to ActionBarActivity. */ private Toolbar toolbar; // Declaring the Toolbar Object @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main_activity); toolbar = (Toolbar) findViewById(R.id.tool_bar); // Attaching the layout to the toolbar object setSupportActionBar(toolbar); // Setting toolbar as the ActionBar with setSupportActionBar() call } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); //noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } } 

7 – Y finalmente, agrega tus "Elementos de botón" al menu_main.xml dentro del directorio /res/menu/

 <?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/action_settings" android:orderInCategory="100" android:title="@string/action_settings" app:showAsAction="never" /> <item android:id="@+id/action_search" android:orderInCategory="200" android:title="Search" android:icon="@drawable/ic_search" app:showAsAction="ifRoom" ></item> <item android:id="@+id/action_user" android:orderInCategory="300" android:title="User" android:icon="@drawable/ic_user" app:showAsAction="ifRoom"></item> </menu> 

La personalización de la barra de herramientas puede realizarse de la siguiente manera

Escribe el botón y el código de textViews dentro de la barra de herramientas como se muestra a continuación

 <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:layout_width="wrap_content" android:layout_height="@dimen/btn_height_small" android:text="Departure" android:layout_gravity="right" /> </android.support.v7.widget.Toolbar> 

Otra forma es utilizar el menú de artículos como se muestra a continuación

 @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.menu_main, menu); return true; } 

Se llaman elementos de menú o botones de acción en barra de herramientas / barra de acción. Aquí tienes Google tutorial cómo funciona y cómo agregarlos https://developer.android.com/training/basics/actionbar/adding-buttons.html

He añadido texto en la barra de herramientas:

Menu_skip.xml

  <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/action_settings" android:title="@string/text_skip" app:showAsAction="never" /> </menu> @Override public boolean onCreateOptionsMenu(Menu menu) { MenuInflater inflater = getMenuInflater(); inflater.inflate(R.menu.menu_otp_skip, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { // action with ID action_refresh was selected case R.id.menu_item_skip: Toast.makeText(this, "Skip selected", Toast.LENGTH_SHORT) .show(); break; default: break; } return true; } 

Otra posibilidad es configurar el atributo app: actionViewClass en su menú

 <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto>"> <item android:id="@+id/get_item" android:orderInCategory="1" android:text="Get" app:showAsAction="always" app:actionViewClass="android.support.v7.widget.AppCompatButton"/> </menu> 

En su código puede acceder a este botón después de que el menú se infló:

 public boolean onCreateOptionsMenu(Menu menu) { MenuInflater menuInflater = getMenuInflater(); menuInflater.inflate(R.menu.sample, menu); MenuItem getItem = menu.findItem(R.id.get_item); if (getItem != null) { AppCompatButton button = (AppCompatButton) getItem.getActionView(); //Set a ClickListener, the text, the background color or something like that //... } return super.onCreateOptionsMenu(menu); } 
  • ¿Cómo puedo usar una barra de herramientas de altura extendida con la navegación de menús y las acciones centradas verticalmente?
  • Material de Android con barra de herramientas extendida
  • Implementación de Google play y mapas como la barra de búsqueda de Android
  • Notificación de la divisa en la barra de herramientas en la barra de herramientas - Android
  • Hacer clic en icono de hamburguesa en la barra de herramientas no abre Cajón de navegación
  • Ocultar barra de herramientas con CoordinatorLayout, pero RecyclerView en un fragmento
  • ¿Cómo implementar WhatsApp como el diseño de materiales SearchView?
  • Cómo mostrar los elementos de acción en la parte inferior mediante la barra de herramientas
  • Los subtítulos de la barra de herramientas no aparecen
  • Barra de herramientas que no aparece en los dispositivos pre lollipop
  • Desactivar el cajón de navegación del fragmento
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.