Review-2 Project Report

On

Language Translator [Mobile Application]

Submitted in partial fulfillment of the

requirement for the award of degree of

Bachelor of Technology in Computer Science and

Engineering

Under The Supervision of

Dr. Ajay Shanker Singh
Professor

Submitted By:
VAIBHAV NATH 19SCSE1010199
RUPESH KUMAR DWIVEDI 19SCSE1010010

SCHOOL OF COMPUTING SCIENCE AND ENGINEERING,

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING,
GALGOTIAS UNIVERSITY, GREATER NOIDA, INDIA

1
 ABSTRACT

This mobile application can be used for translating one language into another. In today’s

world I have seen many times language becomes barrier in order to convey any idea that’s

why I want to create this application to overcome this issue. This application is easy to use,

anyone can download and tipe any existing language to translate into any other language.

As everyone knows in our country there are so many languages has been spoken, to

understand one’s culture it is very important to know their language. In this application one

can translate the image text into any language. In dark one can use flash light to take a pick

of the image to translate its text into any language, flash light option will be available

inside the application.

2
 CONTENTS

Title Page
No.
Candidates Declaration
Abstract II
Contents III
List of Figures IV
Acronyms V
Chapter 1 Introduction 6-7
1.1 Basic Introduction
1.2 Purpose of Application

Chapter 2 Layout Design 8-20

2.1 Splash Screen layout
2.2 Main Screen layout
2.3 History Screen layout
2.4 Camera Screen layout

Chapter 3 Requirements & Implementation 21-24

3.1 Requirements
3.2 Implementation

Chapter 4 Data Flow Diagram 25-26

4.1 Main Screen Data Flow Diagram
4.2 History Screen Data Flow Diagram

Chapter 5 Functionality & Working 27-28

5.1 Functionality of Application
5.2 Working of Application

Chapter 6 Conclusion 29-29

3
 List of Figures

S. Page
Particular
No Number
s

1. Figure-2.1 (Splash Screen Design) 8

2. Figure-2.2 Output of Splash Screen (Light) 9

3. Figure-2.3 Output of Splash Screen (Dark) 9

4. Figure-2.4 (Main Screen Blue print) 11

5. Figure-2.5 (Main Screen Output) 15

6. Figure-2.6 (History Screen Design) 17

7. Figure-2.7 (History Screen Output) 19

8 Figure-2.8 (Object Screen Design) 20

9 Figure-2.9 (Object Screen Output) 21

10 Figure-4.1 (Main Screen DFD) 26

11 Figure-4.2 (History Screen DFD) 27

4
 Acronyms

DFD Data Flow Diagram

API Application programming Interface
ML-Kit Machine Learning-Kit(dependency)

5
 CHAPTER-1
INTRODUCTION

1.1 Basic Introduction

This mobile application can be used for translating one language into

another. In today’s world I have seen many times language becomes barrier in

order to convey any idea that’s why I want to create this application to

overcome this issue. This application is easy to use, anyone can download and

tipe any existing language to translate into any other language. As everyone

knows in our country there are so many languages has been spoken, to

understand one’s culture it is very important to know their language. In this

application one can translate the image text into any language. In dark one can

use flash light to take a pick of the image to translate its text into any language,

flash light option will be available inside the application. In country like India

which is very diverse like culture, language, food and many more things. Need

of a mobile application for translating one’s language is very important. There

are many translator application already available in this field but developing my

own application and putting what I want in a translator to make it unique. It is

seen that going in other country or in other state the language barrier is very big

problem not having the knowledge of another’s language gets difficult to start

conversation.

6
1.2 Purpose of Application

Main objective of this application to make easy to translate the language

so that one can understand the other languages very easily. This application is

easy to use, anyone can download and tipe any existing language to translate

into any other language. As everyone knows in our country there are so many

languages has been spoken, to understand one’s culture it is very important to

know their language. In this application one can translate the image text into

any language. In dark one can use flash light to take a pick of the image to

translate its text into any language, flash light option will be available inside

the application. In country like India which is very diverse like culture,

language, food and many more things. Need of a mobile application for

translating one’s language is very important. There are many translator

application already available in this field but developing my own application

and putting what I want in a translator to make it unique. It is seen that going

in other country or in other state the language barrier is very big problem not

having the knowledge of another’s language gets difficult to start

conversation. Mobile translation may include a number of useful features,

auxiliary to text translation which forms the basis of the service. While the

user can input text using the device keyboard, they can also use pre-existing

text in the form of email or SMS messages received on the user's device

(email/SMS translation).

7
 CHAPTER-2
LAYOUT DESIGN

2.1 Splash Screen Layout

This is the first screen which seen at the starting of application it is an

animation screen which is used to download some file of application when

application is started or if there is network problem this screen helps to make the

application properly runnable. It gives a pause for milliseconds to go main screen

