The purpose of this module is to build an interactive application. You are going to build an application that converts Miles distance into Kilometers and reciprocally converts Kilometers distance into Miles. If I set the Miles field with the value 12.8 for example, I can convert this value to Kilometers by clicking on the button converts, Miles to Kilometers and the value is displayed in the field Kilometers the value is 20.6. I can make a conversion from Kilometers distance to Miles, for that, I set the field Kilometers with a value 23.7 and converts this value. to miles by clicking on the button converts Kilometers to Miles. The first step of this module is to create a new project, we begin by launching Android Studio. We close this window, and the following screen appears, we can close open projects by selecting File Menu and close project item. And then, the Welcome to Android Studio screen appears. We select Start a new Android Studio project item, to create a new project. The name of the project is ConvertMilesToKm. and then we click on next. In the following screen, we keep the default value. The application is developed for phone and tablet. We click on next. Here we have the choice between a Blank Activity, Empty Activity and other activities. We select an empty activity just like just the previous project. Click on next. Here, we keep the default value for the name of the activity and for the name of the layout, and click on Finish. The project is created and the following screen appears. In the following steps, we will focus on the design of the user interface. To build the user interface, we select the res directory. Then they layout directory. And we select the activity main file, by double clicking on this file. And the following screen is displayed, we remove the text component which is located at the top left corner of the screen by selecting the component and pressing the delete key on the keyboard. Then, from the Widgets category of the palette, we select the Large Text and put this component on the screen. We change the text of the component and the default value is large text and the new value is Miles. From the text field category, we select Plain Text component and put it on the screen near the previous component. We can change the properties of this component. For example, we can change the ID properties and the default value is edit text. And we can change this value to editTextMiles. We can change also the Width property. We set this value, to 100 DP. And we can see that the width of the component has changed on the screen We put on this screen another Large Text component and Plain Text component, to enter the kilometers distance. We change the text to Kilometers and then we put Plain Text. We change the ID of this component to editTextKm. And we change the width of this component to 100 DP. Now, we have on the screen two text view components and two edit text components. Finally, we place two buttons on the layout of the screen. One button to convert Miles distance into Kilometers and the other button to convert Kilometers distance into Miles. I place first button on the layout and I change some properties of the button I change the ID property and the Text property. The new value of the ID property is buttonConvMilesToKm. And the Text property is Convert Miles To Km. I place a second button on the layout, under the first letter. And I change the ID property and the Text property. the new value of the ID property is buttonConvKmToMiles. And the Text property is Convert Km To Miles. Now the build of the user interface is finished. In the following steps of the module, we will focus on the source code of the application. And we are going to modify the Main Activity file. This file contains the definition of the Main Activity class. and in this class we find the definition of the onCreate function. The onCreate function is called when the activity is created. Move the onCreated function, we define a Button variable. This variable is called for example buttonConvMilesToKm. And we use this variable to get a reference to the button component of the user interface To get this reference, we use the function which is called findViewById. This function takes one parameter and the parameter is the ID of the button component of the user interface, We want to get a reference to the button which allows to convert Miles to Kilometers distance. We use the ID buttonConvMilesToKm. We cast the result in button and then we import the package where the class button is defined If the button is to respond to a click event, it must register the OnClick event listener and implement the corresponding OnClick callback method. Do to that, we call the method setOnClickListener which is defined in the button class. As this method takes one parameter. The parameter is OnClickListener object And the OnClickListener class overides, the OnClick method. In the onClick callback method We code the instructions that allow to convert the Miles distance into Kilometers. To do this conversion first, we have to get the reference to the edit text Miles component and the edit text Kilometers component, this is two components were placed on the layout of the user interface. First we declare a EditText variable for example. We name this variable textBooksMiles, and we use this variable to get the reference to the EditText Miles component of the user interface by using function findViewById. This function takes one parameter the parameter is a ID on the TextMiles component of the user interface. We cast the result of the function in EditText. And we import the package where the class EditText is defined, we write the same instruction for the textbox Kilometers. So, we can copy paste this instruction and nammed this variable textBoxKm and we get a reference to the editTextKm component by using the findViewById function. The next step is to convert the value we get in editTextMiles from string to double. To do that we call, the getText function, which is defined in the EditText class. We apply the function toString to the expression returned by the getText function. This expression returns a string expression. And we convert this string expression to a double expression by using the function valueOf which is defined in the Double class The result of this function is stored in a double variable for example, call this variable vMiles. The Miles value which is contained in the vMiles variable is converted into Kilometers distance. To do this conversion, we define vKm variable. This variable is equal to vMiles / 0.62137. Then the Kilometers distance is displayed in the editText kilometers component of the user's interface. Before to display this value to the user interface, we have to format this value because we want to keep only two digits after the decimal point of the value, to do that, we define the format of our variable then we call The format function to format the value. We format the vKm variable from double value to string value, with just two digits after the decimal point. And then we call the setText method. to the textBox Kilometer variable. Then the value is formatted and displayed in the textBox kilometers component. At this point the source that converts Miles into Kilometers, is completed. Now we have to write the code that converts Kilometer distance into Miles, to do this correction we can do a Copy Paste of this part of code. And change some instructions. Here we change the name of the variable, the new name is buttonConvKmToMiles. This variable is used to get a reference to the button component of the user interface. We change the name of the variable on the next instruction. Then we keep the two instructions. We change the name of the variable. From the vMiles to vKm. Then the name of the text box is changed. Then we change the name of this variable, The vMiles variable is equal to the vKm multiplied by 0.62137. Then we format the value to display in the text box Miles. Then vMiles value is formated. Now, we test this application on the device. To run the application on the device, we click on the green. These are located at the top of the window. Here we select the Nexus 6 emulator Then the application is launched on the virtual device. We can set the Miles field with a value, for example 12.6 and click on the CONVERT MILES TO KM button. And the value is displayed, in the Kilometers field we can do also conversion from Kilometers to Miles. We can set the Kilometers field with value 21.5 and converts to Kilometers to Miles and the value is displayed in the Miles field.
