Design & Developing of the application

This document provides insights into the design and development process of an application. It covers tools like Figma and Material Design, Android Studio, Gradle plugin, WebP, and Firebase tools. The document also discusses the different phases involved in the design and development process.

1
Design & Developing of the application
Institution
Date
Name

2
Figma design (https://www.figma.com)
This is a collaborative interface design tool that is well known for its better ways for
designing software prototypes and gathering feedback in one place from a number of experts.
This tool allows for the undertaking of these design issues in a computer browser after which the
designs can be sent via links to any person who would want to check and contribute on the
designs. Many times, every person who contributes using this tool owns their section of the
creative process and also stays synchronized across any platform along the way.
Material Design (https://material.io/tools/icons/?icon=pie_chart&style=baseline)
Material design is a user interface design language that was created and launched by
google in 2014. It was made in order to ensure that the several company products including
android interfaces are unified. In order to achieve this unification, google decided to interface
objects and made them from their metaphors in the real world. For this case, paper was the best
metaphor since it can be positioned in a 3 dimensional space, contains an shadow, accelerations
and the speed of motion yet it is thin and flat.

3
Explicitly about symbols and SVG arrangement to spare the symbols. (for instance, Icon
text styles are mapped to individual Unicode characters, empowering you to store different
symbols inside a solitary document. Text styles are vectors, so symbols scale to any size. And
Scalable Vector Graphics (SVG) is an XML-based vector graphics format that can scale to any
size without losing clarity.)
android studio 3.3.2
This is and Intergrated Development Environment for building android apps using java
and deploying them to the google play platform. Google develops this IDE and has continuously
been keen on making improvements since its original version.
The Gradle plugin in android
Gradle is a propelled build toolbox that oversees conditions and enables you to
characterize custom form logic. Android Studio utilizes a Gradle wrapper to completely
incorporate the Android module for Gradle.

4
WebP in android
WebP is fundamentally a picture record design that gives a lossy compression like JPEG,
It additionally gives transparency like PNG. The best thing about webP pictures is that it
decreases the picture estimate without diminishing the picture quality.
Firebase tools (such as database, storage, security, and analysis)(
https://console.firebase.google.com)
Firebase is a portable and web application development stage that gives engineers a
plenty of instruments and administrations to enable them to grow superb applications, develop
their client base, and acquire more benefit. In 2011, Firebase was a startup called Envolve. As
Envolve, it furnished engineers with an APIs that empowered the incorporation of online chat
usefulness into their site. Firebase was later bought by google and is being used by developers to
develop fast and efficient web applications
What are the design phases? And how many phases you include in your development?
We had distinctive stages amid building up our applications. The stages as pursued: in
planning a guide we had utilized Figma into two stages. In android three stages, and in character
structure we had two stages.
For building up our application, we had utilized Figma, military structure, android studio
rendition 3.3.2. We had utilized Java language to execute our coding and XML to make the page
format. Firebase for database, stockpiling, security, examination, and maintenance.
Figma Phases:

5
Before we started using Figma. First, we had drawn a mock road map in a separate paper
sheet to follow our prototyping process for our application. The second phase we had using
Figma design to build the layout and the road map of our application. Figma contains layers,
design, prototype, and coding. We had to create the first draft of our application which includes
all the pages in our application. In Figma we need to set the screen layout of the mobile we will
be applying our application in it so we had set our layout for android tablet. Then we had used
tools for the fields in Figma to build up our draft template of the application and how it going to
look like. We had created our first template of the application and we had test it in Figma how
the prototype is linking to each other by clicking in each button it will be navigating the links
with other pages. Our scenario in Figma will be once the user clicks in the home page that user
having a google account he will log in through their account from the login page. In case the user
doesn’t have any account the user has to click to sign up button that will navigate him to sign up
page for registration so he can fill the details. Once the user completes it the user will get a
password in his account that he provided to send verification password to it. The screenshot of
Figma will be included in the appendix. We had created a total of 13 pages in Figma which are
representing our application mock map. While assigning each text field to a specific name and
we need to have an icon to represent an image and links…etc. Then we had download icons that
we are requiring in our mock map from material design. We have assigned each icon from
material design to a specific name and action. In our first phase of the mock map we want it to be
applied and design as per our visualizing it into android studio. After completing the design, we
had tested the functionality of the first draft and the layout of the design. In the second phase
which we label it as a Main design in Figma. We had changed some of the text fields, captions,
buttons and prototyping links to the pages from the first phase. To enhance the process of the

6
pages we removed login page and sign up page since the user will be already having a google
account linked from firebase. So in the second phase, we are having a total of 11 pages to test
them. Finally, the pages as followed “Home, categories, Therapist profile, Autistic child profile,
Autistic child performance, Therapist class, Emotions, In House, In School, Outside, and new”.
Android Studio:
After completing Figma final design. We had to start using Android Studio 3.3.2. which
is having five phases to implement our application. The first Phase, creating the pages as it was
included in the mock road map from Figma. The difference between Figma and android studio in
a number of pages. In Figma we had just a single page for each page we need to structure
however in android we required to have two pages which are in a various organization one will
be in XML plan and the second will be in Java group. The first stage in creating we have to pick
an undertaking name so we had picked "obscure" in the first stage in firebase and android studio.
Until we found a name for our application "Al Natiq". While making the pages we pick void
movement each page will be consequently made two pages one in XML design and the second in
Java page group. We had made an all-out number of pages 30 utilizing requirement design they
are as pursued 15 pages in XML and 15 in Java as from the primary period of Figma figure ().
The page in XML and structure the catches, content view, and pictures will store under assets
following records pictures will be put away under drawable, text style and type… and so forth
will be put away under style and string will store all the doled out factors in the application. We
had begun making the "Home exercises" So we had begun to relegate each quality in the present
page and test the application for the primary stage. They are in the application view as buttons:
Therapist profile, Autistic child profile, categories, therapist class, and Autistic child
performance. In the therapist profile, the therapist has to fill the details which are designed on his

7
page after completing it will be stored in the database. Autistic child profile to register each
autistic child under the therapist. Categories including all the categories it will navigate to (In the
house, In school, outside, emotions, and add new category). Therapist class the therapist has to
register each autistic child under specific categories. Autistic child performance this page will
view the performance of the child during the sessions with the therapist. So we write two codings
one in XML which are (android:onClick=” CategoriesClicked”) and in Java figure().
The first phase issue appears with us that the layout of the design preview in the android
studio was mocked and we are unable to view any constraint because the constraint layout wants
not to download in the Android library as shown in figure (). Once we had configured the issue
and download constraint layout in the library. We had resolved the issue by including the
constraint layout in gradle built in figure (). Now we have the ability to view and work with
XML design pages and we run the application to view if the problem has been and it run
successfully. The second issue was while we try to run the application in the device once we try
to click on the image which is linked with the buttons the application immediately will stop
working and closed figure ().
The second phase was developed as a result of the above issues, we have a total number
of pages around 27 pages which are allocated as followed 14 pages in XML and 13 pages in Java
as in figure (). Also, we had implement text to speech in this phase figure ().

8
We had changed some the page’s layout from constraint to Linear layout for our
effectiveness of the application to be more flexible once the user using it. However, we had
removed the following pages from the first phase are login, sign up, and forget password since
we had to implement firebase dependency.
Modified pages as the following Home, Therapist, Add child profile, Therapist class,
categories, emotions, In the house, In school, outside, and new categories, child performance.
Added new pages such as child items and video page. We will be explaining the details of each
page and what each page represent.
First of all, create database named users in firebase which include the therapist profile
registration which includes the following details Therapist id google account, gender, Institution
name, name of the therapist, phone number, and specialty figure ().
Second, we change the label name of Autistic child profile to Add child profile. We had
created a database named A_child in firebase which includes the following fields child name,
Institution name, category list which will be assigned by the therapist using spinner, and we had
added two features in XML page categories list, choosing a radio group button between gender
female and male, phone number, and child civil id which will be linked by therapist id while
registering the child figure ().
We created a new page for text to speech in XML format under the name of Child_item
the page to be linked with database from the firebase. Which include the following fields image,
child name, and button for text to speech figure (). Creating a database for image and storage in
firebase under the same name (images) figure (). Images database was including the following
fields in string values: Image name, Image description, categories, and links. We need to copy

9
the links from images storage and past it in links under database images. So the correct image
will be appearing with the text to speech functionality. During the creation of database image, we
had added additional space in classroom, living room and image categories spell wrong in
playground image which resulted in the text to speech functionality was not working and the
image appearing in the application figure (). Including database dependency in Gradle build in
for recycler view before we added in other pages’ figure (). In the categories page, we applied
the recycler view to include all the categories layout to be dynamic. In the emotions category, we
had included the prototyping process similar to categories. This prototyping process and design
will be repeated for three pages in format but for each recycler view will be having different
numbers for each other.
Coding in Java:
We had included the dependency of the database in gradle built in 13 pages. While
creating those pages we need to grant permission to access the firebase database. Once we had it
we started to access the cloud firebase occasion from specific activities for

10
Example, for creating a database for users: FirebaseFirestore DB =
FirebaseFirestore.getInstance();
Link the database into users collection in firebase
DocumentReference docRef = db.collection (collection path: “users”).document
(user.getEmail());
We had used the above coding to grant access through email id for users.
The source can be CACHE, SERVER, or DEFAULT
Source source= Source.SERVER; (here we want to get the source from the server in
firebase).
Get the document forcing the SDK to use the offline cache
docRef.get(source).addCompleteListener(new OncompleteListener<DocumentSanpshot>
the full coding of the home page will be in the appendix.
The third issue while running the application we noticed the slowness of the application
while it's running in android. For those two issues solution was to reduce the size of images in
the application which is under drawable was the reason for the two issues. The size was too large
which casing the above second and third issue figure (). After resizing all the images using WebP
and restoring the images again in the storage removing all the previous image before resizing
figure ().
The third phase developed because of the above and current issues. We had faced other
issues while testing our application that how can the therapist add categories to the application?

11
There is no option to add. Also, there is no option to add another image into the current
categories. How the therapist can identify the performance of the child? Do we need to link the
child performance in the categories to therapist id? But how it will be going to provide us the
result?
We notice that the layout of our designs in XML was static and we need to change it into
dynamic. We had added another feature into our application so the therapist or any other user can
have the flexibility to add images and category as they want. It will be uploaded into the firebase
storage in real-time. Additional 6 pages have been added into our application which is allocated
as followed in XML 3 and 2 pages in Java. Develop another page specifically to meet the
requirement of the therapist in case they want to add a new category which is represented as
sessions in the institutions. Assign a database table in firebase for new categories including the
fields in string values such as category name, category description, category links, therapist id.
The scenario of the process of adding a new category with the image as followed: Therapist
chose to add new category button in our app register a specific name and descript of the
category. In real time his id will be stored from his google account. Adding categories includes
the image of the category will be name and description of the image will be stored in firebase
storage which is in XML as add category activity. In change image button for uploading category
image either from the device gallery or take a new image by using the camera from the device.
Category links will be stored in database and storage linking the image reference. In category,
Item will be only using two attributes one image of category and the second will be category
item label as text view. While running the application performance efficiency faster and include
all the images that we required or taken a new image will be stored in database and storage in

12
images firebase while implementing a floating action button and using prototyping process in
each category page.