Aplikasi Multibahasa Android: Hello, L10N

Versi awal dari aplikasi Hello, L10N hanya kan menggunakan direktori sumber daya default (res/drawable,res/layout, dan res/value). Sumber daya tersebut belum di lokalisasikan, gambar, layout dan string yang sering digunakan di aplikasi masih menggunakan bahasa internasional (Inggris). Ketika user menjalankan aplikasi pada lokalisasi default, atau lokalisasi yang tidak di dukung oleh aplikasi, aplikasi akan mengambil sumber daya dari direktori default ini. Aplikasi ini terdiri dari UI sederhana yang menampilkan dua obyek TextView dan sebuah gambar Button dengan gambar background bendera sebuah negara. Ketika di klik, button menampilkan sebuah obyek AlertDialog yang menunjukkan teks tambahan.

Membuat Project dan Layout
Untuk aplikasi ini, bahasa default adalah British English dan lokasi f=default adalah United Kingdom.

1. Mulailah membuat project baru dan activity dengan nama "HelloL10N." Jika anda menggunakan Eclipse, isikanlah data berikut ke New Android Project Wizard:
   • Project name: HelloL10N
   • Application name: Hello, L10N
   • Package name: com.pupil.hellol10n (atau namespace anda sendiri)
   • Create Activity: HelloL10N
   • Min SDK version: 3
   Basic dari project terdiri dari sebuah direktori res dengan subdirektori untuk tiga tipe sumber daya paling umum: grafik (res/drawable/), layout (res/layout/), dan string (res/values/). Nantinya, sebagian besar pekerjaan yang kita lakukan di tutorial ini adalah menambah subirektori pada direktori res/.
   
2. Buka file res/layout/main.xml dan gantikan isinya dengan kode berikut:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       >
       <TextView 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:gravity="center_horizontal"
           android:text="@string/text_a"
           />
       <TextView 
           android:layout_width="fill_parent"
           android:layout_height="wrap_content"
           android:gravity="center_horizontal"
           android:text="@string/text_b"
           />
       <Button 
           android:id="@+id/flag_button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           />
   </LinearLayout>

   LinearLayout memiliki dua obyek TextView yang akan menampilkan teks yang sudah dilokalisasikan dan sebuah Button yang akan menampilkan gambar bendera.

Membuar Sumber Daya Default
Layout yang dibuat mereferensi ke sumber daya yang harus didefinisikan.

1. Membuat default teks string. Untuk membuatnya, buka file res/values/strings.xml dan gantikan dengan kode berikut.

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
       <string name="app_name">Hello, L10N</string>
       <string name="dialog_title">No localisation</string>
       <string name="dialog_text">This dialog box"'"s strings are not localised. 
                                  For every locale, the text here will come
                                  from values/strings.xml.</string>
       <string name="text_a">Shall i compare thee to a summer"'"s day?</string>
       <string name="text_b">Thou art more lovely and more temperate</string>
   </resources>

   kode ini teks baebahasa inggris british untuk setiap string yang digunakan aplikasi. Ketika kita melakukan lokalisasi terhadap aplikasi ini, kita akan menyediakan alternatif teks dalam bahasa Jerman, Perancis, dan jepang untuk beberapa string.
2. Tambahkan gambar bendera default ke folder res/drawable dengan menyimpan bendera.png pada folder res/drawable, simpan dengan nama bendera.png. Jika tidak dilokalisasikan, akan memperlihatkan bendera British.
3. Buka HelloL10NActivity.java (pada direktori src) dan tambahkan kode berikut dalam metode onCreate() (setelah setContentView).

   //menugaskan bendera.png ke Button, loading gambar bendera yang sesuai untuk locale saat ini
           Button tombol;
           (tombol = (Button)findViewById(R.id.flag_button)).setBackgroundDrawable(this.getResources().getDrawable(R.drawable.bendera));
           //membuat dialog box yang akan ditampilkan ketika tombol di klik
           AlertDialog.Builder pembangun = new AlertDialog.Builder(this);
           pembangun.setMessage(R.string.dialog_text)
            .setCancelable(false)
            .setTitle(R.string.dialog_title)
            .setPositiveButton("Done", new DialogInterface.OnClickListener() {
       
       public void onClick(DialogInterface dialog, int id) {
        // TODO Auto-generated method stub
        dialog.dismiss();
       }
      });
          final AlertDialog peringatan = pembangun.create();
          
          // mengeset click listener pada flag agar menampilkan dialog box
          tombol.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
      // TODO Auto-generated method stub
      peringatan.show();
     }
    });

Tip:Pada Eclipse, gunakan Ctrl-Shift-O(Cmd-Shift-O, pada Mac) untuk menambahkan import package yang belum ada ke dalam project, kemudian save file HelloL10NActivity.java.
Kode yang kita tulis, melakukan hal-hal sebagai berikut:

• menugaskan icon bendera yang sesuai ke button. untuk saat ini, tidak ada sumber daya selain dari default, jadi kode ini akan selalu menugaskan isi dari res/drawable/flag.png (bendera British) sebagai icon, apapun lokalisasinya. Ketika kita sudah menambahkan bendera untuk setiap lokalisasi, kode ini akan menugaskan bendera yang berbeda.
• Menciptakan sebuah abyek AlertDialog dan men-set click listener, jadi ketika user mengklik button, AlertDialog akan tampil. Kita tidak akan melokalisasikan teks dialog; AlertDialog akan selalu menampilkan dialog_text yang berada di res/values/strings.xml.

Struktur dari project sekarang terlihat seperti berikut ini

Menjalankan Aplikasi
Simpan project dan jalankan aplikasi untuk melihat bagaimana hasilnya. Tidak masalah apapun lokalisasi pada perangkat atau emulator anda, aplikasi akan memiliki tampilan yang sama. Berikut ini adalah ketika saya jalankan di Samsung Galaxy Fit.

Merencanakan Lokalisasi
Langkah pertama dalam melokalisasi sebuah aplikasi adalah merencanakan bagaimana aplikasi akan memberikan tampilan berbeda dengan pengaturan bahasa yang berbeda. Dalam aplikasi ini, lokasi default adalah United Kingdom. Kita akan memberikan informasi dengan lokasi spesific untuk German, Perancis, Kanada, Jepang dan USA. Tabel berikut ini menunjukan rencana tampilan aplikasi dalam bahasa yang berbeda.

Region/ Bahasa	United Kingdom	Jerman	Perancis	Kanada	Jepang	USA	Lokasi lain
English	teks British English; bendera Inggris (default)	-	-	teks British English; bendera Kanada	-	teks British English; bendera USA	teks British English; bendera Inggris (default)
German	-	teks German untuk app_name, text_a dan text_b; bendera Jerman	-	-	-	-	teks British English; bendera Inggris (default)
French	-	-	teks French untuk app_name, text_a dan text_b; bendera Perancis	teks French untuk app_name, text_a dan text_b; bendera Kanada	-	-	teks British English; bendera Inggris (default)
Japanese	-	-	-	-	teks Japanese untuk app_name, text_a dan text_b; bendera Jepang	-	teks British English; bendera Inggris (default)
Bahasa Lain	-	-	-	-	-	-	teks British English; bendera Inggris (default)

Harus diperhatikan bahwa menambah bahasa lain masih mungkin; misalnya aplikasi bisa mendukung Canadian English atau teks U.S. English. Tetapi hanya sedikit teks yang terpengaruh, menambah versi lain English tidak akan menambah daya guna aplikasi.

Seperti yang terlihat pada table di atas, kita berencana untuk menambah icon bendera selain yang sudah kita gunakan di folder res/drawable. Kita juga berencana menambah tiga set string teks selain teks yang ada di res/values/strings.xml.
Tabel berikut menunjukan dimana kita perlu menyimpan string teks dan icon bendera, dan menentukan yang mana yang akan dipakai untuk setiap lokalisasi.

Kode Locale	Bahasa / Negara	Lokasi strings.xml	Lokasi bendera.png
Default	English / United Kingdom	res/values/	res/drawable/
de-rDE	German / Jerman	res/values-de/	res/drawable-de-rDE/
fr-rFR	French / Perancis	res/values-fr/	res/drawable-fr-rFR/
fr-rCA	French / Kanada	res/values-fr/	res/drawable-fr-rFR/
en-rCA	English / Kanada	(res/values/)	res/drawable-en-rCA/
ja-rJP	Japanese / Jepang	res/values-ja/	res/drawable-ja-rJP/
en-rUS	English / USA	(res/values/)	res/drawable-en-rUS/

Tip: Sebuah folder qualifier tidak bisa menspesifikasikan sebuah tempat tanpa bahasa. Misalnya, menggunakan sebuah folder dengan nama res/drawable-rCA, akan mencegah aplikasi melakukan kompilasi.

Pada saat runtime, aplikasi akan memilih sumber daya yang akan dipakai berdasarkan lokalisasi pada perangkat user. Jika tidak ada sumberdaya lokalisasi khusus yang ditemukan, aplikasi akan kembali ke default.
Sebagai contoh, anggap bahwa bahasa perangkat diatur ke bahasa German dan lokalisasinya ke Switzerland. Karena aplikasi ini tidak memiliki sebuah direktori res/drawable-de-rCH/ yang berisi file bendera.png, sistem akan kembali ke default, yang mana bendera UK yang terletak di res/drawable/bendera.png. Bahasa yang digunakan akan menjadi German. Menunjukan bendera UK kepada orang yang berbicara german di negara Switzerland memang tidak ideal, tapi untuk sementara kita biarkan dulu. Ada beberapa cara untuk menambah fitur aplikasi jika kita inginkan:

