Intro Screen with multi-languages support in Android | Portfolio app in Android (PART 1)
In this series of tutorials, we’re going to create a portfolio app in android. Here I will display bio-data, work-experience, projects, social media profiles, and papers, etc. you can change it according to your requirements.
Here In this tutorial, we’ll create our first screen i.e. the intro screen. In the intro screen, you can see the image of the user, name, and a headline with two buttons. The first button is for the (Multilingual mode) multi-language support and the second button is the “Skip” button.
Just for now, we are going to select three languages. That means our app supports three languages; English, Hindi, and Bengali.
Why use multilingual mode?
We use many languages in one app just to make it region basis. If your app is supported multi-languages that means your app can be easily accessible by any language people.
Sometimes it is not necessary to use multi-language, but in some cases, it is important to have this feature. In browsing app, we generally encounter that feature, so that in every language people can easily browse anything. We can use this feature in Information-based apps, Marketing apps, E-commerce apps, etc. The best example of this: Amazon
Intro Screen with multi-languages
- In the XML file, we will display Two ImageViews, Two TextViews, and Two Buttons. Here we use Circle image view for our profile.
- For circle image view we need one dependency in the app level build.gradle file
implementation ‘de.hdodenhof:circleimageview:3.1.0’
- Now in the main XML file we add all the elements. Below code will help you to understand it:
main_activity.xml
<?xml version=”1.0" encoding=”utf-8"?>
<ScrollView 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:id=”@+id/main_container”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:background=”@drawable/background2"
android:padding=”20dp”
tools:context=”.MainActivity”>
<RelativeLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”>
<ImageView
android:layout_width=”60dp”
android:layout_height=”50dp”
android:src=”@drawable/lablee”
android:id=”@+id/lable”
android:elevation=”12dp”/>
<de.hdodenhof.circleimageview.CircleImageView
android:id=”@+id/profile_image”
android:layout_below=”@+id/lable”
android:layout_width=”match_parent”
android:layout_height=”200dp”
android:layout_marginTop=”60dp”
android:src=”@drawable/my_profile”
android:elevation=”10dp”
app:civ_border_color=”@android:color/black”
app:civ_border_width=”2dp” />
<TextView
android:id=”@+id/profile_name”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/profile_image”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”30dp”
android:fontFamily=”@font/asap_bold”
android:gravity=”center”
android:text=”@string/profile_name”
android:textAlignment=”center”
android:textAllCaps=”true”
android:textColor=”@android:color/black”
android:textSize=”24sp”/>
<RelativeLayout
android:id=”@+id/relative”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_below=”@+id/profile_name”
android:layout_centerHorizontal=”true”
android:layout_gravity=”center”
android:layout_margin=”20dp”
android:gravity=”center”
android:orientation=”horizontal”>
<LinearLayout
android:id=”@+id/litwo”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_below=”@+id/lione”
android:gravity=”center”
android:orientation=”vertical”>
<TextView
android:id=”@+id/profile_desc”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginTop=”2dp”
android:fontFamily=”@font/asap”
android:includeFontPadding=”false”
android:padding=”5dp”
android:text=”@string/job_des”
android:textAlignment=”center”
android:textColor=”@android:color/black”
android:textSize=”14sp” />
</LinearLayout>
</RelativeLayout>
<Button
android:id=”@+id/select_one”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_below=”@+id/relative”
android:layout_marginStart=”25dp”
android:layout_marginEnd=”25dp”
android:layout_marginTop=”35dp”
android:elevation=”8dp”
android:background=”@drawable/background”
android:fontFamily=”@font/asap_bold”
android:onClick=”showDialog”
android:text=”@string/select_language”
android:textAlignment=”center”
android:textColor=”@android:color/white”
android:textSize=”18sp” />
<Button
android:id=”@+id/skip”
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:layout_below=”@+id/select_one”
android:layout_alignParentBottom=”true”
android:background=”@android:color/transparent”
android:fontFamily=”@font/asap_bold”
android:onClick=”showDashboard”
android:text=”@string/skip”
android:layout_marginStart=”25dp”
android:layout_marginEnd=”25dp”
android:layout_marginTop=”10dp”
android:textColor=”@android:color/black”
android:textSize=”16sp” />
</RelativeLayout>
</ScrollView>
The output of the above code:
- Now, when the user clicks the “Skip” button, the user will send it to the main dashboard. For that we simply add android:onClick=”showDashboard” attribute in the Skip button and call the showDashboard method in the main java file. And in the onClick method, we pass the intent from the main activity to the dashboard activity.
public void showDashboard(View view){
Intent intent = new Intent(getApplicationContext(), DeshboardActivity.class);
startActivity(intent);
finish();
}
- Next, when user click the Select Language button, a custom alert dialog will appear where we will see three buttons, one for the English language, one for the Hindi selection, and one for the Bengali selection.
- First, let’s create the custom alert dialog box. For that go to the res > layout folder and create a new drawable resource file and named it as custom_dialog.xml. Here I just add some extra elements to customize the alert dialog. If you want you can add these or else you can skip it. Copy and paste the below code to create a custom dialog in the layout folder.
custom_dialog.xml
<?xml version=”1.0" encoding=”utf-8"?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:background=”#4688f1">
<LinearLayout
android:layout_width=”350dp”
android:layout_height=”300dp”
android:orientation=”vertical”
android:background=”@drawable/background”
android:padding=”10dp”>
<ImageView
android:id=”@+id/close_from_dialog”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”right”
android:padding=”2dp”
android:src=”@drawable/close” />
<TextView
android:id=”@+id/select_language”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:layout_marginTop=”5dp”
android:layout_marginStart=”20dp”
android:layout_marginEnd=”20dp”
android:fontFamily=”@font/asap_bold”
android:gravity=”center”
android:text=”@string/please_select_your_language”
android:textAlignment=”center”
android:textAllCaps=”true”
android:textColor=”@android:color/white”
android:textSize=”15sp” />
<View
android:layout_width=”250dp”
android:layout_height=”2dp”
android:layout_gravity=”center”
android:layout_marginTop=”10dp”
android:background=”@android:color/white” />
<ImageView
android:layout_width=”50dp”
android:layout_height=”50dp”
android:src=”@drawable/down_point”
android:layout_gravity=”center”
android:layout_marginTop=”-22dp”/>
<Button
android:id=”@+id/hindi_btn”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:layout_marginTop=”10dp”
android:fontFamily=”@font/asap_bold”
android:gravity=”center”
android:text=”हिन्दी”
android:textColor=”@android:color/white”
android:background=”@drawable/ripple_button”
android:textSize=”17sp” />
<Button
android:id=”@+id/eng_btn”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:layout_marginTop=”10dp”
android:fontFamily=”@font/asap_bold”
android:gravity=”center”
android:text=”English”
android:textColor=”@android:color/white”
android:background=”@drawable/ripple_button”
android:textSize=”16sp” />
<Button
android:id=”@+id/ban_btn”
android:layout_width=”200dp”
android:layout_height=”wrap_content”
android:layout_gravity=”center”
android:layout_marginTop=”10dp”
android:fontFamily=”@font/asap_bold”
android:gravity=”center”
android:text=”বাংলা”
android:textColor=”@android:color/white”
android:background=”@drawable/ripple_button”
android:textSize=”17sp” />
</LinearLayout>
</RelativeLayout>
The output of the above code snippet:
- Now for the Hindi and Bengali, you just need to do one thing create two separate string.xml files. One for the Hindi and one for the Bengali. For the string, files go to the string.xml file and right-click on it, and select Open Translations Editor.
- Now, click on the Add Locale button top left corner and add your language.
- After that select your language. Here I select Hindi and Bengla and the default English.
- After that, you need to add all of your texts in the string.xml file and translate those texts into your selected languages. For example, here as you see in the string.xml file app name is written as Portfolio but for Hindi and Bengali, it is different, I had to translate them. So that when we execute our code, the languages will change.
- For the translation, you can use GoogleTranslate.
- When you done with translating your texts. Go to the main activity class, where we create a method showDialog() when we click on the Select Language button. Inside the showDialog() method call the textView, imageView and buttons. After that create a view and inflate our custom dialog xml file.
final AlertDialog.Builder mDialog = new AlertDialog.Builder(MainActivity.this);
ImageView close, selectImg;
TextView selectText;
Button hindiBtn, engBtn, bangBtn;
final View mView = getLayoutInflater().inflate(R.layout.custom_dailog, null);
close = (ImageView)mView.findViewById(R.id.close_from_dialog);
hindiBtn = (Button) mView.findViewById(R.id.hindi_btn);
engBtn = (Button)mView.findViewById(R.id.eng_btn);
bangBtn = (Button)mView.findViewById(R.id.ban_btn);
mDialog.setView(mView);
final AlertDialog dialog = mDialog.create();
dialog.setCanceledOnTouchOutside(false);
- To close the dialog set the onClickListener on the close image view and dismiss the dialog box.
close.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dialog.dismiss();
}
});
- Form the API level 17, instead of modifying the
localevariable directly you should use thesetLocalemethod which additionally sets a layout direction internally. Here I use a string to keep the language.
private void setLocale(String lang) {
Locale locale = new Locale(lang);
Locale.setDefault(locale);
Configuration configuration = new Configuration();
configuration.locale = locale;
getBaseContext().getResources().updateConfiguration(configuration,getBaseContext().getResources().getDisplayMetrics());
}
- Here we used Shared Preferences to save the data and load the save data in another activity. First, save the data using shared preferences in the setLocale().
//save data to shared preferences
SharedPreferences.Editor editor = getSharedPreferences(“Settings”,MODE_PRIVATE).edit();
editor.putString(“My_Lang”, lang);
editor.apply();
- now load the data using loadLocale()
//load languages saved in shared preferences
public void loadLocale(){
SharedPreferences pref = getSharedPreferences(“Settings”,MODE_PRIVATE);
String language = pref.getString(“My_Lang”, “”);
setLocale(language);
}
- And call the loadLocale() in the onCreate() method.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
loadLocale();
setContentView(R.layout.activity_main);
}
- Now we need to set onClickListener in the Hindi, Bengali, and English buttons so that when we click any of the buttons its texts should change respectively and redirect us to the dashboard.
hindiBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
setLocale("hi");
recreate();
startActivity(new Intent(getApplicationContext(),NewActivity.class));
finish();
dialog.dismiss();
}
});
engBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
setLocale("en");
recreate();
startActivity(new Intent(getApplicationContext(),NewActivity.class));
finish();
dialog.dismiss();
}
});
bangBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
setLocale("bn");
recreate();
startActivity(new Intent(getApplicationContext(),NewActivity.class));
finish();
dialog.dismiss();
}
});
dialog.show();
New Activity class
- Now in the New Activity just, for example, add a TextView and back button in the new XML file and call the textView and back button in the new activity java file. Also, add the setLocale() and loadLocale() functions in the new java file.
<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.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=”.NewActivity”>
<ImageView
android:id=”@+id/backBtn”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@drawable/back_black”
android:layout_marginStart=”20dp”
android:layout_marginTop=”20dp”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent” />
<TextView
android:id=”@+id/textView”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/android_apps_development_blogs”
android:textSize=”22sp”
android:textColor=”@android:color/black”
android:textStyle=”bold”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent” />
</androidx.constraintlayout.widget.ConstraintLayout>
- In new activity java file
package com.example.portfolio;
import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.content.res.Configuration;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.Locale;public class NewActivity extends AppCompatActivity {
TextView textView;
ImageView backButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
loadLocale();
setContentView(R.layout.activity_new);
textView = findViewById(R.id.textView);
backButton = findViewById(R.id.backBtn);
backButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
startActivity(new Intent(getApplicationContext(), MainActivity.class));
finish();
}
});
}
private void setLocale(String lang) {
Locale locale = new Locale(lang);
Locale.setDefault(locale);
Configuration configuration = new Configuration();
configuration.locale = locale;
getBaseContext().getResources().updateConfiguration(configuration,getBaseContext().getResources().getDisplayMetrics());
//save data to shared preferences
SharedPreferences.Editor editor = getSharedPreferences(“Settings”,MODE_PRIVATE).edit();
editor.putString(“My_Lang”, lang);
editor.apply();
}
//load languages saved in shared preferences
public void loadLocale(){
SharedPreferences pref = getSharedPreferences(“Settings”,MODE_PRIVATE);
String language = pref.getString(“My_Lang”, “”);
setLocale(language);
}
}
Output
