Melokalkan UI dengan Translations Editor

Translations Editor menyediakan tampilan terpadu yang dapat diedit untuk semua resource string default dan terjemahan.

Untuk pengenalan tentang penerjemahan aplikasi ke berbagai bahasa, baca Mendukung berbagai bahasa dan budaya.

Gambar 1. Translations Editor yang menampilkan teks aplikasi sebelum diterjemahkan

Resource string

Resource string untuk project ada di dalam file strings.xml. Project Anda memiliki file strings.xml default yang berisi resource string dalam bahasa default untuk aplikasi, yakni bahasa yang dianggap paling banyak digunakan pengguna aplikasi Anda. Anda juga dapat menerjemahkan file strings.xml berisi resource string ke bahasa lain yang ingin diakomodasi oleh aplikasi.

Setelah file strings.xml default selesai, Anda dapat menambahkan terjemahan sendiri, atau membayar layanan profesional untuk menerjemahkan. Apa pun itu, sebaiknya Anda memanfaatkan fitur Android Studio untuk membantu mengelola dan menguji teks yang dapat dilokalkan. Untuk informasi tentang layanan terjemahan profesional, lihat Memesan layanan terjemahan.

Membuka Translations Editor

Anda dapat mengakses Translations Editor dari tempat-tempat berikut di Android Studio.

Membuka dari tampilan Android

  1. Pada panel Project > Android di sebelah kiri, pilih ModuleName > res > values.
  2. Klik kanan file strings.xml, lalu pilih Open Translations Editor.

    Translations Editor akan menampilkan pasangan kunci dan nilai dari file strings.xml.

    Catatan: Jika telah menerjemahkan file strings.xml, project Anda memiliki beberapa folder values yang sesuai dengan akhiran yang menunjukkan bahasa, seperti values-es untuk bahasa Spanyol. File strings.xml default Anda selalu berada di folder values (tanpa akhiran).

Gambar 1 menunjukkan teks aplikasi default (pada kasus ini, bahasa Inggris) di Translations Editor untuk aplikasi sederhana sebelum tugas terjemahan dilakukan. Konten file strings.xml yang diterjemahkan akan muncul di sebelah kanan kolom Untranslatable dengan satu kolom per bahasa seperti ditunjukkan pada gambar 2.

Membuka dari dalam strings.xml

Anda dapat mengakses Translations Editor dari dalam setiap file strings.xml Anda.

  1. Pada panel Project > Android di sebelah kiri, pilih ModuleName > res > values.
  2. Klik dua kali strings.xml untuk membuka fitur edit.
  3. Di strings.xml, klik link Open editor di sudut kanan atas.

Catatan: Jika Anda mengklik link Hide notification, link Open editor akan hilang. Untuk mengembalikannya, tutup, lalu buka kembali project tersebut.

Membuka dari Design Editor

Anda dapat membuka Translations Editor dari Design Editor dalam Layout Editor untuk mengedit teks default dan terjemahan agar lebih sesuai dengan tata letak. Untuk informasi tentang cara mengalihkan bahasa di Design Editor, baca Menampilkan teks terjemahan di Design Editor.

  1. Pada panel Project > Android di sebelah kiri, pilih ModuleName > res > layout.
  2. Klik dua kali content_main.xml untuk membuka fitur edit.
  3. Klik tab Design di pojok kiri bawah untuk menampilkan Design Editor.
  4. Di Design Editor, pilih menu drop-down Language .
  5. Pilih Edit Translations .

Mengonfigurasi baris yang tidak dapat diterjemahkan

Di Translations Editor, Anda dapat memilih Untranslatable untuk menunjukkan bahwa Anda tidak ingin menerjemahkan teks dalam baris ini. Teks yang tidak ingin diterjemahkan dapat berupa teks khusus produk seperti nama dagang dan merek dagang, atau istilah teknis yang tidak memiliki terjemahan.

Jika Anda mencentang Untranslatable, baris yang sesuai di file strings.xml default akan menambahkan translatable="false". Dalam contoh berikut, EasyApp di baris teratas tidak diterjemahkan karena merupakan nama produk. 

<resources>
    <string name="app_name" translatable="false">EasyApp</string>
    <string name="action_settings">Settings</string>
    <string name="easy_app">I am a Simple App!</string>
    <string name="next_page">Next Page</string>
    <string name="second_page_message">I am the Second Page!</string>
    <string name="title_activity_second">SecondActivity</string>
</resources>

Menambahkan dan menghapus bahasa

