Suportar/Ajustar tamanho de texto em diferentes tamanhos de tela no Android

Se você está desenvolvendo aplicativos móveis especificamente no Android, então eu tenho certeza que você deve ter tido dificuldades em tornar o conteúdo de seus aplicativos dinâmico, especialmente o tamanho do texto. Eu venho trabalhando em aplicativos Android há muito tempo e não encontrei nenhuma documentação oficial sobre suporte a diferentes tamanhos de texto de acordo com a tela do dispositivo, há alguns recursos oficiais, embora descrevendo o uso do TextView com suporte a tamanho de texto como definido na unidade sp, por exemplo android:textSize=”12sp”.

Sem dúvida, todo desenvolvedor usou essa abordagem para atingir o tamanho de texto dinâmico que suporta o dispositivo no qual o aplicativo está rodando.

Hoje vou compartilhar minha experiência de como eu consegui tamanho de texto dinâmico em aplicações android, com esta abordagem você pode ajustar não só o tamanho do texto, mas também o tamanho de outras vistas.

Vamos mergulhar em nossa abordagem de Dynamic TextView size💪🏼

Se você não tiver dimen.xml no seu projeto já então crie um, seguindo os passos abaixo mencionados:

  • Pasta de valores com um clique direito sobre a pasta de valores
  • Select New
  • Select Values Resource File

>

  • Então crie um arquivo dimen.xml

>

  • Definir um recurso de dimensão em dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="textSizeTitle">@dimen/_22sdp</dimen>
</resources>

Após você adicionar um recurso de dimen haverá erro em @dimen/_22sdp não se preocupe com isso, vamos corrigi-lo nos próximos passos.

Criando arquivo meta.xml:

Este arquivo será usado como referência para as diferentes variantes ou qualificadores que o dispositivo andróide está possuindo e no qual a aplicação está rodando.

  • Criar novamente um novo arquivo de recursos de valores
  • Denominá-lo como meta, mas não pressione ok no diálogo ainda
  • Click on the density qualifier from the list on left side

    >

  • Agora selecione o botão que tem sinal maior que >>, então você verá algo como isto

  • Selecione Densidade Média e pressione ok

Android Studio suporta diferentes qualificadores, um deles densidade que acabamos de usar acima. Agora repita o passo para criar o arquivo meta.xml e adicione todos os seguintes qualificadores de densidade:

  • Alta Densidade
  • X-Alta Densidade
  • XX-Alta Densidade
  • XXX-Alta Densidade

Próximo crie uma outra meta.xml e desta vez use o qualificador de tamanho do lado esquerdo e selecione X-Large options.

Agora vamos criar outra meta.xml com qualificativo diferente que é Smallest Screen Width como mostrado abaixo

Após você clicará no botão Smallest Screen Width qualifier você verá a opção para definir a menor largura em dp como mostrado abaixo

Então clique no botão OK.

Criaremos mais meta.xml com os seguintes tamanhos de largura menores:

  • 300
  • 330
  • 360
  • 390
  • … crie ficheiros com a diferença de 30 até chegar a 780

A questão aqui é o que haveria nestes ficheiros, bem, vamos adicionar recurso de string em todos os meta ficheiros nos próximos passos.

No painel esquerdo do Android Studio você tem estes arquivos como mostrado abaixo:

Todos os arquivos estão mostrando seu qualificador no lado direito da meta.xml nome, abra cada arquivo e coloque o seguinte recurso string.

meta.xml (hdpi)

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

Abrir cada arquivo meta.xml e recurso acima mencionado, mas você tem que mudar o valor de valores-hdpi com valores-{aqui use o qualificador do respectivo arquivo}. Além disso você pode verificar estes arquivos em 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)

Its ainda não terminados, há mais ficheiros que precisamos que é sdp.xml, crie este ficheiro com todos os qualificadores que criámos anteriormente para meta.xml, uma vez que tenha terminado de criar todos estes ficheiros de sdp.xml com todos os qualificadores então poderá encontrar o conteúdo destes ficheiros no github. sdp

  • sdp.xml(hdpi)
  • sdp.xml(mdpi)
  • sdp.xml(xhdpi)
  • sdp.xml(xxhdpi)
  • 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 isso é tudo para a configuração agora você só tem que usar esses valores de dimensão que você já definiu no arquivo dimen.xml que nós discutimos no início deste blog.

Usagem

Dado que você definiu um valor dimen como:

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

Você pode usá-lo em qualquer lugar em seus layouts arquivos xml:

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

Tente rodar sua aplicação em diferentes emuladores que têm diferentes dimensões e densidade de tela, você verá que o tamanho do texto está se ajustando de acordo com o dispositivo no qual a aplicação está rodando.

E isso agora é todo seu 🥳

Pelidos de leitura e espero que sua presença aqui tenha sido engenhosa 😎

Você também pode conferir minha outra história sobre Styling/Designing TextField no Jectpack Compose UI – Android

Kamran Ramzan é um estudante de Engenharia de Software trabalhando como desenvolvedor de aplicativos Full Stack Mobile. Ele explora constantemente novas tecnologias e compartilha o conhecimento com vocês, esperando que isso ajude de alguma forma.

Por favor, aplauda novamente e novamente 😇 se você gostar dos meus esforços 👏🏼

Deixe um comentário