Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android tutorials7 calculator


Published on

Published in: Technology, Education
  • Be the first to comment

Android tutorials7 calculator

  1. 1. Welcome!
  2. 2. For next few classes we are going to make a bit more complex Android App.
  3. 3. Firstly let's change the name of the application we created recently.
  4. 4. Right click on your project. (or use Shif+Alt+R) And rename it.
  5. 5. In next few slides we are going to outline general structure of your App.
  6. 6. By opening <src>(stands for source) ➪ <your package name> you will find out your java files ( You can create classes as many as you want here. (as well as packages with classes) They contain code which controls your application.
  7. 7. Next folder we are going to use is <res> (stands for resource) 1) drawable folders They contain any pictures you are using. 2) layout folder Contain your basic xml layout. (like html page) 3) values folders Some constants (mostly strings) used in your design.
  8. 8. Next file you have to work with is AndroidManifest.xml Its like a Big Brother, set's up min/max SDK version your app going to use, controls any Permissions and Instrumentation.
  9. 9. You don't need to know anything else to build simple App yet. But if you are interested, gen is just a folder with auto generated files and Andoid folders contains all library files we are going to use in our java files.
  10. 10. Before we start playing with code in let's set up our layout design in activity_main.xml file.
  11. 11. Good thing is that layout can be controlled by drug- and-drop method. So just click on “Hello World” and you can simply delete it. Then just drug into your app four buttons (which will later represent arithmetic symbols)
  12. 12. Now by clicking on activity_main.xml tab at the bottom you will go into the “code” of the layout. Each button is represented by opening and closing tag <Button … /> And as parameters you can change it's text, layout_width and so on... android:id sets name which represents button in a java file. Now change text and id parameters for each button. Like in the next slide.
  13. 13. Don't worry if your code is a bit different. Because of graphical relative layout android:layout_... might have different value <RelativeLayout xmlns:android="" xmlns:tools="" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <Button android:id="@+id/minus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/plus" android:layout_alignBottom="@+id/plus" android:layout_alignParentRight="true" android:layout_marginRight="67dp" android:text="-" /> <Button android:id="@+id/division" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/plus" android:layout_below="@+id/plus" android:layout_marginTop="47dp" android:text="/" /> <Button android:id="@+id/mult" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/division" android:layout_alignBottom="@+id/division" android:layout_alignLeft="@+id/minus" android:text="*" /> <Button android:id="@+id/plus" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:layout_marginLeft="39dp" android:text="+" /> </RelativeLayout>
  14. 14. Now change back to Graphical Layout and correct layout by drug and drop if something doesn't look beautiful enough.
  15. 15. From Form Widgets folder drug and drop TextView. (this field will be used to show the answer) And from Text Fields drug and drop Plain Text. (this will take two numbers as input)
  16. 16. Now open activity_main.xml and change id's appropriately <TextView android:id="@+id/answer" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/input1" android:layout_below="@+id/input1" android:layout_marginLeft="14dp" android:layout_marginTop="27dp" android:text="TextView" /> <EditText android:id="@+id/input1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_marginTop="22dp" android:ems="10" > </EditText> <EditText android:id="@+id/input2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/input1" android:layout_alignParentTop="true" android:ems="10" />
  17. 17. We are finished with a design part, of course if you don't want anything to add up upon on this. Let's do some code in java file To give some life into dead design.
  18. 18. I am not going to explain the way functions work here in detail yet. (they are generated automatically) All we need to know is that all code inside onCreate is running when program first starts.As a first step we need to create variables which will represent the value of input numbers and the final result.
  19. 19. Hence, create three integer numbers. In java each variable has a type. Integer number has a type of int. E.g. integer number with name firstVar: int firstVar;
  20. 20. Hence, create 4 buttons variables, 2 EditText and 1 TextView for each layout item. As well as to represent numbers we should set a type for Button, TextView and EditText. E.g. Button with name 'plus': Button plus; TextView with name 'answer': TextView answer; and so on...
  21. 21. As you noticed Button, TextView and EditText are underlined this mean that they have an error. Eclipse/Android Studio doesn't understand what does they mean until we import library.You can do it by navigating your mouse on it and pressing import. Or you can import them all on Eclipse by running <ctrl> <shift> <all>➪ ➪
  22. 22. Now we need to initialized our variables, give them value. We have to do it inside onCreate function, so we will have them initialized when app is just created. In order to initialize Button, EditText You have to e.g. for button variable 'add': add = (Button) findViewById(; where 'plus' is id we set it up in layout file. It is easy to give a value to int variable, just e.g. firstVar=0;
  23. 23. Create onClickListener for all buttons. Now let's set button click listener for all buttons. You can do it by adding .setOnClickListner attribute which creates implemented method onClick, which is running when the button (e.g. plus) is clicked