Tuesday, April 28, 2020

Multi Language support කරන App එකක් හදා ගන්නේ කොහොමද ???




අද මේ post එකෙන් මම කියලා දෙන්න යන්නේ Android වල  Multi Languages

supported simple login application එකක් හදාගන්න විදිහ ගැන.

ඔයාලා දන්නවා ඇන්ඩ්‍රොයිඩ් කියන්නේ රටවල් 190 කට අධික පරිශීලකයින් මිලියන ගණනක් භාවිතා කරන ජනප්‍රිය ජංගම මෙහෙයුම් පද්ධතියක් කියලා. ඒ වගේම මේක පරිශීලනය කරන අයත් දිනෙන් දින වැඩි වෙනවා. අපි App එකක් හදන්නේ global audience ලා target කරලා නම්, App එක localize විදිහට හදන එක ගොඩක් ප්‍රයෝජනවත් වෙනවා.

App එක හදන්න කලින් යාලා මේ දේවල් ගැන සැලකිලිමත් වෙන්න ඔින.
යාලා ඇන්ඩ්‍රොයිඩ් app එකක් හදද්දි, app එකේදි use වෙන text හැමවෙලාවෙම string.xml file එකේ විතරක් declare කරන්න. උදාහරණයක් විදිහට,

<string name="welcome">Welcome!</string>

ඊට පස්සේ layout file එකේ පහලින් තියන විදිහට ඒ අදාළ text එකේ path එක දුන්නම හරි.

<TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="40dp"
            android:text="@string/welcome"
            android:textColor="@color/white"
            android:textSize="45dp"
            android:textStyle="bold" />

Java code එකේ define කරද්දි R.string කියලා use කරන්න


example.setText(R.string.example);


මේ විදිහට කරාම අපේ app එක edit කරන්න, multi languages විදිහට translate කරන්න පහසුයි.

දැන් බලමු කොහොමද මේ String Localization වැඩ කරන්නේ කියලා.

By default, ඇන්ඩ්‍රොයිඩ් OS එකෙන් English language එක primary language එක විදිහට ගන්නේ. App එක start කරාම res folder එකේ තියන values folder එකේ string.xml file resources load වෙනවා.

අපිට Multilanguage supported app එකක් හදන්න අවශ්‍ය වුනාම, res folder එකේ අපි හදන values folder එකට ඉස්සරහින් Hyphen (-) එකක් දාලා ISO language code එක folder එකේ name එකට append  කරන්න අවශ්‍යයි. -> values-(ISO language Code)

උදාහරණයක් ලෙස
Sinhala language එක සඳහා values-si කියලා folder එකක් හදලා app එකේ English වලින් තියන text Sinhala language එකට translate කරලා, values-si එක ඇතුලේ හදාගත්ත string.xml file එකට දා ගන්න ඔිනි.


දැන් ඔයාලාට idea එකක් තියනවනේ වැඩේ වෙන්නේ කොහොමද කියලා. හොඳයි අපි මුලින්ම අලුත් project එකක් පටන් ගමු.

Step 1 -> පළමුවෙන්ම අලුත් project එකක් හදාගන්න.





Step 2 -> Colors.xml file එක මේ විදිහට change කරගන්න,



Step 3 -> දැන් Drawable Directory එකේ පහළින් තියන files ටික step by step හදන්න.

1.  grad_back.xml

මේක අපි use කරන්නේ අපේ app එකේ background එක විදිහට,



     2. et_back.xml

මේක අපි use කරන්නේ අපේ app එකේ Editbox වල background එක විදිහට,

1
1   3. btn_back.xml

මේක අපි use කරන්නේ අපේ app එකේ Buttons වල background එක විදිහට,



Step 4 -> දැන් values directory එකේ string.xml file එක පහළින් දැක්වෙන විදිහට හදාගන්න.




Step 5 -> දැන් කලින් විදිහටම අපි app එකේදි use කරන්න ඉන්න languages වලට හරියන විදිහට res directory එකේ values folders හදලා ඒවගෙ ඇතුලේ වෙන වෙනම string.xml file හදාගන්න ඔින. අපි මේ app එකේදි Sinhala, Tamil languages use කරන නිසා res folder එකේ values-si, values-ta කියලා folders 2 හදාගන්න.

දැන් ඒ හදාගත්ත values folder වල වෙන වෙනම string.xml file හදන්න.

Sinhala -> values-si >> strings.xml



Tamil -> values-ta >> strings.xml



Step 6 -> අපිට app එකේ languages වෙනස් කරන්න settings menu අවශ්‍ය වෙනවනේ. ඒ සඳහා res folder එකේ menu folder එකක් හදලා පහලින් තියන විදිහට  lang_setting_menu.xml file එක හදාගන්න.