so if there is any issue it will be fixed in that mean time.

Linear Layout

Animation View

Figure-2.1

8
Linear Layout

It is a like a container which keeps the another container or views inside.

Linear Layout has two orientation horizontal, vertical. In this design vertical

orientation has been used and a view to keep the animation source known as

animation view is kept inside this Linear Layout.

View

View in android is the main source to show something when application is

running. In this Splash Screen animation view is used to show the animation on first

screen when app is launched. The source of animation is Lottie animation this

animation is downloaded in the form of JSON file and kept inside the layout’s raw

folder and in animation view at source tag .json file has been set.

Light Mode Output Dark Mode Output

Figure-2.2 Figure- 2.3

9
2.2 Main Screen Layout

This is the main screen where all functionalities has been defined like

where the tiped text will be kept, where translated text will be kept. After taking

input by keyboard where this text will be shown. When Input is taken by

microphone where this text will go where the output will be shown everything is

defined and declared on this screen. How to rest the text one reset button is also

added on this screen. Taking the photo using camera there is a button also has been

added on this screen.

This main layout is comprised of different-2 Views and layouts which are shown on

next page.

Linear Layout

Main screen root layout is Linear layout which is comprised of Toolbar,

CardView, Relative Layout, Scroll View, EditText View, TextView, Buttons and

many more views and layouts. Linear Layout is working like a container for all

these layouts and views.

Toolbar

The main or starting of main layout which is seen on the screen is toolbar.

Toolbar is like a heading for the screen where we can set the title for the layout it

may be the name of the application or it can be the screen name at which it is

shown.

10
 Linear Layout

Toolbar

Card View

Relative Layout

Scroll
ScrollView
View
EditText (Widget)
EditText (Widget)

Scroll View
TextView (Widget)

ImageButton (Widget)

Relative Layout
Relative Layout
Spinner (Widget)

TextButton (Widget)

Spinner (Widget)

Relative Layout
ImageButton (Widget)

ImageButton (Widget)

ImageButton (Widget)

Figure-2.4 (Main Screen Design Blue print)

11
CardView

CardView is a new widget in Android that can be used to display any sort of

data by providing a rounded corner layout along with a specific elevation.

CardView is the view that can display views on top of each other. The main usage

of CardView is that it helps to give a rich feel and look to the UI design. This

widget can be easily seen in many different Android Apps. CardView can be used

for creating items in listview or inside Recycler View. The best part about

CardView is that it extends Framelayout and it can be displayed on all platforms of

Android.

Relative Layout

The relative layout is used to arrange the child views in a proper order which

means arranging the child objects relative to each other. Generally, if we create an

application using linear layout that consists of 5 buttons. Even if we specify wight

and gravity properties they will not be relatively arranged. To arrange them in a

proper order we need to use the relative layout. To arrange them we need some

advanced properties. Basically, we use layout_width, layout_height, layout_text

properties while creating an application using the linear layout. But we need some

more advanced properties which are supported by relative layout some of the most

used properties are listed below

 layout_alignParentTop

 layout_alignParentBottom

 layout_alignParentLeft
12
  layout_alignParentRight

 layout_aligncenterHorozontal

 layout_centerVertical

 layout_above

 layout_below

ScrollView

In Android, a scrollView is a view group that is used to make vertically

scrollable views. A scroll view contains a single direct child only. In order to place

multiple views in the scroll view, one needs to make a view group(like

LinearLayout) as a direct child and then we can define many views inside it. A

ScrollView supports Vertical scrolling only, so in order to create a horizontally

scrollable view, HorizontalScrollView is used.

EditText (Widget)

EditText widget refers to the elements of the UI that helps user interacts with

the Android App. EditText is one of many such widgets which can be used to

retrieve text data from user. EditText refers to the widget that displays an empty

textfields in which a user can enter the required text and this text is further used

inside our application.

TextView (Widget)

TextView in Android is one of the basic and important UI elements. This

plays a very important role in the UI experience and depends on how the

13
information is displayed to the user. This TextView widget in android can be

dynamaized in various contexts. For example, if the important part of the

information is to be highlighted then the substring that contains, it is to be italicized

or it has to be made bold, one more scenario is where if the information in

TextView contains a hyperlink that directs to be a particular web URL, then it has to

be spanned with hyperlink and has to be underlined. Have a look at the following

list and image to get and idea of the overall discussion.

Spinner

Android Spinner is a view similar to the dropdown list which is used to select

one option from the list of options. It provides an easy way to select one item from

the list of all values when we click on it. The default value of the android spinner

will be the currently selected value and by using Adapter we can easily bind the

items to the spinner objects. Generally, we populate our Spinner control with a list

of item by using an ArrayAdapter in out Java file

Button

In Android applications, a Button is a user interface that is used to perform

