Crear un ToolBar en Android Studio con Material Design

Como crear un ToolBar en Android Studio

Bueno antes de poder empezar este tutorial debemos asegurarnos que cumpla con los siguientes requisitos:

• Android Studio 1.0.1
• Appcombat v7 Support library (Para poder trabajar con dispositivos Pre Lollipop)

Si usted tiene el Android Studio 1.0.1, entonces usted no tiene de que preocuparse de la biblioteca de soporte Appcombat v7 ya que viene con la dependencia compilada de la última biblioteca de soporte Appcombat. Mira la imagen de abajo para que veas lo que intentamos hacer.

Bueno teniendo esto en claro empecemos:

1. Abra Android Studio, cree un nuevo proyecto y seleccione una actibity en blanco.

2.  Si usted está en la última versión de Android Studio no tiene que agregar una dependencia compilada de Appcombat v7 21 si no es asi, por favor, asegúrese de añadir la siguiente línea en sus dependencias de construcción Gradel. Entrando en build.gradle.

Y poner lo siguiente en dependencias:

3. Aunque ActionBars se sustituyen por el Toolbar todavía podemos utilizar ActionBar, pero en nuestro caso vamos a hacer una barra de herramientas para ir a tu style.xml y cambiar el tema a "Theme.AppCompat.Light.NoActionBar", Esto nos ayuda a deshacemos de la barra de acciones "ActionBar" para que podamos hacer una barra de aplicaciones "App bar".

4. Ahora vamos a hablar sobre el esquema de color para nuestro proyecto, como se puede ver en la imagen de abajo, hay atributos que se pueden establecer para obtener un esquema de color básico de su aplicación, en este momento sólo estamos tratando que la barra de aplicaciones tenga un colorPrimary y colorPrimaryDark. colorPrimary como su nombre lo dice es el color principal de su aplicación y la barra de aplicaciones, mientras que con el colorPrimaryDark puede ajustar el color de la barra de estado para un determinado color.

Cree un archivo llamado color.xml en su carpeta de valores y añada los siguientes atributos de color como se muestra en el código de abajo.

• Creamos el archivo color.xml  en su carpeta de valores (values).

• Y añadimos los siguientes atributos de color como se muestra en el código de abajo.

• Y así es como queda el style.xml después de añadir los colores.

5. Ahora vamos a crear un ToolBar (barra de herramientas), La barra de herramientas o ToolBar  es como cualquier otra layout que se puede colocar en cualquier lugar en su interfaz de usuario. Ahora bien, como la barra de herramientas va a ser necesaria en todos o la mayoría de las actividades, debemos crear un archivo llamado tool_bar.xml separada o aparte e incluirla en nuestra actividad de esta manera podemos incluir el mismo archivo en cualquier actividad queremos nuestra barra de herramientas aparezca.

Ir a la carpeta de res en su proyecto y crear un nuevo archivo  Layout resource file con el nombre de tool_bar.xml como se muestra en la imagen de abajo.

6. Ahora añada el color de fondo a su tool_bar como el color principal de la aplicación , así es como debe quedar el tool_bar.xml.
                 

7. Ahora vamos a incluir nuestro ToolBar  que acabamos de hacer en nuestro archivo main_activity, así es como se ve el main_activiy.xml.

                

En este punto es así como la aplicación debe aparecer.

         

  

8. Como se puede ver,  el tool_bar layout se añade, pero no se ve como un barra de acción (Action Bar), sin embargo, eso es porque tenemos que declarar la barra de herramientas (ToolBar ) como la Barra de acciones en el código, para hacer eso agregue el código siguiente al MainActivity. java.

Después de eso, así es como se ve el ToolBar.