• Menggunakan icon default
• Membuat sebuah folder res/drawable-de/ yang berisi icon yang akan digunakan aplikasi ketika bahasa diatur ke German tapi lokasi bukan Jerman.

Melakukan Lokalisasi Aplikasi
Untuk melakukan lokalisasi, aplikasi kita membutuhkan tiga buah tambahan file strings.xml, masing-masing satu untuk German, French dan Japanese. Berikut ini langkah-langkah yang saya lakukan di Eclipse Indigo dan ADT versi 16.0.1.

1. Pilih File > New > Other > Android XML File untuk membuka wizard New Android XML File. Atau bisa juga klik icon seperti pada berikut.
   
2. Pilih Values pada Resource Type, HelloL10N pada Project, dan strings pada File, kemudian klik Next >
   
3. Pilih Language kemudian klik tombol ->
   
4. Ketik de pada textfield dan klik finish.
   
   Akan muncul file baru, res/values-de/strings.xml pada project explorer.
5. Ulangi langkah-langkah di atas dua kali lagi untuk kode bahasa fr dan ja. Sekarang di project explorer akan terlihat tambahan file baru:

   res/values-de/strings.xml
   res/values-fr/strings.xml
   res/values-ja/strings.xml

6. Tambahkan teks yang sudah di lokalisasi ke file baru. Untuk itu, buka file res/values-<qualifier>/strings.xml dan gantikan dengan kode pada tabel berikut ini.

   File	Gantikan dengan kode berikut
   res/values-de/strings.xml	<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Hallo, Lokalisierung</string> <string name="text_a">Soll ich dich einem Sommertag vergleichen,</string> <string name="text_b">Der du viel lieblicher und sanfter bist?</string> </resources>
   res/values-fr/strings.xml	<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">Bonjour, Localisation</string> <string name="text_a">Irai-je te comparer au jour d\'été?</string> <string name="text_b">Tu es plus tendre et bien plus tempéré.</string> </resources>
   res/values-fr/strings.xml	<?xml version="1.0" encoding="utf-8"?> <resources> <string name="text_a">あなたをなにかにたとえるとしたら夏の一日でしょうか？</string> <string name="text_b">だがあなたはもっと美しく、もっとおだやかです。</string> </resources>

   Tip: Pada file res/values-<qualifier>/strings.xml, kita hanya perlu memasukan string yang berbeda dari string default. Misalnya, ketika aplikasi berjalan pada perangkat dengan pengaturan Japanese, kita rencanakan text_a dan text_b dalam bahasa Jepang sementara semua teks dalam English, jadi res/values-ja/strings hanya perlu menambahkan text-a dan text_b.

Lokalisasi Image
Seperti yang terlihat pada tabel kedua, aplikasi masih membutuhkan enam lagi folder drawble, masing-masing berisi icon bendera.png. Tambahkan icon dan folder yang dibutuhkan ke project kita:

1. Save As icon bendera German di folder res/drawable-de-rDE/ dengan nama bendera.png.
2. Save As icon bendera French di folder res/drawable-de-rFR/ dengan nama bendera.png.
3. Save As icon bendera Canadian di folder res/drawable-de-rCA/ dengan nama bendera.png.
4. Save As lagi icon bendera Canadian, kali ini di folder res/drawable-en-rCA/ dengan nama bendera.png. Hal ini dilakukan karena sebuah folder qualifier tidak bisa mengenali lokasi tanpa bahasa. Kita tidak bisa menggunakan folder drawable-rCA/, tetapi kita harus menggunakan dua folder yang terpisah, masing-masing satu untuk bahasa Canadian yang ada di aplikasi.
5. Save As icon bendera USA di folder res/drawable-de-rUS/ dengan nama bendera.png.
6. Save As icon bendera Japanese di folder res/drawable-de-rJP/ dengan nama bendera.png.

Menjalankan dan Menguji Aplikasi

Setelah kita menambahkan lokalisasi sumberdaya image dan string ke aplikasi, kita siap menjalankan aplikasi untuk melihat hasilnya. kita akan menggunakan emulator, karena memiliki lebih banyak pengaturan lokalisasi. Untuk melakukan pengaturan lokalisasi di emulator pilih Custom Locale yang berada di tab aplikasi.

Untuk mengganti lokalisasi, klik dan tahan lokalisasi yang diinginkan. Berikut ini tampilan yang dihasilkan.

Lokalisasi	Layar pembuka pada aplikasi
German / Jerman Terdukung oleh aplikasi
Ingrris / Kanada Terdukung oleh aplikasi
Inggris / USA Terdukung aplikasi
French / Kanada Terdukung aplikasi
French / Perancis terdukung oleh aplikasi
Japanese / Jepang Terdukung oleh aplikasi
Italian / Italia Tidak terdukung aplikasi, sehingga aplikasi kembali ke default

Tweet