Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

Como crear una aplicación Multi-language en Android

Android Multilanguage Example


Hola amigos en esta ocasión les mostrare como crear una aplicación multilanguage en Android
ya que Android cuenta con soporte para muchos lenguajes del mundo.
Como crear una aplicación Multi-language en Android
Como crear una aplicación Multilanguage en Android

Como crear un proyecto en Android (Aquí)

Vamos a crear un proyecto en Android para poder desarrollar nuestra aplicación.
Y aprender como podemos hacer que nuestra aplicación sea multilanguage.
Como crear una aplicación Multi-language en Android
Como crear un proyecto en Android

Diseño de nuestra aplicación Multilanguage


Comenzaremos creando el diseño de nuestra aplicación la cual añadiremos varios controles
para tener una idea de como se podran cambiar el idioma de nuestra aplicación segun lo seleccionemos.

Vamos agregar en la carpeta Menu en el archivo main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/eng"
        android:title="@string/languaje_1"
        app:showAsAction="never" />
    <item
        android:id="@+id/es"
        android:title="@string/languaje_2"
        app:showAsAction="never" />
</menu>
Como crear una aplicación Multi-language en Android
Diseño de nuestro layout de cambio de idioma
Ahora en la carpeta Layout agregaremos un archivo al que llamaremos toolbarlanguage.xml y tendra los siguientes elementos

<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#024C5A"  >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:gravity="center"
                android:layout_centerInParent="true"
                android:textStyle="bold"
                android:textSize="20dp"
                android:layout_alignParentLeft="true"
                android:textColor="#FFF"
                android:id="@+id/toolbar_title" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>
</merge>
Como crear una aplicación Multi-language en Android
Diseño de nuestro toolbar de nuestra aplicación Multilanguage
Y por ultimo en nuestro archivo activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    <include
        layout="@layout/toolbarlanguaje"
        android:id="@+id/toolbartop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/textView1"
        android:layout_below="@id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="10dp"
        android:gravity="center"
        android:text="@string/translate_1" />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtModulo"
        android:layout_margin="10dp"
        android:padding="10dp"
        android:gravity="center"
        android:layout_below="@+id/textView1"
        android:text="@string/translate_3"/>
    <Spinner
        android:id="@+id/spnModulo"
        android:layout_margin="10dp"
        android:padding="20dp"
        android:gravity="center"
        android:entries="@array/translate_spinner"
        android:spinnerMode="dialog"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/txtModulo" />
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="20dp"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:text="@string/translate_2" />
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>
Como crear una aplicación Multi-language en Android
Diseño de nuestro actividad principal
Agregaremos el archivo multilenguage en nuestra carpeta de values en el archivo strings.xml le daremos click derecho
y nos mostrara Open Translation Editor en el siguiente boton buscaremos English in United States

En el archivo por defecto le pondremos lo siguiente.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Multi-lenguaje Android</string>

    <string name="translate_1">Hola mundo!</string>
    <string name="translate_2">Aceptar</string>
    <string name="translate_3">Seleccione</string>

    <string name="languaje_1">Español</string>
    <string name="languaje_2">English</string>

    <array name="translate_spinner">
        <item>Agregar</item>
        <item>Editar</item>
        <item>Eliminar</item>
    </array>
</resources>
En el archivo de English agregaremos la traducción de nuestros string.

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <string name="app_name">Multi-language Android</string>

    <string name="languaje_2">English</string>
    <string name="languaje_1">Spanish</string>

    <string name="translate_3">Select</string>
    <string name="translate_2">Accept</string>
    <string name="translate_1">Hello World!</string>

    <array name="translate_spinner">
        <item>Add</item>
        <item>Edit</item>
        <item>Delete</item>
    </array>
</resources>
Ahora en el archivo styles.xml nos tendria que quedar lo siguiente forma.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

Código de Multilanguage en Android


Ahora vamos a añadir el código para nuestra aplicación brevemente explicado.

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Button;
import android.widget.Spinner;
import android.widget.Toast;
import java.util.Locale;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {
    // Declaración de variables
    Spinner spnModulo;
    String[] strMessages;
    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initialize();
    }
    // Inicializar controles en la Actividad
    public void initialize(){
        Toolbar mTopToolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(mTopToolbar);
        spnModulo = (Spinner) findViewById(R.id.nModulo);
        spnModulo.setOnItemSelectedListener(this);
        strMessages = getResources().getStringArray(R.array.translate_spinner);
        btn = (Button)findViewById(R.id.button);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }
    // Elemento seleccionado en el Spinner
    @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        Toast.makeText(getApplicationContext(),strMessages[position] , Toast.LENGTH_LONG).show();
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
    }

    // Funcion de Lenguaje
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Verificar si el idioma es Ingles o Español
        Configuration config = new Configuration(getResources().getConfiguration());
        switch (item.getItemId()){
            case R.id.eng:
                // Cambiar idioma Ingles
                config.locale = Locale.ENGLISH;
                getBaseContext().getResources().updateConfiguration(config,
                        getBaseContext().getResources().getDisplayMetrics());
                // Reinicializar los controles
                this.setContentView(R.layout.activity_main);
                initialize();
                break;
            case R.id.es:
                // Cambiar idioma Español
                config.locale = Locale.getDefault();
                getBaseContext().getResources().updateConfiguration(config,
                        getBaseContext().getResources().getDisplayMetrics());
                // Reinicializar los controles
                this.setContentView(R.layout.activity_main);
                initialize();
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

Como crear un emulador AVD en Android (Aquí)


Vamos a crear un emulador AVD para ver nuestra aplicación en ejecución y hacer las pruebas del cambio de idioma.
Como crear una aplicación Multi-language en Android
Aplicación ejecuta en nuestro emulador AVD

Como crear una aplicación Multi-language en Android
Cambio de idioma en nuestra aplicación Multilanguage

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner