Xamarin Firebase Tutorials - Project Setup and Design

[Music] hello so welcome back to this tutorial series so like I already explained in the introduction we're going to be practicing with an app that will help us to understand how to build an Android application rosamma ring using firebase okay so I'm gonna pull up the app that we're going to be building so this is what we're going to be having at the end of the day so if you're yet to see the introduction video I'm gonna put a link in the description so you can watch the introductory videos so that you know exactly what we are going to be building in this tutorial so if you're new or this is the first time of dropping by on the channel do also subscribe and turn on the notification button so that you can always get notified when I made this kind of video so guys without spending much time let's jump right into it okay so this is the start page of visual studio 2017 so I'm gonna go ahead and click on create new project I'm very certain that almost everybody knows how to do this right so I'm gonna select Android so here we're gonna name the project I'm gonna call it ins a marine firebase okay so this would be the name of our project and ensure that you click this checkbox create directory for solution and afterwards we're gonna go ahead and click OK so visual studio has some already made template for us but I wanna start from the scratch okay so we're gonna select blank app and select okay so our project is being created man so our project has been successfully created so I also want to mention it that by default visual studio 2017 comes with Android design library Android support design library so you may not need to install that from scratch again but you can as well go ahead and update the support libraries okay so we can go ahead and make that update but also if you're using Visual Studio for work you might not have this so you probably might need to install android support design library from scratch so the first thing we need to do will be to update our support design libraries so the latest versions so we're gonna go to an or get package manager so this is our support design library so you can see that there is a new update version 28 so we can just go ahead and click update so we gonna get the latest version of Android support design lab okay that would take some time and also we will accept all the licenses boom so the update has successfully been installed so the next thing we need to do will be to load up our our layout our main layout so we're gonna go to our layout folder and click on activity main so this is the file for our main layout so we are going to load that up so while our design is loading up we can go ahead and start creating some resources that we're going to be using InDesign in our app some of those resources include the colors and the Stars right so we're gonna go to our values folder I'm gonna drop it down so I'm gonna go to colors don't XML so I'm gonna change these colors to the ones that we saw in the design of the app so we want this shade of blue for our Koala primary and also we want this dark shade for our Colo primary dark so we're gonna go ahead and make those changes so here we're gonna change it to 0 6 9 0 C 1 so here we're gonna have 0 6 7 4 9 B so this will do and for our ascent color we are going to change this to e e 8 6 1 F so this reduce so we're gonna go ahead and hit ctrl s to save this so let's go back to our main layout ok boom so our main layout is fully loaded mind you we've already change this color as you can see it's already resolved this is the new team we just set and we can go to a stars the X amount to confirm that our team was well set so you can see that here so this is our stars the XML but there's something we need to change here we don't want an action bar right because we are going to be using a tool bar so we are going to change this to no action okay so we're gonna save this as well so now let's go back to our main layout design so what we need to do here is to proceed and design our app and this is exactly what we want to have at the end of the day so the first elements we are going to add will be a toolbar so I'm going to say Android so we just added our toolbar of course our toolbar needs some attributes so we're gonna go ahead and add an ID so we can go ahead and add some other important attributes for the toolbar like the height width background team and elevation so guys let's just go ahead and do that so what this team does is that it makes it possible that when we write anything on the action bar or the tool bar it will show clearly right or it would display in white so when you use doc it means that whatever thing you write on your action bar will display with a white corner right it's more like the test color would be white so let's go ahead and add some elevation that's some shadow it should be for DP and that's it so the next thing we need to do will be to add our text view and these two icons that we have here okay so it is a text view and this is an image and this is also an image so we're gonna go ahead and add those views inside of our toolbar but before that we need a relative layout to help us structure things okay so we can I say relating layout I'm gonna say the layout side you should be wrap content I'm gonna set the layout sweet you should be a quote too much parent so the next we need to define will be a textview so our test view we're gonna define some attributes for it so we want to make our test view you know to be at the center as we can see here it's at the middle of the toolbar mind you that this is also contained in a relative layout so we're gonna say we're gonna set the height this will be a quarter wrap content and the wheat go to match parent and the nest will be the gravity gravity will be center and you know add the test and the test would be alumina and we're gonna add some style to the test we want it to be bold on the test color want it to be white and the test size wants it to be a little bit large I'm gonna use it in SP I think 18 SP is large enough so the next thing we need to do will be to add this to image views research and the add new image so to do that we're gonna define an image view and we need to set some attributes so you're gonna first of all set the height which should be about 240 DP and the weights will also be 40 DP the ID will be a quarter such so the next thing would be to align it to the left so we're gonna set this to true a line parent left will be set to true and the next thing we need to do a bit to add the images okay so we need to bring in the drawable images that were going to be using as our icon okay and I had those images saved on my desktop so I'm gonna go ahead and put them in so I'm gonna go to our resources and create a drawable folder so I'm gonna add new folder I'm gonna call it drawable it's very sad that visual studio doesn't create a folder automatically but we can always help ourselves right so we're gonna go ahead and add the new item instead we're gonna go ahead and add an existing item I already have this icon so I'm gonna go ahead and add all of them boom so they are successfully added now the next thing to do would be to reference them in our design Android or SRC this would be equal to a drawable /ic such okay so this is the icon we just added now as you can see it's already showing here so the next thing we need to do would be to turn this black icon to white so I'm gonna say Android door thing so I'm gonna set it to white boom so the last thing we need to do here will be to add some margin to the left so we're gonna say Android layout margin left so we're gonna set this to 10 DB so the next thing we need to do will be to add a new image view so I can easily just copy this and paste it here and I'm gonna align this to the right so this is more likely shorthand alright so we just copy and paste this it makes it a lot faster so we can change this to add button add new button okay so we're gonna change the SRC - I see okay let me go ahead and check what we named that I see action I see action underscore art so this is ally what one to have here but Sims this icon is much more bigger than this one so I'm going to go ahead and reduce this to 30 DP okay so I'm gonna go ahead and save this so the next thing we need to do will be to add a new ad test that will serve as our such impute if you look at the complete project you can see that when we click on this such icon you know issues are this such impute we have here click here again it vanishes so we need to add this ad test so what we're gonna do is to go ahead outside our toolbar we're gonna go ahead and define a new ad test so to ensure that everything is well organized it's pretty organized because I really care about our ela so I'm gonna go ahead and fold this now I'm gonna define a new ad test of course we need to set some attributes first in first we're gonna set the ID so we're gonna call this such test so we're gonna add some margins to the left and right so we're gonna actually make it very little so we're gonna set it to 5 DP and to the right gonna set this to 5 DP as well and also we're gonna add some margin to the bottom and of course we're gonna set the height then I set it to wrap content and the wheat and I set it to match parent and also we're gonna set the hint okay so it's currently not showing we need to change this to a linear layout okay so we're gonna change this to a linear layout copy this and paste it here as well so this becomes a linear layout so gonna go ahead and save so we need to add an orientation for our linear layout so that all this will be able to show so I'm gonna say Android the orientation you should be up or to vertical boom so our such impute is now showing now the next thing we need to do will be to add our recycler view so I'm going to add it under our such impute test so I'm gonna say Android support okay so we recycler view is already showing so I'm gonna select it and of course we need some attributes to this the heights would be much parent undelete with the match parent as well and you which would be my parent as well we're gonna add some scroll bar to it we just want a vertical scroll bar and we're gonna set the background want a background so a little bit close to white all right so I'm gonna set background to say ah sh e - E - E - so this is very close to white so finally we're gonna set the ID so for ID we're gonna call it my recyclerview okay boom so this is all we need to do for our design here so boom this is all we need to do for our design here so the next thing we need to do will be to reference all these items we have here need to reference our such test our such button and our Cart button okay but before we go we need to make our ad test to be hidden so to do that I'm gonna say Android the visibility I'm gonna set it to gone okay so we're gonna set it to gone gone means that you don't want it to occupy any space in the view you want it to be gone entirely if you remove this you can see that is showing but I can go ahead and just say Android of visibility if I said is still invisible it will still occupy the space but when we don't want it to occupy the space we use gone okay so one day space to be entirely vanished so we're gonna save this up so this is all we need to do for our main activity design now we're gonna head over into our main activity and reference all these views that we just created so we're gonna go to our main activity so this is our main activity so here we need to define one add button our search button our such test and our recycler view okay so to do that I'm gonna say image view gonna call this add button another one image view I'm gonna call this such button and our ID test which is our such test okay so for a recycler view we need to pull in some support libraries okay so if you just click on here so that we can get such for for fixing so let's click on this place to resolve that so now I cannot say my recyclerview boom so we don't define in our elements so now the next thing we need to do will be to reference them so I'm going to say my recyclerview will be according recyclerview find vo by an ID resource don't ID don't my recyclerview so this will reference the new recycling which was defined with the one we defined in our XML I'm already sure I'm very sure that you guys know how to do this so I'm gonna proceed so the next will be our search button it should be equal to image view find view by ID resource non-id dot search button that button would be a quality image view find view by ID resources the ID don't add button add new botton driver so the next would be our subtext which we Accord to ad test find view by ID resource the ID but such test so the next thing we need to do will be to add a click event handler for our search button so now when we click on it it will display our such test ok as you can see here so this is the functionalities you want to add for now so we're gonna say search button the click plus equal to 1/4 + tab so now we have a click event handler for our search button so what we're gonna do here would be to say use such test the visibility in circle to Android don't views the view States now gone so when it's gone I'm gonna make it visible so we're gonna say such test of visibility instability equal to Android of views the viewstate not visible then else so else evaluates the condition when it is visible so say sash that is not clear we're gonna try it first so else when our Sasha test is visible we actually want to make it to be hidden so the things we're gonna do we include to say Sarge test the clef of course so once you remove focus from it first of all and we're gonna make it to be gone I'm gonna make it to be gone so it will occupy any space in the view anymore so this is all we need to do for now so guys we've taken the first boot step in this tutorial which is to create a project do our main design and also add some functionality for massage button so we're gonna go ahead and run this project and see it in action so the project is loading up boom so we're gonna test this out so as you can see our such interest as showed up so everything seems to be working appropriate so this will be all for now so see you guys in the next tutorial so if you like this video and you're yet to subscribe to the channel please hit the subscribe button and also turn on the notification so that you can receive alerts whenever I make this kind of video so guys see you soon

Channel: Ufinix

Views: 10,968

Keywords: xamarin, firebase, firebase authentication, android xamarin tutorial, c# android tutorial, learn xamarin, c# xamarin tutorial, learn android, xamarin android tutorial, xamarin tutorial, xamarin tutorial android, xamarin c# android tutorial, xamarin firebase tutorials, firebase tutorials, xamarin android, xamarin app, android development tutorial, android programming tutorial, android studio tutorial, android development, android course, android training

Id: D_JzsnP8uUk

Length: 17min 51sec (1071 seconds)

Published: Tue Apr 09 2019