Tamaño del texto y diferentes tamaños de pantalla de Android

121

Lo sé, ya se discutió 1000 veces, pero no puedo ajustar el tamaño del texto para diferentes tamaños de pantalla. Intento usar 'sp' como unidades de tamaño en mi estilo personalizado:

<style name="CustumButtonStyle" parent="@android:style/Widget.Button">
    ...
    <item name="android:textSize">30sp</item>
    ...
</style>

En 2.7 QVGA se ve bien:

2.7QVGA 30sp

Pero en WSVGA de 7 pulgadas se ve así:

7 pulgadas WSVGA 30sp

Intenté usar tanto 'sp' como 'dp' con el mismo resultado.

¿Podría explicar cómo hacer que estos botones se vean iguales en cualquier pantalla?

El estilo de botón personalizado completo

<style name="CustumButtonStyle" parent="@android:style/Widget.Button">
    <item name="android:background">@drawable/custom_button</item>
    <item name="android:layout_width">fill_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:textColor">#ffffff</item>
    <item name="android:gravity">center</item>
    <item name="android:textSize">30sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:shadowColor">#000000</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">2</item>
</style>

Y en el tema de mi aplicación tengo

<item name="android:buttonStyle">@style/CustumButtonStyle</item>

Y ahí está mi diseño:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="fill_parent"
android:background="@drawable/grid"
android:gravity="center"
android:orientation="vertical" android:layout_height="fill_parent">

<Button
    android:id="@+id/buttonContinue"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_gravity="center"
    android:gravity="center"
    android:text="@string/continue_game" android:layout_marginTop="3dp" android:layout_marginBottom="3dp"/>



<Button
    android:id="@+id/buttonNewGame"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/buttonContinue"
    android:layout_alignRight="@+id/buttonContinue"
    android:layout_below="@+id/buttonContinue"
    android:layout_gravity="center"
    android:gravity="center"
    android:text="@string/new_game" android:layout_marginTop="3dp" android:layout_marginBottom="3dp"/>



<Button
    android:id="@+id/ButtonAbout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/buttonNewGame"
    android:layout_alignRight="@+id/buttonNewGame"
    android:layout_below="@+id/buttonNewGame"
    android:layout_gravity="center"
    android:gravity="center"
    android:text="@string/about" android:layout_marginTop="3dp" android:layout_marginBottom="3dp"/>

forzar
fuente
En sus pantallas se ven iguales. Asegúrese de que su escala de espectador sea del 100%
Dmitry Zaytsev
puede encontrar la respuesta desde aquí stackoverflow.com/questions/16706076/…
Bhavesh Jethani

Respuestas:

160

@forcelain Creo que debe consultar este PDF de Google IO para el diseño . En ese pdf, vaya a la página No: 77 en la que encontrará sugerencias para usar dimens.xml para diferentes dispositivos de Android. Por ejemplo, consulte la estructura a continuación:

res/values/dimens.xml

res/values-small/dimens.xml

res/values-normal/dimens.xml

res/values-large/dimens.xml

res/values-xlarge/dimens.xml

por ejemplo, ha utilizado a continuación dimens.xml en valores.

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">18sp</dimen>
</resources>

En la carpeta de otros valores, debe cambiar los valores para el tamaño de su texto.

Nota: Como lo indica @espinchi, los valores pequeño, normal, grande y xlarge han quedado obsoletos desde Android 3.2 a favor de lo siguiente:

Declaración de diseños de tableta para Android 3.2

Para la primera generación de tabletas con Android 3.0, la forma correcta de declarar diseños de tabletas era colocarlas en un directorio con el calificador de configuración xlarge (por ejemplo, res / layout-xlarge /). Para adaptarse a otros tipos de tabletas y tamaños de pantalla, en particular, tabletas de 7 ", Android 3.2 presenta una nueva forma de especificar recursos para tamaños de pantalla más discretos. La nueva técnica se basa en la cantidad de espacio que necesita su diseño (como 600 dp de ancho), en lugar de intentar que su diseño se ajuste a los grupos de tamaño generalizados (como grande o xlarge).