some action when clicked or tapped. It is a very common widget in Android and

developers often use it. This widget makes out application interactive.

ImageButton

Android ImageButton is a user interface widget which is used to display a

button having image and to perform exactly like button when we click on it but

here, we add an image on Image Button instead of text. There are different types of
14
buttons available in android like ImageButton, ToggleButton et.

We can add an image to the button simply by using attribute android:src in

activity_main.xml file or by using setImageResource() method.

In android, we can create ImageButton control in two ways either manually or

programmatically

Output on Real Device

Figure-2.5

15
2.3 History Screen Layout

This screen is comprised of Constraint Layout, Toolbar and RecyclerView.

When user visits this screen, can see all the word meanings has been searched and

can delete the word meanings from the history if user thinks that it is not worth to

keeping this word meaning. Because It is very important to see the history whatever

has been searched if needed we can refer the history and will be able to recap

whatever we have forgotten.

Constraint Layout

Toolbar

Recycle View
Item1
Item2
Item3

Item4
Item5

Item6

Item7

Figure-2.6

16
Constraint Layout

ConstraintLayout is similar to that of other View Groups which we have seen

in Android such as RelativeLayout, LinearLayout, and many more. This layout

provides the ability to completely design your UI with the drag and drop features

provided by the Android Studio design editor. It helps to improve the UI

performance over other layouts. With the help of ConstraintLayout, we can control

the group of widgets through a single line of code.

With the help of ConstriantLayout, we can easily add animations to the UI

components which we used in our app. In most of the cases, the result obtain will

not be the same as we got to see in the design editor. Linear Layout provides

usability with which we can equally divide all the UI components in a horizontal or

vertical manner using wight sum but in Constriant Layout we have to arrange this

UI component manually.

Recycler View

Recycler View is a ViewGroup added to the android studio as a successor of

GridView and ListView. It is an improvement on both of them and can be found in

the latest v-7 support packages. It has been created to make possible construction of

any lists with XML layouts as an item which can be customized vastly while

improving on the efficiency of ListViews and GridViews. This improvement is

achieved by recycling the views which are out of the visibility of the user. For

example, if a user scrolled down to a position where item 4 and 5 are visible; item 1,

2 and 3 would be cleared from the memory to reduce memory consumption.

17
Output on Real Device

Figure-2.7

18
2.4 Camera Screen Layout

This screen comprised of Toolbar, CardView and RelativeLayout. Toolbar is

used to show the heading of the screen when screen is opened. CardView is used to

show the detected text form the image. Relative Layout contains three text buttons

which is used to show capture the image, for detecting text from the image and if

needed to translate one button can send the text for translation and we can translate

the text easily.

Linear Layout
Toolbar
ImageView (Widget)

Card View
Scroll View

TextView (Widget)

Relative Layout
Button (Widget)

Button (Widget)

Button (Widget)

Figure-2.8

19
All the views and widgets are defined above. In this design We have shown that

what are the views and widgets we have used to capture the image and then

detecting the text from the image.

Output on Real Device

Figure-2.9

20
 CHAPTER-3
REQUIREMENTS & IMPLEMENTATION

3.1 Requirements

Requirements of application means what are tools and technology has been

used to develop the application. What are the API(Application Programming

Interfaces) have been used. What are the Hardware requirements and permissions

which is required to run the application.

APIs & Permissions:

 Programming languages: Java, XML

 Built Using: Android Studio

 API Used: Android ML-Kit for Translation one language into another

 Hardware Permissions: Camera and flashlight to capture the image

 API used for Hardware permissions: CameraManager,

PackageManager

3.2 Implementation

This application is written using java programming language and in Android

Studio which is used to develop the mobile applications. We have two choices to

develop a mobile application either we can write the working of application using

Java or Kotlin. This application is written in Java because I was familiar with java

language very well to write this application in java is very convenient for me.

Designing of screens has been done using XML(Extensible Markup

21
Language) which is basically used to design the layouts for the mobile applications.

It is like HTML (Hypertext Markup Language) which is used to design the web-

pages layouts. First Screen where we have used an Animation this animation is

taken from the Lottie website we have downloaded the .json file and with the help

of AnimationView provided by Android we have set the src as .json file. And the

second screen where the main functionality has been implemented which translating

the language from one to other. To accomplish this task we have have used

Google’s ML-kit for Translating one language into another. To detect the text from

the image we have used another Google’s ML-kit for text detection from the image.

These are the Android ML APIs which is provided by the Google to accomplish our

task. We can take the input using mobile keyboard and using Google’s voice

detector microphone. And we have also used one image button to reset the text on

EditText and TextView. To select the language we have used one spinner for source

language selection and one spinner for target language selection. To set the

language in spinner we have used AdapterView. To go in History page we have

used OptionMenu(which is shown as triple dots in Toolbar of the main screen).

