Si vous développez des applications mobiles spécifiquement dans Android alors je suis à peu près sûr que vous devez avoir eu des difficultés à rendre le contenu de vos applications dynamique notamment la taille du texte. Je travaille sur des applications Android depuis assez longtemps et je n’ai pas trouvé de documentation officielle sur le support de différentes tailles de texte en fonction de l’écran de l’appareil, il y a quelques ressources officielles cependant qui décrivent l’utilisation de TextView avec le support de la taille du texte comme défini dans l’unité sp par exemple android:textSize= »12sp ».
Nul doute que chaque développeur a utilisé cette approche pour obtenir la taille de texte dynamique qui supporte l’appareil sorcier sur lequel l’application est exécutée.
Aujourd’hui, je vais partager mon expérience de la façon dont j’ai atteint la taille du texte dynamique dans les applications android, avec cette approche, vous pouvez ajuster non seulement la taille du texte aussi la taille d’autres vues.
Plongeons dans notre approche de la taille de Dynamic TextView💪🏼
Si vous n’avez pas dimen.xml dans votre projet, alors créez-en un en suivant les étapes mentionnées ci-dessous :
- Cliquez avec le bouton droit de la souris sur votre dossier de valeurs
- Sélectionnez Nouveau
- Sélectionnez Fichier de ressources de valeurs
- Puis créez un fichier dimen.xml
- Définir une ressource de dimension dans dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
</resources>
Une fois que vous aurez ajouté la ressource dimen il y aura une erreur sur @dimen/_22sdp ne vous inquiétez pas nous la corrigerons dans les prochaines étapes.
Création du fichier meta.xml:
Ce fichier sera utilisé comme référence pour les différentes variantes ou qualificatifs que possède l’appareil android sur lequel l’application tourne.
- Créez à nouveau un nouveau fichier de ressources de valeurs
- Nommez-le meta, mais n’appuyez pas encore sur ok dans la boîte de dialogue
- Cliquez sur le qualificateur de densité dans la liste à gauche
- Maintenant sélectionnez le bouton qui a un signe plus grand que comme >>, alors vous verrez quelque chose comme ceci
- Sélectionnez Medium Density et appuyez sur ok
Android Studio supporte différents qualificatifs dont la densité que nous venons d’utiliser ci-dessus. Maintenant, répétez l’étape pour créer le fichier meta.xml et ajoutez tous les qualificatifs de densité suivants :
- High Density
- X-High Density
- XX-High Density
- XXX-High Density
Puis créez un autre fichier meta.xml et cette fois, utilisez le qualificateur de taille du côté gauche et sélectionnez les options X-Large.
Nous allons maintenant créer un autre fichier meta.xml avec un qualificatif différent qui est Smallest Screen Width comme indiqué ci-dessous
Une fois que vous aurez cliqué sur le Smallest Screen Width vous verrez l’option pour définir la plus petite largeur en dp comme indiqué ci-dessous
Puis cliquez sur le bouton OK.
Nous allons créer plus de méta.xml avec les plus petites tailles de largeur suivantes :
- 300
- 330
- 360
- 390
- …
- …
- … créer des fichiers avec une différence de 30 jusqu’à ce que vous atteigniez 780
La question ici est de savoir ce qu’il y aurait dans ces fichiers, et bien nous allons ajouter une ressource de type chaîne dans tous les fichiers méta dans les prochaines étapes.
Dans le volet gauche d’Android Studio, vous avez ces fichiers comme indiqué ci-dessous :
Chaque fichier montre son qualificatif sur le côté droit du nom meta.xml, ouvrez chaque fichier et placez la chaîne suivante ressource.
meta.xml (hdpi)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="dimension">values-hdpi</string>
</resources>
Ouvrez chaque fichier meta.xml et la ressource mentionnée ci-dessus mais vous devez changer les valeurs-hdpi avec des valeurs-{ici utiliser le qualificatif du fichier respectif}. En outre, vous pouvez vérifier ces fichiers sur 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)
Ce n’est pas encore fini, il y a d’autres fichiers dont nous avons besoin qui est sdp.xml, créer ce fichier avec tous les qualificatifs que nous avons créés auparavant pour meta.xml, une fois que vous avez fini de créer tous ces fichiers de sdp.xml avec tous les qualificatifs alors vous pouvez trouver le contenu de ces fichiers sur 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)
Et c’est tout pour la configuration maintenant vous devez juste utiliser ces valeurs de dimension que vous avez déjà définies dans le fichier dimen.xml dont nous avons parlé au début de ce blog.
Utilisation
Du fait que vous avez défini une valeur de dimen comme:
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
Vous pouvez l’utiliser n’importe où dans vos fichiers 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" />
Essayez d’exécuter votre application dans différents émulateurs qui ont des dimensions et des densités d’écran différentes, vous verrez que la taille du texte s’ajuste en fonction de l’appareil sur lequel l’application est exécutée.
Et c’est tout à vous maintenant 🥳
Merci de votre lecture et j’espère que votre présence ici a été pleine de ressources 😎
Vous pouvez également consulter mon autre histoire sur le Styling/Designing TextField dans Jectpack Compose UI – Android
Kamran Ramzan est un étudiant en génie logiciel travaillant comme développeur d’applications mobiles Full Stack. Il explore constamment de nouvelles technologies et partage ses connaissances avec vous les gars en espérant que cela vous aidera d’une manière ou d’une autre.
Gentiment frappez le clap encore et encore 😇 si vous aimez mes efforts 👏🏼
.