La razón por la que diseñar para tabletas de 7 "es complicado cuando se utilizan grupos de tamaño generalizados es que una tableta de 7" está técnicamente en el mismo grupo que un teléfono de 5 "(el grupo grande). Si bien estos dos dispositivos parecen tener un tamaño similar entre sí , la cantidad de espacio para la interfaz de usuario de una aplicación es significativamente diferente, al igual que el estilo de interacción del usuario. Por lo tanto, una pantalla de 7 "y 5" no siempre debe usar el mismo diseño. Para que pueda proporcionar diferentes diseños para estos Dos tipos de pantallas, Android ahora le permite especificar sus recursos de diseño en función del ancho y / o alto que está realmente disponible para el diseño de su aplicación, especificado en unidades dp.

Por ejemplo, una vez que haya diseñado el diseño que desea utilizar para los dispositivos tipo tableta, puede determinar que el diseño deja de funcionar bien cuando la pantalla tiene menos de 600 ppp de ancho. Este umbral se convierte así en el tamaño mínimo que necesita para el diseño de su tableta. Como tal, ahora puede especificar que estos recursos de diseño deben usarse solo cuando hay al menos 600 dp de ancho disponible para la interfaz de usuario de su aplicación.

Debe elegir un ancho y diseñarlo como su tamaño mínimo, o probar cuál es el ancho más pequeño que admite su diseño una vez que esté completo.

Nota: Recuerde que todas las cifras utilizadas con estas API de nuevo tamaño son valores de píxeles independientes de la densidad (dp) y las dimensiones de su diseño también deben definirse siempre utilizando unidades dp, porque lo que le importa es la cantidad de espacio de pantalla disponible después del sistema. tiene en cuenta la densidad de la pantalla (en lugar de utilizar la resolución de píxeles sin procesar). Para obtener más información sobre píxeles independientes de la densidad, lea Términos y conceptos, anteriormente en este documento. Usando nuevos calificadores de tamaño

Las diferentes configuraciones de recursos que puede especificar en función del espacio disponible para su diseño se resumen en la tabla 2. Estos nuevos calificadores le ofrecen más control sobre los tamaños de pantalla específicos que admite su aplicación, en comparación con los grupos de tamaños de pantalla tradicionales (pequeño, normal, grande y xlarge).

Nota: Los tamaños que especifica con estos calificadores no son los tamaños de pantalla reales. Más bien, los tamaños son para el ancho o alto en unidades de dp que están disponibles para la ventana de su actividad. El sistema Android puede usar parte de la pantalla para la interfaz de usuario del sistema (como la barra del sistema en la parte inferior de la pantalla o la barra de estado en la parte superior), por lo que es posible que parte de la pantalla no esté disponible para su diseño. Por lo tanto, los tamaños que declare deben ser específicamente sobre los tamaños que necesita su actividad; el sistema tiene en cuenta cualquier espacio utilizado por la interfaz de usuario del sistema al declarar cuánto espacio proporciona para su diseño. También tenga en cuenta que la barra de acción se considera parte del espacio de la ventana de su aplicación, aunque su diseño no lo declara, por lo que reduce el espacio disponible para su diseño y debe tenerlo en cuenta en su diseño.

Tabla 2. Nuevos calificadores de configuración para el tamaño de la pantalla (introducidos en Android 3.2). Configuración de pantalla Valores de calificador Descripción smallestWidth swdp

Ejemplos: sw600dp sw720dp

El tamaño fundamental de una pantalla, como lo indica la dimensión más corta del área de pantalla disponible. Específicamente, el pequeño ancho del dispositivo es el más corto de la altura y el ancho disponibles de la pantalla (también puede pensar en él como el "ancho más pequeño posible" para la pantalla). Puede usar este calificador para asegurarse de que, independientemente de la orientación actual de la pantalla, su aplicación tenga al menos dps de ancho disponible para su interfaz de usuario.

