Make a CALCULATOR App with Xamarin Android #1 - Making the UI

[Music] how welcome to resale coder in this tutorial we are going to make a simple calculator app in xamarin android well at least the UI part of it in the second part we are gonna be coding the logic of the calculator knowing how to make the UI efficiently and quickly is as important as the c-sharp code driving the calculator though also if you want to know the absolute basics of making a xamarin Android app you would greatly benefit from another tutorial of mine if you are interested click the card in the corner now let's get started first up we are gonna make a project you want to open visual studio and now go to file new project you wanna select visual c-sharp and then Android if Android isn't here you should definitely check out the tutorial which I have mentioned previously now you want to select the Bank app and we are gonna name this app something cool alrighty and now you just want to click on OK and alright we have an app created as I've already said in this tutorial we're gonna be mostly dealing with the UI so we want to go to resources layout main a XML we want to double click on that to open it this mean that a XML file contains the UI of this app you might be already familiar with XML well a XML is basically just an XML it's just that visual studio distinguishes between a XML and XML that's because a XML file as opposed to XML ones can also show up in the designer as you see here but basically they are otherwise the same we aren't gonna be working with the designer though so we want to open the source go down here or you can also just right click on this may not a XML and press on a view code so let's add a UI to our app we are gonna leave the root element to be a linear layout about which I have a separate tutorial we don't want this linear layout to end like this so we are gonna delete this slash and put a pointy bracket and slash linear layout and we are all set inside this linear layout we want to have a textview to display the calculation and also the result but having just a simple text view isn't gonna cut it we want to be able to scroll through the text when we enter long numbers for this we are gonna put this text view inside the horizontal scroll view so we want to add a horizontal scroll view over here this horizontal scroll view will have width of match parents so Android layout width is equal to match parent and Android layout height will be 0 DP so it will have no height by default that's because we are gonna assign weight to this horizontal scroll view so Android layout weight is equal to 1 weight is an attribute used by the linear layout which is the root element views with the same weight value occupy the same space on the screen so inside this horizontal scroll view we want to have a text view this text view needs to have an ID that's because in the second part we are gonna get this text view in the code and we will want to change the displayed text if this text view didn't have an ID we wouldn't be able to get it from the code so Android ID is equal to ad plus ID slash calculator text view this text view is gonna have width of a wrap content and height of match parent also is gonna have a padding of 10 density-independent pixels so 10 DP we use padding over here because we want the text inside this textview to have a bit of space from the edge of the screen and also we want to specify a text size we don't want the text to be too small so we are gonna specify 50 scale independent pixels or s P DP s and s PS are pretty much the same and they are actually the same until the user changes some setting inside the Android operating system the user of your app can decide to scale up the text size when he does that he expects every text inside every app to be scaled up that's why you use SP inside the text size of a text view otherwise you use DP because you don't want the padding to scale up as well you just want the text size to scale up if the user desire so all right and just for good measure let's do the text inside here so Android texts and this will be one two three for example now let's check out the designer and yeah we have one two three but currently this text view takes up the whole screen that's because we've assigned the layout weight attribute a value of one so now let's go back to the source code and let's add all the buttons that you expect inside the calculator like numbers and operators the perfect way to do this is with a grid layout it's simple and efficient but there's a problem though we want the grid layout to stretch across the screen older devices running Android KitKat or lower are gonna have a problem with this we need to use a support library to be able to have the same look even on pre lollipop versions of Android to add a support library you wanna right click on references now manage NuGet packages click on browse here and search for Android support grid layout we want to select the one which was released by xamarin incorporated and we want to install it and we are good to go if you want to learn more about grid layout and also about its support library alternative check out my tutorial which covers it in detail now we need to add a new namespace called app we're gonna add it just below this xmlns Android and xmlns up viously means xml namespace and we want to write xmlns a p-- this is gonna be equal to HTTP colon slash slash schemas android comm slash AP k /r s otto as opposed to the android namespace the namespace called app which we just created will simply put not pull stuff from the android OS but rather from the app itself this is important because remember that older versions of Android don't support certain things that the grid layout can do finally let's add a grid layout from the support library over here we want to add it after the horizontal scroll view and we wanna write Android dot support dot v7 dot Widgit that grid layout we can copy the attributes of the scroll view and paste them in here but this grid layout 1/2 the weight set to 1 but rather to 4 also it will have orientation set to horizontal but this time the orientation attribute is not from the Android namespace but rather from the app namespace if you have these kind of formatting problems you can just go to the designer and now come back to the source code and you're all set also it will have row count of 5 again from the app namespace and column count will be set to 4 the grid layout is of no use if it doesn't contain buttons let's add them as the first step we want to make just one button the others are gonna be pretty much the same they will just display different text so we want to add a button it's gonna have layout width and layout height set to zero density independent pixels the reason for this is that we are again gonna be using weight but unlike in the grid layout itself here we want even the width to stretch out dynamically now we want to add the weight but not just one as with the linear layout grid layout has rows and columns so we want to add weights for each one of them so we want to write app layout row weight this is gonna be equal to 1 and also app layout column weight which is also gonna be equal to 1 the text size should be 25 scale independent pixels and also we want to specify the name of the method which is gonna get called when the button is clicked we are gonna write this method in the second part of this tutorial so subscribe to this channel if you don't want to miss it we want to write Android on click and this is gonna be equal to the name of the method which is gonna be called for example button click call and now let's go to the designer you can see that we have one big button right here it currently doesn't have any text on it because we haven't specified it yet but now let's go back to the source code now that we have the first button we could just copy and paste it 15 times but what if we want to change something later well we really need to change the same code 15 times thankfully we don't have to do this we can create a star I'll and then apply it to all the buttons then if we need to change something later we can just change it in one place and it's gonna apply to all buttons so we want to create a new file called styles that XML inside this values folder so right-click on it add new item it's gonna be a plain XML file so not a XML although a XML would be completely fine as well and we want to call it styles but again you can call it whatever you want it's just that Styles is a standard name inside here you want to add a resources XML element also a style element with the attribute name equal to button calculator alright and now we want to put everything that we have assigned to our button over to this style so let's go to the main got a XML copy everything that we have added to this button and paste it inside styles dot a XML this is not valid though but we can use it as a template inside this style we want to add a new item name is gonna be equal to Android layout width and the value is 0 DP we want to do the same kind of conversion for all of these things keep in mind though that when you have an AB namespace here you don't want to put any name space over to this item so we just want to write layout row weight just like this alright now that we have all of this we can safely delete our template let's go back to the main dot a XML and we can delete all the attributes from this button the button will have a style attribute and it's gonna be equal to add style slash the name of the style in this case we want to use the button calculator which is precisely the name which we have set inside this Styles dot XML also we want to add a text to this button and this is gonna be the delete button so Android text is equal to de L now let's check out the designer again and you can see that we have one big delete button over here now in the final UI we want this delete button to stretch across the whole grid layout this grid layout has four columns so we want to add a layout column span attribute and we want to set it to 4 so app layout column span and this is gonna be equal to 4 now we can copy this button paste it this one should not have a column span set to 4 and the text will be 7 now we can just copy and paste this button 14 times but we don't want all the buttons to say 7 let's change it up a bit also I want to remind you that you can get the code from the link in the video description wow that's a lot of changes now let's go to the designer and it finally starts to look like a proper calculator this is where we end the first part of the xamarin calculator tutorial we made a fully-fledged calculator UI and we use the support library and a custom style in order to save us from doing a lot of copy and paste that's quite a bit of work if you would like to see quite a bit more advanced simple scientific calculator please check out one calc it's a calculator made with you in mind 1 calc has many material themes you can choose from and it's ready to help you with all of your calculation needs you can get it from the link in the video description so if this video helped you please give it a like and also share it subscribe to this channel if you want to know about my new videos and if you don't want to miss anything be sure to smash that Bell button if you have anything to say please leave a comment follow me on social media and see you in the next video [Music]

Channel: Reso Coder

Views: 116,945

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

Id: LgNXUicjUOA

Length: 13min 6sec (786 seconds)

Published: Fri Sep 08 2017