ONLINE Quiz App with FIREBASE 🔥 | Android Studio Tutorial | 2024

what is going on guys welcome back to another video of Android application development in Android Studio in this video we are going to create awesome Dynamic quiz application where we'll use Firebase realtime database to load all the quiz and questions from the cloud directly in our mobile application we'll be creating beautiful user interface so that user will be engaging in our application we can add multiple quiz models and multiple quiz questions directly in the Firebase realtime database so that it will be reflected in our application as you can see this is the homepage of our application we are going to create it will have mult multiple list of quiz models each quiz model have questions and certain time if you click on any quiz it will open up and it will start the quiz the timer will be started and we have to answer the question in that time once we give all the answer we will show the result to the user the result will be either pass or fail we will show the percentage as well as the number of question that are correct so without any delay let's start this exciting and awesome application building from scratch click on new project select empty views activity and click on next give the application name let's give quiz online language will be cotlin and minimum SDK you can select Android 8.0 because it support 93.7% of the devices and build configuration language Let It Be recommended one so click on finish let's run the application and test either project is created correctly or not so it is installed so our application is launched correctly let's go back to the project and first thing we will do is let's go to Resource values colors.xml and add some colors so we have black and white color let's add another color let's duplicate it give the name gray and it will be F4 F4 F4 it will be like this let's create another color orange let's select from here we can select material 800 and then this one let's make another color that will will be blue so for blue I will select this one and give the name blue that's it for now we'll add just three colors let's go to themes. XML and then change the status bar color you can see over here it is purple let's change it default color so here we can uncommanded orange also in themes XML night uncomment orange now if I run the application you can see the orange color so we can close this themes and colors now now let's go to Gradle build at Gradle and enable view binding so here in Android below this cotlin option we'll enable build features and view binding will be true click on sync now now it is enabled you can close this now let's go to activity main.xml and and start designing the UI for main activity we'll go to split over here here we will Design we can minimize this one so we have Hello World here let's say hello to this hello world and just delete it make this constant layout as a linear layout we'll set the orientation to vertical and give some padding about 16 DP on all sides let's add an image first I have already downloaded but you can also search in Google person studying uh clip art you can search you can choose the copyright free images from here so I have this image I will copy this and paste it in a drawable give the name click on okay so here I will add that image view it is in drawable now this is the image I will add in image view so image view width will be match parent height will be60 DP Source will be our main image so it is visible over here so it is done we have added our image view below this I will add linear layout width will be math Panner height will be WP content orientation will be vertical so inside this I will add some items let's add one text view first math parent rap content text will be it will be our app name let's say uh quiz online or you can give your app name like quizy app let's say for now gravity will be Center text size will be about 34 SP later space in let's give 0.1 and text stle will be bold so in this way we have linear layout and then inside that we have this app name so this is our text view copy this and paste it below and write here something uh you can write your tagline let's play this awesome quiz app to enhance your knowledge let's decrease the text size to 18 SP and some margin also about 16 DP so it is looking good let's give margin top to this linear layout as well about 16 DP and what we will do this linear layout if you see over here we will make it blue color like a background will be our blue and text color of this text will be white copy this this also white we'll remove lat spacing from this now I want to make this rounded corner so this linear layout will look better if we add rounded corner over here so for that what we will do we'll go to drawable new drawable resource file let's create rounded corner so that we can use it for other views as well root element will be safe click on okay we'll give stroke width 1 DP and color will be white and then we'll give Corners radius will be 24 DP so in this way if you give the background as rounded Corner the element will have rounded corner so for this linear layout let's give back ground as rounded corner and then background tint as blue color so it will look like this also give some padding ADP now it's looking better let's give the a as capital let's run and test how it is looking in our application let's run it so it is looking good as expected let's go back to the Android studio now we'll minimize this linear layout so we have image View and then we have linear layout now below what we will add we will add one title over here that will be all items and we'll add the list of quiz items here we will write a text view first let's say text view w content W content text will be all items let's give margin top 16 DP margin start as well about 4 DP text size 20s text style bold so that's it we have the title all items now here we will have the list of items list of quiz items that can be any number of of quiz item so we'll minimize this as well now here here we will use a relative layout matth parent match parent so if you give background to this for now let's say orange so it will occupy this one let's remove this background and inside this I will add recycler view so we can have Dynamic L width will be match parent height will be wrap content margin top will be 16 DP and ID will be recycler view so here we will have items now now if I run the application here we can see all items there are no items so we need to add the items from the Firebase so for now what we will do we will create a dummy data so let's go to this package and create a class that will be cotlin class data class which will be quiz model let's say enter so it will be our data class so here we will have some items so for now what we will do we will add some items like ID there will be a title that will be quiz title we'll have subtitle so that it will describe the quiz string we will have time for how many minutes the quiz will be like 10 minutes 20 minutes or anything this will be also string and we will have questions that we will add later so let's add these thing as of now so we'll create empty Constructor as well this for empty Constructor we'll give empt values so that's it our data class is created for quiz model so this we will use for now we will add dummy data let's go to main activity now first we'll enable The Binding so late in it where binding bind binding equals to activity main binding do inflate layout inflator set content view will be binding. root so binding is done now what we will do we'll create the list of quiz model so here I will create late in it where quiz model list that will be a mutable list of quiz model so that we can add an update now we'll insize this quiz model here a mutable list off that will give the empty list and we will add the dummy data so how we will add the dummy data I will create a method first here fun get data from Firebase let's say for now we'll have this method but here we will add the dummy data quiz model list. add We'll add quiz model where we'll give the let's give id id will be one title will be let's say programming subtitle will be all the basic programming and time let's get 10 minutes so in this way we will add the dummy list let's add some more let's say three 2 3 title will be computer let's say all the computer questions time will be 20 minutes let's say geography let's write boost your Geographic knowledge let's give this 15 minutes so we have added three dummy data this we will get from Firebase but for now we are adding just dummy data to see how it looks in the UI so we have got the data from Firebase now what we will do here we will call this method get data from firbas once we get the data we'll set up recycler view so here I will call set up recycler View and I will create this method setup recycler view so we'll set up recycler view over here so for recycler view what we need first thing we need is a row UI that will be all the items and we need the adapter so let's create the row UI first go to Resource layout new layout resource file let's say quiz item recycler row root element will be our card view so that we will have a nice layout so let's select card view click on Okay click on split and then here what we will do here we will make this as a row it item of the quiz item so here we'll add the title we'll add subtitle We'll add the time so for this card view we'll add some properties margin will be 4 DP elevation about 10 DP so that we'll get the sadow and Corner radius will be 24 DP so height will be wrap content it should not be match parent otherwise it will get full page height should be wrap content now inside this we'll add items so for that I will use relative layout math parent rap content padding will be 16 DP inside this we will add items first I will add title and subtitle and the timer icon and the time so for that I will use linear layout inside this math parent WP content Center vertical will be true orientation will be vertical inside this linear layout I will add two text view wrap content W content let's add tools text for now so that it will not be visible in the UI but but for testing we can see over here let's say Android size let's give 18 SP and text style will be bold so here you can see we have to give ID as well so ID will be quiz title text so here it will come let's copy this text view paste it below here it will be subtitle so let's say quiz subtitle text tools text Will Be All About Android OS let's not make it bold and remove this text size as well let's give margin top about 4 DP so in this way we will have title subtitle and here we will add image View and then the timer so we can minimize this linear layout now and below this linear layout add another linear layout WP content WP content parent end will be true Center vertical will be true orientation will be vertical so here it will come here I will add one image view for that I will go to drawable first new Vector asset I'll use Vector asset available over the Android Studio here I will use time let's say this one give the name icon icon timer you can give the size 32 click on next finish so inside this linear layout I use image view 32 DP 32 DP Source will be timer so here you can see we have the timer let's make the tint as orange so it is asking me to use app tint so click on fix app tint as orange now below this I will add a text view text view w content W content tools text will be let's say 20 minutes so it will look like this but it is not Center let's give this linear layout gravity as center now it is looking good you can see over here we have title subtitle we have timer and the time give the ID to this text view quiz time text so we have three Dynamic items that will be title subtitle and this time in this way our recycler item row is ready you can design it like your choice but I have designed in this way let's close this now let's create an adapter so let's go to this package new coton class file this will be quiz list adapter so here first we need to create view holder class so class let's give my view holder which will extend recycler view. view holder so if you hover over here here it will say change to Constructor invocation here we have to pass the view so let's give The Binding binding quiz item recycl row binding and here we'll pass binding. root so that it will get the view from this quiz item recycl row now here we will create just a function bind which will just take quiz model from the parameter and then we'll bind all the views so bind all the views so we'll bind this letter first let's complete this adapter we have created the class now what we will do we will take in this Constructor private value quiz model list which will have list of quiz model and we'll extend it from recycler view do adapter where we'll pass view holder that is my view holder in this way it will ask to change to construct invocation and then we will Implement members so we have three member on create view holder onbind view holder and get item account click on okay okay we have this three member now in oncreate view holder what we will do we'll create the view from binding so binding equals to quiz item recycler row binding. inflate layout inflator do from Context parent. context View group will be parent attached to root will be false return my view holder we have to pass binding in this way my view Holder will get the recycler row binding with layout inflator so we have we have done create view holder we have to get the item count here we'll just give the item count size quiz model list do size and in onb view holder we have to just call the method that we have created bind from here we have to pass quiz model as it is required over here how we'll get that from the list quiz model list we have the position so here let's pass that position so that it will get the item of that index so if it is first index it will be zero if it second index it will be one so according to the size it will get the position and it will bind the views now we need to bind the views so how we will do that we have items in The Binding so binding do apply so here we have items like title text quiz title text quiz time text quiz subtitle text so for quiz title text do text equals to we'll give title from quiz model so model. title so let's give only title for now later we will add subtitle as well so so we have done the adapter let's go to main activity here we have to set up the recycler view so let's give Lettin it where adapter quiz list adapter here let's initialize adapter adapter equals to quiz list adapter which will takes the quiz list that is quiz model list then we have to set it to recycler view so recycler view do adapter equals to adapter before that we have to give the layout manager so binding. recycle view. layout manager equals to linear layout manager pass the context this that's it so we have seted of our recycler view we have given the adapter we have sent the adapter the quiz model list we have assigned that adapter to recycler view now all the items should be visible in our recycler view so let's run and test either it is visible or not so yes they are visible you can see programming computer geography because we have given only the title as of now we have only three it items that's why three it now let's go and add subtitle as well so quiz list adapter here we have given the title so quiz subtitle text. text equals to model do subtitle quiz time text. text equals to model do time if I run now so we have title subtitle and the time so time is only the text so let's add minutes over there so what we will do we will just concat minute space minute now it is looking good so we have three items as of now if we add more items let's go to dummy method here here if we add some let's say more items 4 5 6 7 8 if I run it now you can see there are eight items now so first is programming computer geography and all are copied that's why we have eight items you can have any number of item in this recycler view so we'll get all those items from firest let's remove this extra things if I run again there will be three now what we have to do if we click on this item it should go to another activity and there we have to play the quiz so if we click on programming it should open the programming questions so if we click on this item it should open the quiz activity with the computer questions so should work like that for that what we will do first we'll create the activity and then we'll set on click listener on these items let's go over here let's create another activity empty views activity let's give this name quiz activity finish this is our quiz activity now we'll go to adapter here we have this binding what we will do we will set on click listener to root so the main view whatever we have the view view over here whole view we will set on click so root. set on click listener so once we click on that item what we'll do we'll go to another activity so for that we'll create intent intent we need context for that so root. context and we will go to quiz activity class. Java so we can start activity from root. Context now if I run the application now if I click on programming it has gone to quiz activity if I click on computer it opens quiz activity so any items we are clicking it is opening quiz activity now what we'll do we'll start designing the quiz activity split we'll make this linear layout so first thing we'll give orientation as vertical padding as 16 DP I will add relative lout to So Co serial number and then the timer over here so for that I will first add relative layout math ma parent height will be W content inside this relative layout I will add text view math parent W content so let's say tools text will be question 7 of 20 let's give text size as 18 SP text style bold Center vertical will be true so in this way we have added this let's give ID to this as question indicator text view so this will be question indicator it will be dynamic so after this we will add timer icon and then the time over here so for the timer icon I will use Ms view 20 DP 20 DP Source will be same timer tint will be blue let's make this app tint parent end will be true Center vertical will be true so we have this item now we will add a text view WP content WP content tools text will be let's say 5 minute 46 seconds text size will be 18 SP text style will be bold text color will be blue and we'll align it to parent end align parent end true so it will come over here let's align this timer icon over here not at parent end so let's remove this parent endend and give the ID to this text view first it will be timer indicator text View and we'll align this image view to start of timer indicator text view so it will come over here and give margin end Edge 4 DP will Center vertical text view now it is looking good so we are done with this relative layout we have added question indicator we have added timer icon and timer we can minimize this relative layout now below this relative layout I will add a linear progress indicator so that we can clearly see how many questions are remaining so linear progress indicator math parent R content so margin vertical will be 8 DP let's say tools progress will be let's say 70% you can see over here we have 70% completed if it's a 40% it will come over here now ID will be quiz question progress indicator in this way you can see the progress so this is also done and below this we'll add a card View and inside that we'll have question we'll have options we'll have next button so let's minimize this progress bar as well now we'll add card view match parent match parent margin vertical 8 DP let's say and elevation will be 4 DP for the shadow inside this card view I will use linear layout so that I can align items in vertical linear layout match parent W content Orient vertical padding will be 16 DP so this is our linear layout now here we will add the item so first item will be text View for the question width let's say match pent height give 120 DP tools text will be let's say any question what is Android OS this is the question give the text size as 20s text style bold padding will be ADP let's give background as rounded corner and background tint to this text view as blue so it will look like this text color let's say white gravity will be Center let's give margin vertical as a DP so you can see the question over here it will look like this let's give ID finally so it will be question text view so it will be the question if it is long question also it will automatically adjust the size so we'll have question now we'll have options over here so for option we'll use buttons so below this text view let's minimize this text view below this text view We'll add a button width match parent height will be W content margin vertical will be 4 DP so we will remove this orange color so for that background tint will be gray color let's have tool text for now that will be answer a let's say let's make the text color as black padding vertical will be 12 DP gravity will be Center vertical text size let's give some 18 SP so we have this one option let's give ID to this as ID button zero button zero it is the first option that's why let's give button zero so that we can identify later which button is clicked so we have one option let's copy this button now paste it button one and tools text let's say B copy this answer C button two answer D button three so here we will have four buttons and with the ID of this buttons we'll recognize which button has been clicked now we will add another button below this that will be next button once we select the answer we can click on next I'll paste the button as so here we will make some changes ID will be next button so width will be WRA content let's move this to end so layout gravity will be end let's remove this gray color so that it will come orange and let's remove this text color as well so that it will be white let's give some padding horizontal 40 DP it will look bigger and this tool Tex let's say next and let's give 20 SP to the size so we'll have the questions we'll have the options and we will have next button so our layout is almost done we have given the ID to the next button we have given ID to all the options we have given ID to question text and also the timer and the question indicator everything so this UI is done from our end if we run the application and see click on any item it will show the UI but there are no data because we have given tools stext the data will come from Firebase now let's go to quiz activity and Implement how we will get the data over here so what we will do we will go to quiz activity now here we will first enable The Binding let in itware binding activity quiz binding binding equals to activity quiz binding do inflate layout inflator binding. root now we will add the dummy data so let's go to main activity and here you can see we have the dummy data we have added ID title subtitle and time if you go to quiz model we have these things but now we require question as well so how we'll do that first we'll create another data class that will be question model and same way here we will create some it so that will be value question string value options will be list of string and we have value correct option let's say correct we will be string we'll have question we'll have list of option means array of a string a b c d and we have the correct option in this way we'll have the question model so let's initialize Constructor as well this so here question option will be empty list and correct will be empty in this way we initialize empty Constructor as well now here we have ID title subtitle time now here we will add question list so it will be the list of question so this quiz model will contain list of question model that we have created the data class so each quiz model will have some list of questions so here we have to initialize it with empty list and we are done we have we have added list of question model to our quiz model now we have to add dumy data as well so go to main activity here you can see there is error because we have to add question model now so what we will do for this programming one so here we need to add question model so how we will do that so first I will do value list of question model equals to mutable list of question model so here list question model do add I will add one question model which will have the questions what is Android let's say options will be list of a string mutable list of here there will be four option let's say language operating system product none so we have this four option we have the question we have multiple list of we have the list of option and last will be correct option so what will be the correct OS if you see over here we have created a question model and added that question model in this list if you duplicate it you can create another question that will be what who owns Android let's say this will be apple Google Samsung Microsoft and correct answer will be Google let's add another question as well let's add three question which assistant Android uses let's say Siri Cortana Google assistant and Alexa so the correct answer will be Google assistant so we have added three questions to the list question model which we'll add to this programming one so this is the question list of programming questions let's say so here we will add this list as list question model so that in the quiz model we'll have everything also the questions there are three questions we have the time 10 minutes we have three questions in the same way you can create another domy data for this computer as well as for this geography for now I will comment this two so that we'll have only one quiz model and inside that we'll have three questions so if I run the application so we have only one quiz model because we have commented other two and inside this quiz model we have the questions so we know we have the questions but we have not added in the UI so we'll add now it in the UI so for that what we will do we have to pass from Main activity to quiz activity we have to pass all the questions from Main activity to quiz activity we will have data here so we will use companion object go to quiz activity and we'll create companion object here if we use any object that we can use as a static variable we can access with the class name I will create valuable question model list that will be list of question model and we'll Define is an empty for now so we can use this question model list anywhere in quiz activity as well as from the main activity so from Main activity what we will do we'll go to quiz adapter where we were sending the intent so in this intent before sending the intent what we will do we will assign quiz activity. question model list as the question from this model we have the question model in our quiz model so model do question list in this way we'll assign all those question we get whatever we have clicked the button if you click on this button all the questions from this quiz model will be sent if you click on another button all the questions from that button will be sent in this way we will send dynamically so now in quiz activity we will get the question model list so how we will test that for now we'll create a method fun load questions so here what we will do we'll create one variable first variable current question index it will be zero so whenever we come to this activity current question index will be zero it will load the first question load questions what we will do we'll show the question first in which question we are binding. apply so if you see quiz activity here we have question indicator text view so we can assign it from here question indicator text view. text equals to question something out of something so what will be the current question from current index so we can say dollar current question index it will be zero but we will increase it by one so that first question will be one out of what will be the total questions so how we'll get that so total question will be question model list do size so question model list do size in this way we'll get the question indicat text view now we'll call this load questions from oncreate so load questions Let's test and run if we are getting the question models if we are getting we'll get the size as well as current index so let's run and test click over here here we are getting question one out of three that means it is working because we have three questions if you click it is one first question will be loaded and it is out of three so that means we are getting the data let's click on back here let's give other values as well so now we'll show the progress in the progress indicator second thing is question progress indicator dot progress equals to so how we will calculate the progress first I will convert current index to float so that we'll get exact we divide it by question question model list do size do2 float and for percentage we'll use 100 and then we'll convert it to int because this progress will require int so we have calculated the percentage of the questions and then we have converted it to INT in this way the linear progress indicator will show if we have done five questions out of 10 it will show 50% now we'll show the questions so for that question text view. text equals to we will first get the current question what will be the current question from from question model list current question index do question so from the question model list for the current index we'll get the question if you run it now you can see the first question so it is working now let's do for options as well I will just duplicate it four times so button zero button one button two button three here it will be option do options zero we have the list of options so options one options 2 options three if you run it again now if you see we have the options and the next button you can see we have no text in next button it should not be dynamic let's go to activity quiz and then in next button we'll just set the tool text as Android text so it will come so everything is fine so we have the question of option as well as next button we can't click any of the button because we have not seted on click listener and the remaining thing we have is time so we have to show the time as well so for that what we will do we'll go to quiz activity here whenever we come to this activity so we need the time here as well we'll create another companion object that will be time it will be string so this time will pass from quiz list adapter here quiz activity. time equals to model. time in this way we have passed time as well so we'll get the time over here in the quiz activity in the form of string now whenever we come to this activity that means quiz is started we have to start the time so for that I will create a method start timer here private fun start timer now for timer we can use Handler countdown timer but I will use countdown timer over here so first thing we have to find out total millisecond total time in in millisecond let's say equals to we will convert it to the millisecond we'll convert that time to int and then we will multiply it by 60 so that we'll get seconds and multiply it by thousands so that it will convert it into millisecond so if it is 3 minutes 3 into 16 180 and the milliseconds will be 180,000 like that we'll convert so once we get the millisecond we'll create object of countdown timer we have to pass total time in millisecond you can see we have long so let's convert it to Long first and then write here total time millisecond time in m and countdown interval will be 1 second that means 1,000 millisecond so every 1 second we'll show the countdown now we have to implement some members Implement members we have ontick and onf finished so ontick will be called every second here what we will do we will find seconds this P0 will be millisecond Mill until finished let's so this will be the millisecond until finished so whatever the remaining time time so here we'll convert it to Second and then we'll convert it to minutes so seconds divide by 60 and then we'll find remaining seconds remaining seconds by finding remainder of this minutes by 60 so that it will get the remaining seconds so that we can show in the text view we'll just show binding do timer indicator text view. text equals to string do format we percent 0 to D 0 to D semicolon percent 0 to D 2 G ring value will be minutes and the remaining seconds so it will be opposite countdown timer if it is 7 minutes then it will be 659 658 655 654 in that way it will come so once it is finished we have not implemented anything it will be finish the quiz so when time is finished we'll call the Finish the quiz method that we create later let's run and see either it is working or not click on this out time Tim is not visible so I think we have not started the timer so we have countdown timer over here the object of countdown timer is finished over here here we have to start so we have created the countdown timer but we have not started that's why it was not showing let's run it again so it is showing the time minutes only okay we have done remaining seconds here it should be seconds per 60 so that it will divide seconds now if I run now it is working correctly since we have 10 minutes it has started from 959 958 and then it will go all the way to zero and then it will call the Finish quiz we have not done anything in Finish quiz so it won't happen anything so our timer is also working fine now we have to set on click listener to this button so that we can go to next questions so what we will do we will implement the interface on click listener so here view.on click listener view Doon click listener so that we can implement the members on click here we have the on click method here it will come whatever the button is clicked so before that we have to set on click listener to those buttons once we have done set content view binding do apply we'll set the on Klick listener to button zero do set on click listener this at quiz activity so it will go to on click whenever we click on the button so we'll set to all the four buttons and also we'll set it to next button so all the buttons we have set the on click listener now here we'll check which button has been clicked so clicked button let's say equals to we have this view let's give it a view not P0 view as button we know that whatever the view has been clicked that is button because we have only seted on click listener to the buttons so it is safe now here we can check if clicked button do ID equals to equals to r. id. next button that means next button has been clicked next button is clicked so we'll do something else options options button is clicked so we'll do something else if next button is clicked we'll set current question index Plus+ means we'll increase and we'll load the questions again means if we are in first question we'll increase the current question index and we'll load the questions so according to current question index it will load another questions from here and for this option we will not do anything for now let's see if it loads other questions or not so if I click on next you can see we have second question and you can see over here we have second of three and linear progress indicator is also working that means one question is done out of three click on next so it is third question two question has been done that's why it is coming if I click on next again it will crash because we don't have any question after that so that's okay now what we have to do if we click on this button it should get highlighted means if we click on this a it should get highlighted if we click on this it should get highlighted for that what we will do in else option click button do set background color let's say get color R do color. orange we'll set the orange color let's say if I run it click on this it is highlighted click on this it is highlighted now if you see if I click on any button it is being highlighted it should not happen if I click on another button the Highlight should be gone from the previous button so for that what we will do whenever we click on any button we'll set the background as gray for all the button I will do so apply button zero do set background color get color uh do color do gray in this way whenever we click on any button it will set it to gray first and then whatever the button is clicked it will set to Orange so button one button two button three next button we don't have to do now if you select OS all buttons are gray this is is orange product none now it is working click on next you can select any click on next you can select anything now we have to store the score if it is correct or not so if we have selected here what is Android if it is OS then we should store the score otherwise we should not store so for that what logic we will do we'll create a score we'll create the variable over here that will be selected answer first let it be empty another variable will be score that will be zero so we have have selected answer and we will set the score so that we'll get to know which answer is selected now here what we will do whenever the option is selected we will store that option to our selected answer so selected answer equals to button clicked button. text do two string so whatever the option we will click it should store that in a selected answer string if I click on OS it will store OS in the selected answer so that we can check so where we will check whenever user click on next button when user select from this option user will click on next button immediately we'll check either it is correct or not so for that in next button click what we'll do if selected answer equals to equals to question model list that is current question dot correct so if we have stored the correct variable that is the correct answer over here you can see in main activity here we are restoring the correct option OS Google and Google assistant in that way we will check selected answer equals to equals to that correct variable able if it is equal score ++ that means we'll increase the score by one so how we'll get to know the score let's say log do I score of quiz let's say and here we will set a score do2 string if I run now and go to lock at over here let's search for score of quiz and let's select any one of the option let's say OS click on next you can see score is one if I select correct answer that is Google score is two let's click on back again here if I select wrong answer let's say language score is not increased that means it is zero if I select anything like correct answer it will say score is one that means our score system is working we are storing if it is correct answer we are restoring the score now this is also done now only thing is remaining if we are in last question if I click on next it should submit the answer and it should show the result if I click on next now it will crash because we have not CED that but if it is the last question then we click on next we should show the score so what we will do here we will create one method that will be private fun finish quiz let's say and we'll call this method from where we will call whenever we load the questions let's go to load questions here we are loading next question so before that what we will do if current question index equals to equals to question modelist do size that means if current question is the last question of the question model list then we'll finish the quiz we'll call this method finish quiz and we'll return from here so that it won't go over here otherwise it will crash so we'll write return statement so that whenever we are in last question it will not load the question but it will go to finish quiz method also we'll set selected answer equals to empty because every time when we select the answer it will store some variable so when we load the another question the selected answer should be empty now it will come to finish quiz now in Finish quiz we will show the dialogue so how we will show that we'll create a layout where we will show the score and we have passed or not and then we'll show the dialogue so for that I will go to Resource layout new layout resource file score dialog score dialogue let's make it a linear layout click on so this will be the custom UI to show the dialogue plate here height we will say R content let's add a text view first math parent rap content tools text will be let's say say congrats you have passed gravity will be Center text size will be 20sp text style will be bold and ID will be score title so in this way it will show if I have passed or field now below this I will add a relative layout wrap content wrap content and inside this I will add a circular progress indicator I can minimize this first let's add circular progress indicator R content R content Center vertical will be true track color let's give gray let's add tools progress for now let's say 60% track Corner radius will be 20 DP track thickness will be 8 DP increase the size indicator size will be uh 90 DP let's say so here we will show the progress either you have passed or not inside this we'll add a text view so let's give ID to this first score progress indicator and we'll Center it from here let's give Varity to this as Center also padding will be 16 DP now in this circular progress indicator in this relative layout I will add also the text view w content W content tools text will be let's say 50% text size will be 18s Center in parent will be true text style will be bold margin vertical will be 4 d P ID will be score progress text let's say it will show the percent over here let's minimize this text view as well also we can minimize this relative layout now now below this we'll add another text view match parent R content tools text will be let's say six out of 10 question are correct gravity will be Center and ID will be let's say score we have title let's say subtitle in this way we will show the description how many questions are correct below this we'll add a button R content R content text will be let's say finish margin will be ADP ID will be finish button so we'll just make this a simple layout where we'll say congratulation either we have passed or not we'll show the percentage we'll show the percentage progress and we'll show how many questions are correct and finish button will finish the quiz that's it we'll show a simple dialogue as an alert dialogue so let's go to quiz activity now now here in finished quiz we have to show the dialogue how we will show first we will find the total questions first let's get the data first it will be total questions equals to questions model list do size we'll get the total question then let's get the percentage so percentage let's convert score to float divide by total questions to float into 100 and we'll convert it to int do to int so we'll get the total questions we'll get the percentage now we can show so what we will do first we'll get the binding dialogue binding equals to score dialog binding do inflate layout inflator now we will assign this binding to the alert dialog so before that we have to set the data dialog binding do apply score progress indicator do progress will be percentage and score progress text do text equals to let's say dollar percentage and we'll concat percentage now if percentage is greater than 60 let's say pass marks is 60% what we will do we'll show score title. text equals to congrats you have passed we'll set the color as well score title do set color text color color do blue so if we get more than 60 we'll show congrats and color will be blue else copy this same paste it let's say oops you have failed color will be red now we have set the title we have set the percentage and progress let's set this also isore subtitle text equals to we will concat score out of total question are correct so whatever the score let's say four out of 10 questions are correct and whenever we click on finish button do set on click listener we'll just finish the activity so just finish this will finish the activity now we have created the dialog binding we have added the data we have to just show this as a alert dialogue so we we will use allert dialog. Builder pass the context dot set view view will be dialog binding. root we'll make it cancelable as false so that user can't click on back and we'll just show the dialogue so what we are doing whenever we finish the quiz we are just setting the data and show the dialogue with the layout we have just created let's run and test either it is working or not click on it let's say let's select wrong answers only you can see oops you have failed we have 0% zero out of three are correct you click on finish the quiz is finished again we can select let's select what is Android let's select correct answer now congratulation you have passed 100% three out of three are correct in this way it is working if you select two correct answer also we have passed because it is more than 60 now we can see everything is working fine we have the timer going on we can select the answer also we have the result also so everything is working fine from our dummy data so data is dummy over here if you see in main activity we can add any number of questions let's say if I add another question let's say I have added another three question if I run it here we have six question now now these are the dummy question so our application is working and it is dynamic if we increase or decrease number of questions or if we increase or decrease quiz model everything is working now only thing is we have to get this data from Firebase so how we'll do that first we'll go to tools over here we'll connect the Firebase first Firebase and you can see lots of option over here we will use realtime database we can use cloud fire store as well but for this time because we will be importing the session we'll use realtime database so let's click on it get started with realtime database first we'll connect to fireb so click on it so it will open in the browser we'll click on ADD project it will auto detect the name or you can change it click on continue let's not enable Google Analytics create project our project is ready click on continue click on connect send so you can see Android Studio project is connected to your Firebase app go back to Android Studio here you can see it is connected now we will add the realtime database SDK so it will add the dependency click on it accept changes so dependencies set up correctly now we have to write the code before that let's go to Firebase console console. Firebase go to your project go to build over here and then go to realtime database we will enable the database click on it create database now you have to select the location click on next start in logged mode or you can start in test mode so for now we will start in test mode enable so our database is created you can see over here we don't have any values yet you can add the data from here by clicking on plus key values you can add any type of data in that way we can add but we will add with the Json file so for that what we will do first we'll go to Json editor and then click on on this J editor online and here we will edit the J means we will create the J for our data so how we will create that if you go to our project go to quiz model you can copy this and give it to chat GPT to make the Json for you but we can also create we have quiz model where we have ID title subtitle time and question list and inside the question we have question options correct so how we can create let's go to Json editor first we have first we should have list of quiz model so for that we'll do array list of quiz model inside this we'll create the object of quiz model so with curly braces we'll create the object of quiz model there we have ID so ID it will be let's say one we have title let's say Android we have subtitle let's say history and usages also we have time and question list so time let's say 10 minute and question list so we have question list with the name you can see question list so here we have to write the same question list and inside that we should create another array object because we have list and in that array we can create the question object so again curly presses with question object what we have we have questions options and correct so first value is question so question who owns Android second value is options it is also list so list of a string array first value will be apple Google Samsung Microsoft so in this way we have four option list of options we can give comma now we have correct so what is the correct answer it is Google in this way we have created one quiz model where we have title Android history and usage time 10 in this way here it will come and inside that we have one question you can add multiple question how we will add in the question list you have one object like over here you can copy this paste it below and then you can change the question like what assistant Android usage let's say options will be Siri Cortana Google assistant and Alexa so correct answer is Google assistant so in this way we can have multiple questions we have added one question and two question in question list and we have one quiz model here so from here to here this is one quiz model you can copy entire quiz model and paste it below and make changes to that for now we'll use this one quiz model for that what I will do I will go here save to disk and then download as question let's say save browse you can upload this question. session click on upload import here you can see we have one quiz model if we expand this we have ID subtitle title and time question list also inside question list we have two questions inside options we have four options in one we have correct answer options and questions so we have all the data over here you can ED it directly from here you can add data directly from here or you can add in J editor and then upload for now we will use this and F it in the Android application so now go back to the project go to main activity we can close other tabs so here what we will do we will remove all this dummy data so I will remove everything from here and I will get the data from Firebase now now we have data in the Firebase so we can f from there so how we'll do that Firebase database we have already added the library Firebase database dot get instance. reference so it will return the reference of this database now inside that we'll call get method so this get will return all the list of the quiz model we have only one as of now and then we will do add on success listener when we are success means we have got the data so first we will check if data exist or not so if let's give the data snapshot as a name so if data snapshot. exist means data is there then what we will do since we have list of data like we have First Data we will have second second data also so we will go inside the for Loop so for let's say snapshot in data snapshot. so we'll have multiple data now each snapshot will be each data means First Data now it will go inside this now inside this we have the quiz model so how we'll convert that we'll do value quiz model equals to snapshot. getet Value since we know that this model represents our data so here quiz model class. Java so it will convert the data to our quiz model now here you can see we have the list of quiz model so we will add that single quiz model to this list of quiz model so quiz model list. add quiz model so it can be null so let's surround with null check that's it we have got the list of quiz model we loop around the the quiz model and we got the each single quiz model and we are adding every quiz model to our quiz model list the same way we were doing for dumy data Now setup recycler view will automatically send this quiz model to the adapter so it will work like that now if I run the application this is the dummy data let it run we have not got the data so once we add all the data in quiz model list we have to set up recycler view we should not do outside because it will take some time so I will cut it out and we'll paste it in add on success listener so once it is success and we have done everything then we'll set up recycle review now if I run the application you can see after some seconds we got the data this data is coming directly from the Firebase if you see over here I have given the name Android history and uses 10 minutes everything is there if I click on this we have the questions because I have added only two questions Google Google assistant so it is working correctly whatever we have added in D data if I if I want to make changes or add any other questions what I can do is directly go to Json editor and you can copy from here since we have list of quiz model you can copy from here to this curly Braes the quiz model and paste it after comma so we have two quiz model now if you see let's give ID to this as two let's say title as programming subtitle as basic programming Concepts time let's say 15 minutes let's say Java is a computer language program software so it is a language correct answer so you can you can write any number of question so here I will make changes what this symbol means I will write modulus multiply subtract and add so correct answer will be modulus so in this way we have added second quiz model Also let's save it to disk let's say question new save it go to Firebase import s browse question new import now if I restart the application now we should get the two data so you can see it is dynamic I have got the data Java is a language what percent symbol means modulus so this way you can add multiple data if you have noticed when we run the application it is taking some time to to load the data because we are faing from Firebase according to the internet speed it will take some time in that case we'll show the progress bar over here and when the data loads we will remove that so for that what we will do go to main activity design here in the relative layout before recycler view we will add a progress bar let's say 20 DP 20 DP Center in parent true ID will be progress bar let's say so here it will come let's make visibility gone so that we will show it in the main activity go to main activity once we are in the main activity we should get data from Firebase we will do binding do progress bar. visibility equals to view do visible will show the progress bar and once we are done we will go to the setup recycler view we will do progress bar visibility gone in this way it will show the progress bar once we get the data it will hide run it you can see progress bar and then we have the data so this is working also if you want to add multiple data what you can do you can go to you can go to chat GPT and then copy this J paste it over here and ask make similar quiz models up to five up to five and each models should have at least five to eight questions dummy data let's say so it will make the quiz model so you can see over here it has created model 3 I will copy this paste it after this curly Braes I'll copy the model 4 paste this after I'll copy Model 5 as well and paste it now I will save it you can give any name import session now we have five quiz model let's restart the application you can see how smoothly it is working so we have this new quiz model where we have four questions you can see over here it is working completely fine we have five question in this geography we have five questions in this way you can create your own quiz model and upload it to Firebase so that in real time in the application it will show everything will be dynamic so data will be loaded from the Firebase if you want to remove you can directly delete from here it will automatically be removed from here as well one last thing what you can do is if you go to one quiz if you don't select anything and click on next it is going to next question if you want your user to select your answer before going to next question what you can do is go to code in quiz activity here when user click on next button you can check here we have written or next button is clicked what we will do first we will check if selected answer dot is empty so if there is no any selected answer because we are resetting selected answer over here in load question it will be empty every time so once user select only then selected answer will have some value so if selected answer is empty we'll just show a toast let's say application context please select answer to continue length. sort Dosh show then we'll return from here we should not go to this logic let's run now now if we click on any quiz if you click on next it will says please select answer to continue if I select and then we can click on next if I don't select I can't click so this you can restrict the user if you want user to skip the question you can remove this code otherwise you can put this so with that I guess our application is completed we have implemented Firebase to load the data of the quiz from the Firebase to directly to our mobile application in this way you can create your own quiz application you can add Dynamic questions you can add multiple quid models in the firest and then it will automatically load in your application you can also publish the application to the Play Store so if you enjoyed this video please hit the like button if you have any doubts and queries please comment below I will reply for you don't forget to hit the Subscribe button before going see you in the next video bye-bye

Channel: Easy Tuto

Views: 22,598

Keywords: easy tuto, android, development, beginners, android studio, quiz, mcq, quiz app, quiz project android, quiz app android studio, how to make quiz app, mcq app, quiz firebase, quiz app with firebase, online quiz app, beginner, easy online quiz app, simple quiz app 2024, 2024 tutorials

Id: yjNAnjqm_50

Length: 70min 4sec (4204 seconds)

Published: Tue Jan 02 2024