Si estás desarrollando aplicaciones móviles específicamente en Android entonces estoy bastante seguro de que debes haber tenido dificultades en hacer que el contenido de tus aplicaciones sea dinámico, especialmente el tamaño del texto. He estado trabajando en aplicaciones de Android por un tiempo bastante largo y no he encontrado ninguna documentación oficial sobre el apoyo a diferentes tamaños de texto de acuerdo a la pantalla del dispositivo, hay algunos recursos oficiales, aunque describiendo el uso de TextView con el apoyo de tamaño de texto como se define en la unidad sp por ejemplo android:textSize=»12sp».
No hay duda de que cada desarrollador ha utilizado este enfoque para lograr el tamaño del texto dinámico que soporta la bruja del dispositivo se está ejecutando en.
Hoy voy a compartir mi experiencia de cómo logré el tamaño del texto dinámico en las aplicaciones Android, con este enfoque se puede ajustar no sólo el tamaño del texto también el tamaño de otras vistas.
Vamos a sumergirnos en nuestro enfoque de Dynamic TextView size💪🏼
Si usted no tiene dimen.xml en su proyecto, entonces cree uno siguiendo los siguientes pasos:
- Haga clic con el botón derecho del ratón en su carpeta de valores
- Seleccione Nuevo
- Seleccione Archivo de Recursos de Valores
- Luego cree un archivo dimen.xml
- Defina un recurso de dimensión en dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
</resources>
Una vez que añada el recurso dimen habrá un error en @dimen/_22sdp no se preocupe por ello lo arreglaremos en los próximos pasos.
Creación del archivo meta.xml:
Este archivo se utilizará como referencia para las diferentes variantes o calificadores que posee el dispositivo android en el que se ejecuta la aplicación.
- Crea de nuevo un archivo de recursos de valores
- Nómbralo como meta, pero no pulse ok en el diálogo todavía
- Haga clic en el calificador de densidad de la lista en el lado izquierdo
- Ahora seleccione el botón que tiene mayor que el signo como >>, entonces verás algo como esto
- Selecciona Densidad Media y pulsa ok
Android Studio soporta diferentes calificadores uno de ellos densidad que acabamos de usar arriba. Ahora repite el paso para crear el archivo meta.xml y añade todos los siguientes calificadores de densidad:
- Alta Densidad
- X-Alta Densidad
- XX-Alta Densidad
- XXX-Alta Densidad
A continuación crea otro archivo meta.xml y esta vez utilice el calificador de tamaño del lado izquierdo y seleccione las opciones X-Large.
Ahora crearemos otro archivo meta.xml con diferente calificador que es Smallest Screen Width como se muestra a continuación
Una vez que usted haga clic en el Smallest Screen Width verá la opción de definir el ancho más pequeño en dp como se muestra a continuación
Luego haga clic en el botón OK.
Crearemos más archivos meta.xml con los siguientes tamaños de ancho más pequeños:
- 300
- 330
- 360
- 390
- …
- …
- … crearemos archivos con la diferencia de 30 hasta llegar a 780
La pregunta aquí es qué habría en estos archivos, bueno agregaremos recurso de cadena en todos los meta archivos en los próximos pasos.
En el panel izquierdo de Android Studio tiene estos archivos como se muestra a continuación:
Cada archivo está mostrando su calificador en el lado derecho de meta.xml, abrir cada archivo y colocar el siguiente recurso de cadena.
meta.xml (hdpi)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="dimension">values-hdpi</string>
</resources>
Abrir cada archivo meta.xml y el recurso antes mencionado, pero usted tiene que cambiar los valores-hdpi valor con valores-{aquí uso calificador de archivo respectivo}. Además, puede comprobar estos archivos en github.
- meta.xml(hdpi)
- meta.xml(mdpi)
- meta.xml(xhdpi)
- meta.xml(xxhdpi)
- meta.xml(xxxhdpi)
- meta.xml(xlarge)
- meta.xml(sw300dp)
- meta.xml(sw330dp)
- meta.xml(sw360dp)
- meta.xml(sw390dp)
- meta.xml(sw420dp)
- meta.xml(sw450dp)
- meta.xml(sw480dp)
- meta.xml(sw510dp)
- meta.xml(sw540dp)
- meta.xml(sw570dp)
- meta.xml(sw600dp)
- meta.xml(sw630dp)
- meta.xml(sw660dp)
- meta.xml(sw690dp)
- meta.xml(sw720dp)
- meta.xml(sw750dp)
- meta.xml(sw780dp)
Todavía no ha terminado, hay más archivos que necesitamos que es sdp.xml, crear este archivo con todos los calificadores que hemos creado antes para meta.xml, una vez que haya terminado con la creación de todos estos archivos de sdp.xml con todos los calificadores a continuación, puede encontrar el contenido de estos archivos en github. sdp
- sdp.xml(hdpi)
- sdp.xml(mdpi)
- sdp.xml(xhdpi)
- sdp.xml(xxhdpi)
- sdp.xml(xxxhdpi)
- sdp.xml(xlarge)
- sdp.xml(sw300dp)
- sdp.xml(sw330dp)
- sdp.xml(sw360dp)
- sdp.xml(sw390dp)
- sdp.xml(sw420dp)
- sdp.xml(sw450dp)
- sdp.xml(sw480dp)
- sdp.xml(sw510dp)
- sdp.xml(sw540dp)
- sdp.xml(sw570dp)
- sdp.xml(sw600dp)
- sdp.xml(sw630dp)
- sdp.xml(sw660dp)
- sdp.xml(sw690dp)
- sdp.xml(sw720dp)
- sdp.xml(sw750dp)
- sdp.xml(sw780dp)
Y eso es todo para la configuración ahora sólo tiene que utilizar estos valores de dimensión que ya ha definido en el archivo dimen.xml que hemos discutido al principio de este blog.
Uso
Dado que has definido un valor dimen como:
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
Puedes usarlo en cualquier parte de tus archivos xml de layouts:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
<!-- // here is the dimen value that will support different screen size-->
android:textSize="@dimen/textSizeTitle"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Prueba a ejecutar tu aplicación en diferentes emuladores que tengan diferentes dimensiones y densidad de pantalla, verás que el tamaño del texto se ajusta por sí mismo según el dispositivo en el que se esté ejecutando la aplicación.
Y eso es todo tuyo ahora 🥳
Gracias por leer y espero que tu presencia aquí haya sido ingeniosa 😎
También puedes revisar mi otra historia sobre Styling/Designing TextField en Jectpack Compose UI – Android
Kamran Ramzan es un estudiante de Ingeniería de Software que trabaja como desarrollador de aplicaciones móviles Full Stack. Constantemente explora nuevas tecnologías y comparte el conocimiento con ustedes con la esperanza de que ayude de alguna manera.
Amablemente golpear el aplauso una y otra vez 😇 si te gusta mi esfuerzo 👏🏼