Step 7 -දැන් පහලින් මම දීලා තියන code එක activity_main.xml file එකට දා ගන්න.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/grad_back"
    android:animateLayoutChanges="true"
    tools:context=".MainActivity">
    <RelativeLayout
        android:layout_marginLeft="40dp"
        android:layout_marginRight="40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <ImageView
            android:id="@+id/img_front"
            android:layout_width="90dp"
            android:layout_height="100dp"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/heart"/>
        <RelativeLayout
            android:id="@+id/relay1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/img_front">
            <TextView
                android:id="@+id/tv1_login"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20dp"
                android:fontFamily="sans-serif-medium"
                android:text="@string/welcome"
                android:textColor="@color/white"
                android:textSize="30sp"/>
            <LinearLayout
                android:orientation="vertical"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:layout_below="@+id/tv1_login"
                android:id="@+id/linear1"
                android:layout_marginTop="20dp">
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/email"
                        android:textStyle="bold"
                        android:textAllCaps="true"
                        android:textColor="@color/white"
                        android:textSize="15sp"
                        android:fontFamily="sans-serif-light"/>
                    <EditText
                        android:id="@+id/ed_email"
                        android:inputType="textEmailAddress"
                        android:textStyle="bold"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_marginTop="5dp"
                        android:background="@drawable/et_back"
                        android:fontFamily="sans-serif-light"
                        android:paddingLeft="15sp"
                        android:paddingRight="15sp"
                        android:textColor="@color/white"
                        android:textSize="15sp"/>
                </LinearLayout>
                <LinearLayout
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/password"
                        android:textStyle="bold"
                        android:textAllCaps="true"
                        android:textColor="@color/white"
                        android:textSize="15sp"
                        android:fontFamily="sans-serif-light"/>
                    <EditText
                        android:id="@+id/ed_pass"
                        android:textStyle="bold"
                        android:inputType="textPassword"
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_marginTop="5dp"
                        android:background="@drawable/et_back"
                        android:fontFamily="sans-serif-light"
                        android:paddingLeft="15sp"
                        android:paddingRight="15sp"
                        android:textColor="@color/white"
                        android:textSize="15sp"/>
                </LinearLayout>

            </LinearLayout>
            <Button
                android:background="@drawable/btn_back"
                android:id="@+id/btn_login"
                android:layout_width="wrap_content"
                android:layout_height="40dp"
                android:layout_below="@+id/linear1"
                android:text="@string/login"
                android:layout_marginTop="50dp"
                android:textColor="@color/white"
                android:textAllCaps="false"
                android:fontFamily="sans-serif-medium"
                android:paddingLeft="70dp"
                android:paddingRight="70dp"
                android:textSize="16sp"
                android:layout_centerHorizontal="true"
                android:textStyle="bold"/>
        </RelativeLayout>
    </RelativeLayout>
    <RelativeLayout
        android:id="@+id/relay2"
        android:layout_marginRight="20dp"
        android:layout_marginLeft="20dp"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/dontHaveAccount"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:fontFamily="sans-serif-light"
            android:textStyle="bold"/>
        <Button
            android:id="@+id/btn_signup"
            android:paddingTop="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/transparent"
            android:fontFamily="sans-serif"
            android:text="@string/signUp"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textStyle="bold" />
        <Button
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/transparent"
            android:fontFamily="sans-serif"
            android:text="@string/forgotPassword"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textStyle="bold"
            android:layout_alignParentEnd="true" />
    </RelativeLayout>
</RelativeLayout>

Step 7 -> අවසාන වශයෙන් පහලින් මම දීලා තියන code එක MainActivity.Java file එකට දා ගන්න.

package com.milinda.directit.multilanguageapplication;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import java.util.Locale;
import android.content.res.Configuration;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.lang_setting_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case R.id.en:
                String languageToLoad = "en"; // your language
                Locale locale = new Locale(languageToLoad);
                Locale.setDefault(locale);
                Configuration config = new Configuration();
                config.locale = locale;
                getBaseContext().getResources().updateConfiguration(config,
                        getBaseContext().getResources().getDisplayMetrics());
                this.setContentView(R.layout.activity_main);
                break;
            case R.id.si:
                languageToLoad = "si"; // your language
                locale = new Locale(languageToLoad);
                Locale.setDefault(locale);
                config = new Configuration();
                config.locale = locale;
                getBaseContext().getResources().updateConfiguration(config,
                        getBaseContext().getResources().getDisplayMetrics());
                this.setContentView(R.layout.activity_main);
                break;
            case R.id.ta:
                languageToLoad = "ta"; // your language
                locale = new Locale(languageToLoad);
                Locale.setDefault(locale);
                config = new Configuration();
                config.locale = locale;
                getBaseContext().getResources().updateConfiguration(config,
                        getBaseContext().getResources().getDisplayMetrics());
                this.setContentView(R.layout.activity_main);
                break;
            default:
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

හොඳයි දැන් app එකේ coding part එක ඉවරයි. Project එක run කරලා බලන්න තමයි තියන්නේ..

ඔයාලාගේ phone එකේ default language එක English නම් App එක English language එකෙන් run වෙනවා.

අනිත් languages වලටත් test කරලා බලන්න නම් Settings >> Language & Input path එකට ගිහින් app එක support  කරන language එකක් select කරන්න.



English





Sinhala


Tamil


අද post එක නම් ටිකක් දිගයි..ඒත් Multi language Android app එකක් හදාගන්න විදිහ ගැන ඔයාලට පැහැදිලි අවබෝධයක් ලබා ගන්න අවශ්‍ය වන මූලික කරුණු ඉහතින් විස්තර කරා... වගේම අද පාඩමෙන් ඔයාලට නොතේරුනු දෙයක් තියනවා නම් comment කරලා අහන්න පුලුවන්...

එහෙනම් යාළුවනේ ගිහින් එන්නම්...
හැමෝටම සුබ දවසක්...