Supporto/regolazione della dimensione del testo su diverse dimensioni dello schermo in Android

Se stai sviluppando applicazioni mobili in particolare in Android allora sono abbastanza sicuro che devi aver avuto difficoltà a rendere dinamico il contenuto delle tue applicazioni, specialmente la dimensione del testo. Ho lavorato su applicazioni Android per un tempo piuttosto lungo e non ho trovato alcuna documentazione ufficiale sul supporto di diverse dimensioni del testo in base allo schermo del dispositivo, ci sono alcune risorse ufficiali che descrivono l’uso di TextView con il supporto delle dimensioni del testo come definito nell’unità sp ad esempio android:textSize=”12sp”.

Senza dubbio che ogni sviluppatore ha usato questo approccio per ottenere la dimensione del testo dinamico che supporta il dispositivo su cui l’applicazione è in esecuzione.

Oggi condividerò la mia esperienza di come ho raggiunto la dimensione dinamica del testo nelle applicazioni Android, con questo approccio è possibile regolare non solo la dimensione del testo anche la dimensione delle altre viste.

Tuffiamoci nel nostro approccio della dimensione dinamica delle TextView💪🏼

Se non avete già il file dimen.xml nel tuo progetto, allora creane uno seguendo i seguenti passi:

  • Fai clic destro sulla tua cartella values
  • Seleziona Nuovo
  • Seleziona Values Resource File

  • Quindi crea un file dimen.xml

  • Definire una risorsa di dimensione in dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
</resources>

Una volta aggiunta la risorsa dimen ci sarà un errore su @dimen/_22sdp non preoccuparti lo risolveremo nei prossimi passi.

Creazione del file meta.xml:

Questo file sarà utilizzato come riferimento per le diverse varianti o qualificatori che il dispositivo Android possiede su cui l’applicazione è in esecuzione.

  • Crea di nuovo un nuovo Values Resource File
  • Nominalo come meta, ma non premere ancora ok nella finestra di dialogo
  • Clicca sul qualificatore di densità dalla lista sul lato sinistro

  • Ora seleziona il pulsante che ha il segno maggiore di >>, poi vedrete qualcosa come questo

  • Selezionate la densità media e premete ok

Android Studio supporta diversi qualificatori uno dei quali densità che abbiamo appena usato sopra. Ora ripetete il passo per creare il file meta.xml e aggiungete tutti i seguenti qualificatori di densità:

  • High Density
  • X-High Density
  • XX-High Density
  • XXX-High Density

In seguito create un altro file meta.xml e questa volta usa il size qualifier dal lato sinistro e seleziona le opzioni X-Large.

Ora creeremo un altro file meta.xml con un diverso qualificatore che è Smallest Screen Width come mostrato di seguito

Una volta cliccato sul Smallest Screen Width vedrai l’opzione per definire la larghezza più piccola in dp come mostrato qui sotto

Poi clicca sul pulsante OK.

Creeremo altri file meta.xml con le seguenti dimensioni di larghezza minima:

  • 300
  • 330
  • 360
  • 390
  • … creare file con la differenza di 30 fino a raggiungere 780

La domanda qui è cosa ci sarebbe in questi file, beh aggiungeremo la risorsa stringa in tutti i meta file nei prossimi passi.

Nel pannello di sinistra di Android Studio hai questi file come mostrato qui sotto:

Ogni file mostra il suo qualificatore sul lato destro del nome meta.xml, apri ogni file e inserisci la seguente stringa resource.

meta.xml (hdpi)

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="dimension">values-hdpi</string>
</resources>

Apri ogni file meta.xml e la risorsa sopra menzionata ma devi cambiare il valore-hdpi con values-{qui usa il qualificatore del rispettivo file}. Inoltre puoi controllare questi file su 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)

Non è ancora finita, ci sono altri file di cui abbiamo bisogno che è sdp.xml, creare questo file con tutti i qualificatori che abbiamo creato prima per meta.xml,una volta che hai finito di creare tutti questi file di sdp.xml con tutti i qualificatori allora puoi trovare il contenuto di questi file su 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)

E questo è tutto per la configurazione ora devi solo usare questi valori di dimensione che hai già definito nel file dimen.xml che abbiamo discusso all’inizio di questo blog.

Usage

Dato che hai definito un valore dimen come:

<dimen name="textSizeTitle">@dimen/_22sdp</dimen>

Puoi usarlo ovunque nei tuoi file xml di layout:

<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" />

Prova a eseguire la tua applicazione in diversi emulatori che hanno diverse dimensioni e densità dello schermo, vedrai che la dimensione del testo si sta regolando in base al dispositivo su cui l’applicazione viene eseguita.

E questo è tutto tuo ora 🥳

Grazie per aver letto e spero che la tua presenza qui sia stata utile 😎

Puoi anche controllare la mia altra storia su Styling/Designing TextField in Jectpack Compose UI – Android

Kamran Ramzan è uno studente di Ingegneria del Software che lavora come sviluppatore di applicazioni mobili Full Stack. Esplora costantemente nuove tecnologie e condivide la conoscenza con voi ragazzi sperando che possa essere utile in qualche modo.

Si prega di battere il clap ancora e ancora 😇 se vi piacciono i miei sforzi 👏🏼

Lascia un commento