Build a Complete Quiz App for Android from Scratch Using Kotlin and Android Studio

what's up youtube this is denis panetta for tutorials.eu in this video we are going to build a quiz game and why are we going to build it well we're going to build it because a bunch of you hit that like button on my android master class so if you haven't checked out the android master class please do so now it's an eight hour long course about android development and that's also what this quiz is going to be in so it's not going to be with unity it's going to be built with android and kotlin so android studio and kotlin to be precise so in this video you are going to build a full quiz app that you can then load on your android phone and play or you can share it with your friends so that they can check it out and by the way the whole video is made in a way so that you can very easily learn how to adjust the application so that it becomes your own quiz so you will know how to change the ui so that it fits your preference when it comes to looks you can change the questions that are asked and of course the answers that are given and you can basically create your own quiz app so i have already seen some of my students do that so some of my android master class students you can find the link to the whole course in which you are going to get a 45 hour long android master class course in which you learn everything you need to know about android to pretty much build any app that you can think of where you will also learn how to use firestore and create an app such as trello and how to create a weather app how to create a seven minute workout app all the good stuff all right so you will become a real android developer if you go through that course so please check out the link in the description you get a massive discount using the link and i hope you enjoyed this video i hope you can build a very cool quiz app and share it with us so that we can check it out and give you a five star rating potentially if it's great all right so i hope you enjoyed and have fun building this app and i forgot the most important thing of all hit that like button and the notification bell next to the subscribe button also the subscribe button next to the notification bell all the good stuff because this indicates that you are interested in android content which makes me create more android content so it's really depending on what you do what i will do i hope that was correct english so enjoy the video welcome to this quiz chapter in this chapter we are going to build a little quiz app which allows us to learn a bunch of new functionality that we have not used so far and we are also going to use very important concepts that are really generally important to understand when building any software pretty much so not just apps but generally when building software all right we're going to start with this little screen that you can see here where you can enter your name so i'm just going to enter my name in here i'm going to press start and then the quiz starts so it's going to be a very basic quiz app but this will still teach you a lot of new features so let's get started you can see here what country does this flag belong to then we have a little image here a progress bar here which indicates how far we are in the process and then we have a bunch of options here at the bottom for example this is argentina so i can submit and i get a result here which indicates whether my answer was correct or not then i can press go to next question and the next image pops up with the next question which is the same question so in this case i'm always using the same question just with other images and other responses or possible options here and this is going to be a blueprint of an application that you can just build your own off so you can just go ahead and make your own quiz app from it and you can just create 100 questions for example and then just build this little app based on what you will learn in this chapter all right so let me select a incorrect answer here so i'm going to say this is austria even though that's australia so i'm going to press submit and as you can see austria is red because that was my initial answer and australia is going to be correct all right so going through this i will in the end have a screen which will tell me how many times i was correct with my response and so forth oh that was actually fiji good to know germany then we have denmark india this should be new zealand and that's a tough one so actually it was kuwait all right and there we are so you can see your score is 7 out of 10 and that is our congratulations or our result screen and then we can press finish which leads us back to the home screen now you can of course go on and try to build this yourself at least the ui from it and that would already be quite a good step to get started and to practice and learn and then of course we will build this together in this chapter so i'd say let's start with this screen in the next video see you there welcome back in this video we are going to start with the start screen or the main activity of our application of the quiz app so let's get started with this empty activity when selecting a new template for the project so i'm just gonna press next here and going to call this one quiz app everything else can stay the same api should be 21 and then press finish so let's test this application on our device just to directly see what we already have so this is the app that we have right now and let me turn it around as you can see it's not turning that's great because that's exactly what i wanted i don't want it to turn but if you really want to make sure that it's not going to turn you can go to your android manifest and then add a new setting here to your activity and when it comes to the screen orientation you have many different options here you can read through them in the documentation the one that i want to use is the portrait one so only the portrait orientation will be accepted in my application so here i'll just add a screen orientation setting and i'm going to set that to portrait now even though it's complaining i'm still going to leave it as that because it's still gonna work totally fine then i would like to assign a theme here and the theme that i want to use is one that i will create myself because i want to have control over the style of this action bar there at the top and how can i do that well i can go to my values and then there is this style xml file in which i can create different styles for example you can see there is one style already with just a dark action bar and now we can create a light action bar as well so i'm just gonna do that i'm just gonna create a new style here which i'm going to call no action bar theme and its parent is going to be theme dot app.compad dot lite dot no action bar so this will be the parent theme so we are going to pretty much use this theme here but we're going to adjust it slightly okay so the things that i want to adjust here are the colors so as you can see here there are three colors which are set in there and i want to do the same here now you might wonder why would we even do that well the thing is i would like to have no action bar in my main activity so here this main activity our first screen should not have an action bar at the top but still if i use this theme as i define it here so when i now go ahead and use my no action bar theme that i just created which is in my styles this one here when i use that then it still needs the default colors and these are the default colors so the color primer will be used from our colors which in there is also called color primary our color primary dark which we set for this theme will be defined in this color color primary dark so even though the names are duplicative it's still very important to distinguish so in this style we can define those three colors but we could choose different colors here for this particular style okay but we're going to use still the same colors as we would use in a default theme that we have here but we are going to use the parent which is the no action bar style okay and if we still want to have an action bar then we can go back to our default theme that had a dark action bar at the top so coming back to our manifest you can see it's complaining here because we need to add add style and then the no action bar theme this one here that we created ourselves and then the next thing that i need to assign here is to add the windows soft input mode and here i'm gonna use adjust resize so what that will do is it will resize our ui so that when the keyboard comes in so the soft import which means the keyboard of android when that comes into play and is visible on the screen that our ui will be resized adjusted and resized so that it still fits on the screen and still looks good enough so that we can still see where we are actually entering a value there are multiple options that you have here you can see state visible adjust resize and so forth so multiple different options and what they pretty much do how the main window of the activity interacts with the window containing on-screen soft keyboards and the setting for this attribute affects two things the state of the soft keyboard whether it's hidden or visible when the activity becomes the focus of user attention and then the adjustment made to the activity's main window whether it just resized smaller to make more room for the soft keyboard or whether it's contents pen to make the current focus visible when part of the window is covered by the soft keyboard okay because sometimes when the part of our activity that is relevant for the user to enter data for example a text field where he needs to enter something so an edit text and the soft keyboard is on top of it then you cannot see what you're typing and that's something that we want to avoid all right coming back to our project here there's one more thing that i would like to set up for this video and that's going to be our gradle so in our gradle scripts here under build gradle in the module app that's where i want to add another dependency so i want to use the dependency of google which is the material design so here i'm going to add implementation apostrophe com. google.android.material colon material colon 1.0.0 all right so this is what we need in here and once you enter a new dependency what you need to do is you need to sync now so this feature here with the dependencies is a pretty powerful tool so we are adjusting our gradle and it will then download necessary dependencies and the necessary code so to speak that we can then reuse so it's going to download libraries for us which we then can use and in this case we're going to use the android material design library all right so that's just the preparation for the next video in which we are going to then set up the whole style of this activity main xml file because currently the only thing that we see in here is this hello world text view and i would of course like to change that and create a beautiful screen in here alright so see you in the next video welcome back in this video we are going to build this screen that you can see here where we have this little text here then another text another text and edit text and the button here which is inside of a card view so this part here which is white this white background is a card view so at this point i think you should be able to build this ui yourself at least try to build it give it a try pause the video and then try to build this yourself and then of course you can check out the video how i have done it alright so i hope you tried it of course you would need this background image here and the color so that's something that you could have gotten from the project itself or of course you could have used another image as the background but generally speaking the rest should be something that we have seen already multiple times so let's just build that inside of our activity main so something that i didn't tell you and that was on purpose is that i don't want to use a constraint layout because everything in our ui is built on top of each other and that's why i think it is much easier to use a linear layout here of course you could have used a constraint layout and drag all of the ui elements that you need inside of this view but i personally really prefer the code because you are much preciser this way and let's go ahead and use a linear layout here then of course we need to adjust some settings here for this linear layout so i'm going to set the gravity to center so that everything is centered on a horizontal way and then i'm going to set the orientation itself vertical so that everything is on top of each other so now if i go ahead and duplicate this text view then i will just have two text views which are on top of each other as you can see here all right so that's what we get through using a linear layout where the orientation is vertical now as the background of this i want to use a beautiful image and you could have downloaded this image from the course so i'm also going to just paste it into the drawable folder all right now let's see how it's going to look and actually i haven't set that up yet so here that's going to be add drawable icbg that's the one now let's look at it and we can see we have the background already and then i want to use this quiz app text or have this quiz app text there so let's implement that it's going to be a text view it's gonna match the parents in terms of its width wrap the content in terms of its height and i'm going to give it an id so that i can talk to it if necessary so here id add id tv underscore app underscore name so tv standing for text view then i don't need to have all of these constrained elements because we're not using a constraint layout so let's get rid of all of them as the text i would like to use something like quiz app then i want to have a little layout margin bottom so some space towards the bottom of let's say 30 density pixels as the text size i'm going to use 25 so 25 sp then the text style should be bold so you can also see that this text is pretty bold here and as the text color i'm going to use white so text color is going to be add android colon color slash white all right let's look at it right now it's just going to be this text here and yes like you can see it's not centered so i would like to center it how do i do that well i use the gravity here so here android gravity center let's look at it again and now the text is centered underneath it i would like to have this card view as you can see there are multiple different elements inside of this card view for example welcome please enter your name so text view text view add a text on button so let's get rid of this text view here and instead add a card view in there and that one is from android x widget card view here the width should be match parent so it should take the whole width and the height should be wrap content so it should only take as much height as it requires then i'm going to assign some more settings in here so for example i want to have a little margin towards the top and i get that by using margin start here i'm going to say it should be 20 density pixels then also some margin towards the end which will be 20 density pixels so it will be it was the right hand side and then i'm going to set the background to a white color as well so here android color slash white now what you also can see here is that this card has rounded corners and that there is a little bit of shadow that this card creates you can barely see it but still if it's not there you will see the difference so currently the card is empty that's why we cannot really see it but let's add the card corner radius in here which i'm going to set to 8 density pixels and the card elevation which will create this shadow of five density pixels now let's fill this with some values in there so i want to have texts on top of each other as you can see here so i will need a linear layout with the orientation being vertical so let's create that linear layout with the width of match parent with the height of wrap content with the orientation of vertical and the heading because i want to have some space inside so a little bit of padding of 16 density pixels now in here i would like to have text views so let's go ahead and create a text view here which has a width of match parent a height of wrap content so you can see it's most of the times like this wrap content and then some more settings here for example the gravity should be that it's centered so the text should be centered the text should be something like welcome so i'm going to set that to welcome the text color and here i'm going to use a color 363a 43 and it will be this light gray color here or maybe even dark gray actually dark gray color and the text size is going to be rather big so 30 sp here all right so let's look at it you can see this is our card so we have a little welcome text in there which is this dark gray and we can unfortunately not really see the shadow that we create and we can also not see that it is rounded so if we test our application then we will see it okay but first let's add the other elements in there as well so that is one of the texts and it's not completely done so i'm going to set the text style to bold as well here so that it's thick and white all right now let's copy this text view and paste it just underneath it it's going to be pretty much the same text view here and then we have one minor change here to make and that is to please enter your name and then maybe also the color so i'm going to use a slightly different color here i'm going to use 7a 8089 which is a lighter gray as you can see the text size should be significantly smaller so when we look at the example here you can see this text is significantly smaller than the other one and it's also not bold so let's get rid of that as well and now let's look at it again you can see welcome please enter your name so we can see that quite well already so the next thing we need to add is an added text or just this field here now in order to use it in the right format and right style that i want to have i'm going to have to use something from the material design and that is a text input layout so text input layout and you can see it's the second one in my case the width should be match parent again the height should be wrap content and then i'm going to set up some more things in here so i'm going to give this a little margin towards the top so that there is some space in between this field and the text views that we have there and then i'm going to give it a style so there are multiple different styles that you can assign to such a text input layout and i'm just going to use the style which is going to be add style widget material components dot text input dot then you can see there are multiple options here unfortunately they are too far off so let me see it like this so outline box is what i want to use so it's this one so if we check that out we can not see anything in there yet because we don't have an actual added text in there so this text input layout is just a preparation for our actual edit text now the thing is i could of course use the edit text but i want to use the app compat edit text which will work on all the versions just the same way as well so app combat means app compatibility so it's going to be compatible to all the versions as well so it's going to just adjust accordingly to the version that the user has installed on his phone so the android version all right here the width will be match parent again the height will be wrap content and then what we need to set up is a hint so i'm gonna assign the hint to be name at this point we should be able to see something once we close this bracket here we should see that here is this app compact added text that isn't there unfortunately we don't see the hint yet that's something that we would see once we run the application now as the text color i would like to use the same text color that we had here this dark text color for my edit text so here text color will be hash three six three a four three and then as the text color of the hint so you can even define that i want to have this lighter color that we had it so this one here let's now add the final part of this ui and that is the button so let me create a button down here inside of this linear layout at the very bottom and we of course need to define this button so i'm going to give it an id so that we can communicate with it and i'm just going to call this one button start and then the layout width and height will be match parent for the width and layout height will be wrap content so it's going to span over the whole width as this button does so inside of its parent it's going to expand the whole width here then as you can see as well it has a little margin towards top i'm gonna assign 16 density pixels here which is this distance between those two elements here because otherwise they would be too close to each other and then i'm gonna assign a little background color which will be the color that we have in our primary colors so color primary and finally the text of it should be start now let's run this and then make some adjustments on the way all right so there we are it's almost the same there are some minor changes here you can see that this background is a little different and then the color of the star text is a little different the size of it as well so let's define another text size here which will be 18 sp and the text color which will be white so i'm just going to use android color slash white all right let's run it again just to see the changes and there you can see now the text is white and it's a lot bigger and we're almost having the same kind of effects that we had in our other example but what you can also see is that the whole ui pops towards the top once we click onto our edit text here you can see because the keyboard comes up and that is due to our settings in the manifest where we set the window soft input mode to adjust resize all right coming back to our activity main now of course you can play around with all the values and here our card view that we're using for example here the corner radius you can see it's set to 8 density pixels so let's say we set that to 50 density pixels let's have a look at how our ui will look you can see it's significantly more rounded all right so this is the radius that you can assign here and i had it at eight density pixels alright so i think at this point we have a great ui from which we can go to the next screen and once we click the start button we should go over to the next screen there's one a last thing that i would like to add though and that is to get rid of our bar there at the bottom at the top this status bar so if you want to get rid of the status bar in your application because it has its advantages of course but in some cases it really just doesn't make the app look as good as it could look then you can go to the activity settings here in oncreate and set up your window dot decor view dot system ui visibility and set that to view dot system and hereby you need to import view so let's do that real quick import and here it's going to be that system ui flag full screen now let's test it again and you can see there at the top the system ui has gone all right so i hope you managed to build at least some parts of this ui yourself and the next video we are going to set up the model and a bunch of other things that are required for this application so see you there alrighty so now you are roughly half an hour into the video and you have built the first part of the application i hope you enjoy it if you want to learn more about android app development please check out the link in the description because there you will get a course which is 45 hours long the length is also high quality content right it's not just 45 hours of bs content it's really good stuff you're going to become a real android developer by taking the course by taking it seriously by working yourself through it and by applying what you will learn there and that is amazing because you can find the job then you can start building your own apps and make money off of that or you can just make an application for free for your friends or for everyone to use and just put some ads in there so you can start making money with it whatever you can think of all right so please check out the link in the description you get a hefty discount by clicking on it and yeah enjoy the rest of the video and i hope to see you in the course of course welcome back in this video we are going to implement a second activity and we're going to prepare something inside of the activity so let me just enter a name here press start and then you can see we get over to this activity so that is the goal of this video but on top of that we are going to prepare what will be displayed in here so not the ui itself but the data all right so let's get started first of all let's create a new activity so here right click new activity and i'm going to create an empty activity and this one will be called quiz question activity all right let's create it and for this one i want to have the same ui settings as for my other activity so i'm going to go here and i'm going to copy that well we don't need this resize part but the other two i want to have in there so the no action bar theme and also the screen orientation should be portrayed for this activity as well so our quiz question activity and actually at this point having an action bar isn't such a bad idea because then we can potentially go back so let me get rid of this no action bar theme here all right so that's the first part of this activity then the next thing that i need to create is a validation that the user has entered something so if we go here i want to have a validation so if we press start and no text was entered then i want to let the user know with a little toast so let's go to our main activity because that's where the magic happens and then let's get the button start which is this start button here and once we click on it set on click listener i want to execute some code so first of all we check if our edit text et underscore name dot text to string is empty so here et name is of course going to be required so where is that from well let's go over to our resources because here in our layout activity main we had this card view in which we had this textview and so forth but what's important is this edittextcompat so here we need to create an id which will be et name because now we can access it and see if there is an entry or not so what i'm saying is is the text to a string empty so is it actually an empty string in there or no text inside of this field and if that's the case then i want to inform the user about that and i'm going to use that therefore this toast feature and how you can do that is you enter make text and then it creates this toast.make text and here you need to pass in the context so it will be inside of the context of our main activity so it should be shown in the same screen then we need to enter the text that should be displayed so please enter your name and then the length of the toast so toast dot length short and finally we want to show this of course so overall it's going to look like this toast make text please enter your name toast length short dot show now let's test that so let's click on start when it's empty and you can see please enter your name let me enter something there and press start again and now you can see nothing happens but of course at that point we want to move over to the next screen so we want to move over to our quiz questions activity so let's just do that let's say okay if the text is not empty so this edit text then let's create an intent which will move us over to this other activity so we create a new valve intent which will be of type intent and here we need to import intent with alt enter we need to say from which context we want to start and this will be this class here and then to which class we want to move over to which activity we want to move over and here it will be the java file so here colon colon class dot java now at this point we of course need to start the activity and that is done with start activity with the intent that we prepared and we can also execute finish here which will close the current activity so we move over to the other but we at the same time close this activity right here which is our main activity because in the end we want to be inside of the quiz until the user is done and then we come back to this page or to this main activity all right and now let's prepare our questions so we have questions in every quiz right and that is the most important part pretty much so let's go ahead and create a new class which will take care of that so i'm creating a new kotlin file class and i'm going to select class here and this one will be my question so i will define how every single question is going to look like now the thing is this question class will not have any specific features and functionality the only thing that it will have is data information so it will know about the question text so to speak the image then the different options that there are and which one of the options is correct so how i'm going to do that is i'm going to do that with a data class because this question class doesn't need to have any function so it just needs to be a very basic data class so i'm just going to say i need to have an id of type integer so then i know which question i'm currently looking at all right and then you can of course now go ahead and add all of the other features that we want to have inside of this question and by the way these need to be brackets so not the kerdi ones but the rounded ones so i want to have the id and then what else would i want to have now try to think of the different variables that we need to have here when creating a question all right so we need the question itself so question which will be of type string then the image which it's uncommon which will be of type int so i'm going to assign an integer to each image then option one which will be of type string option two option three and so forth so all of the four options that we have so option one two three and then finally i need to know which one of those four options was correct so well correct answer you could have called this correct option as well but i'm just going to call this one correct answer and that will be an integer so i'm just gonna store the value one two three or four in there in order to know which one of those is correct all right and then of course i need to have all of the questions and there are multiple different ways how you can do that you could have an xml file or json file which contains all of the different questions but in our case we are going to work with constants so we're just going to create a new file here a kotlin file which i'm going to call constants which will just be a file and we're going to use object and call this one constants so in here i want to have all of my constants and the thing is i will create one constant which will contain all of the questions so fun get questions which is going to be a constant but it's going to be a function which returns all of the different values so here we're going to say that it's going to return an arraylist of questions so what i'm doing is i'm going to use this get questions function in order to get all of the different questions and what type are they well they are question type and they are in an array list so basically i want to have an arraylist which contains a bunch of questions and every single question needs of course to have all of this information here as you can see we need the id the question the image the options and so forth so inside of this get questions what i'm going to do is i'm just going to say okay let's create this questions list just going to be an arraylist of question and for now it's going to be empty but then i'm going to fill it up so for example question 1 will be of type question and then i'm going to assign an id and as you can see now i need to assign all of the different values so the first question will have the id one it will have the question what country does this flag belong to and of course you could say okay the question is always going to be the same so why do we even have this question in there well the thing is this is a blueprint for you so if you decide to adjust the questions then you can do so freely all right so it's not necessary for this specific example but it's going to be super great for your own applications so then the next thing after the question is the image so we saw here in our question kt that we have the image as an integer well that one is a little confusing but the thing is that our drawable dot and then for example our background that we used is in fact of type integer so it's going to return an integer so now of course i don't want to use the background but i want to use other images and to you can get the images from the course so you can download it inside of the course and they're attached to this lecture so i'm just gonna paste them all in here you can see it's all of those images here ic flag argentina australia belgium and so forth so now of course we can use the image that we just downloaded so for example i see flag of argentina which will be this one here and you can also see it here on the left hand side okay so the next thing that we need to pass is option one then option two option three and option four all right so let's enter some options here for example argentina which is the correct answer then australia and then option three which would be for example armenia and austria and then finally we need to tell which of the answers is the correct answer so is it option one option two option three or option four so i'm going to say it's going to be the number one so here it's going to be the value one which means argentina is going to be the correct answer so let me bring that into a more readable format and now you can see that we have all of the different values that we had for the question kt here so for our data class so now our question itself is correct what is missing though is as you can see this get questions function should return an arraylist of questions so let's add this question that we just prepared to our questions list so questions list dot add and in here we add our q1 or question one and then we return our questions list and with that our function will be happy so no more errors and of course we only have one question and now instead of boring you with all of the different questions that we need to put in here i'm just gonna copy them from the prepared code that i have here and you can of course copy it from there as well so that you don't have to type in all of the questions manually okay so i'm gonna put them just underneath the point where i add my first question so in here i'm gonna put all of the other questions and now at this point you could be creative and create your very own questions with your own answers and your own images okay so feel free to do so now there's one important thing left to do so that we can actually see if that worked so if we can actually work with the questions that we have there and that is not going to be to display them yet but what i'm going to do is i'm going to create a new questions list variable here which will be from my constants dot get questions so here we had this constants class or it's not really a class it's an object right it's a object which is available from everywhere that is the power of it so i can just go out and say constants get questions and it's going to give me all of the different questions that we had and now we can test if that worked by using a log statement so i'm going to say log i it's going to be questions size for example how many questions do we have in there and the message should be valid to questions list dot size all right and at this point we will be able to see how many questions there are so let's run this and see if the locket is gonna offer the information therefore you need to open the lock cat here to bottom set that to verbose and enter questions because otherwise there will be way too much information here so if you enter question you can see it's filtered and now let's go to the next screen and we can see question size is 10. all right so the questions are there we can get them to this activity to this quest questions activity so that means that we can now go ahead and populate our screen accordingly with this information all right so let's say let's go to the next video where we're going to do that welcome back in this video we are going to build this ui that you can see here so we have a scroll view so this whole thing is inside of the scroll view then we have a linear layout so that elements are put on top of each other and then here those two elements here this is a progress bar which has a text view next to it so this is another linear layout where we are using the orientation horizontal instead of vertical and of course these four buttons and then at the bottom we have one more button but these four buttons by the way they are not buttons they are text views so i'm using textviews here so if you want to build this ui you can do so yourself of course you may not forget that we have a text here at the top and an image view here as well all right let's get started let's go to our activity quiz question and as i said this is going to be a scroll view so scroll view and i need to add the viewport setting so fill viewport i'm going to set that to true so that it fills the whole viewport so the idea is that this will still look good on super small devices and will still work on very small screens now of course inside of the scroll view i have my linear layout which has a match parent width and a wrap content height and inside of this linear layout we want to have all of our other elements so what's important for the linear layout is to know the orientation so let's set the orientation to vertical so that things will be on top of each other i want to have a little bit of padding towards all directions so that is visible here you can see there is a little distance towards all directions here these 16 density pixels and then i also want to center elements so as you can see they are centered here all of the elements they are not pushed towards the left so in order to get there we need to set the gravity to center all right so that's our linear layout inside of this linear layout first of all we had a text view here at the top so let's create that text view text view which has a width of match parent and the height of wrap content and i'm going to assign an id here so that we can access it so i'm going to give this id tv question id okay so that's how i'm going to call it then i'm going to give it a little margin towards all directions so that it has a little distance and that will be 10 density pixels i'm going to center the text so i'm going to get the gravity to be centered then we need to have a specific text color here and the text color i'm going to use is 3 6 3 a 4 3 so at that point you can see we reused this text color multiple times so at the point you could go ahead and save that inside of your values colors xml all right so now it would make sense at this point so if you want to go ahead and do that so text size of course needs to be set so 22 sp is going to be fine and then the text itself so what country and this is just a default text later on we are going to overwrite it with the question that we have in our constants kt and it's going to be the same question but still we still need it here all right so that's our text view and then underneath that we have an image view so we have this image here and i'm gonna create an image view in here image view with a width of wrap content and a height of wrap content then a margin towards the top of let's say 16 density pixels a source that's the most important part and that's actually our image that we want to use and i'm going to use argentina here or you could use any color or any flag that you want to use here and then because we want to access it we should give it an id so i'm going to give it the idea iv image because we want to change this image through code and if you want to do that we of course need to assign an id to it so that we can access it all right the next thing that we have here is a progress bar so you can see this is a progress bar and then we have a text next to it so if you want to have both of them and you have to want to have them next to each other you need to have another linear layout so you can see we create a linear layout within a linear layout and this one will match parent in terms of width and wrap content in terms of height and then it's going to be this linear layout which holds our progress bar and another text view so i'm going to assign some more i had some more variables here so let me assign those real quick here we can see we have an id ll progress details is how i'm calling this a linear layout we have a little margin i'm setting the gravity to be centered vertically and the orientation that's the most important part is horizontal so now the two elements or all elements that are inside of our linear layout will be next to each other so as i said i want to have a progress bar in there so let's go ahead and create a progress bar now this progress bar should have a width of zero density pixels and what is zero why does it make sense well the thing is we are going to use weight here so we're going to use the layout weight property and i'm going to show you in a second so then the height will be wrap content so it's only going to take its own height here and then you can see it's complaining so the width is complaining that's because we don't have the layout underscore weight yet and i'm gonna assign one to it and you see the arrow disappeared so at this point because there's only one element in our linear layout it would take the whole width so it would take every bit of available space there then i'm going to set the maximum value to 10 even though we could then of course access that later on and assign the value by a code so if we want to access it via code we need to give it an id so let's call this one progress bar i'm going to set the minimum height of it to 50 density pixels so even though it's going to wrap its content it should at least be 50 density pixel high and then the default progress so the progress at the start you can set that via the progress property and i'm going to set that to zero because it should start at zero and then it should fill up each time that we get to the next question then there are two more settings that i want to set for our progress bar and one of them is to make indeterminate false so we can set the value to false if you want to make it a determinate progress so determinate mode for the progress bar when you want to show that a specific quantity of progress has occurred so here for example you can see determinate progress bar that is 25 complete so the progress is set to 25. so i'm going to set indeterminate to false and then finally i want to assign a style or define a style that i want to use and here it's going to be android and here not the add sign but the question mark at question mark android attributes and then there is the progress bar style horizontal so i want this to be a horizontal progress bar style and then underneath i want to have a text view so i'm just gonna paste in the text view here and by underneath i mean underneath the code even though in the visibility or in the view it will be next to each other so the text view will be next to the progress bar you can see now this is the text view that we have here and this is the progress bar so this is how the ui currently looks because we haven't filled it up completely yet but you can see here that the text view has an id so that we can access it because we need to change its text currently it's 0 out of 10 but later on we will fill it up each time or increase the value each time that we answered another question then we set the width and height to wrap content the gravity is centered we have a little bit of padding 15 density pixels so a little bit of distance there and the text color hint will be this grey color and the text size will be 14 so that we then in the end get this element here all right and underneath we have four times this textview here so this is not a button this is an textview so let's go ahead and use textviews here and i'm just gonna paste them in here because they all look the same and i'm gonna go through one of them for you to see so it has to be in between those two closing linear layout brackets because it's underneath this linear layout but it's inside the greater linear layout which is our second highest parent so to speak all right so let me put that in there so what i want to use are four text views and they are all the same pretty much the only difference is of course the text that they will display and the id that they have all right so the id and this one is tv option one text view option one they're going to match the parent and width use only the height that they need the margin should be density pixels so that they are slightly apart from each other then i'm using a default option border background so what this is is going to be my own drawable resource so let me create this file by hovering over it so what you can just do is you can set the background as add drawable and then just create a name that you have not created as a drawable yet and then hover over it to create this resource file and then you can just leave the default and we're going to implement this file right now so what i want to have is a shape so basically i want to shape my text views so that they appear like buttons and you can do that with the power of xml so you can pretty much create your very own design by using xml files all right and what i need in here is to assign the right shape to it so here i'm going to say that it's going to have the shape of a rectangle so this textview here is a rectangle it has a certain background which is white as you can see and then it has this little gray stroke that surrounds it so what we need to do is we need to create all of that we need to say okay i want to have a stroke surrounding it i want to have a solid background color and i want to have rounded corners because you can see even though it's rectangular it has rounded corners here so let's do it one by one let's create the stroke first so i want to create a stroke in here and this stroke will have a certain width and i'm going to say it's just one density pixel thick so it's a super thin stroke and then i want to define the color which will be a very light gray so it's going to be e8e8 so this is going to be as i said a super light gray and then i want to have a white background color so if you want to have a background color you use solid here because it's a solid background color which is part of the shape so here i'm going to use add android color slash white and then finally as i said i want to have rounded corners so i'm just going to say the corners should have a radius of five density pixels and that will then create this rounded corner shape that we have here all right so this is going to be how this shape allows our textview to look like so going back to our activity quiz questions xml now the error disappeared and it accepts this background here so you can see there are our buttons and they are rounded and they have a white background and a gray stroke that surrounds them then i centered the text so i'm setting the gravity to center so that the text is centered inside of the text view or button however you want to call it even though it's not really a button i have a padding so that it makes the whole button bigger so this padding is taking care of this distance between the text itself and the stroke that surrounds it so here it's 15 density pixels between argentina so this text and the stroke towards the bottom and towards the top and then we set the text color to be gray and the text size to be 18. and of course the text in the tools will just be in this case apple and the second entry this google and so forth so you can see they are all the same the only difference is this tools text and by the way tools it's just for us to see it in this design overview here so if we want to look at it and see it here so it's just to see it inside of our ide it's not going to be visible in the application itself during runtime and then of course they have different ids so one of them is tv option 2 tv option 3 and tv option 4. okay so now there is one last element to be added and that is this submit button here at the bottom so let's go ahead and add that there as well it's inside of this linear layout and it's just a regular button this time so we're not only using text views as buttons but you can see the possibilities are limitless you have a lot of options how you can do that all right so layout width is going to be match parent and the height will be wrap content so we've seen that multiple times before and then what's important for buttons is that they get an id because we want to be able to click on them so submit should be the id and then we need to define the layout margin so that we have a little bit of distance towards all directions then the background and i'm going to use the color primary that we have okay so it's this purple color then the text should be submit the text color should be white so if we look at it currently the text is white and as you can see it's also bold so let's make it bold as well it's a little bigger than this text for example so it's 18 sp so the color will be android color slash white and the text size will be 18 sp as well as the text style will be bold and now at this point the colors they don't look like the colors here so in our app if we run it they don't look the same we don't have those exact colors so let's change those as well and we can do that in the colors xml so it's inside of your resources folder then values and then colors.xml so the colors that i want to use are 9 0 1 3 f e for the color primary the color parameter dark is 6 a 1 b 9 a and color accent will be the same as our color primary even though we're not really using it but in some cases internally this color will still be used so that will be important and before running it i'm of course missing something in the color here so when creating a color inside of your default option border pg xml or general and using xml you of course need to have the hashtag at the beginning of the color name alright so let's go ahead and run it again okay so there we are so you can see the hint now also has the right color so that was an error before or a mistake that i had in there yet and there we are so you can see of course that the text is not really filled yet so it doesn't display anything but other than that we can see that our ui is there of course the texts are still missing and of course we have to assign all of those values in our quiz questions activity so we get the data from our questions list so please go ahead and try to assign all of those values so pause the video and try to assign the relevant information on the relevant values so for the progress bar the tv progress the questions the options everything a quick hint you will need to have the current position that you're looking at all right so i hope you tried it so well current position is going to be one so we started one the first question and then the question that we're currently looking at will be of type question nullable which we assigned to questions list at the current position minus one so why do i use -1 here well that's because the current position is set to one because that's how we named our constants so the first question we give it the id of 1 but internally this is the 0f index so it has an index of 0 inside of this arraylist because as you know arraylists start counting at zero so that's why we need to use the currentposition minus one here in order to get zero as the first entry of our questions list and then at that point we can just go ahead and assign the progress bar so we're just going to say progress bar dot progress is going to be the current position so it's going to be our progress bar here at the top we called it progress bar so we gave it the id progress bar so i'm just accessing this thing here and i'm assigning the progress one and then tv underscore progress dot text should be our current position plus slash and the progress bar maximum so progress bar get maximum or get max and that will actually just be max and then accordingly we need to set the text of the question so tv question will be text is equal to question thought question so the question is the current question that we're looking at and every single question object has a question string okay so not to confuse you but that's how we called them here then we need to set the image of iv underscore image dot set image resource and that one will be question dot image so that's how we can set the image resource i think that was the most difficult part of trying this little exercise then we have tv underscore option one option two and so forth and we need to assign texts to them so text of the tv option one will be question dot option one and so forth all right so let me paste them in here and there we are okay so at this point we can run the code again and see if everything will be populated accordingly all right so let me enter my name and there we are so what country does this flag belong to we have argentina or the argentinian flag we have our progress bar which is set to 1 because we are at the first question then we have all of the four possible answers as you can see in the same style and then at the bottom with the submit button all right we covered a lot this video and we finally brought everything together so we brought the model that we prepared and the ui together to display what you see here and that is super powerful so what's happening here is really powerful and it's also a very important approach that you will need many many different times so using objects is very strong and very powerful so that's what we're doing here this is the model that we created and now we use this model over and over again and that is a big part of object oriented programming all right i'd say let's move on to the next video welcome back in this video we are going to set up this activity here our quiz activity quiz questions activity to be precise and it's going to have the functionality where we can select one of the options and it will have a different appearance once we selected it as you can see there is a stroke here which has a different color surrounding this textview and it's a lot thicker so what we will need to do is to also reset that for all of the buttons or in this case it's text views but then set it for the one that we click on because we don't want them to stay all active so to speak after we clicked on another one for example if we change our mind in order to create this functionality we need to first of all create such a background color or such a drawable for our button so we had this default option border but now we also want to have a selected option border so very similar to what we have here so we can just go ahead and copy that and then we can re name it selected option border and here we need to make a minor change so here the color will be color primary that one here and then we could of course also change the width but maybe it doesn't make sense so it really depends on how what you prefer but i think for now this is going to be fine so now we just change the color for the selected option and now we can go ahead and use that so let's go back to our quiz questions activity and here we are going to require several variables for example we need to know which question we currently are at then the questions list and then which option is selected so these are very important variables if we look at it you can see the question well in our case it's always the same question so it wouldn't be that much of a problem here but still if you each time have different questions then you of course need to take care of that then we need to know the questions list in order to have the questions in general so to even know which questions we should position at the right spot and then of course the options that we have here as well as the selected option all right and the questions list will of course contain the information about the different options because a list of questions is a list of our model that we created so of objects of this model that we created which is called question as you might recall which has the question but also all of the options the image and the correct answer number all right so let's go ahead and create those variables first so private variable which i'm going to call m current position which is going to be an integer and i'm going to assign one to it because each time we get to this activity we should start with the first question then i'm gonna have a variable for the questions list which will just be an array a list of questions so of our question object that we created and for now i'm just going to set that to null because i will need to initialize it later on so inside of the oncreate and then private var m selected option position so i need to know which option the user has selected so for example this one option one option two option three option four so then i can go ahead and then check if the answer is correct so why did i make this null well because i need to have an object that i can use in order to set this questions list okay so what we did before was we created this variable but only locally so it was only visible inside of this oncreate so it's not in the scope of the whole project so we change that now and we are going to use this m questions list which is our global variable here that we created that we can now go ahead and use all right so this lock request will not be required anymore and then also this part here is also something that we just created for testing purposes so we will need to change that of course as well as well as pretty much this whole part so we want to put that into a function which will take care of that okay so we could go ahead and create a function for this which i'm going to call set question and india we're pretty much going to do the same thing as we've done here so let's go ahead and put that here of course we now need to change the variable names because we had this global variable called m currentposition as well as the questions we get them from our m question list so here we're just going to say m question list and by the way we assign it here and questions list get the m current position minus one so it's pretty much the same code that we had before and here we can also directly use the approach as you can see so you don't need to use the get function here all right and then of course the progress bar should be at the m current position because now we're not using the local variable that we had before but we're using this global one which we have here all right this one of course will also be the i'm current position accordingly all right the rest can stay the same for now and of course we need to go ahead and call this questions or set questions method here in oncreate all right the next thing that we need is a function which will take care of assigning the default layout for our buttons which they have by default when we get to the screen so we could either go ahead and start with defining the color here or defining this background that we used for the selected button but the thing is each time that we click this button or click on any of the buttons we also need to make sure that all the others are default so what we can do is we can make them all default and then change the one that we have selected okay in order to do so i think it makes sense to start with the function that makes them look default first and that will make more sense once we do that so private function default options view should be well options array list of text views so you can see we can even create array lists of ui elements or view elements as this text view is one so what i want to have is the different options that we had and the different options are our text views here type text view option one takes you option two and so forth so what i'm going to do is i'm going to assign them to my options array list by saying add and then i'm gonna assign an index and this one will be tv underscore option underscore one then options add one tv underscore option two and so forth all right so we need to add all of the options that we have here and as it is with arrays we start at zero so with arraylists we start counting at zero and options add three tv underscore option four all right now we can go through a for loop or create a for loop which will go through all of the different options and which will assign the default user interface or the default ui for our button which is this default drawable that we created so this default option border which was just this white for slightly gray border which surrounds the buttons okay so let's do that let's run through a for loop for option in options i want to go ahead and set the text color to be colors or color dot parse color and it should be the gray color that it was by default so it's not in here it's actually in our activity quiz color so here we had this color here which is this gray color so i want to use this same color here all right so this the default color if you look at the button you can see that this is the default color for the text and we want to set that because you can see when it's selected the color is not the default color anymore but it's this black all right so we need to make sure that we set that accordingly then another thing that i want to set is the type face so option dot type face is going to be typeface dot default so what is this typeface and i need to type it correctly here like this so the typeface set the typeface and style in which the text should be displayed so we just set it back to the default typeface so the default appearance so to speak all right and then i need to assign a background for my option so option background and what is this background well it's our drawable that we created which is this default option border bg in order to set such a border bg in this case so such an xml file we can use the following approach so context compat get drawable and then we need to pass in the context which is this so in this class and then the drawable that we want to use and it's in our resources folder so we use r then we get it by going to the drawables folder so you can see here it's inside the drawable folder and in there we have a file called default option border bg that's the file that we created so this one here so we just assign it for that now all right and that's already it for our default options view now the thing is each time we set a new question what we also should do we should set the default options view just to make sure that all the buttons are back to the default appearance before we then later on select one of them by clicking on them for example now of course all of our buttons should have an on click listener so that we can click on them so i'm just gonna say tv option one dot set on click listener and i'm gonna assign this to it then tv option two should also have an on click listener which i'm gonna assign this to and so forth now you can see that this is not accepted here and that is because our class our quiz questions activity is not a click listener so we can add that by using the following line in a second so let me just finish that on click listener for all of our four buttons and then i make this class and on click listener so on click listener so now you can see once you do that the class is complaining because you need to implement the members so we need to implement this member which is the onclick method so let's implement that and you can see now we have this onclick method here which we can now define so what do we want to do once the user clicks on the button well we want to select it you can see we want to make it selected as we have it here so it should have a another color for the text then it should have another color for the background which is our other r dot drawable so it's just this other xml file that we prepared all right so we could of course do that in the on click each time but we can also prepare an function which is going to take care of that and i'm just going to call this function selected option view so let's go ahead and create that private fun selected option view which needs to have a text view so text view and then the selected option number which is of type integer all right so we need to know which option was selected in order to do the right thing all right so here first of all what we will do is set the default options view so we reset everything to the default once i click on something you can see this one is reset so armenia for example this button is reset to the default view and this australia also is for a short moment still default but just a second later then we set this design that we had set before so now we pretty much need to assign that this button that we currently have clicked on is going to be our i'm selected options position so the selected option this one here selected option number is going to be our new selected option position and then the next thing we need to do is similar to what we have done here where we assign the typeface and everything all right but this time it's not for the option itself but it's for the text view that we are looking at okay so let me copy that and put that in here because now it's not the option as i said but it's the text view that is passed to this function okay so there we are again and tv now of course i want to use a different color here so i'm just going to use 363a 43 which is also this black color which or dark gray color which we have used before so by this i set the color of our text and then the typeface in order to change the typeface you can do it the following way so you can say that you want to set the typeface by saying which typeface here and how you want to set it type face dot bold so i want to make the text bold so that's how i can do it and then the background of course is now not our default options border but our selected options border which is this xml file that we prepared which has this purple border or purple stroke which surrounds it all right and now there's just one thing left and that is to use this function and we're going to use it in the on click here so we can use a 1 here when v dot id is r dot id dot tv underscore option 1 what shall we execute in that case well i'm just going to say selected option view is going to be rv and then we also need to say which is the selected option number and it's going to be 1. now our v is a view but we actually expect a text view here so actually what we can say that it's our tv option 1. which is of course this textview here so we can directly pass a whole textview to a function which we then can use okay and that's what we do here so now we call this function that we created we pass in the tv option one which is this text view that was required and then we pass in the number in this case number one because it's option one here as the selected option number and then it goes through this process here so it says okay let's reset all the buttons then select the or use the option that was used so in this case one as the selected option position then select the tv text color to be this dark gray color set the text to bold and set the background or the border of the button to be this extra drawable that we created and of course we need to do the same thing for all the other buttons as well so here we go ahead and say what if it's r dot id dot tv option two so if the second option was clicked then i want to also call the selected option view pass in tv option 2 and pass in the value 2 as the selected option here and of course for the other buttons as well so tv underscore option three when that one is clicked then we also want to say selected option view tv option three and the values three and finally the last button which is r dot id dot tv option 4 and when that is clicked we select option view tv option 4 comma four so this is just another way of doing it as we would have done in our oncreate where we could have set the onclicklistener and implemented the code directly here that would have been an option but as you can see there is another option to use buttons and that's to set the onclicklistener in the oncreate make the class itself follow the structure of an onclicklistener and implement the on click event here so what we're doing here is we are implementing the on click listener to our class quiz questions activity and at this point we can test it and we will see that we get the same functionality as in the demo that i've shown you before all right let's test it start and then let's click on the buttons and as you can see they are beautifully set to default and then also the one that we click on is highlighted all right perfect so we have prepared the buttons but we also have prepared the selected options and the questions so we went a little further and that's what we're going to keep on improving in the next video because the submit button of course doesn't do anything yet and that's what we of course still need so see you in the next video welcome back in this video i would like to add the functionality that allows us to see if an answer is correct or not so for example this is the flag for argentina if i select australia here for example and i click submit you can see that the background color is red and also the text is fed here because that's a selected answer and then this green one is the correct answer or would have been the correct answer you can also see that the submit button now works and once we click on go to next it goes to the next question and also here we have for example let's say i select australia here that's the correct answer so it's going to give me the correct background so what i need is a background which is going to be green and then another background which is going to be red so green for correct and red for incorrect and that is something that we quickly can set up so i'm just gonna go ahead and go to my resources inside the drawable folder we have this default option border which i'm just going to copy and paste once again and i'm going to call this one correct option border pg and what i'm going to change in here is that i don't need a stroke so it's still going to be a rectangle but i don't need a stroke and the only thing that i want to have is another background color so here i'm going to use the default color holo on the screen green light color which will be this light green this is the correct border and now let me duplicate that correct option border bg once again and this one will be the wrong option border bg and here the only difference is that we are going to use hollow red so how low underscore red and here also the light color all right so i don't need use a stroke as you can see here there's no stroke surrounding it so no border it's just plain background and of course i need to find a way to set those accordingly so i want to set the buttons accordingly and that's what has to be done in the quiz questions activity so the first thing we can directly do is in the oncreate function we can give our button submit the set onclicklistener here and we're gonna pass in this and then we could of course go ahead and assign the submit functionality in here directly so we could just go ahead and say r dot id dot and the button was called button submit so once we press that what shall happen but the thing is we have nothing prepared there yet so we will need to also be able to assign the right color for our background so for the background of the button and therefore i'm going to create a new function here private fun and i'm going to call this one answer view and it needs to know the answer so the end of the answer and what it should draw and i'm going to call this one drawable view which is also going to be an integer because the drawables that we have are internally stored as integers okay and now i can check when the answer is 1 then i want to set my tv underscore option one background to be context compact dot get drawable and where do i get the drawable from well first i need to pass in the context and then the drawable view and that is going to be the integer that is passed to this function okay so this function is really just going to take care of assigning the right color so the right background to our options so if the answer i integer is 1 then it will be setting the tv option 1 background okay now we need to do the same thing for the other options that we have so same code pretty much tv option only that is not tv option one but it's tv option two and so forth all right so here it's three and three and here it's four and four all right so that's our answer view function and now when we press submit what we see here so let's say this is of course brazil but i select belize here and i press submit then the correct answer gets a color and the incorrect answer gets a color as well so this is incorrect in our case if we had an incorrect answer selected then it will be red and if we had a correct answer selected it will be green and nothing else will be colored but if we have an incorrect answer then of course the correct answer will also be colored in green so that's what we will need to do once we press submit so here inside of our on click that's where the our ids button submit functionality is to be implemented so here i check if the m selected option position is zero then i want to go ahead and increase that by one so increase the current position and why would i do that well why would i even have this situation where the selected option position is zero because the selected option position by default is going to be zero here it starts with zero because we haven't selected anything so once we have selected something the value will be overwritten of course and we will accordingly move on with our code right but if it's zero then i want to go to the next question so to speak okay and that is done with this position where it's handled with this position so i increase the position by one saying that i want to go to the next question okay so the selected option position will be of course checked and changed once the user presses on any of the other buttons and then it will be assigned but at the same time we will reset that so the selected option position back to zero once we are done with coloring everything and letting the user know if he was correct or not okay it's a little confusing but as soon as we get there it will make a lot more sense all right so if we press submit then there are multiple things that we need to check so first of all we need to check when the current position is less or greater than the questioned list size if that's the case then we want to set the next question so we want to go ahead and pretty much reset the screen so when we click on this button you can see now the question has been reset so the question text has been changed the image has been changed of course the answer options have been changed as well so that's what happens in the set question function and then otherwise so if that's not the case so else what i want to do is i want to write a toast here for now make text which is going to be you have successfully completed the quiz so at this point we later on want to display the finish screen so to speak or result screen so you have successfully completed the quiz which should be displayed for only a short period of time dot show all right so that's our toast here nothing fancy but a general toast and we will replace that later on all right so this is our when here but we had another if surrounding it so here at this point that's where i want to have an else so if we do not have m selected option position 0 it means that we have an option position so the user has selected an option so what we need to do is we need to create a question here which will be our m questions list get m current position so we want to get the question at the current position minus one all right so as we know the questions list is an arraylist arraylists start at zero so we want to have the first entry or whatever m current position currently is so if it's let's say five then we want to have the fifth entry which is our index four inside of our m questions list all right and that's our question now we can check if the correct answer that is inside of this question so question correct answer is not equal to our m selected option position and here it's correct answer and a correct answer and if that's not the same then we know that we have selected the wrong answer so what answer view should do is it should take the selected option position and draw it accordingly so drawable dot and here it was the wrong option border background should be set so the button should be read pretty much so if we selected the incorrect answer that's what happens and in any case what we want to happen is that our answer view with the correct answer is also set so question correct answer r dot drawable dot correct option border pg because if you look at it this one here for example is belgium so if i select belgium then belgium will be green no matter if it's correct or not okay or if our selection is correct or not of course and in the next example here let's say i select france even though this is i think it was fitchy then you can see that my incorrect answer was selected red or the background was set to red as this if statement here does but the correct answer is set to green in any case so it doesn't have to be inside of an if and else statement so to speak of course in the greater scheme of things it is inside of this if else but not in terms of when we are at the right spot in our code and then when we are at the last question we want to make sure that the button here at the bottom changes from go to next question to submit so what we can check here is m current position is equal to the m questions list size then the button submit text should be finish and otherwise it should be set to go to next question now this point we have gone through the whole process of assigning the correct color and so forth and we go to the next question okay so once we click on once again you can see we go to the next question because here we set the question but the thing is that will never happen if we don't set our selected position back to zero so that's what i'm doing here i'm just going to assign 0 here all right and then there is only one last thing to do and that is to set the submit button accordingly so you can see we have go to next question and submit but this is not what we have in our program yet so we need to set that accordingly and that is each time that we set a question so we need to go to our function set question which is rather far up in my case so here inside question after we set the default options view what we can do is we can check if the current position is equal to the questions list size and if that's the case then change the text to finish and otherwise set the text to submit so button submit.text is going to be submit so each time we have selected a answer you can see the text has changed to go to next question but we need to set it back to submit and that's what happens here except of course we are at the last screen then we just want to display finish all right and now this point we can test our application and see if all of that is actually implemented as we expected all right there we are let's test it so let's see argentina okay answer is correct go to next question and as it seems we're not moving over yet so let me select argentina once again so we need to make sure that we're actually moving over and you may be spotted it's exactly this one here i'm current position so we had that earlier for testing purposes but now it's in our way so we need to get rid of this line and now test it again because what it did is it always when it set a new question it set it back to question number one so it's never gonna give us the right question right so it's never gonna get us the next question so to speak all right let's test it again let's enter a name let's press start and now select argentina submit go to next question and you can see everything works as intended so we can go through our application as intended let's make a mistake here as you can see it's still gonna work and then of course here if we make a mistake let's say i say this is georgia i can still change it back later on and go to the next question so we still have this functionality but i wanted to really keep it super simple so if somebody wants to trick the system he can do so you could of course create an additional help or variable which takes care of the user just answering once and not being able to change the answer afterwards and that can be done by just simply checking each time that the user presses a button if you already pressed a button inside of this question so when set question is called you could have this variable check here all right i'd say let's go to the next video welcome back in this video our goal is to create this ui here this xml file and of course we also need a new activity which is going to be the result activity so this is what should be displayed in the result activity and for now the goal is just to create that and also to have a variable which knows how many answers we had correct or how many correct answers we selected and yeah that's pretty much it for this video so if you want you can of course try to build that yourself so you can pause the video and just go ahead and try to build that ui you will of course need to have the image you can download it from the lecture and then yeah good luck with it all right otherwise of course i will show you how to do it so let's go ahead and create a new activity here which will be an empty activity and i'm going to call this one result activity once it's ready let's go to the manifest and adjust the activity accordingly so i want to have the no action bar theme and also the portrait orientation for my result activity so i'm just going to add that here and then we can go back to our quiz questions activity because here what we needed is a variable which knows how many times we have answered correctly so let's create one private var m correct answers it's going to be an integer and which is going to be set to 0 at the start and when do we want to increase that value well each time that we assign the green button as the option so each time that we had a correct answer here so pretty much we had this if statement where we checked if we were incorrect and if we weren't incorrect then we can increase the correct answers by one so we are inside of our onclick function here for the submit button when we had the correct answer check here and if it was correct then we increased by one so pretty much what we say if it wasn't incorrect then we increased by one now in this video because we have already created so many different uis i'm just going to keep it super simple so i'm just gonna paste it in here and i will talk over what activityresult.xml looks like so what we have is a linear layout and it matches the parent in both directions so width and height it has a certain background which is our drawable icbg then it's centered horizontally the orientation itself is vertical so things are put on top of each other we have the padding of 20 dp so a little bit of padding in all directions and then we have a text view here saying result which is bold and has a text size of 25 sp it's white text the margin towards top is 25 so it's not all the way up all the way at the top so that's the idea behind it and then there is one very important part missing and that is this image view here so you can see i need this ic trophy so what you can do is of course you can download it from the resources and go over to your projects to your resources folder drawable and then paste it in there and once we paste it in there we can see that it appears here so in this case the device that is by default used here is this pixel in my case all right so this is how it's going to look like in the pixel that's why i only have the ice this ic trophy png which is the size mdpi but if you want to have all the different sizes for the different screen sizes so to speak then you should of course import the whole folder as you can see there are different sizes here the low density pixels medium high extra high extra extra high and extra extra high so it's going to adjust accordingly to the screen size if you have all of those in there in my case i just kept it simple for this video so i'm just using the ic trophy png but otherwise of course import the whole folder here so that it looks fine on different screen sizes so for example if i now go over to this screen size you can see it's pushed towards the top a little bit because the image is not that big alright so it really depends on the screen size that you look at all right so that's our image view and as you can see it wraps the content we have the content description of image and then underneath we have a little text view saying congratulations and it says hey congratulations which is white 25 sp bold texts so it's this one here then we have the username which is another textview you can see it's not as big it has 22sp has the same margin towards the top also wraps content in both directions then we have the text view which says your score is 9 out of 10 and it's important that this one has an id so that we can override it and it has less margin as you can see here so the margin is not as big as it was here and then the button finally which also has a margin of 10. so it's this one here towards the top so they're equally far apart from each other those three elements each time 10 density pixels and then text size is 18 and the text style is bold and the difference here as you can see is the background is white and the color of the text is in this case this purple color which is our color primary so if we change the color primary that color will change as well all right and in the next video we are going to finalize this whole thing so we're going to add some more features that will then finally allow us to get over to the screen because this screen needs to know how many answers we had correctly and so forth so we need to put this information over to this result activity alright so see you in the next one welcome back now there is one last thing to do in our application and that is to finish the result screen so what do we need on this result screen well we need the username and we need to have the amount of correct answers and of course the amount of total answers so these are information that we need to send over to the screen and where do we get them from well we get the username from our first activity which is our main activity and we can pretty much get the other two from our constants variable so here in our constants variable we can go ahead and create several new constants which will be const value this one will be underscore username i'm going to set that to being a string and i'm going to call this one username then const value and here of course i'm saying value but it's a vowel it's an immutable variable so then we have total questions which also will be a string of type total questions or at least that's going to be the entry in there and then finally another variable which will be the correct answers which will also be correct answers as a string so why do we even need them well if we go to our main activity now and to open up here the main activity we can see that we have this intent and this intent sends us over to this quiz questions activity so we need to put some extra information into this intent so we can go ahead and say put extra and what do we want to put extra well first of all we need to have a key so to speak and that will be the username that we sent here so constant dot user name is going to be and what is the username well we get the username from the user entering his name into et name so we can just go ahead and read that from there we can just say et underscore name dot text dot to string so now we send this information over with the intent to the next activity which is our quiz questions activity because we move over to this activity by starting this intent right so we now can retrieve this information in the next activity which is our quiz questions activity so here i'm going to create another variable at the very top which will store the username so var m user name which will be of type string nullable and i'm gonna set that to null for now all right so now of course i need to set the username and how can i set it well i get the username from the intent so i can do it in the oncreate because as soon as the oncreate is fired we already were sent over and the intent has already sent its extra information which we have put in the main activity so here we can go ahead and retrieve this information by storing it in our username variable which is intent dot get string extra and now at which position was the string extra well it was at this position here so that's the key that's pretty much the name not the username itself but the name of the username key all right so it's going to be this one here so now we get the username whatever the user has entered in the main activity over to this activity here which is our quiz questions activity now the thing is in this activity we don't even need it we just need it in the results activity but the thing is that we have this flow that we move from the main activity over to the questions activity then over to the result activity all right so this is one way to do it so we sent it over with intents each time of course we can also store it on the device each time and overwrite it by using shared preferences but in this case we're going to keep it simple we're just going to send it over to the activities via the put extra functionality all right now we need to find the right spots to move over to the result activity and that is in the on click when we click submit so once we click submit and we move over to the next screen or we should move over to the next screen which is here currently we have this make text here but instead at this point we want to move over to the next screen right so we need to create a new intent so let's go ahead and do that so intent is going to be a new intent which needs to have the context and of course we need to import intent so let's do that hold enter to import it and then we need to say to which screen we want to move over and here it's the result activity class the java and here's a colon twice so double colon so that's our intent now the intent itself is ready but the thing is i want to give this intent additional information so i want to put some extra infos to it so i'm going to use put extra here again you can see there are many different overrides for put extra many different options so either we pass in a string or we pass an integer and so forth so we could pass a lot of different information in there but we just go and use the same function every time so we can just pass different information it's going to use the right information every time so first of all it needs a string so here constants dot username so we're just going to use the username again to pass it over and where do we get it from well we created this variable called m username which we created here at the very top so here the username and then we filled it in the oncreate here and now we use it when we press the submit button all right so that's our first intent to put extra then we need to put some more information extra and i told you which ones they are so if we look at our result activity we can see it's the amount of correct answers and it's the amount of total answers all right so let's put this extra information here constants dot correct answers and it's the m correct answers variable that we created and then another intent put extra where we put the extra total questions so constants dot total questions which is our m questions list dot size i know the m questions list is a nullable so we need to force unwrap it here or force it here and now of course we can start this activity with that intent that we prepared okay so here we put all the extra information so this is the key and this is the value and we have different keys and we prepared those keys to be constant so that we can always use them with the same name so to speak and we don't have to write them here manually because here the correct answer constant is of course going to be correct answers all right so at this point we send it over and now we of course need to receive it and retrieve it in the result activity so when we get to the result activity and that is the in the oncreate that's where we get this information but we need to use it so we need to catch it so to speak all right so in order to get the username we can just create a variable here called username and we get this from the intent so getstring extra at the position constants dot username and now we can use this name to set it as the tv underscore name dot text which is going to be the username that we prepared so that one here and what is this tv name it's our text view and the activity result here which is this text view called tv name so this one where currently it says username so we need to import tv name you can see here it needed to have this import which is this one here and now we can use it alright so we set the username now we need to set the score text which is of course going to be dependent of two values so one is going to be the amount of correct answers and the other one is the amount of total questions so val total questions is going to be intense get into extra this time because if we look at it here we send over m correct answers and it's an integer all right so we need to pass in the right value of course and we need to get the right value here so we're not getting any string as we did before but we get an int so get into extra is going to be constants dot total questions now val correct answers will be an intent get in extra because the correct answers is also an amount so it's also an integer constants correct answers now the thing is you can see that it's complaining here when you get an index from that something is missing and that is because something could go wrong in that process so if something is missing then i want to use the default value of 0. so i'm going to do that in both cases i'm just going to say the default value will be zero so if for whatever reason the int wasn't sent over then use 0 as the alternative value or as the default value all right and at this point we can go ahead and say tv underscore score dot text is going to be your score is and then the correct answer and maybe i should call it correct answers out off and then total questions all right so then if we look at our activity result you can see here we have this finish button so this button currently doesn't do anything and it's inside of our result activity of course so what would make sense to give this button well i'd say it would make sense to give this button the functionality of when it's clicked that it sends us over to the main activity so you can of course create an intent and then in the next step use the start activity but you can also pass in a new intent directly here so you can directly say this and then send me over to the main activity coloncolonclass.java all right now intent needs to be imported here as well so let's do that real quick and that should be it so now we have everything prepared and we can test our application all right so i'm gonna use my name here dennis now i'm gonna go through all of the questions here and now let's submit the last two answers and we can see we get to the results screen your score is 10 out of 10. it says dennis here as we have entered in the first activity in the main activity and now let's finish and move over to the main activity all right now at this point of course we can still go back because we didn't finish this activity but that's something that you can of course do here as well so you can just say okay finish now this will close the activity another thing if we look at this activity we see that at the top we have the status bar so of course we can get rid of the status bar as well by just using the same line that we had in the main activity where we said okay deactivate this please so let's just do that in here as well and then it will be fine so testing it again we will see that those two features now have been implemented so i'm gonna say test here this time so it will be a different name i'm gonna make some mistakes this time i'm gonna go real quick through this i want to make plenty of mistakes doesn't matter and then let's finish and you can see your score is three out of ten now let's press finish close the activity because when we go back now you can see we go back to the quiz activity now of course you could go ahead and say all right i don't want to have the quiz activity as well so maybe it makes sense to go to a quiz questions activity and once we move over so once we send this intent here when submitting we also finish the current activity all right so that was it i hope you enjoyed this chapter so we created this little app now of course you can go ahead and change your constants which means change your questions you can change the amount of questions you have you can change the type of questions you have you can use different images and so forth so you pretty much have created a whole quiz app that you can now adjust to your liking and then send to your friends publish it to the store whatever you like alright so i hope you enjoyed this and thanks a lot for being part of this and see you in the next one

Channel: tutorialsEU

Views: 116,415

Rating: 4.9548407 out of 5

Keywords: Android app development, Android programming, Develop a full project, Android course, Android app programming, app development, Android tutorial, Android app tutorial

Id: b21fiIyOW4A

Length: 128min 22sec (7702 seconds)

Published: Thu May 21 2020