00:00:00
Hello friends Welcome to our Channel
00:00:03
today I am starting a new tutorial
00:00:05
Series in this series we will learn how
00:00:08
to build a McQ app that is multiple
00:00:11
choice question app
00:00:12
we will use Firebase as a backend
00:00:15
service
00:00:16
and also later we will also build an
00:00:19
admin panel for this app
00:00:22
so our app will look like this
00:00:26
this is our app
00:00:28
and in this we have a first we have a
00:00:31
login screen
00:00:32
then if we login let's login
00:00:39
choose an account
00:00:47
after login we have a list of categories
00:00:51
in this list we are also showing number
00:00:54
of tests in a particular category like
00:00:57
GK category have three tests food
00:01:00
category have 20 tests okay so each
00:01:03
category will display the number of
00:01:05
tests it has
00:01:07
okay and also in the bottom we have a
00:01:10
bottom bar
00:01:12
in which first we have a home button
00:01:15
then we have a leaderboard button it
00:01:18
will redirect us to the leaderboard
00:01:20
activity
00:01:21
in leaderboard we have top users of our
00:01:24
app
00:01:25
sorted by their scores
00:01:28
then we have uh My Account button
00:01:32
which will show the account information
00:01:35
of the user its Rank and overall score
00:01:38
and buttons
00:01:39
for leaderboard saved questions my
00:01:42
profile Etc handle log out button
00:01:45
so let's come back to the home
00:01:49
activity
00:01:50
in this we also have a drawer
00:01:54
when we click on the drawer it will open
00:01:56
a drawer in this we have a profile image
00:01:59
and the name of the user then we have
00:02:02
different
00:02:03
links for my account leaderboard
00:02:06
bookmark questions
00:02:08
Etc
00:02:10
then if we click on any of the category
00:02:12
we will be redirected to the test
00:02:14
activity it will show the number of
00:02:17
tests in that category like GK have
00:02:20
three tests so it is showing three tests
00:02:23
it is also showing the maximum score in
00:02:26
a particular test by the user like we
00:02:30
have scored maximum 80 percent in the
00:02:32
first test so it is showing our maximum
00:02:35
score that is 80 percent
00:02:37
and in the second and third we have zero
00:02:41
score
00:02:41
so it is displaying 0 0 okay
00:02:45
it is also displaying the score in the
00:02:48
progress bar okay it is our maximum
00:02:51
score so when we click on this test
00:02:54
button
00:02:55
then it will open this start quiz
00:02:58
screen in this it will display number of
00:03:02
questions in the test and the time
00:03:05
uh time of the test like this test is of
00:03:09
25 minutes and it it contains five
00:03:12
questions and our best score in that
00:03:14
test like it is our batch score in this
00:03:17
test okay
00:03:19
and when we click on the start button it
00:03:22
will start our test so our test is
00:03:25
started and our counter is also started
00:03:30
so like this test is of 25 minutes so
00:03:34
this starts our counter
00:03:36
and here we have questions and different
00:03:40
options four options
00:03:42
and also we have a bookmark button by
00:03:45
using this button we can bookmark any
00:03:47
question like this
00:03:49
OK this way we can bookmark any question
00:03:52
and also it is displaying question
00:03:56
number like it's question number one out
00:03:59
of the five question
00:04:01
we can go to the next question by
00:04:02
clicking on this button
00:04:05
also we can come back to the previous
00:04:08
question by clicking this button
00:04:10
and also we can go to the next question
00:04:12
by sliding the Sorry by sliding
00:04:16
this way
00:04:18
by sliding we can
00:04:20
go to the next or previous questions
00:04:23
okay
00:04:24
and also we we have a mark button we can
00:04:28
mark the question for review like if we
00:04:30
press this button
00:04:31
it this question is marked for review
00:04:34
so similarly we can mark the question
00:04:36
for review also and we have a clear
00:04:39
selection button
00:04:41
and like if we select any option like if
00:04:45
we select this we have selected the
00:04:48
answer for this question
00:04:50
then we go to the next question and we
00:04:53
have selected the answer for this
00:04:54
question also
00:04:56
then this
00:04:59
this is the third question
00:05:01
and also
00:05:03
we can check the list of the questions
00:05:07
from this button
00:05:09
if we click this button it will open the
00:05:11
list of the questions it will also
00:05:13
display which questions we have answered
00:05:15
and which are unanswered question and
00:05:17
which question we have marked for review
00:05:19
like as it shows green color is the
00:05:24
answered one so we have answered the
00:05:26
first and third question and review is
00:05:29
pink color is in pink color so we as we
00:05:33
have marked the second question as for
00:05:35
review so it is showing this in pink
00:05:38
color and red is for unanswered this
00:05:42
this question is our unanswered question
00:05:44
we haven't answered this question yet
00:05:46
and this is not visited question means
00:05:49
fifth question we haven't visited this
00:05:52
fifth question yet okay
00:05:54
so this tells us the information about
00:05:57
the all the questions okay from here we
00:06:01
can also go to the go to any questions
00:06:04
directly like if you want to like we are
00:06:08
on the fourth question and if you want
00:06:10
to go to the first question if we click
00:06:12
on this one we will be redirected to the
00:06:15
first question so this is our first
00:06:17
question okay that way we can go to any
00:06:20
question by clicking this and these
00:06:23
buttons okay
00:06:24
so if we close this
00:06:27
and here we also have a submit button uh
00:06:31
so if we want to submit the test we will
00:06:34
click on this button
00:06:36
it will ask for the confirmation and if
00:06:39
we confirm
00:06:40
for submission we click on yes and it
00:06:44
will open our result so this is our
00:06:46
result analysis
00:06:48
our score is 40 that is 40 percent out
00:06:51
of 100
00:06:52
and this is the time that we have taken
00:06:55
for this test we have taken 3 minutes 18
00:06:59
seconds for this test and the total
00:07:02
number of question in this test is 5
00:07:05
and we have answered correctly for two
00:07:08
questions and for one question we have
00:07:11
answered wrong and two question we
00:07:14
haven't attempted we haven't answered
00:07:16
anything for two questions okay
00:07:19
so these are the five questions for to
00:07:22
correct one wrong and two unattempted
00:07:24
questions okay
00:07:25
so these are the summary of our result
00:07:29
and here we have we can also reattempt
00:07:32
this test by clicking here and also we
00:07:35
can check our answer sheet which
00:07:37
question we have answered correctly and
00:07:39
which wrongly
00:07:40
by clicking on this view answers so if
00:07:43
we click on this view answers so it's
00:07:45
our answer sheet so as you can see we
00:07:49
have answered first question correctly
00:07:51
we have checked the option b
00:07:54
and for second question also we have
00:07:57
answered it correctly we have clicked
00:08:00
the third option that is correct
00:08:03
for third question we have given the
00:08:05
wrong answer so it's our wrong one and
00:08:09
fourth and fifth we haven't answered so
00:08:11
these are unanswered question
00:08:13
unattempted questions okay
00:08:15
so this way we can check our answer
00:08:18
sheet also and if we go back so it's our
00:08:21
score analysis then from here we can
00:08:24
also go to the leaderboard to check our
00:08:26
ranking so we need to click on this
00:08:29
check your ranking in leaderboard if we
00:08:31
click on this we will redirect it to the
00:08:34
uh leaderboard okay in this leaderboard
00:08:37
we can check
00:08:38
that our rank is 10 we are on the 10th
00:08:42
place so it is this it will display top
00:08:44
10 users only okay like we have total
00:08:48
users 1500 one and out of these 1500 it
00:08:52
will show only top 10 users okay
00:08:55
so this is the app that we are going to
00:08:58
build so let's start building this app
00:09:00
so
00:09:02
open Android Studio
00:09:05
and here create a new project
00:09:08
new project
00:09:12
and here select this option navigation
00:09:15
drawer activity
00:09:18
not the empty activity select this
00:09:20
activity that is navigation drawer
00:09:23
activity then click on next
00:09:27
here enter the name of the application
00:09:30
we'll name it
00:09:33
exam
00:09:35
practice
00:09:40
okay com dot MTC it's our package name
00:09:45
and it's our location of our app you can
00:09:49
change the location from here and here
00:09:51
you can select the minimum API level
00:09:54
and here we we will select this we will
00:09:58
use Android X Library so you need to
00:10:02
click on this use Android X artifacts
00:10:05
in some studio Android Studio versions
00:10:08
It Is by default on
00:10:11
so in our in our version we need to
00:10:15
check this to enable Android X okay so
00:10:19
we'll use Android X Library
00:10:21
so after this we will click on finish
00:10:28
so our app is initialized and now uh
00:10:32
create a new activity that is Flash
00:10:34
activity so go to Java
00:10:37
here in our package
00:10:40
right click on this package name and
00:10:42
click on new activity and select empty
00:10:45
activity
00:10:47
and here name it splash
00:10:51
so we will create a splash activity
00:10:54
and then click on this finish button
00:11:00
okay so our Splash activity is also
00:11:02
initialized now go to its XML file click
00:11:06
on this XML file and here go to the
00:11:09
design tab
00:11:11
and design tab here we need an image and
00:11:15
a text view it's the starting screen of
00:11:17
our app so image view we need a logo for
00:11:22
our app so let's copy the logo
00:11:26
you can select your logo I will choose I
00:11:30
will copy my logo copy
00:11:33
and I will paste it in
00:11:35
resources drawable
00:11:38
right click on drawable and paste okay
00:11:43
drawable
00:11:46
I will name it app logo app underscore
00:11:48
logo.png Okay click on OK
00:11:52
so we have our logo now
00:11:55
now
00:11:57
now drag an image view from here to the
00:12:02
middle
00:12:03
and select our logo image so click on
00:12:07
our project and here from here select
00:12:10
our image that is app logo then click on
00:12:13
OK
00:12:14
so now we have our image place it in the
00:12:17
center and constraint it from Left Right
00:12:21
top and bottom okay
00:12:25
and select
00:12:26
0 0 from all the sides
00:12:30
so that image will be in the center okay
00:12:33
0
00:12:35
and right also 0 okay and width and
00:12:39
height wrap content
00:12:41
choose width and height repentant so now
00:12:43
image our image is in the center and now
00:12:47
uh drag a text View
00:12:50
and place it in the bottom of the image
00:12:53
View
00:12:53
and constraint its stop to the bottom of
00:12:57
our image
00:12:58
and left and right to the parent left
00:13:01
and right to the
00:13:03
parent
00:13:04
so left margin select 16 right margin
00:13:08
also 16 and from Top select 6 32 select
00:13:14
64.
00:13:15
okay
00:13:17
so choose 64 so we have selected its
00:13:21
margin
00:13:22
now come to the text tab okay so go to
00:13:26
the text tab
00:13:28
here in image view select its uh width
00:13:32
and height so we will select it 120 DP
00:13:37
and height also 120 DP
00:13:41
okay now it seems fine now come to the
00:13:45
text View
00:13:46
in text view uh change its text
00:13:54
change its text to exam practice
00:13:58
that is our app name
00:14:01
okay let's choose this text from the uh
00:14:05
app name String
00:14:07
so at the rate string app name okay
00:14:12
so it is exam practice we need a space
00:14:15
in between this also so go to the string
00:14:19
go to values in values go to Strings dot
00:14:23
XML and here we have a app name
00:14:26
so ah put a space in between this so
00:14:30
exam practice now its fine go to the go
00:14:33
back to the
00:14:34
splash activity dot XML
00:14:37
now we have this
00:14:40
text
00:14:41
now let's uh
00:14:45
let's resize it change its size to
00:14:49
text size to 30 SP
00:14:55
okay okay it's good now
00:15:00
change its text okay we want to change
00:15:04
its background also
00:15:05
so let's change its background
00:15:08
so we need to create a background file
00:15:10
so go to the drawable folder and here
00:15:13
right click and create a new drawable
00:15:15
resource file
00:15:17
and name it uh gradient gradient
00:15:22
background
00:15:32
click ok
00:15:35
this is our background file here select
00:15:39
instead of selector we need a shape
00:15:43
and in this shape we need a rectangle
00:15:47
shape
00:15:48
so
00:15:49
here
00:15:53
here we will
00:15:54
add a shape
00:15:57
rectangle okay
00:15:59
now we have a rectangular shape and in
00:16:01
this we have a gradient
00:16:06
now we will put an oh sorry put a start
00:16:10
button start a color
00:16:13
okay start color is primary
00:16:15
and then
00:16:18
we need an end color and color primary
00:16:21
dark
00:16:23
okay and also
00:16:26
uh we need an angle
00:16:29
angle let's say 1 35
00:16:33
Okay so
00:16:35
it seems fine okay so this is our
00:16:39
gradient background
00:16:41
okay now change the colors scheme also
00:16:44
we need to change our colors color
00:16:46
scheme so go to the values in values
00:16:50
click on colors.xml okay here we have
00:16:54
our colors so we will change our colors
00:16:57
according to our application so
00:17:00
go to our colors.txt file
00:17:04
so in this file we have our color codes
00:17:08
I will put its links Link in the
00:17:10
description you can download from there
00:17:12
okay
00:17:14
so it's our primary color copied
00:17:19
then go to the studio and here color
00:17:22
primary
00:17:24
paste here
00:17:25
so it's our primary color
00:17:28
now
00:17:30
primary dark copy this
00:17:37
paste
00:17:39
now we have color accent color accent is
00:17:42
FFF that is white six time f
00:17:46
okay so it's white
00:17:48
so we have set our colors now go to the
00:17:51
gradient background.xml so it's our
00:17:54
background file
00:17:55
okay it seems fine
00:17:58
now go to the splash activity.xml file
00:18:02
so it's our Splash activity here
00:18:05
in the main layout that is constraint
00:18:07
layout
00:18:08
set its background background to uh
00:18:13
to gradient background that we have
00:18:16
created okay
00:18:18
so it's our background now go to the
00:18:22
text View
00:18:23
here change its color
00:18:27
so text color
00:18:30
and set its color to white okay
00:18:34
ah that is our color accent
00:18:38
so our color accent is our white color
00:18:40
so we have changed it to White
00:18:44
Now set its gravity also gravity to
00:18:48
Center
00:18:49
okay and then go to the design tab
00:18:53
here in design tab click on this text
00:18:57
View
00:18:58
and uh change its width to match
00:19:03
constraint
00:19:05
okay and also set its ID
00:19:07
and set it ID to app name
00:19:12
okay app name it's our it's
00:19:16
the ID of this text View
00:19:18
okay now
00:19:20
we have done with this XML file now go
00:19:24
to the splash activity dot Java file
00:19:26
okay
00:19:27
in this Java file
00:19:29
create a variable
00:19:33
private text View
00:19:38
and name it app name
00:19:43
and here
00:19:45
set its value
00:19:48
find view by ID
00:19:50
r dot ID dot app name
00:19:53
that we have given in the XML file
00:19:56
sorry
00:20:01
put the semicolon here
00:20:04
now we'll change the font of this text
00:20:07
view okay now so uh we will use typeface
00:20:14
type face Android graphics typeface
00:20:19
typeface is equal to
00:20:22
resource compact resource
00:20:28
compact
00:20:30
dot get font
00:20:34
and here first is our context that is
00:20:37
this
00:20:38
then our ID of our font
00:20:44
so we don't have a font
00:20:47
so let's copy our font file also
00:20:50
so go to our utilities
00:20:52
so this is our font that we are going to
00:20:55
use I will give its link also in the
00:20:58
description you can download all the
00:21:00
utilities from the description okay
00:21:02
so I will copy this
00:21:05
and now
00:21:08
paste it in drawable
00:21:10
sorry not drawable
00:21:12
create a new folder in resources click
00:21:14
on resources
00:21:16
right click on this and select new
00:21:19
and a directory select directory
00:21:23
and name it font
00:21:26
okay and then click on OK OK so now we
00:21:30
have created a new directory font now
00:21:33
paste the font that we have copied in
00:21:35
this directory so right click on this
00:21:37
and click on paste
00:21:39
and click ok
00:21:41
so now we have our font in this phone
00:21:44
directory
00:21:45
so now come to our Java file
00:21:48
plus activity.java here
00:21:50
we need uh ID of this font so we will
00:21:55
type r dot ID
00:21:58
dot name of the font that is
00:22:01
sorry r dot font not ID r dot font font
00:22:06
is our folder then we have the name of
00:22:08
the font that is Blacklist
00:22:11
okay so now we have our font
00:22:14
now you will set this phone to the app
00:22:17
name so appname dot set phone
00:22:22
set
00:22:23
font
00:22:25
sorry to set typeface
00:22:28
set typeface
00:22:30
and we will pass the typeface we created
00:22:33
above okay
00:22:34
so this way we have set the font of this
00:22:37
app name this text View
00:22:41
now we will create a small animation to
00:22:44
this app name okay so
00:22:47
app name sorry
00:22:50
first create an animation so animation
00:22:57
animation or name it NM
00:23:03
is equal to animation util
00:23:07
animation utils dot load animation
00:23:12
now here we need a animation file
00:23:15
first we need a context so this is our
00:23:18
context and now we need ID of our
00:23:21
animation file
00:23:22
so we need to create an animation file
00:23:25
also
00:23:26
so go to the resources here in resources
00:23:29
right click on this and click on new
00:23:32
and click on directory
00:23:35
now create a directory called NM name it
00:23:39
NM and then click on OK
00:23:41
now we have a directory now right click
00:23:46
on this NM directory and create a new
00:23:48
animation resource file click on this
00:23:50
animation resource sorry
00:23:52
click on this animation resource file
00:23:57
now name it we'll name it
00:24:01
Maya name
00:24:04
you can name it anything you want now
00:24:07
click on OK
00:24:09
so this is our animation file
00:24:11
here I will create a scale
00:24:16
scale and we will
00:24:19
scale our text View
00:24:21
sorry
00:24:23
enter we will scale our text view from X
00:24:26
scale
00:24:28
from X scale 0.5
00:24:33
2x scale
00:24:36
1.5
00:24:40
then from y scale
00:24:43
0.5
00:24:46
2y scale 1.5
00:24:50
and our duration
00:24:54
so red duration Android
00:25:00
duration
00:25:06
duration let's say three seconds so 3000
00:25:09
milliseconds
00:25:12
and Pi vertex
00:25:15
Pi dot y 50 percent
00:25:19
and also pivot X
00:25:23
also 50 percent
00:25:27
okay so close this scale
00:25:32
so here uh what we have done is uh we we
00:25:37
have created an animation that will
00:25:39
expand our text View
00:25:42
from uh half of its size to 1.5 times of
00:25:47
its size so our text we will grow from
00:25:50
half its size to 1.5 time of its size
00:25:54
and the duration of this growing
00:25:56
animation is three seconds so our
00:25:59
animation will play for three seconds
00:26:02
okay now set this animation in the
00:26:04
splash activity so go to our splice
00:26:06
activity.java file
00:26:08
here
00:26:09
here select the animation file so r dot
00:26:12
NM
00:26:14
dot Maya name okay this is our animation
00:26:18
Now set this animation to the app name
00:26:22
so appname dot set animation
00:26:26
and
00:26:28
NM
00:26:30
okay so now we have also set the
00:26:32
animation successfully to our text View
00:26:36
now we will load the main activity okay
00:26:42
so we'll create a thread and from that
00:26:45
the thread we will load start our main
00:26:48
activity create a new thread new
00:26:52
thread
00:26:53
thread method and here
00:26:57
in this thread method start this thread
00:26:59
dot start and in this thread method
00:27:02
create a run method and that is public
00:27:05
void run
00:27:08
Okay so
00:27:11
this is l
00:27:14
override in this run method okay so now
00:27:19
it will run
00:27:21
in the next in the newly created thread
00:27:24
okay
00:27:25
so in this run method what we will do is
00:27:28
first we will uh create a slip
00:27:33
of three seconds
00:27:37
here okay click on this and press Alt
00:27:41
Enter
00:27:42
and Surround this with try catch okay
00:27:46
so we'll uh sleep this thread for three
00:27:50
seconds
00:27:51
and then we will start our activity so
00:27:54
intent will create an intent
00:27:57
intent is equal to new intent
00:28:02
and here
00:28:05
Splash activity dot this
00:28:09
comma main activity
00:28:12
dot class
00:28:15
so this is our intent now start activity
00:28:19
and we'll start this intent okay
00:28:25
so now uh This Thread will run and it
00:28:30
will sleep for three seconds and then it
00:28:33
will start our main activity after three
00:28:35
seconds okay for three seconds our
00:28:37
animation uh will be running okay so
00:28:41
that's why we have
00:28:43
put a sleep of three seconds here okay
00:28:47
now
00:28:49
it now we have done with our Splash
00:28:52
activity
00:28:53
now go to the values and in values
00:28:57
go to the styles
00:29:00
here styles.xml
00:29:03
and in this
00:29:06
here in parent app Theme
00:29:09
base theme that is our base theme
00:29:11
here instead of dark action bar replace
00:29:14
replace it with no action bar okay we do
00:29:18
not want an action bar default action
00:29:21
bar for our application okay so we have
00:29:25
changed the theme to no action bar okay
00:29:28
now
00:29:31
now replace the launcher activity with
00:29:35
Splash activity
00:29:36
so go to the Manifest
00:29:39
manifest go to the Android manifest here
00:29:43
here our main activity is our launcher
00:29:45
activity okay it's our launcher activity
00:29:47
that is main activity so you change it
00:29:50
to a splash activity okay Splash
00:29:54
activity so now it will our it will be
00:29:57
our main launcher activity
00:29:59
and please replace this place activity
00:30:02
to main activity okay so our main
00:30:05
activity is an ordinary activity and our
00:30:08
Splash activity will be a launcher
00:30:10
activity okay
00:30:12
so I guess that's it now let's test our
00:30:16
app
00:30:22
okay so this is our app our animation is
00:30:24
working fine okay as you see and after
00:30:27
three seconds we have our main activity
00:30:30
okay so this is our main activity
00:30:32
okay so our animation is working fine
00:30:34
let's run it again okay
00:30:37
okay we haven't closed our uh splice
00:30:41
activity we need to close this also
00:30:44
so let's run our app again
00:30:47
so this is our app this is our uh
00:30:51
animation and it's working fine okay
00:30:54
okay so our Splash activity is working
00:30:56
fine so that's it from this video uh if
00:31:00
from next video will work on Main
00:31:03
activity okay so that's it guys if you
00:31:05
like this video press the like button
00:31:07
and also subscribe to our Channel
00:31:10
thank you
