Hello, L10N - Seus apps em inglês, francês, espanhol, etc

Nesse tutorial, vamos criar o aplicativo "Hello, L10N". (Ok, o nome não é exatamente interessante, mas é esse o nome que o tutorial do Android resolveu usar. Portanto, é o que usaremos). Essa aplicação usará o framework Android para seletivamente carregar recursos. Então nós vamos entender a localização e, baseada nela, trazer a aplicação com a lingua correta. Faremos isso adicionando arquivos de recurso no diretório res/.

Então, vamos começar? A primeira versão da aplicação L10N usará apenas as pastas padrão de recursos (res/drawable, res/layout e res/values). Esses recursos não serão internacionalizados, por assim dizer - eles serão os gráficos, layout e strings que nós esperamos que a aplicação use mais comumente. Quando o usuário rodar a aplicação a partir de uma localização padrão (i.e. Brasil ou, no caso dessa aplicação, Reino Unido) ou em locais que a aplicação não suporte (i.e. Fora do País ou, no caso dessa aplicação, fora do Reino Unido), a aplicação carregarão os recursos dessas pastas padrão.

A aplicação consiste de uma interface simples de usuário que mostra dois objetos TextView e um Button com uma imagem de fundo de uma nacionalidade. Quando clicado, o botão mostra um AlertDialog que mostra dados adicionais.

Criando a aplicação

Para essa aplicação a lingua padrão será o inglês britânico e o local padrão será o Reino Unido.

1) Inicie um novo projeto e atividade chamado HelloL10N. Insira os seguintes valores no projeto:

Project name: HelloL10N
Application name: Hello, L10N
Package name: com.example.hellol10n
Create Activity: HelloL10N
Min SDK Version: 3

O projeto básico contém uma pasta res/ com subpastas para três tipos mais comuns de recursos: graficos (res/drawable/), layouts (res/layouts/) e strings (res/values/). A maior parte da internacionalização que você fará mais tarde nesse tutorial envolverá adicionar mais subdiretórios dentro da pasta res/.

2) Abra o arquivo res/layout/main.xml e substitua o valor padrão pelo seguinte código:

<?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>

O layout linear mostrado acima têm dois objetos TextView que mostrarão dados internacionalizados e um botão que mostrará a bandeira do País.

Criando os recursos padrão

O layout se refere a recursos que precisam ser definidos.

1) Crie as strings padrão. Para fazer isso, abra o arquivo res/values/strings.xml e substitua o conteúdo do arquivo pelo que está mostrado abaixo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Hello, L10N</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>
    <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>
</resources>

O código acima provê textos em inglês britânico para cada string que a aplicação usará. Quando nos fizermos a internacionalização da aplicação, nós vamos prover textos alternativos para alemão, francês, japonês e português.

2) Adicione uma imagem para a bandeira salvando o arquivo flag.png na pasta res/drawable. Quando a aplicação não estiver internacionalizada (i.e. a aplicação entende que está no Reino Unido) será mostrada a bandeira britânica.

3) Abra o arquivo HelloL10N.java (dentro da pasta src/) e adicione o código seguinte dentro do método onCreate(), após o setContentView.

// Assinala a imagem flag.png para o botão, carregando 
// a imagem correta dependendo do local onde a pessoa está
Button b;
(b = (Button)findViewById(R.id.flag_button)).setBackgroundDrawable(this.getResources().getDrawable(R.drawable.flag));

// construa o dialog box para ser mostrado quando o usuário clicar a bandeira
AlertDialog.Builder builder = new AlertDialog.Builder(this);
builder.setMessage(R.string.dialog_text)
    .setCancelable(false)
    .setTitle(R.string.dialog_title)
    .setPositiveButton("Pronto", new DialogInterface.OnClickListener() {
        public void onClick(DialogInterface dialog, int id) {
        dialog.dismiss();
        }
    });
//Após o AlertDialog ser construído (usando o método Builder da classe AlertDialog)
//ele é finalmente setado como sendo um AlertDialog que será mostrado.
final AlertDialog alert = builder.create();

// Insira um click listener na bandeira para mostrar o dialog box
b.setOnClickListener(
    new View.OnClickListener() 
    {
       public void onClick(View v) 
       {
          alert.show();
       }
    });

//----- Fim do código. A partir daqui, são os comentários sobre o código Java.
//----- No seu projeto, use o código acima. Não use o código abaixo.
//Perceba que na 4a linha foi criado um botão de nome b. 
//Depois o código faz um cast para que b
//referencie o botão que existe na tela, chamado flag_button. Veja que ele faz a 
//chamada para R.id.flag_button. Após isso, o código configura o background
//para usar a imagem flag.png.
//A 4a linha poderia ter sido escrita dessa maneira:

Button b;
Drawable bandeira;

b = (Button)findViewById(R.id.flag_button);
bandeira = this.getResources().getDrawable(R.drawable.flag);

b.setBackgroundDrawable(bandeira);

Dica: Se você estiver no Eclipse, uma boa dica é pressionar Control + Shift + O para encontrar e adicionar quaisquer pacotes que estejam faltando ser importados ao seu projeto.