Por ejemplo, si su diseño requiere que la dimensión más pequeña del área de la pantalla sea de al menos 600 dp en todo momento, puede usar este calificador para crear los recursos de diseño, res / layout-sw600dp /. El sistema utilizará estos recursos solo cuando la dimensión más pequeña de la pantalla disponible sea de al menos 600 dp, independientemente de si el lado de 600 dp es la altura o el ancho percibidos por el usuario. El pequeño ancho es una característica de tamaño de pantalla fijo del dispositivo; El ancho más pequeño del dispositivo no cambia cuando cambia la orientación de la pantalla.

El ancho más pequeño de un dispositivo tiene en cuenta las decoraciones de la pantalla y la interfaz de usuario del sistema. Por ejemplo, si el dispositivo tiene algunos elementos de la interfaz de usuario persistentes en la pantalla que representan el espacio a lo largo del eje del ancho más pequeño, el sistema declara que el ancho más pequeño es más pequeño que el tamaño real de la pantalla, porque esos son píxeles de pantalla que no están disponibles para su interfaz de usuario.

Esta es una alternativa a los calificadores de tamaño de pantalla generalizados (pequeño, normal, grande, xlarge) que le permite definir un número discreto para el tamaño efectivo disponible para su interfaz de usuario. El uso de smallestWidth para determinar el tamaño general de la pantalla es útil porque el ancho suele ser el factor determinante en el diseño de un diseño. Una interfaz de usuario a menudo se desplazará verticalmente, pero tiene restricciones bastante estrictas sobre el espacio mínimo que necesita horizontalmente. El ancho disponible también es el factor clave para determinar si se debe usar un diseño de un panel para teléfonos o un diseño de múltiples paneles para tabletas. Por lo tanto, es probable que a usted le preocupe más cuál será el ancho más pequeño posible en cada dispositivo. Ancho de pantalla disponible wdp

Ejemplos: w720dp w1024dp

Especifica un ancho mínimo disponible en unidades de dp en el que se deben usar los recursos, definido por el valor. El valor correspondiente del sistema para el ancho cambia cuando la orientación de la pantalla cambia entre horizontal y vertical para reflejar el ancho real actual que está disponible para su interfaz de usuario.

Esto suele ser útil para determinar si se debe utilizar un diseño de varios paneles, porque incluso en un dispositivo de tableta, a menudo no querrá el mismo diseño de varios paneles para la orientación vertical que para el paisaje. Por lo tanto, puede usar esto para especificar el ancho mínimo requerido para el diseño, en lugar de usar los calificadores de tamaño de pantalla y orientación juntos. Altura de pantalla disponible hdp

Ejemplos: h720dp h1024dp etc.

Especifica una altura de pantalla mínima en unidades de dp a la que se deben usar los recursos, definida por el valor. El valor correspondiente del sistema para la altura cambia cuando la orientación de la pantalla cambia entre horizontal y vertical para reflejar la altura real actual que está disponible para su interfaz de usuario.

Usar esto para definir la altura requerida por su diseño es útil de la misma manera que wdp es para definir el ancho requerido, en lugar de usar tanto el tamaño de pantalla como los calificadores de orientación. Sin embargo, la mayoría de las aplicaciones no necesitarán este calificador, considerando que las IU a menudo se desplazan verticalmente y, por lo tanto, son más flexibles con la altura disponible, mientras que el ancho es más rígido.

Si bien el uso de estos calificadores puede parecer más complicado que el uso de grupos de tamaño de pantalla, en realidad debería ser más simple una vez que determine los requisitos para su interfaz de usuario. Cuando diseña su interfaz de usuario, lo principal que probablemente le importa es el tamaño real en el que su aplicación cambia entre una interfaz de usuario de estilo de teléfono y una interfaz de usuario de estilo tableta que utiliza múltiples paneles. El punto exacto de este cambio dependerá de su diseño particular; tal vez necesite un ancho de 720dp para el diseño de su tableta, tal vez 600dp sea suficiente, o 480dp, o algún número entre estos. Con estos calificadores en la tabla 2, usted tiene el control del tamaño exacto en el que cambia su diseño.