Translations Editor mendukung BCP 47 serta menggabungkan kode lokalitas dan wilayah (negara) menjadi satu pilihan untuk pelokalan yang ditargetkan. Lokalitas menjelaskan lebih dari bahasa. Lokalitas mencakup penggunaan format yang bergantung negara untuk hal-hal seperti tanggal dan waktu, mata uang, serta desimal.

Untuk menambahkan bahasa, ikuti langkah-langkah berikut:

  1. Di Translations Editor, klik ikon globe .
  2. Dari menu drop-down, pilih bahasa yang ingin ditambahkan.

    Bahasa baru akan muncul di Translations Editor, dan folder values-* dengan file strings.xml akan ditambahkan ke project. Misalnya, values-es untuk bahasa Spanyol.

Untuk menghapus bahasa, lakukan langkah-langkah berikut:

Anda dapat menghapus bahasa di Translations Editor dengan menghapus setiap nilai di kolom (lihat Mengedit, menambahkan, atau menghapus teks), atau Anda dapat menghapus folder project untuk bahasa tersebut, dengan cara berikut:

  1. Pada panel Project > Android di sebelah kiri, pilih ModuleName > res.
  2. Klik kanan folder values-* untuk bahasa yang ingin dihapus. Misalnya, values-hi untuk bahasa Hindi.
  3. Dari menu drop-down, pilih Delete untuk menghapus folder dan file strings.xml-nya.

Mengedit, menambah, dan menghapus teks

Anda dapat mengedit setelan teks secara langsung di file strings.xml atau melalui Translations Editor. Bagian ini menjelaskan pendekatan Translations Editor. Di Translations Editor, Anda dapat mengedit, menambahkan, atau menghapus teks menggunakan tampilan daftar atau kolom Translation di bagian bawah Translations Editor.

Gambar 2. Tampilan daftar di atas dan kolom Translation di bawah

Tampilan daftar

Untuk mengedit atau menambahkan teks, ikuti langkah-langkah berikut:

  1. Klik dua kali sel yang ingin diedit atau ditambahkan teks.
  2. Salin-tempel di keyboard, atau jika memiliki keyboard yang mendukung tanda diakritik, ketik langsung ke tampilan daftar.
  3. Tab atau pindahkan kursor keluar dari kolom tersebut.

Untuk menghapus teks, lakukan langkah-langkah berikut:

  1. Klik dua kali sel yang ingin dihapus.
  2. Pada tampilan daftar, pilih teks lalu tekan Delete.
  3. Tab atau pindahkan kursor keluar dari kolom tersebut.

Kolom terjemahan

Untuk mengedit atau menambahkan teks, ikuti langkah-langkah berikut:

  1. Pada tampilan daftar, klik satu kali sel yang ingin diedit atau ditambahkan teks.
  2. Di kolom Translation, salin-tempel di keyboard, atau jika memiliki keyboard yang mendukung tanda diakritik, ketik langsung ke kolom Translation.
  3. Tab atau pindahkan kursor keluar dari kolom tersebut.

Untuk menghapus teks, lakukan langkah-langkah berikut:

  1. Klik satu kali sel yang ingin Anda hapus.
  2. Di kolom Translation, pilih teks lalu tekan Delete.

Menambah dan menghapus kunci

Di Translations Editor, kolom Key mencantumkan ID unik untuk setiap item data dalam file strings.xml. Anda dapat menambahkan atau menghapus kunci menggunakan Translations Editor. Saat menghapus kunci, Translations Editor akan menghapusnya beserta semua terjemahan yang terkait. Translations Editor menggunakan pemfaktoran ulang Safe Delete untuk menghapus kunci agar Anda tahu jika teks kunci digunakan di tempat lain sehingga dapat melakukan penyesuaian yang diperlukan sebelum menghapus kunci tersebut. Pemfaktoran ulang Safe Delete memastikan kode tetap terkompilasi setelah Anda menghapus kunci.

Untuk menambahkan kunci, ikuti langkah-langkah berikut:

  1. Di Translations Editor, klik Add Key .
  2. Pada dialog, masukkan nama kunci, nilai default, dan lokasi file strings.xml default.

    Gambar 3. Menambahkan kunci

