Android is the Most used Mobile Platform across the world. With more than 2 Billion+ active users per month, and a Share of 87.1% market share of the total Mobile Devices used worldwide, Android has a wide range of users from different regions which truely requires the feature of Android Multi Language Support.
To reach out to wide range of audience and to leverage the most out of our app, we need to support Multiple Languages in our App. This Android Multi Language support tutorial is targeted right at this.
Agenda
In this article, we will be creating an App which supports English and Hindi Languages. We will use Android Shared Preferences to store our selection so that the app retains whatever Language we’ve selected even after leaving the app and coming back again. So lets begin this exciting tutorial on Android Multi Language support.
My idea here is to create a project with Navigation Drawer and some text and image inside which will be swapped with the respective language resources and labels based on our Language selection.
Here’s our project will look like upon completion:
You can add Android Multi Language Support to your Android Application in 4 simple steps:
[widget id=”text-3″]
1. Creating New Project for Android Multi Language Support Example
Here I will be creating a new project selecting Activity Template as Navigation Drawer Activity as shown in the image below.
Other than this, I kept everything as default and created a new project.
2. Modifying project’s Layout
Here i will be modifying our Android Multi-Language Support project’s layout accordingly. I am adding an ImageView and TextView whose resources are to be swapped when switching between Languages.
<?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"
android:background="@color/colorBackground"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.coderefer.multilanguagesupporteg.MainActivity"
tools:showIn="@layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="@string/tv_text"
android:textAlignment="center"
android:textColor="@android:color/white"
android:textSize="30sp"
android:typeface="monospace"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/iv_welcome"
app:layout_constraintVertical_bias="0.23000002" />
<ImageView
android:id="@+id/iv_welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.14999998"
app:srcCompat="@drawable/welcome" />
</android.support.constraint.ConstraintLayout>
[widget id=”text-3″]
3. Adding the required Translation Strings
Here we will be modifying our Strings.xml file and add the following strings to it:
<resources>
<string name="app_name">multiple languages support example</string>
<string name="navigation_drawer_open">Open navigation drawer</string>
<string name="navigation_drawer_close">Close navigation drawer</string>
<string name="action_settings">Settings</string>
<string name="nav_import">Import</string>
<string name="nav_gallery">Gallery</string>
<string name="nav_slideshow">Slideshow</string>
<string name="nav_tools">Tools</string>
<string name="nav_communicate">Communicate</string>
<string name="nav_share">Share</string>
<string name="nav_send">Send</string>
<string name="tv_text">Hello Vamsi! Welcome to my App.</string>
<string name="user_name">Vamsi Tallapudi</string>
<string name="user_email">[email protected]</string>
<string name="title_activity_settings">Settings</string>
</resources>
Here I’ve created a new Folder named values-hi to place the strings.xml with Hindi translations in the path as shown in the image below:
Since we are adding hindi translation, i’ve created folder values-hi. If you also want to support Spanish, you can add another folder named values-es and place another strings.xml file with the required translations to spanish. Thus we’ll be adding various translation files in respective folders accordingly.
Now I’ve added the translation strings.xml with the content for Android MultiLanguage support as follows:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">एकाधिक भाषाओं का समर्थन उदाहरण</string>
<string name="action_settings">सेटिंग्स</string>
<string name="nav_import">आयात</string>
<string name="nav_gallery">गेलरी</string>
<string name="nav_slideshow">स्लाइड शो</string>
<string name="nav_tools">उपकरण</string>
<string name="nav_communicate">संवाद</string>
<string name="nav_share">शेयर</string>
<string name="nav_send">भेजना</string>
<string name="tv_text">नमस्कार वम्सी! मेरे ऐप में आपका स्वागत है</string>
<string name="user_name">वम्सी ताल्लापुदी</string>
<string name="user_email">[email protected]</string>
</resources>
4. Modifying our Activity File to do support Android Multi Language Support
[widget id=”text-3″]
Now we will be changing our Activity file to switch between multiple languages. The code is commented wherever required.
package com.coderefer.multilanguagesupporteg;
import android.content.SharedPreferences;
import android.content.res.Configuration;
import android.content.res.Resources;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import java.util.Locale;
//Android Multi language support example
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
private static final String LOCALE_KEY = "localekey";
private static final String HINDI_LOCALE = "hi";
private static final String ENGLISH_LOCALE = "en_US";
private static final String LOCALE_PREF_KEY = "localePref";
private ImageView ivWelcome;
private Locale locale;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.addDrawerListener(toggle);
toggle.syncState();
setTitle(R.string.app_name);
// Fetching sharedpreferences to get Locale stored in them
SharedPreferences sp = getSharedPreferences(LOCALE_PREF_KEY, MODE_PRIVATE);
String localeString = sp.getString(LOCALE_KEY, ENGLISH_LOCALE);
setupImageBasedOnLocale(localeString);
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
//Swap images based on Locale for Android MultiLanguage Support
private void setupImageBasedOnLocale(String localeString) {
ivWelcome = (ImageView) findViewById(R.id.iv_welcome);
if(localeString.equals(HINDI_LOCALE)){
ivWelcome.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.swagath));
} else {
ivWelcome.setImageDrawable(ContextCompat.getDrawable(this, R.drawable.welcome));
}
}
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_language) {
// Modifying Locale if User clicked language from options pane
Resources resources = getResources();
SharedPreferences sharedPreferences = getSharedPreferences("localePref", MODE_PRIVATE);
SharedPreferences.Editor editor = sharedPreferences.edit();
if(sharedPreferences.getString(LOCALE_KEY, ENGLISH_LOCALE).equals(HINDI_LOCALE)){
locale = new Locale(ENGLISH_LOCALE);
editor.putString(LOCALE_KEY, ENGLISH_LOCALE);
} else {
locale = new Locale(HINDI_LOCALE);
editor.putString(LOCALE_KEY, HINDI_LOCALE);
}
editor.apply();
Configuration configuration = resources.getConfiguration();
configuration.setLocale(locale);
getBaseContext().getResources().updateConfiguration(configuration,
getBaseContext().getResources().getDisplayMetrics());
recreate();
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
SharedPreferences sharedPreferences = getSharedPreferences("localePref", MODE_PRIVATE);
MenuItem item = menu.getItem(0);
if(sharedPreferences.getString(LOCALE_KEY, ENGLISH_LOCALE).equals(HINDI_LOCALE)){
item.setTitle("English");
} else {
item.setTitle("Hindi");
}
return true;
}
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
}
The required images are added to drawable folder accordingly which can be downloaded from the github link below that contains source code for the project created for this tutorial.