Para obtener más información sobre estos calificadores de configuración de tamaño, consulte el documento Proporcionar recursos. Ejemplos de configuración

Para ayudarlo a orientar algunos de sus diseños para diferentes tipos de dispositivos, aquí hay algunos números para anchos de pantalla típicos:

320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
480dp: a tweener tablet like the Streak (480x800 mdpi).
600dp: a 7 tablet (600x1024 mdpi).
720dp: a 10 tablet (720x1280 mdpi, 800x1280 mdpi, etc).

Usando los calificadores de tamaño de la tabla 2, su aplicación puede cambiar entre sus diferentes recursos de diseño para teléfonos y tabletas usando cualquier número que desee para el ancho y / o alto. Por ejemplo, si 600 dp es el ancho más pequeño disponible que admite el diseño de su tableta, puede proporcionar estos dos conjuntos de diseños:

res / layout / main_activity.xml # Para teléfonos res / layout-sw600dp / main_activity.xml # Para tabletas

En este caso, el ancho más pequeño del espacio de pantalla disponible debe ser 600dp para que se aplique el diseño de la tableta.

Para otros casos en los que desee personalizar aún más su interfaz de usuario para diferenciar entre tamaños, como tabletas de 7 "y 10", puede definir diseños adicionales de menor ancho:

res / layout / main_activity.xml # Para teléfonos (menos de 600dp de ancho disponible) res / layout-sw600dp / main_activity.xml # Para tabletas de 7 ”(600dp de ancho y más grandes) res / layout-sw720dp / main_activity.xml

Para tablets de 10 ”(720dp de ancho y más grandes)

Observe que los dos conjuntos anteriores de recursos de ejemplo utilizan el calificador de "ancho más pequeño", swdp, que especifica el más pequeño de los dos lados de la pantalla, independientemente de la orientación actual del dispositivo. Por lo tanto, usar swdp es una forma sencilla de especificar el tamaño de pantalla total disponible para su diseño ignorando la orientación de la pantalla.

Sin embargo, en algunos casos, lo que podría ser importante para su diseño es exactamente cuánto ancho o alto está disponible actualmente. Por ejemplo, si tiene un diseño de dos paneles con dos fragmentos uno al lado del otro, es posible que desee usarlo siempre que la pantalla proporcione al menos 600 dp de ancho, ya sea que el dispositivo esté en orientación horizontal o vertical. En este caso, sus recursos podrían verse así:

res / layout / main_activity.xml # Para teléfonos (menos de 600dp de ancho disponible) res / layout-w600dp / main_activity.xml # Multi-panel (cualquier pantalla con 600dp de ancho disponible o más)

Observe que el segundo conjunto está usando el calificador "ancho disponible", wdp. De esta manera, un dispositivo puede usar ambos diseños, dependiendo de la orientación de la pantalla (si el ancho disponible es de al menos 600 ppp en una orientación y menos de 600 ppp en la otra orientación).

Si la altura disponible le preocupa, puede hacer lo mismo con el calificador hdp. O incluso combine los calificadores wdp y hdp si necesita ser realmente específico.

Herry
fuente
7
Estos pequeños / normales / grandes / xlarge están en desuso en este momento (diciembre de 2014). La forma preferida ahora es usar "swxxxdp". Ver developer.android.com/guide/practices/…
espinchi
1
@espinchi gracias, deberías publicar esto también como respuesta. ¿También hay dp recomendados? por ejemplo, los estándares son: 100sw, 200sw, 400sw, 600sw.
Vince V.27 de
19

