Cómo activar el diseño material en Android en una aplicación Cordova

Cómo activar el diseño material en Android en una aplicación Cordova

Problema

Probablemente habrás notado que incluso con la ultima versión de cordova (hasta la fecha 6.0) la barra de acciones de tu aplicación cordova (ionic o phonegap) tiene de manera predeterminada el tema holo dark en el area nativa, eso significa que cuando seleccione texto, las barras de selección lucirán así:

Holo theme android

Antes de Android lollipop (<5) este es el tema predeterminado de estas versiones y el tema material no está disponible. Sin embargo esto no es un gran problema pues no podemos hacer gran cosa con esto (a no ser que decidas cambiar el desarrollo de una app híbrida por una app nativa), el problema está en que este tema esta activado de manera predeterminada en las aplicaciones de cordova incluso para Android lollipop o versiones mayores.

Para Android lollipop el tema predeterminado debería ser Material, que luce como:

Android lollipop

y es algo frustrante el hecho de que tan simple caracteristica no esté activada, aunque para tu suerta, si necesitas obligatoriamente (o simplemente quieres) que esta caracteristica este disponible en tu aplicación, la solución es bastante sencilla.

Si has leido acerca de como resolver este problema en Google, simplemente tendrías que agregar una linea al archivo AndroidManifest.xml y forzar la compilación. Sin embargo, esta no es la manera correcta de solucionarlo pues así tendrás que hacer lo mismo cada vez que compiles tu aplicación y esto se puede convertir en un dolor de cabeza.

Solución

Para usar el diseño material en tu proyecto cuando esté disponible (en Lollipop o versiones superiores), necesitas el plugin cordova-custom-config instalado en tu proyecto, usa el siguiente comando para instalarlo:

$ cordova plugin add cordova-custom-config
# or phonegap
$ phonegap plugin add cordova-custom-config

Este plugin te permite actualizar la configuración del manifiesto basados en las preferencias y configuración en el archivo config.xml, pues esta caracteristica para el framework no esta implementada de manera predeterminada.

Despues de la instalación, necesitarás solo modificar el archivo config.xml de la misma manera en la que modificarias el manifiesto de Android, asi que debes agregar la siguiente linea en el archivo config.xml :

<preference name="android-manifest/application/activity/@android:theme" value="@android:style/Theme.DeviceDefault" />

Esta linea le permitira a tu aplicación usar el tema predeterminado del dispositivo (Material para lollipop o mayor). Ahora compila la aplicación y mira como la magia ocurre !

Recuerda que puedes escoger entre tema translucent, dark y otros temas de acuerdo a tu gusto (lee más sobre más temas de android aquí), sin embargo ten en cuenta que algunos temas pueden no estár disponibles en algunas versiones de android. Este articulo tiene como meta, lograr que tu aplicación tenga un feeling mucho más nativo.

Esto podría ser de tu interes

Conviertete en un programador más sociable