En este nuevo tutorial veremos muy rápidamente cómo personalizar Action Bar en Android Studio de manera sencilla, para que en pocos minutos la tengas implementada en tu aplicación. No te voy a engañar, porque esto realmente ya te lo contamos en otro artículo, dónde te mostramos cómo añadir iconos a la Action Bar, pero te refrescaremos la memoria y además para que puedas darle estilo y tengas un 2 por 1 en este tutorial. Si quieres personalizar tu Action Bar con más iconos y colores frescos Material Design, lo vemos:
Personalizar Action Bar en Android Studio
¿Cómo puedo personalizar mi Action Bar en Android?
- Lo primero es añadir iconos a la Action Bar.
- Lo segundo es añadir estilo/diseño/colores a la Action Bar.
Con esto, conseguirás tener una Action Bar atractiva que atraiga a los usuarios y con muchas otras funciones, para exprimirla al máximo. En el primer artículo, te contamos cómo añadir iconos a la Action Bar, de esta manera, y como ves en la siguiente imagen, podrás añadir por ejemplo un icono de «+» para que se abra un nuevo layout y solicites información del usuarios. También quedaría bien una lupa para buscar, el procedimiento es el mismo que te contamos en el otro artículo, solo que en este hemos decidido juntar añadido de iconos + diseño para que lo consigas todo.
Un nuevo item en tu menú
El código tendrías que pegarlo en tu menú, porque es un nuevo item. Y tendrás que crear tantos items como iconos quieras mostrar en tu Action Bar:
|
1 2 3 |
<item android:id="@+id/add_phrase" android:icon="@drawable/add" android:title="@string/action_addPhrase" /> |
Este icono, como te contamos en el otro post, es un botón. Acuérdate de añadir el icono del botón a la carpeta Drawable para que puedas encontrarlo en esa ruta, y que sea PNG.
Luego desde la clase (layout) dónde quieras que se muestre, tendrás que llamarlo con los siguientes 2 trozos de código:
Aquí cargas el menú con el botón:
Con solo esta llamada al menú se estarían cargando todos los items que tuviera.
|
1 2 3 4 5 |
@Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_add, menu); return true; } |
Aquí le das comportamiento al botón (abrir un nuevo layout):
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.add_phrase: Log.i("ActionBar", "Add Phrase!"); Intent AddPhrase = new Intent(getApplicationContext(), AddPhrase.class); //layout que quieras abrir startActivity(AddPhrase); return true; default: return super.onOptionsItemSelected(item); } } |
Espero que te haya quedado más claro. Es lo que te contamos en el primero de los posts, sin embargo, ahora te mostramos también cómo añadir estilos, para ello necesitamos movernos hasta styles.xml. Esta es una opción, pero en el segundo enlace que te dejamos más arriba encontrarás una gran gama de colores, y una web dónde podrás encontrarlos para personalizar tu Action Bar como quieras.
Dale estilo desde styles.xml
App > res > values > styles.xml:
|
1 2 3 |
<style name="ActionBarLight" parent="android:style/Widget.Holo.Light.ActionBar"> <item name="android:background">#FFEB3B</item> </style> |
Si buscas algo bonito en tonos verdes:
|
1 2 3 4 5 6 7 8 9 |
<style name="Theme.BromasWhatsApp" parent="Base.AppTheme" /> <style name="Base.AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">#009688</item> <item name="colorPrimaryDark">#00796B</item> <item name="colorAccent">#4CAF50</item> <item name="android:textColorLink">#B2DFDB</item> <item name="android:windowBackground">@color/window_background</item> </style> |
En Material Palette encontrarás todo lo que necesites para poner bonita tu app como la siguiente en tonos azules:
¡Espero que te haya sido de ayuda y consigas personalizar tu Action Bar en Android! ¿Te han quedado dudas? Pregúntanos lo que necesites.
pero quiero varios colores para los titulos en varias activities, como hago?
puedes crear varios custom
Sos un amor… gracias por compartir tus conocimientos… <3
Amigo.
yo quiero poner el titulo en Dos lineas.
como hago?
algo así quiere:
»
OURPINIA OCCIDENTALIS
(Cedrillo)
«