Creo que es demasiado tarde para responder a este hilo. Pero me gustaría compartir mi idea o forma de resolver el problema del tamaño del texto en los dispositivos de resolución de diferencia. Muchos sitios de desarrolladores de Android sugieren que tenemos que usar la unidad sp para el tamaño del texto que manejará el tamaño del texto para dispositivos de resolución diferente. Pero siempre soy incapaz de obtener el resultado deseado. Así que encontré una solución que estoy usando de mis últimos 4-5 proyectos y funciona bien. Según mi sugerencia, debe colocar el tamaño del texto para cada dispositivo de resolución, lo que es un trabajo un poco tedioso, pero cumplirá con sus requisitos. Cada desarrollador debe escuchar sobre la proporción de 4: 6: 8: 12 (h: xh: xxh: xxxh respectivamente) . Ahora, dentro de la carpeta res de su proyecto , debe crear 4 carpetas con el archivo dimens, por ejemplo

  1. res / valores-hdpi / dimens.xml
  2. res / valores-xhdpi / dimens.xml
  3. res / valores-xxhdpi / dimens.xml
  4. res / valores-xxxhdpi / dimens.xml

Ahora, dentro del archivo dimens.xml, debe colocar los tamaños de texto. Le estoy mostrando el código para values-hdpi , de manera similar, debe colocar el código para otros valores de resolución / archivo dimens.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="text_size">4px</dimen>
</resources>

Para otras resoluciones es como xhdpi : 6px, xxhdpi : 8px, xxxhdpi : 12px. Esto se calcula con la proporción (3: 4: 6: 8: 12) que he escrito arriba. Analicemos otro ejemplo de tamaño de texto con la proporción anterior. Si desea tomar un tamaño de texto de 12px en hdpi, entonces en otra resolución sería

  1. hdpi: 12 px
  2. xhdpi: 18 px
  3. xxhdpi: 24 px
  4. xxxhdpi: 36px

Esta es la solución simple para implementar el tamaño de texto requerido para todas las resoluciones. No estoy considerando dispositivos de resolución de valores-mdpi aquí. Si alguien quiere incluir el tamaño del texto para esta resolución, la ración es como 3: 4: 6: 8: 12 . En cualquier consulta por favor hágamelo saber. Espero que les ayude.

Rahul Sharma
fuente
4
¿No es una mala práctica usar px en lugar de sp en el tamaño del texto? ¿Hay alguna manera de lograr la siguiente proporción usando sp en lugar de px?
Rojo M
Verifiqué que esto funciona bien, pero todavía estoy confundido, ¿es una buena práctica usar valores en px en lugar de dp / sp? Nunca he visto en algún lugar de la documentación oficial usar valores en px.
shaby
1
use sp para el tamaño de fuente, esa es la ley. El enfoque que mostró Rahul es correcto, solo use sp en lugar de px.
Mihir Patel
sp debe usarse si planea vincular el tamaño de fuente de la aplicación con el tamaño de fuente del sistema. De lo contrario, esta solución no es mala.
Irfan Ul Haq
12

A veces, es mejor tener solo tres opciones

 style="@android:style/TextAppearance.Small"

Utilice pequeño y grande para diferenciar el tamaño de pantalla normal.

<TextView
            android:id="@+id/TextViewTopBarTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@android:style/TextAppearance.Small"/>

Por lo general, no es necesario especificar nada.

<TextView
            android:id="@+id/TextViewTopBarTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

Con esto, puede evitar probar y especificar dimensiones para diferentes tamaños de pantalla.

kalan nawarathne
fuente
10

Hice lo mismo por dimensión y pinté algo como (con dp pero solo para texto y en drawText ())

XML:

   <dimen name="text_size">30sp</dimen>

Código:

   Paint p =new Paint();
       p.setTextSize(getResources().getDimension(R.dimen.text_Size));
Estilo de vida
fuente
8
NO debe usar dppara el tamaño del texto ... use spen su lugar.
Yousha Aleayoub
por favor use sp para el tamaño del texto
Thinsky
Puede usar dp en situaciones específicas en las que no desea que se cambie de tamaño según las preferencias del usuario.
7

Todos pueden usar la biblioteca de Android mencionada a continuación, que es la forma más fácil de hacer que los tamaños de texto sean compatibles con casi todas las pantallas de los dispositivos. En realidad, se desarrolló sobre la base de los nuevos calificadores de configuración de Android para el tamaño de la pantalla (introducido en Android 3.2) SmallestWidth swdp.

