Como Tornar Seu App Mult Languange com Jetpack Compose
- #Kotlin
- #Android
Antes de começar a Ler, Vamos fazer um combinado, vou me esforçar para explicar e demostrar tudo da melhor forma possivel, de maneira bem ilustrativa com fotos e codigos, e voçê vai se esforçar um pouco pra ler até o final e tentar absorver o maximo de conteudo possivel, qual quer Duvida Estou a disposição
meu Linkedin : https://www.linkedin.com/in/iago-carvalho-b096a21b8/
Este artigo explica como criar um aplicativo multi-idioma, tanto para Android.
O objetivo é fornecer um guia passo a passo para que desenvolvedores de todos os níveis de experiência possam criar aplicativos que sejam acessíveis a um público global. Introdução Um aplicativo multi-idioma é um aplicativo que pode ser usado por pessoas de diferentes países e culturas.
Isso é importante para que os desenvolvedores possam alcançar um público mais amplo e aumentar o sucesso de seus aplicativos.
Existem duas maneiras principais de criar um aplicativo multi-idioma:
Criar um aplicativo separado para cada idioma
Criar um único aplicativo que suporte vários idiomas
A primeira opção é mais simples, mas pode ser mais cara e trabalhosa. A segunda opção é mais complexa, mas pode ser mais eficiente e econômica. Neste artigo, vamos nos concentrar na segunda opção, que é a mais comum.
Passo a passo Para criar um aplicativo multi-idioma, siga estas etapas:
1 . Separe os textos do código
A primeira etapa é separar os textos do código. Isso pode ser feito armazenando os textos em um arquivo separado, como um arquivo XML.
em seu arquivo res/values clique com o Botão direito, em seguida vá em new e encontre value Resouse file
1.1
1.2 apos clicar em Value Resoce File outra janela se abrira
em primeiro momento localize na janela a parte escrita Location em seguida clique nas setas ao centro da tela >>>>
1.3 ao clicar nas setas a janela se modificara um pouco,
parecera uma janela para escolher o idioma, e o pais
em file name : o nome do Arquivo deve ser Exatamente :
strings.xml
na aba Langue Selecione o idioma que deseja
em Specific Region, podemos deixamo como Any Region, ou expecificar qual o pais do idioma, a depender do pais certas palavras podem mudar então fica a seu criterio.
1.4 Dentro de seu arquivo Strings.xml, podemos Salvar todas as Strings que usaremos em nosso App, como no exemplo a seguir :
1.5 Aqui as coisas Começam a Ficar um pouco Repetitivas
Para Cada Idioma que queira Adicionar ao App podemos, Repetir as etapas Anteriores, mudando Apenas o Conteudo do Arquivo Strings.xml
1.6 Muita Atenção, a TAG name dos arquivos strings.xml devem ser identicas, por favor Veja Atentamente os Arquivos Acima
Se ja Conhece o Desenvolvimento Android Seja Com Xml ou com jetpack compose, vc pode recuperar cada TAG do arquivo strings.xml onde deseja utilizar, deixando varios arquivos strings.xml com as respequitivas marcações de idioma é o suficiente para o SDK reconhecer o Idioma padrão do dispositivo, e alterar o idoma usado automaticamente, mostrarei como Recuperar Essas Strings com jetpack compose.
para esse projeto, criei 6 arquivos de string xml :
2 Criaremos agora um arquivo com o nome de LoginWithEmailAndPassword.kt o nome e a sua escolha ^^
para recuperarmos os arquimos de string, basta criarmos um Text, com uma função stringResource(id = ) como no exemplo a Seguir :
com o R.string.SelectYourLangue podemos recuperar a string salva no arquivo strings.xml, aqui a importancia do arquivo ter extamente o mesmo nome, pois o sistema adptara, de acordo com a o idioma padrão do dispositivo,
caso não tenha entendido oque é esse SelecYourLangue, em cada arquivo que criamos para salvar os idiomas, lembrese que a tag name devem ser iguais: como no exemplo a seguir : ( desculpe se fui redundante, mas quero garantir que iniciantes entendão)
2.1, Basicamente tudo que é nescessario, para o app se adptar ao idioma do sistema está aqui, agora só e nescessario construir seu Layout e onde quizer passar um Texto, salve em seus arquivos strings.xml, com suas repectivas traduções
esté artigo não tem a inteção de encinar como criar um layout com jetpack compose, por isso mostrei apenas o nescessario para chamar suas strings, em seu arquivo Compoble, Porem deixo aqui o meu Layout, para dar uma olhada
fun LoginWithEmailAndPassword(
onLoginClick: () -> Unit = {},
onSignUpClick: () -> Unit = {},
onForgotClick: () -> Unit = {},
oninglesLanguage: () -> Unit = {},
onGermanLanguage: () -> Unit = {},
onEspanhisLanguage: () -> Unit = {},
onFrenchLanguage: () -> Unit = {},
onHindiLanguage: () -> Unit = {},
onPotuguesLanguage: () -> Unit = {},
) {
val colorApp = ColorsApp()
val colorsAppClass = ColorsApp()
val email = remember { mutableStateOf("") }
val passwordAuthentication = remember {
mutableStateOf("")
}
val passwordVisibility = remember {
mutableStateOf(false)
}
val validSubmit = remember(email.value, passwordAuthentication.value) {
email.value.trim().isNotEmpty() && passwordAuthentication.value.trim().isNotEmpty()
}
val context = LocalContext.current
Column(
modifier = Modifier
.fillMaxSize()
.background(colorApp.backgroundColorsApp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = stringResource(id = R.string.SelectYourLangue), style = TextStyle(
fontSize = 24.sp,
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight(600),
color = Color(0xFF202244),
)
)
Row(
modifier = Modifier
.fillMaxWidth()
.padding(start = 16.dp, end = 16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
IconButton(onClick = {
oninglesLanguage()
}) {
Image(
painter = painterResource(id = R.drawable.estadosunidos),
contentDescription = ""
)
}
IconButton(onClick = {
onGermanLanguage()
}) {
Image(
painter = painterResource(id = R.drawable.alemanha),
contentDescription = ""
)
}
IconButton(onClick = {
onEspanhisLanguage()
}) {
Image(
painter = painterResource(id = R.drawable.espanha),
contentDescription = ""
)
}
IconButton(onClick = {
onFrenchLanguage()
}) {
Image(
painter = painterResource(id = R.drawable.franca),
contentDescription = ""
)
}
IconButton(onClick = {
onHindiLanguage()
}) {
Image(painter = painterResource(id = R.drawable.india), contentDescription = "")
}
IconButton(onClick = {
onPotuguesLanguage()
}) {
Image(
painter = painterResource(id = R.drawable.brasil),
contentDescription = ""
)
}
fun changeLanguage(language: String) {
Lingver.getInstance().setLocale(context, language)
}
}
}
Column(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = stringResource(id = R.string.letsSingIn),
style = TextStyle(
fontSize = 24.sp,
fontFamily = FontFamily.SansSerif,
fontWeight = FontWeight(600),
color = Color(0xFF202244),
)
)
Text(
text = stringResource(id = R.string.StartLearning),
style = TextStyle(
fontSize = 14.sp,
fontFamily = FontFamily.Serif,
fontWeight = FontWeight(700),
color = Color(0xFF545454),
)
)
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
InputField(
valueState = email,
labelId = stringResource(id = R.string.email),
enabled = true,
keyboardType = KeyboardType.Email,
)
PasswordInput(
modifier = Modifier,
passwordState = passwordAuthentication,
labelId = stringResource(id = R.string.password),
enabled = true,
passwordVisibility = passwordVisibility
)
Text(
modifier = Modifier
.clickable { onForgotClick() }
.align(Alignment.End),
text = stringResource(id = R.string.ForgotPassword)
)
Spacer(modifier = Modifier.height(10.dp))
SubmitButton(
textId = stringResource(id = R.string.SingIn),
loadind = false,
validInputs = validSubmit
) {
onLoginClick()
}
Spacer(modifier = Modifier.height(10.dp))
Text(text = stringResource(id = R.string.withContinue))
Spacer(modifier = Modifier.height(10.dp))
GoogleButton { onLoginClick() }
Spacer(modifier = Modifier.height(10.dp))
Divider(thickness = 1.dp)
Spacer(modifier = Modifier.height(10.dp))
Row {
Text(text = stringResource(id = R.string.DonthaveACC))
Text(
modifier = Modifier.clickable { onSignUpClick() },
text = stringResource(id = R.string.SingUp),
color = colorsAppClass.ButtonColorStyles
)
}
}
}
}
}
3 : Layout Com Respequitivas Traduções
Dentro de meu layout tem algumas funções para, mudar o idioma do App dinamicamente, mas isso fica para uma proxima
se quizer saber como, me conta ai ^^
Se gostou Desta explicação deixe um comentario, me diga oque tem duvida, e espero que eu te ajuda de alguma forma, um abraço e fique com deus
