
<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-block-buttons-is-layout-flex"> 
<div>This post is about how to setup ML Kit’s translation feature in Android application with the help of simple demo app.</div> 
<div> </div> 
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-text-color has-background" style="background-color: #030560;" href="https://github.com/arunk7839/TranslateTextExp"><strong>DOWNLOAD CODE</strong></a></div> 
</div> 
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="Hrn8eec59Mg" title="Translate text with ML Kit on Android"><a placeholder href="https://youtu.be/Hrn8eec59Mg"><img src="https://i.ytimg.com/vi/Hrn8eec59Mg/hqdefault.jpg" layout="fill" object-fit="cover" alt="Translate text with ML Kit on Android"></a></amp-youtube></p> 
<h4><span style="color: #000080;"><strong>Creating new project</strong></span></h4> 
<p>1 . Create a new project by going to <span style="color: #008000;"><b>File </b><span class="s1"><b>⇒</b></span></span><b><span style="color: #008000;"> New Android Project</span>,</b> select <span style="color: #008000;"><strong>Empty Activity</strong></span> , provide <span style="color: #008000;"><strong>app name</strong></span>, select language to <strong><span style="color: #008000;">kotlin</span> </strong>and then finally click on <span style="color: #0000ff;"><strong>finish</strong></span>.</p> 
<h5><strong><span style="color: #000080;">Adding Dependency</span></strong></h5> 
<p>2 . Open <span style="color: #008000;"><strong><span class="s1">build.gradle (Module: app)</span></strong></span> file and add the ML Kit’s Translation API dependency inside the <span style="color: #008000;"><strong>dependencies</strong></span> section:</p> 
<p><span style="color: #0000ff;"><strong><span class="s1">build.gradle</span></strong></span></p> 
<pre>dependencies {<br /><strong><span style="color: #008000;"> //ml kit translation API</span></strong><br /> implementation 'com.google.mlkit:translate:16.1.2'<br />}</pre> 
<h5><span style="color: #000080;"><strong>Creating Layout File</strong></span></h5> 
<p>3. The <span style="color: #008000;"><strong>activity_main.xml</strong></span> layout file defines the UI of the application.</p> 
<p><strong><span style="color: #0000ff;">activity_main.xml</span></strong></p> 
<pre><;?xml version="1.0" encoding="utf-8"?>;<br /><;androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"<br /> xmlns:app="http://schemas.android.com/apk/res-auto"<br /> xmlns:tools="http://schemas.android.com/tools"<br /> android:layout_width="match_parent"<br /> android:layout_height="match_parent"<br /> android:layout_margin="10dp"<br /> tools:context=".MainActivity">;<br /><br /> <;TextView<br /> android:id="@+id/tv_from_english"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="30dp"<br /> android:text="From English"<br /> android:textColor="@color/purple_700"<br /> android:textSize="20sp"<br /> android:textStyle="bold"<br /> app:layout_constraintStart_toStartOf="parent"<br /> app:layout_constraintTop_toTopOf="parent" />;<br /><br /> <;EditText<br /> android:id="@+id/edt_source_lang_text"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="10dp"<br /> android:hint="Enter English text"<br /> android:textSize="18sp"<br /> app:layout_constraintEnd_toEndOf="parent"<br /> app:layout_constraintStart_toStartOf="@+id/tv_from_english"<br /> app:layout_constraintTop_toBottomOf="@+id/tv_from_english" />;<br /><br /> <;TextView<br /> android:id="@+id/tv_to_hindi"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="30dp"<br /> android:text="To Hindi"<br /> android:textColor="@color/purple_700"<br /> android:textSize="20sp"<br /> android:textStyle="bold"<br /> app:layout_constraintStart_toStartOf="@+id/edt_source_lang_text"<br /> app:layout_constraintTop_toBottomOf="@+id/edt_source_lang_text" />;<br /><br /> <;TextView<br /> android:id="@+id/tv_target_lang_text"<br /> android:layout_width="match_parent"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="10dp"<br /> android:hint="Hindi Translation"<br /> android:textSize="20sp"<br /> app:layout_constraintStart_toStartOf="@+id/tv_to_hindi"<br /> app:layout_constraintTop_toBottomOf="@+id/tv_to_hindi" />;<br /><br /> <;ProgressBar<br /> android:id="@+id/progressBar"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="30dp"<br /> android:padding="10dp"<br /> android:visibility="gone"<br /> app:layout_constraintEnd_toEndOf="parent"<br /> app:layout_constraintHorizontal_bias="0.5"<br /> app:layout_constraintStart_toStartOf="parent"<br /> app:layout_constraintTop_toBottomOf="@+id/tv_target_lang_text" />;<br /><br /> <;Button<br /> android:id="@+id/btn_translate"<br /> android:layout_width="wrap_content"<br /> android:layout_height="wrap_content"<br /> android:layout_marginTop="30dp"<br /> android:padding="10dp"<br /> android:text="Translate"<br /> app:layout_constraintEnd_toEndOf="parent"<br /> app:layout_constraintHorizontal_bias="0.5"<br /> app:layout_constraintStart_toStartOf="parent"<br /> app:layout_constraintTop_toBottomOf="@+id/tv_target_lang_text" />;<br /><br /><;/androidx.constraintlayout.widget.ConstraintLayout>;</pre> 
<h5><strong><span style="color: #000080;">Writing MainActivity Code</span></strong></h5> 
<p>4 . To translate a string between two languages create a <strong><span style="color: #008000;">Translator</span></strong> object, configure it with the source and target languages.</p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>
 
<pre>val options = TranslatorOptions.Builder()<br /> .setSourceLanguage(TranslateLanguage.ENGLISH)<br /> .setTargetLanguage(TranslateLanguage.HINDI)<br /> .build()<br /><br />val englishHindiTranslator = Translation.getClient(options)</pre> 
<p>5 . Next, we need to ensure that the model has been downloaded before running the <strong><span style="color: #008000;">translate()</span></strong> method. </p> 
<pre><span style="color: #008000;"><strong>//Downloads the model files required for translation, if they are not already present</strong></span><br />englishHindiTranslator.downloadModelIfNeeded()<br /> .addOnSuccessListener {<br /> Log.e(TAG, "Download Successful")<br /> }<br /> .addOnFailureListener {<br /> Log.e(TAG, "Download Error: " + it.printStackTrace().toString())<br /> }</pre> 
<p><span style="color: #0000ff;"><strong>Note:</strong></span> Avoid keeping too many language models (Its around 30MB) on the device at once (delete unneeded models) ,to prevent filling device memory.</p> 
 
 
 
<p>5 . Once the model has downloaded successfully, pass a string of text in the source language to<span style="color: #008000;"><strong> translate().</strong></span></p> 
<pre><strong><span style="color: #008000;">//Translates the given input from the source language into the target language.</span></strong><br />englishHindiTranslator.translate(edtSourceLangText.text.toString())<br /> .addOnSuccessListener {<br /><span style="color: #008000;"><strong> //set translated text in textview</strong></span><br /> tvTargetLangText.setText(it)<br /> }<br /> .addOnFailureListener {<br /><span style="color: #008000;"><strong> //Error</strong></span><br /> Log.e(TAG, "Error: " + it.localizedMessage.toString())<br /> }</pre> 
<ul> 
<li>The translated text, in the target language you configured, is passed to the <span style="color: #008000;"><strong>success</strong></span> listener.</li> 
<li>In case of error, exception is passed to the <strong><span style="color: #008000;">failure</span></strong> listener.</li> 
</ul> 
<p>6 . Ensure that the <span style="color: #008000;"><strong>close()</strong></span> method is called when the Translator object will no longer be used. To do this on the Fragment or AppCompatActivity, we need to write the below code.</p> 
<pre>val englishHindiTranslator = Translation.getClient(options)<br /><span style="color: #008000;"><strong>getLifecycle().addObserver(englishHindiTranslator)</strong></span></pre> 
<h5><span style="color: #000080;"><strong>Complete MainActivity code</strong></span></h5> 
<p><strong><span style="color: #0000ff;">MainActivity.kt</span></strong></p> 
<pre>class MainActivity : AppCompatActivity() {<br /><br /> private val TAG = MainActivity::class.java.simpleName<br /><br /> override fun onCreate(savedInstanceState: Bundle?) {<br /> super.onCreate(savedInstanceState)<br /> setContentView(R.layout.activity_main)<br /><br /> val edtSourceLangText: EditText = findViewById(R.id.edt_source_lang_text)<br /> val tvTargetLangText: TextView = findViewById(R.id.tv_target_lang_text)<br /> val btnTranslate: Button = findViewById(R.id.btn_translate)<br /> val progressBar: ProgressBar = findViewById(R.id.progressBar)<br /><br /> val options = TranslatorOptions.Builder()<br /> .setSourceLanguage(TranslateLanguage.ENGLISH)<br /> .setTargetLanguage(TranslateLanguage.HINDI)<br /> .build()<br /><br /> val englishHindiTranslator = Translation.getClient(options)<br /> getLifecycle().addObserver(englishHindiTranslator)<br /><br /> btnTranslate.setOnClickListener({<br /><br /><span style="color: #008000;"><strong> //make sure that our EditText is not empty</strong></span><br /> if (!edtSourceLangText.text.isEmpty()) {<br /><br /> progressBar.visibility = View.VISIBLE<br /> btnTranslate.visibility = View.GONE<br /><br /><strong><span style="color: #008000;"> //Downloads the model files required for translation, if they are not already present englishHindiTranslator.downloadModelIfNeeded()</span></strong><br /> .addOnSuccessListener {<br /> Log.e(TAG, "Download Successful")<br /> progressBar.visibility = View.GONE<br /> btnTranslate.visibility = View.VISIBLE<br /><br /><span style="color: #008000;"><strong> //Translates the given input from the source language into the target language.</strong></span><br /> englishHindiTranslator.translate(edtSourceLangText.text.toString())<br /> .addOnSuccessListener {<br /><span style="color: #008000;"><strong> //Translation successful</strong></span><br /> tvTargetLangText.setText(it)<br /> }<br /> .addOnFailureListener {<br /><strong><span style="color: #008000;"> //Error</span></strong><br /> Log.e(TAG, "Error: " + it.localizedMessage)<br /> }<br /> }<br /> .addOnFailureListener {<br /> Log.e(TAG, "Download Error: " + it.localizedMessage)<br /> progressBar.visibility = View.GONE<br /> btnTranslate.visibility = View.VISIBLE<br /> }<br /> }<br /> })<br /> }</pre> 
<h5><span style="color: #000080;"><strong>Run the App</strong></span></h5> 
<p>When you run the app it will look like this:</p> 
<p><img class="alignnone wp-image-2938" src="https://c1ctech.com/wp-content/uploads/2021/11/Screenshot_20211110-221309_TranslateTextExp1-498x1024.jpg" alt="" width="336" height="691" /></p> 
<p> ;</p> 
<p> ;</p>