https://github.com/intuit/sdp

Muhammad Maqsood
fuente
2
sdp es para el tamaño de la pantalla; use ssp para el tamaño del texto
ecle
Esto funciona para mí, pero sospecho que hay demasiados archivos para agregar, esto aumentará el tamaño de la aplicación, @Muhammad, puede cambiar el tamaño y agregar solo clases lo que sea necesario
Kirtikumar A.
1

Si tiene API 26, entonces podría considerar usar autoSizeTextType :

<Button
  app:autoSizeTextType="uniform" />

La configuración predeterminada permite que el tamaño automático de TextView escale uniformemente en los ejes horizontal y vertical.

https://developer.android.com/guide/topics/ui/look-and-feel/autosizing-textview

Bonne Bogaert
fuente
El problema con esto es que no cambia uniformemente el tamaño del texto para múltiples vistas de texto con cadenas de diferentes longitudes
Sourabh S Nath
0

Creo que puede archivarlo agregando varios recursos de diseño para cada tamaño de pantalla, ejemplo:

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size with small text
res/layout-large/my_layout.xml       // layout for large screen size with larger text
res/layout-xlarge/my_layout.xml      // layout for extra large screen size with even larger text
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

Referencia: 1. http://developer.android.com/guide/practices/screens_support.html

NguyenDat
fuente
2
Use res / values-small puede ser mejor.
einverne
1
una de las peores implementaciones. ¿Tenemos que mantener 5 diseños solo para admitir diferentes tamaños?
SolidSnake
Crear diferentes diseños solo para reducir el tamaño del texto en pantallas variantes es realmente una mala idea. No recomiendo eso
Saman Salehi
0

Para unificar todas las pantallas para mostrar los mismos tamaños de elementos, incluido el tamaño de fuente: - Diseñe la interfaz de usuario en un tamaño de pantalla con los tamaños que considere apropiados durante el diseño, es decir, el tamaño de fuente de TextView es de 14 dp en el tamaño de pantalla predeterminado con 4'6 pulgadas.

  • Calcule programáticamente el tamaño de la pantalla física de los otros teléfonos, es decir, 5'2 pulgadas de otros teléfonos / pantallas.

  • Utilice una fórmula para calcular la diferencia porcentual entre las 2 pantallas. es decir, cuál es el% de diferencia entre 4'6 y 5'2.

  • Calcule la diferencia de píxeles entre los 2 TextViews según la fórmula anterior.

  • Obtenga el tamaño real (en píxeles) del tamaño de fuente de TextView y aplique la diferencia de píxeles (que calculó anteriormente) al tamaño de fuente predeterminado.

De esta manera, puede aplicar una relación de aspecto dinámica a todos los tamaños de pantalla y el resultado es excelente. Tendrá un diseño y tamaños idénticos en cada pantalla.

Puede ser un poco complicado al principio, pero logra el objetivo por completo una vez que descubres la fórmula. Con este método, no es necesario realizar varios diseños solo para adaptarse a diferentes tamaños de pantalla.

SolidSnake
fuente
0

También puede utilizar weightSumylayout_weight la propiedad para ajustar su pantalla diferente.

Para eso, tienes que hacer android:layout_width= 0dp, y android:layout_width= (lo que quieras);

Harshit
fuente
-2

No codifique los tamaños.

Para flexibilidad y nuevas resoluciones de pantalla, la mejor práctica es colocar TextView ficticio en el diseño para obtener el tamaño de texto:

<TextView
        android:id="@+id/dummyTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone"
        android:text="TextView" />

Y en tu código por ejemplo:

TextView testTextView = (TextView) rootView.findViewById(R.id.dummyTextView);
float textSize = testTextView.getTextSize();

Mantener textSizecomo referencia a la que puede agregar un tamaño constante o porcentual (calculando).

Athlan
fuente