Make a Simple Android App - Xamarin Android Tutorial

[Music] hello welcome to reso coder and welcome to the first part of this tutorial Series in which you will learn to make apps from scratch and we will be making those apps in zamarin Android zamarin is an awesome development platform because you can make Native apps where you want to make apps for Android iOS or Windows phone zamarin has got you covered however in this tutorial series we're going to focus on zamar and Android then there is also zammer in iOS and zammer in for Windows and most importantly there is zammer in forms which allows you to write even the UI code ones and then the UI will change to the native UI on each device so you write just one code for UI and on Android it's going to look different than on iOS and that's an awesome feature as well but we are not going to Del into that in this tutorial series by the end of this tutorial you will know how to create this the simple application which is going to increment or decrement a number so what should you do first well obviously you have to install Zarin so here is a visual studio installer you have to download visual studio community and you can do so from the link in the video description and even if you have it already installed just find the installer that you downloaded before and you want to open it up and click on modify and now you want to find Mobile development with.net and you want to take this and press on install or something along those lines down here and you are going to be all set so we want to create a new project and name it zamarin tot you can do this by going to file new project make sure that you have visual C and Android selected and we want to create a blank app and the app's name is going to be zamarin tot then just click on okay and it's going to be created for you all right then we have created a project now this is just a welcome page so we can just close it and before we start writing any code you have to make sure that you have everything set up properly we want to go to tools options and scroll down here and there is zamarin and you want to have installed jdk Android SDK and Android ndk you can install them from the links in the video description and then once you have them installed you want to click on change here and just select the directory in which that particular development kit is installed we also want to set up an Android emulator and you can do so by clicking on this first icon over here so open Android emulator manager and here you want to press on Create and select whatever suits you so for example Nexus 5 and choose Intel atom x86 you can select the version of Android so for example Android API level 25 AKA net and then you just want to name it something and uh select the skin right no skin and then you can press on okay but I have already set up some emulators before so I'm not going to do this all right so what do we got here we have a main activity and then we have assets and resources and this tutorial we're going to focus on resources and in particular we're going to focus on the layout and specifically the main.xml we are also going to be working with the main activity so what is this Main axml all about well it defines a user interface in XML code and an XML or a XML in this case but basically it's just XML just zammer and distinguishes between XML and axml but it doesn't really matter and an XML is a markup language so we are going to Define user interface in this language and then main activity is the C code which runs behind this XML and connects all of the parts of the XML and makes the app actually actually have some meaning and do some work because XML it's not going to run anything just like with HTML you need for example JavaScript with XML in this case in zamarin you need c all right and let's start off by doing the drag and drop style of building the UI from a toolbox you can get to the toolbox by clicking on view toolbox and first up we want to drag text view over here and then to buttons underneath but the text is kind of small we want to make it a bit bigger so let's select it here and we can close out this toolbox now and down here we have a property step all right and with this properties step we can modify the XML by not looking at the XML so it's all simple and nice but actually XML is not really hard to understand anyway let's give this text view a bit more space so we want to find a layout margin property over here which is right here under layout View group and we want this text view to have a bottom margin of 20 and now comes the question 20 what 20 pixels 20 cm 20 what right tell me well while we could write 20 pixels by writing PX that is not resolution independent what we want to write over here is DP which are density independent pixels so whether your screen is a 4K one or a 720p screen the bottom margin is going to be the same across all of those devices and we also want to set up the margin top to be also 20 DP and now the text is still a bit small but let's change it up a bit and let's go to the XML itself so here it is the XML we can change the text to be zero because in our increment and decrem application the text is going to display the number that we increment or decrement and now to make the text a bit bigger we want to add Android text size and it's going to be equal to 50 but not DP this time but SP which are scale independent pixels and they should be used always when dealing with the font size and all of that kind of stuff all right and let's go back to the designer and we can start to notice that the text is getting bigger but still it's located on the left side of the screen we want to center it so let's go back to the source and let's add Android gravity and gravity is going to be equal to Center all right and now what is this linear layout over here up top this basically makes DUI so that it stacks on top of each other this is on top this button is below the text View and this last button is below the first button right we can see this in the designer we will go over linear layout and all of the different layouts in future tutorials in great detail but for now you should just briefly know what it is about and why it is here then we have this layout width which is pretty self-explanatory but this is set to match parent well when something is set to match parent it's going to try as hard as it can to match the parent width and the height is set to wrap content this means that the view is going to be as small as possible it's going to just wrap the content and it's not going to expand beyond what it actually needs look at the designer now we see that uh there are two buttons but when we go to the properties down here and find the layout height property and when we change it to be equal to match parent the two buttons are going to disappear you see because it tries as hard as it can to match parent and these blank spaces down here and up here are just because of the margin which we have said before so let's change the height back to WP cont content and then there is this ID and we are going to use this ID from the code from the main activity. CS to actually locate this text View and we are then going to be able to set the contents of this text View and similar with buttons we are going to be able to detect when a button is clicked but first we have to find it inside this UI and we are going to do this by specifying the ID which we want to get from the UI all right and now let's change this ID to be something more meaningful like txt number this button is going to say increment and the ID is going to be BTN increment and the second button is going to be obviously decrement and the ID is going to be BTN decrement all right and now we can double click on these main activity. Cs and right off the bat we see an attribute over here the most important part of this attribute is this main launcher equals true this specifi that when we launch the app inside our emulator or in our device this activity is going to be launched first this protected method uncreate is called whenever the activity is created we can uncomment this line because we want to set the content view to resource. layout. Main and what is this resource. layout. main well it's resources layout Main and Main is exactly the asml file that we have written before which contains the text and the two buttons we want to keep a reference to the txt number text view inside our UI so we want to create a private field text view txt number and we also want to keep track of the number which we are going to increment or decrement and how are we going to find this txt number inside our UI well that's what this ID is all about we want to find the txt number ID in our UI so so we're going to specify that txt number is going to be equal to find view by ID the type of the view is text View and the ID is located in resource id. text number and now we want to similarly find the two buttons and as soon as we find them we want to specify what happens when they are clicked so again find view by ID but this time we are going to find button resource. id. button increment and on this button we want to specify what happens when it's clicked so do click which is an event handler and we want to add a method which is going to be called when the click happens and we're going to do this as a Lambda expression so E and O equal and greater sign which is going to create a Lambda and when the click happens we want to set the txt number. text property to be equal to incremented number convert it to string awesome we want to do the same thing to button decrement so we can just copy this and oh silly me this is object and that is event Arc so we want to change this up so this is going to be o and the second parameter is going to be e because the first parameter is object and the second is event arcs but we are not using them anyway but it's just good to have it set up that way so that it's correct so we can copy this and paste it here and we just want to get the button decrement and we obviously want to decrement the number and then convert it to string all right and now let's try to launch the emulator and here it is our first app is now deployed on the emulator we can press on the increment button and it's going to be incremented and decrement is obviously going to decrement it even to the negative values and that's it for the first part of this tutorial series I hope that you enjoyed it and learn something new and if so don't forget to give this a like and also share it if you want to get the code from this tutorial you can do so from roc.com by clicking on the link in the video description if you want to get notified about my new videos then subscribe to this Channel and if you want to know about all of my new videos then for sure go ahead and hit the Bell button if you have any suggestions or questions leave a comment follow me on social media and see you in the next [Music] video

Channel: Reso Coder

Views: 492,003

Keywords: resocoder, tutorial, programming, code, programming tutorial, xamarin, android, xamarin.android, view, linear layout, layout, button, app, first app, c#, xml, axml, xamarin android

Id: 5CgQUbnf1Qk

Length: 12min 50sec (770 seconds)

Published: Fri Jun 30 2017