Cómo localizar la IU con Translations Editor (Views)

Conceptos y la implementación de Jetpack Compose

La herramienta Translations Editor ofrece una vista unificada y editable de todos los recursos de cadenas predeterminados y traducidos.

Para obtener una introducción a la traducción de tu app en diferentes idiomas, lee Cómo brindar compatibilidad con diferentes idiomas y culturas.

Figura 1: Texto de la app que se muestra antes de la traducción en Translations Editor

Cómo abrir Translations Editor desde Design Editor

Puedes abrir Translations Editor desde Design Editor del Editor de diseño para editar el texto predeterminado y el traducido para que se ajuste mejor a tu diseño. Si quieres obtener información para cambiar de idioma en Design Editor, consulta Cómo mostrar el texto traducido en Design Editor.

  1. En el panel Project > Android del lado izquierdo, selecciona ModuleName > res > layout.
  2. Haz doble clic en content_main.xml para abrirlo y editarlo.
  3. Haz clic en la pestaña Design, en la esquina inferior izquierda para mostrar Design Editor.
  4. En Design Editor, selecciona la lista desplegable Language .
  5. Selecciona Edit Translations .

Cómo mostrar texto traducido en Design Editor

Para ver cómo se muestra el texto traducido en el diseño de tu app, alterna el texto entre la versión predeterminada y la traducida en Design Editor de la siguiente manera:

  1. En el panel Project > Android del lado izquierdo, selecciona ModuleName > res > layout.
  2. Haz doble clic en content_main.xml para abrirlo y editarlo.
  3. Haz clic en la pestaña Design, en la esquina inferior izquierda para mostrar Design Editor.
  4. En Design Editor, selecciona la lista desplegable Language .
  5. Selecciona Edit Translations .
  6. Selecciona el idioma que quieres usar para ver tu app.

    Figura 2: La lista desplegable de idiomas con la opción de español seleccionada

En Design Editor, se muestra el diseño de tu app en el idioma seleccionado, que en este caso es español.

Figura 3: Texto traducido al español en Design Editor

Cómo configurar Design Editor en el idioma predeterminado

Para volver a la configuración de idioma predeterminado, selecciona es > Language .

Cómo administrar y probar el texto localizable

Android Studio y la plataforma de Android ofrecen varias funciones para ayudarte a administrar y probar el texto localizable de tu app. Estas funciones tienen opciones que te ayudan a resolver problemas con secuencias de comandos de derecha a izquierda (RTL), como en árabe o hebreo. Probar el texto localizable te permite realizar los ajustes necesarios en el texto de la IU y su diseño antes de que confirmes tus mensajes en el repositorio fuente que luego se enviarán para su traducción.

Cómo refactorizar tu proyecto para que admita RTL

Android Studio tiene un comando de refactorización que habilita la compatibilidad con el texto bidireccional en elementos TextView, ConstraintLayout y LinearLayout de manera que tus apps puedan mostrar el texto en secuencias de comandos de izquierda a derecha (LTR) y de derecha a izquierda (RTL), y permitir que los usuarios lo editen. Este comando también ofrece la duplicación automática de diseños de IU de apps y todos los widgets de vista. Para ver el cambio de dirección de texto y la duplicación de diseño, también deberás configurar las propiedades de dirección del diseño y del texto en el editor de diseño.

En el siguiente procedimiento, se muestra cómo refactorizar tu proyecto para que admita RTL:

  1. Selecciona Refactor > Add RTL support where possible para abrir el diálogo que se muestra en la figura 4.

    Figura 4: Agrega compatibilidad con RTL.

    • Si el elemento <application> de tu archivo AndroidManifest.xml no contiene el atributo android:supportsRTL="true", deberás marcar la casilla de verificación Update AndroidManifest.xml.
    • Si la targetSdkVersion de tu app es 17 o superior, selecciona Replace Left/Right Properties with Start/End Properties. En este caso, tus propiedades deberían incluir "start" y "end" en lugar de "left" y "right". Por ejemplo, android:paddingLeft se convierte en android:paddingStart.
    • Si la targetSdkVersion de tu app es 16 o inferior, selecciona Generate -v17 Versions. En este caso, tu XML debe usar ambos conjuntos de propiedades. Por ejemplo, tu archivo XML debería usar android:paddingLeft y android:paddingStart.
  2. Para mostrar la ventana Find Refactoring Preview, haz clic en Run.

    Figura 5: Cómo revisar la vista previa

  3. Haz clic en Do Refactor.

Puedes obtener más información para refactorizar tu proyecto a fin de que admita RTL en Compatibilidad con RTL nativa en Android 4.2.

Propiedades de dirección del diseño y del texto

En la ventana Properties de la derecha, se encuentran las propiedades textDirection, que puedes usar con los widgets de texto, y layoutDirection, que puedes usar con los widgets de diseño, para cambiar la dirección del texto y los componentes de diseño. Las propiedades de dirección se enumeran en la ventana Properties de la derecha y funcionan con el nivel de API 17 o superior.

Si quieres ver el cambio de dirección de texto y la duplicación del diseño, también deberás refactorizar el proyecto para que admita RTL. En inglés, el cambio de dirección de texto solo mueve los signos de puntuación del lado derecho al lado izquierdo del texto; por ejemplo, "Hello World!" se convierte en "!Hello World". Para ver el cambio de texto LTR a RTL, deberás usar un idioma RTL en tu app. Si deseas usar inglés y ver el cambio de texto a RTL a modo de prueba, usa las pseudoconfiguraciones regionales, ya que son independientes del comando de refactorización y de las propiedades de dirección.

Para acceder a las propiedades de dirección y usarlas, haz lo siguiente:

  1. En el editor de diseño, selecciona un widget de texto.

  2. Abre la ventana Properties y busca la propiedad RTL que quieras usar. Para configurar el valor de la propiedad, selecciona una de las siguientes opciones:

    • firstStrong: Corresponde al valor predeterminado de la vista raíz. El primer carácter direccional fuerte determina la dirección del párrafo. Si no hay ningún carácter direccional fuerte, la dirección del párrafo es la dirección de diseño determinada de la vista.
    • anyRtl: Si contiene un carácter RTL fuerte, la dirección del párrafo es RTL; por el contrario, si contiene un carácter LTR fuerte, es LTR. Si no hay ninguno, la dirección del párrafo será la dirección del diseño determinada de la vista.
    • ltr: La dirección del párrafo es LTR.
    • rtl: La dirección del párrafo es RTL.
    • locale: La dirección del párrafo proviene de la configuración regional del sistema.
    • inherit: Es el valor predeterminado. Usa la dirección configurada en el elemento superior.

    Nota: Los caracteres direccionales fuertes tienen su propia dirección predefinida, como la mayoría de los caracteres alfabéticos y silábicos, los dígitos no europeos y no arábigos, los ideogramas Han y los caracteres de puntuación que son específicos de esas escrituras.

  3. Para revisar el texto y el diseño revertidos, ejecuta la app.