Generando Diseños para cada Densidad de Pantalla en Android (dpi) con Adobe Xd

UI

En Android existen muchas versiones o densidades de pantallas en donde nuestra aplicación toma un aspecto visual distinto según sea el dispositivo en donde se esta visualizando la aplicación, mediante Adobe Xd podemos ser productivos, este nos ayuda a crear dichas versiones en tan solo unos segundos, vayamos con el artículo.

Para entender mejor lo que haremos, debemos conocer que en el desarrollo de Android existen hasta la fecha de este artículo 6 diferentes tipos de resoluciones o densidades de Pantallas, que son

  • ldpi (baja) ~120 dpi
  • mdpi (media) ~160 dpi
  • hdpi (alta) ~240 dpi
  • xhdpi (extraalta) ~320 dpi
  • xxhdpi (extra extraalta) ~480 dpi
  • xxxhdpi (extra extra extraalta) ~640 dpi

Este conjunto de resoluciones de Pantalla sirven para cubrir la necesidad de una determinado dispositivo, por ejemplo si abres tu aplicación en un móvil normal pues el Android usa ldpi, pero si abres tu aplicación en un Smart TV, Android puede usar entre hdpi hasta xxxhdpi.

La idea es que tengas los gráficos optimizados para dichas pantallas, ya que si usas gráficos con la resolución para un móvil en un Smart TV, pues estos gráficos se verían pixeleados o borrosos en el TV.

Generar Diseños en Adobe Xd

Lo primero que tienes que haces es Seleccionar todos los elementos del diseño y luego ve a Export > Selected

Una forma más rápida de realizar la acción es presionando las teclas CTRL + E, cualquiera que sea la forma como lo lleves a cabo, te abrirá una ventana.

En dicha ventana debes de elegir el formato de imagen, por ejemplo PNG y el Entorno para el cual es el diseño, en este caso elegiremos Android.

También puedes elegir la carpeta de destino en donde se exportarán los diseños Export to

Por último de damos click en el botón Export para generar los diseños

Ahora ve a la carpeta en donde generaste los diseños y tendrás en segundos los diseños listos para implementarlos en la carpeta drawable de Android Studio

Con esto ahorras mucho tiempo en diseño, así solo te enfocas en darle funcionalidad a nivel de código.

Nota

Los pasos mencionados pueden cambiar en futuras versiones de Adobe Xd, la empresa y los desarrolladores que dan soporte a esta herramienta, pueden cambiar el orden de las opciones, esto escapa de nosotros.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required