Untuk menghapus kunci, lakukan langkah-langkah berikut:

  1. Di Translations Editor, pilih kunci yang ingin dihapus.
  2. Klik Remove Keys .

  3. Pada dialog Delete, tentukan apakah Anda ingin menghapus aman serta ingin menelusuri komentar dan string, setelah itu, klik OK.

    Gambar 4. Menghapus dialog

    Jika tidak ada referensi (penggunaan) untuk kunci yang dihapus, atau jika semua referensi dapat diciutkan dengan aman, kunci tersebut akan dihapus. Jika tidak, Translations Editor akan menampilkan dialog Usages Detected berisi informasi tentang masalah yang terdeteksi.

    Gambar 5. Menghapus dialog

  4. Pilih View Usages untuk meninjau penggunaan yang akan dihapus. Dialog Find Safe Delete Conflicts menunjukkan semua penggunaan yang tidak aman untuk dihapus sehingga Anda dapat mengedit kode yang sesuai.

    Gambar 6. Penggunaan tidak aman

  5. Klik kanan penggunaan untuk menampilkan menu konteks, lalu pilih Jump to Source agar Anda dapat membuat perubahan yang diperlukan.
  6. Di panel Find Safe Delete Conflict, pilih Rerun Safe Delete untuk memastikan tidak ada penggunaan lain yang perlu diperhatikan.
  7. Saat penggunaan telah dibersihkan, klik Do Refactor untuk menghapus kunci.

Memperbaiki error

Gambar 7 menunjukkan Translations Editor yang menampilkan konten file strings.xml dalam bahasa Inggris, Spanyol, dan Prancis. Teks merah menunjukkan baris yang memiliki error.

Gambar 7. Teks merah menunjukkan kondisi error yang harus Anda perbaiki

Untuk memperbaiki error, arahkan kursor ke teks merah untuk menampilkan penjelasan tentang masalah dan penyelesaiannya.

Jika Anda membuat perubahan di Translations Editor, file strings.xml yang mendasarinya akan diperbarui sesuai perubahan tersebut. Jika Anda membuat perubahan di file strings.xml, kolom yang sesuai di Translations Editor akan diubah sesuai perubahan tersebut.

Contoh koreksi Translations Editor:

  • Gambar 7 menunjukkan bahwa baris app_name mencentang Untranslatable, tetapi ada terjemahan bahasa Spanyol. Hapus terjemahan bahasa Spanyol untuk memperbaiki error.
  • Gambar 7 menunjukkan bahwa baris next_page tidak memiliki terjemahan bahasa Prancis. Gunakan keyboard untuk menyalin Page Suivante ke dalam sel untuk memperbaiki error. Salin-tempel di keyboard akan menyalin teks dengan tanda diakritik ke dalam sel.

Menampilkan teks yang diterjemahkan dalam Design Editor

Untuk melihat bagaimana teks terjemahan ditampilkan di tata letak aplikasi, alihkan teks antara versi default dan terjemahan di Design Editor, sebagai berikut:

  1. Pada panel Project > Android di sebelah kiri, pilih ModuleName > res > layout.
  2. Klik dua kali content_main.xml untuk membuka fitur edit.
  3. Klik tab Design di pojok kiri bawah untuk menampilkan Design Editor.
  4. Di Design Editor, pilih menu drop-down Language .
  5. Pilih Edit Translations .
  6. Pilih bahasa yang ingin Anda gunakan untuk melihat aplikasi.

    Gambar 8. Menu drop-down bahasa dengan bahasa Spanyol dipilih

Design Editor menampilkan tata letak aplikasi dalam bahasa yang dipilih, pada kasus ini adalah bahasa Spanyol.

Gambar 9. Design Editor yang menampilkan teks terjemahan dalam bahasa Spanyol

Menyetel Design Editor ke bahasa default

Untuk menyetel bahasa kembali ke default, pilih es > Language .

Gambar 10. Menyetel ke bahasa default

Mengelola dan menguji teks yang dapat dilokalkan

Platform Android dan Android Studio menyediakan beberapa fitur untuk membantu Anda mengelola dan menguji teks aplikasi yang dapat dilokalkan. Fitur ini memiliki opsi untuk membantu Anda menargetkan masalah dengan skrip kanan-ke-kiri (RTL), seperti bahasa Arab atau Ibrani. Pengujian teks yang dapat dilokalkan memungkinkan Anda membuat penyesuaian terhadap teks UI dan tata letaknya sebelum memasukkan pesan ke repositori sumber agar dikirim untuk diterjemahkan nanti.

Pemfaktoran ulang project untuk dukungan RTL

Android Studio memiliki perintah pemfaktoran ulang yang memungkinkan dukungan untuk teks dua arah dalam elemen TextView, ConstraintLayout, dan LinearLayout sehingga aplikasi dapat menampilkan dan memungkinkan pengguna mengedit teks baik dalam skrip kiri-ke-kanan (LTR) maupun kanan-ke-kiri (RTL). Perintah ini juga menyediakan pencerminan otomatis tata letak UI aplikasi dan semua widget tampilan. Untuk melihat perubahan arah teks dan pencerminan tata letak, Anda juga harus menyetel properti arah teks dan tata letak di Layout Editor.

