¿Quieres tener tu Action Bar Material Design en Android Studio? Es decir, disfrutar de los colores Material Design en el Action Bar o menú de tu aplicación Android. En este tutorial veremos cómo hacerlo de manera fácil, recuerda que ya te hemos contado cuáles son los códigos de los colores Material Design.
Action Bar Material Design en Android Studio
Lo primero que debemos hacer para disfrutar de una Action Bar Material Design en Android Studio, es empezar el proyecto en la API correcta (al menos al 21, Lollipop) para tener un styles.xml (v21), que integra características exclusivas de esta API. El otro Styles, será el que se aplique a los usuarios que no tengan Lollipop en sus terminales.
Una vez tengamos nuestro styles (v21), podremos personalizar todos los campos que queramos a nuestro gusto para exprimir al máximo la apariencia de nuestra aplicación y poner color por más partes.
Por ejemplo, si nos gusta el anterior menú, tendremos que utilizar la siguiente combinación de colores en nuestro Styles.xml (v21):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AppTheme" parent="android:Theme.Material.Light"> <item name="android:colorPrimary">#FFEB3B</item> <item name="android:colorPrimaryDark">#1976D2</item> <item name="android:popupBackground">#1976D2</item> <item name="android:textColorPrimary">#000000</item> <item name="android:actionMenuTextColor">#C5CAE9</item> <item name="android:textColorSecondary">#1976D2</item> <item name="android:editTextColor">#000000</item> <item name="android:textColorAlertDialogListItem">#FFEB3B</item> <item name="android:actionBarStyle">@style/ActionBarLight</item> <item name="android:popupMenuStyle">@style/PopupMenu</item> <item name="android:fontFamily">roboto, sans-serif-condensed</item> </style> <style name="ActionBarLight" parent="android:style/Widget.Holo.Light.ActionBar"> <item name="android:background">#FFEB3B</item> </style> <style name="PopupMenu" parent="@android:style/Widget.Holo.ListPopupWindow"> <item name="android:popupBackground">#FFEB3B</item> </style> </resources> |
Este trozo de código puedes pegarlo directamente en Styles.com (v21). Si lo haces correctamente, en cuanto cargues tu app la verás con esta apariencia Material Design.
A través de los chicos de MaterialPalette.com, podemos ver cómo poner las combinaciones de colores en su lugar correspondiente para que así nos quede tal cual lo vemos en la siguiente imagen.
En el propio Styles, tendremos que indicar las características que queramos como por ejemplo <item name=»android:colorPrimary»> (código de color) </item>, tal y como hemos visto en el trozo de código anterior. Y así con todas las características (accent color, text/icons, divider color)… que queramos incluir, para dar nuestro toque de color ahora en más lugares.
¿Qué tal vas con tu Action Bar Material Design en Android Studio? ¡Esperamos que te haya quedado bonita! Recuerda dejarnos un comentario si tienes cualquier duda, podemos ayudarte en lo que necesites.