O código acima faz o seguinte:

• Ele assinala a bandeira correta como ícone do botão. Por enquanto, todos os recursos são definidos para o padrão. Portanto, o código sempre mostrará a bandeira britânica no botão como ícone. Uma vez que sejam adicionados mais locais e, portanto, a aplicação fique internacionalizada, o código assinalará diferentes bandeiras de acordo com o local onde a pessoa esteja.
• Ele cria um objeto do tipo AlertDialog e seta um click listener para que quando o usuário clique no botão o AlertDialog seja mostrado. Nesse momento o AlertDialog mostrará sempre o valor de dialog_text que está localizado dentro do arquivo res/values/strings.xml.

Rodando a aplicação sem internacionalização

Ao rodar a aplicação, o resultado sempre será o apresentado abaixo já que a aplicação ainda não entende qual o local onde está sendo rodado e, portanto, não consegue selecionar a lingua correta.

Planejando a internacionalização de sua aplicação

O primeiro passo para fazer a internacionalização de sua aplicação é planejar como a aplicação vai renderiza diferentemente em diferentes locais. Nessa aplicação, o local padrão é o Reino Unido. Nós vamos adicionar informações específicas para Alemanha e França. A tabela abaixo mostra o plano para como a aplicação será mostrada em diferentes locais.

Região/Lingua	UK	Alemanha	França	Outros locais
Inglês	Inglês britânico; bandeira britânica	--	--	Inglês britânico; bandeira britânica
Alemão	--	Texto alemão para app_name, text_a e text_b, bandeira alemã	--	Texto alemão para app_name, text_a e text_b, bandeira britânica
Francês	--	--	Texto francês para app_name, text_a, text_b, bandeira francesa	Texto francês para app_name, text_a, text_b, bandeira britânica
Outras linguas	--	--	--	Inglês britânico, bandeira britânica

Como mostrado na tabela acima, o plano é chamar por três ícones de bandeira em adição à bandeira inglesa que já existe na pasta res/drawable. Ele também chamará outros conjuntos de text strings para cada uma das nacionalidades cobertas pela aplicação.

A tabela 2 mostra onde as text strings e ícones de bandeiras serão necessárias e especificam quais serão carregadas para quais locais.

Local	Lingua/País	Local da strings.xml	Local da flag.png
Padrão	Inglês/UK	res/values/	res/drawable/
de-rDE	Alemão	res/values-de/	res/drawable-de-rDE/
fr-fFR	Francês/França	res/values-fr/	res/drawable-fr-rFR/

Internacionalizando a aplicação

Precisamos criar um arquivo string.xml para cada lingua que formos usar na aplicação além da lingua padrão. Portanto, criaremos outros três arquivos string.xml. Para tal, siga o passo a passo abaixo:

1) Clique no ícone indicado na imagem abaixo.

2) A tela seguinte aparecerá. Digite o nome do arquivo que se deseja criar (string.xml) e marque a opção values. Após isso, clique em Language e depois no botão que mostra uma seta para a direita.

3) Uma vez que a seta for clicada, o qualificador será mostrado na listagem da direita. Quando a tela ficar parecida com a de baixo, digite de no campo Language.

Pronto. O seu arquivo de localização foi criado. Repita os passos para a lingua francesa, digitando em Language as letras fr.

A listagem de recursos deverá estar como mostrado na imagem abaixo.

 Com os arquivos string.xml criados, substitua os conteúdos de cada um deles pelos códigos apresentados abaixo:

Alemão

<?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>

Francês

<?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> 

Após isso, insira os arquivos de bandeira da Alemanha e França nas pastas respectivas dentro de res. São elas:

• res/drawable-de-rDE para Alemanha
• res/drawable-fr-rFR para França

Uma vez que você adicionou a string internacionalizada e o recurso de imagem (a bandeira em si), você está pronto para rodar a aplicação e testá-la. Para testar, bastou eu mudar a lingua do smartphone para francês que a imagem abaixo foi gerada quando eu rodei a aplicação.

E, mais abaixo, quando eu rodei a aplicação depois de mudar a lingua para alemão.

O que aprendemos aqui é como fazer para que nossa aplicação fique internacionalizada. Como nossa lingua é a portuguesa, a única mudança aqui para que tenhamos uma aplicação com lingua padrão portuguesa é inserir as strings dentro de string.xml na lingua portuguesa e internacionalizar o restante, criando pastas para cada uma das linguas que se quer suportar.

Lembro a vocês que essa é uma coisa que deveremos fazer SEMPRE, se quisermos realmente ganhar dinheiro desenvolvendo para Android.

E a razão única disso é que o mercado de smartphones no Brasil ainda não é tão grande. No entanto, o mercado desse tipo de dispositivos nos EUA e Europa está bastante avançado. Então, nada de apenas pensar em ganhar dinheiro aqui no Brasil. Vamos ganhar dinheiro também fora daqui, ok? Em dolar, euro ou libra, não importa.