Prosedur berikut ini menunjukkan cara melakukan pemfaktoran ulang pada project Anda untuk dukungan RTL:

  1. Pilih Refactor > Add RTL support where possible untuk menampilkan dialog yang ditunjukkan pada gambar 11.

    Gambar 11. Menambahkan dukungan RTL

    • Jika elemen <application> di file AndroidManifest.xml tidak memiliki atribut android:supportsRTL="true", maka centang kotak Update AndroidManifest.xml.
    • Jika targetSdkVersion aplikasi adalah 17 atau lebih tinggi, pilih Replace Left/Right Properties with Start/End Properties. Pada kasus ini, properti Anda harus menggunakan "start" dan "end", bukan "left" dan "right". Misalnya, android:paddingLeft menjadi android:paddingStart.
    • Jika targetSdkVersion aplikasi adalah 16 atau lebih rendah, pilih Generate -v17 Versions. Pada kasus ini, XML harus menggunakan kedua set properti. Misalnya, XML Anda harus menggunakan android:paddingLeft dan android:paddingStart.
  2. Untuk menampilkan jendela Find Refactoring Preview, klik Run.

    Gambar 12. Memeriksa pratinjau

  3. Klik Do Refactor.

Untuk informasi selengkapnya tentang pemfaktoran ulang project untuk dukungan RTL, lihat Dukungan RTL native di Android 4.2.

Properti arah teks dan tata letak

Jendela Properties di sebelah kanan menyediakan properti textDirection untuk digunakan dengan widget teks dan properti layoutDirection untuk digunakan dengan widget tata letak untuk mengubah arah komponen teks dan tata letak. Properti arah tercantum di jendela Properties di sebelah kanan, dan kompatibel dengan API Level 17 atau yang lebih tinggi.

Untuk melihat perubahan arah teks dan pencerminan tata letak, Anda juga harus melakukan pemfaktoran ulang project untuk dukungan RTL. Dalam bahasa Inggris, perubahan arah teks hanya memindahkan tanda baca dari sisi kanan ke sisi kiri teks; misalnya, "Hello World!" menjadi "!Hello World". Untuk melihat teks LTR beralih ke RTL, Anda harus menggunakan bahasa RTL di aplikasi. Jika ingin menggunakan bahasa Inggris dan melihat teks beralih ke RTL untuk pengujian, gunakan pseudolocale. Pseudolocale tidak bergantung pada perintah pemfaktoran ulang dan properti arah.

Untuk mengakses dan menggunakan properti arah, lakukan langkah-langkah berikut:

  1. Di Layout Editor, pilih widget teks.
  2. Buka jendela Properties, lalu cari properti RTL yang ingin Anda gunakan.

    Untuk menetapkan nilai properti, pilih salah satu hal berikut:

    • firstStrong: Default untuk tampilan root. Karakter arah kuat yang pertama menentukan arah paragraf. Jika tidak ada karakter arah yang kuat, arah paragraf adalah arah tata letak tampilan yang diselesaikan.
    • anyRtl: Arah paragraf adalah RTL jika terdapat karakter RTL kuat apa pun; jika tidak, paragraf tersebut adalah LTR jika berisi karakter LTR kuat apa pun. Jika tidak keduanya, arah paragraf adalah arah tata letak tampilan yang diselesaikan.
    • ltr: Arah paragraf adalah LTR.
    • rtl: Arah paragraf adalah RTL.
    • locale: Arah paragraf berasal dari lokalitas sistem.
    • inherit: Default. Menggunakan arah yang ditetapkan di induk.
  3. Untuk meninjau teks dan tata letak yang terbalik, jalankan aplikasi.

Pseudolocale

Pseudolocale adalah lokalitas tersimulasi yang dirancang untuk mengasumsikan karakteristik bahasa yang menyebabkan masalah UI, tata letak, RTL, dan masalah terjemahan lainnya saat aplikasi diterjemahkan. Pseudolocale menyediakan terjemahan instan dan otomatis yang dapat dibaca dalam bahasa Inggris untuk semua pesan yang dapat dilokalkan. Hal ini memungkinkan Anda menangkap pesan yang tidak dapat diterjemahkan dalam kode sumber.

Untuk informasi tentang cara menggunakan pseudolocale, lihat Menguji Aplikasi dengan Pseudolocale.