¿Qué son los dp en Android?

Si acabas de empezar en el desarrollo de Android, quizás sea una de las cosas que te llamen la atención. Por lo menos eso me pasó a mí en su momento.

En Android, cuando queremos definir el tamaño de un elemento lo especificamos en una unidad llamada dp. Tanto si queremos definir la anchura, la altura o un margen. 10dp, 20dp, 30dp… ¿Pero que hay detrás de estas dos letras?

¿Qué son los dp?

La definición técnica del término dp es Density-Independent Pixel, o lo que sería lo mismo en español, Pixel de Densidad Independiente. Aunque el nombre parezca extraño en un principio, tiene sentido.

Si vienes del mundo de la web, lo más común es que especificaras el tamaño de los elementos utilizando el px. El término px hace referencia al pixel. Un px no es nada más que un punto en la pantalla. Cada pantalla tiene cierta cantidad de px a lo ancho y a lo alto. Pues bien, los dp guardan una gran relación con los px. La mejor manera de ver las diferencias entre uno y otro es a través de algunos dibujos. Ya verás que lo vas a entender perfectamente 😉

La diferencia entre los dp y los px

Empecemos viendo el funcionamiento de los px. Es muy sencillo.

Cuando dices que vas a colocar un botón de 2px de ancho por 2px de alto, la pantalla sabe que tiene que colocar esos puntos de un determinado color. Sería algo así:

El funcionamiento de los pixels consiste en pintar un cuadrado de la pantalla

Fácil y simple. La pantalla pintará esos px con un botón del color que tu quieras. Ahora bien, cada pantalla puede tener los px de un tamaño distinto. El px no hace referencia a una unidad de medida física exacta como el cm por ejemplo. Un px puede medir 1mm como podría medir 3mm. Lo único que indica es un punto en la pantalla. Nada de medidas exactas. ¿Se entiende?

A partir de aquí sale el concepto de densidad de pantalla. ¿Qué es la densidad de pantalla? La cantidad de px que hay en una determinada área concreta. Cuando más alta sea la densidad de pantalla, más px hay en un determinado espacio, o lo que es lo mismo, más pequeños son estos px.

¿Esto qué quiere decir? Que un botón en dos pantallas distintas, aunque tenga el mismo tamaño en px, no tiene porque tener el mismo tamaño físico, no tiene porqué verse de la misma forma. Si esto lo sumamos a que en los móviles tenemos pantallas muy pequeñas y con muchas densidades distintas, las diferencias entre dispositivos son muchas. Los dp vienen a solucionar este problema. ¿Qué problema? Tranquilo, una imagen vale más que mil palabras, así que, vamos a ello 🙂

Los móviles y las densidades de pantalla

Vamos a imaginar 3 móviles con el mismo tamaño de pantalla. Ahora bien, cada dispositivo va a tener una densidad de pantalla distinta, en otras palabras, sus px van a tener tamaños distintos. Aquí están:

La densidad de pantalla indica el número de pixels en un espacio

Ahora vamos a dibujar un cuadrado de 2×2px de tamaño. Así que nos quedarían las siguientes cuadrículas:

Indicando el tamaño en pixeles tendremos diferentes tamaños en diferentes densidades

¿Ves el problema? El mismo botón, con el mismo tamaño en px, a simple vista no parece que tenga el mismo tamaño en cada pantalla. De hecho en cada caso es bastante diferente.

Si Android funcionara así, sería muy difícil crear las interfaces de las aplicaciones. ¿Por qué? Porque existen una gran cantidad de dispositivos, con tamaños de pantalla y densidades distintas. Al desarrollar, lo que queremos es crear una interfaz que sea muy semejante independientemente del móvil que tengas.

Imagina que tienes dos móviles del mismo tamaño pero con densidades distintas. Uno en la mano derecha y otro en la mano izquierda. Tendrías que ver la interfaz de usuario exactamente del mismo tamaño. La única diferencia tendría que ser la calidad. Obviamente, el móvil con más densidad tendría que tener una mayor calidad de imagen.

Para que esto funcione tenemos que usar una alternativa a los px. Por suerte Android ya tiene una solución para esto y son los ya mencionados dp.

¿Cómo funciona el dp?

El dp, como su nombre indica, lo que hace es mostrar el mismo tamaño independientemente de la densidad de pantalla. Podríamos decir que se encarga de hacer el trabajo sucio por nosotros. Volvamos a una imagen para aclararlo. Ahora en vez de dibujar un botón de 2×2px, vamos a hacerlo con 2×2dp.

Indicando el tamaño en dp evitamos tener diferentes tamaños en diferentes pantallas

¿Ves lo que está pasando ahora? Al especificar el tamaño del objeto en dp, Android calcula automáticamente en función del tamaño de los pixeles del dispositivo, el tamaño equivalente en px. Así que, podríamos decir que Android al final sí que usa px aunque nosotros no los utilizamos directamente.

¿Qué pasa con las imágenes y los iconos?

Cuando utilizamos una imagen o un icono, normalmente, no especificamos ningún tamaño. Simplemente colocamos la imagen en la pantalla y punto. Pero claro, estas imágenes tienen un tamaño en px. ¿Qué pasa con ellas?

Pues si Android no tuviera una solución para esto (que la tiene) pasaría exactamente lo mismo que con los tamaños especificados en px que hemos contado antes. ¿La solución? Colocar dentro del proyecto diferentes tamaños para la misma imagen.

Dentro de un proyecto Android, en la carpeta res podemos crear 4 carpetas como las siguientes:

Las carpetas drawable se utilizan para colocar diferentes imágenes para diferentes densidades de pantalla

Los sufijos de las carpetas hacen referencia a: medium density, high density, extra-high density y extra-extra-high density. Cada una de estas carpetas contendrá las mismas imágenes pero con distintos tamaños. Android elegirá de qué carpeta debe coger la imagen en función de la densidad del dispositivo. De esta manera conseguiremos que la imagen siempre se vea del mismo tamaño independientemente de la densidad de pantalla del dispositivo.

Para saber qué tamaño elegir para cada carpeta, tenemos que mirar la relación de escalado que hay en cada caso. Para ello puede ser de gran utilidad esta imagen de la documentación de Android:

Hay una relación de escalado entre las diferentes densidades de pantalla de Android
Fuente : Documentación de Android

Como ejemplo, una imagen de 100×100px necesitaría los siguientes tamaños por carpeta:

  1. MDPI:100×100
  2. HDPI:150×150
  3. XHDPI:200×200
  4. XXHPI:300×300

Conclusión

Si colocamos los tamaños en px en vez de en dp, o no colocamos diferentes tamaños de imagen para los recursos gráficos, simplemente nuestra app se va a ver peor. Mejor dicho, el diseño no va a ser consistente entre las diferentes pantallas que existen.

Esto es un artículo meramente explicativo de cómo Android soluciona el problema de las diferentes densidades de pantalla. Simplemente es interesante saber cómo funciona y sobre todo saber por qué tenemos que utilizar estas soluciones que Android nos ofrece.

Cómo siempre espero que este artículo te haya podido servir para acabar de entender qué son los dp y cómo funcionan las distintas densidades de pantalla. Para cualquier duda o sugerencia, sabes que puedes contactar conmigo a través de mi formulario de contacto y estaré encantado de poder ayudarte en lo que me sea posible 😉