When user clicks the triple dots one item of option menu is shown if use clicks over

that item a new History Intent gets open where user can see the searched word

meaning. For detecting the text from the image we have implemented it using

Google’s ML-kit API for Image to text detection. When user clicks the camera

button of main screen it directs the use to the intent where user can capture the

image and detect the text from the image and if needs translation use can click the
22
need translation button to get the translation of detected text.

To store the history of word meanings we have used ROOMDB provided by the

Android Studio library.

ROOMDB

A DBMS which is used to create a Database using the internal storage of

mobile phone it is like a wrapper over SQLite DB here we have to use some

annotations to perform CRUD operations which makes this DB very powerful and

very efficient. We have used this DB to make a local Database to store the word

meanings which has been searched by the user. Creating a local Database makes the

application more powerful because having past searched word meanings is very

important we can refer it in future in case if we forgotten the word meaning. Each

time when we have to create a local Database using ROOMDB we create three

things

 Model Class

 ModelDAO interface

 ModelDatabase abstract class

Model Class

This is the class where we define the schema of the Database how many

columns are there in Database. Name of the table, primary key, foreign key and

constraint.

ModelDAO

This is the interface where all the CRUD operations is defined using
23
ROOMDB annotations like (insert, update, getting all the data, delete) all the

important operations are defined in this interface

ModelDatabase

This is an abstract class which is used to create the instance of ROOMDB so

that we can perform all the operation defined in ModelDAO interface. It is used to

create a singleton class so that we get only one instance of the ROOMDB. To show

all the data present in Database to the user we have used Recycler view to

accomplish this task. In Recycler view we have to only create one layout to show as

the item of recycler view.

24
 CHAPTER-4
DATA FLOW DIAGRAM

4.1 Main Screen DFD

DFD (Data Flow Diagram) which is used to show how data is flowing in the

application.

Figure-4.1

25
4.2 History Screen DFD

History Screen DFD (Data flow Diagram) is to show how the data is

shown in the application from the database.

Figure-4.2
26
 CHAPTER-5
FUNCTIONALITY & WORKING

5.1 Functionality of Application

As name suggests this mobile application is used to translated languages to

make conversation easy for the people. The main functionality of the application is

that user can translate the text using tiping and also using speaking in microphone

provided in the application. After translating user can reset the text boards using

reset button. If user needs to translate some image text user can do by clicking the

camera icon present in main screen which will direct him to the Object Scanner

Screen where user can take the image of the application and also can get the text on

the image if user want to translate he can translated using Need Translation Button

provided on the Object Scanner Screen. Whatever user will search it will be saved

into the History where he can refer in future in case if he forgets any meaning. As

we all know today almost everyone have a smart phone and people getting lazy as

technology is helping them a lot so adding voice translation is very important for

this application. And one more functionality which is added which user can listen

the translated text just clicking the speaker image provided in the application’s main

screen. Because sometimes we don’t know the pronunciation of the work which has

been translated once we listen the pronunciation we feel confident when we speak

to someone. The key functionality which we have also added when user selects the

language from spinner the microphone takes the input in that language. And speaker

also speaks in the same language as the target language has been set.

27
5.2 Working

The main work of the application is to translate the language smoothly either

input is provided using keyboard or microphone present in application. When user

opens the application a main screen is opened after a millisecond of animation on

the main screen there is many functionality but we will explain each function

working one by one. Let’s start with edit text where the input provided by the user

is set when user clicks on the edit text area automatically the keyboard of the device

comes user can tipe whatever he wants to translate then selecting the language from

source spinner is very important because without this user will get an Toast

Message that source language is not selected then use have to select the target

language in which user want to translate the language if he will no select the target

language he will get a warning Toast Message again select target language once

these steps has been done user can press translate button provided in between the

both spinner.

Working of Microphone

If user does not want to user key board to take the input, he can use the

microphone provided in the application for this he has to select the source language

to translate otherwise he will get a Toast Message again source language is not

selected. Once source language selected user can press the microphone icon

provided in the application one small window will be opened now user can speak

whatever he want to translate when user will stop speaking the text will be shown in

the edittext and next process is same described in above paragraph.

28
 CHAPTER-6
CONCLUSION

This application which is used for translating the language is very demanding

application almost everyone needs this application. This application can work like

dictionary for normal human people and for working professional it is very

important because they have to visit other state, other country and it is also not

possible to learn all states and countries language so having this application is very

important. Almost all functionality and DFD, layout Design is explained in above

chapters of this report. This application is supporting 14 languages right now but in

future it will increase. This application functionality is amazing one can use it at any

time rather than writing in the copy one can search here it will store the meaning of

the searched word in history screen so that in future one can refer it. We have not

make it too much messy it is very clean only one meaning appears for each text

which user want to translate.

29