6.2. Adding and Positioning TextViews

In this chapter, we‟ll develop a BMI calculator app and learn to read user inputs, make calculations inside our code and display results to the user.

6.2. Adding and Positioning TextViews

In order to calculate the BMI in our app, we obviously need the weight and height inputs. Our Java code will calculate the BMI using the given BMI formula and then it will decide the category according to Table 6.1. First of all, let‟s create the user interface of our app. In Android Studio, create a new project called “BMI Calculator” and save it anywhere you want on your computer (I‟ll not repeat myself about these things, we explained in detail in previous chapters). Please select the “Phone and Tablet” platforms with minimum SDK of API 15 as we did for the previous app. The default layout can be chosen as “Empty activity” with the main class being “MainActivity.java” and the layout file as “activity_main.xml”. Please don‟t delete the default TextView of “Hello World” so that we can modify it to show our app title. Click on it and then it will be selected. Now, change its text as BMI Calculator, set its font size as 24sp and make the text bold as indicated by the numbers 1, 2 and 3 in Figure 6.1.

Let‟s position this title text so that it is positioned in the middle horizontally and has a distance of something like 50~60 dp from the top. (dp stands for Density Independent Pixel which is automatically adjusted when the display resolution is changed). For this, click on the View all properties as shown by 4 in Figure 6.1 and adjust the position of this TextView as shown in Figure 6.2. Please note that the horizontal middle guiding line is displayed automatically so that we can slide this widget on this line which will help us keep it in the middle horizontally. As you move the widget, observe the parameter named layout_marginT which indicates its distance from the top. I set it as 60 dp.

We‟ll take height and weight inputs from the user and show the BMI result as a number and its category. We‟ll need to place four TextViews which will show Enter your weight (kg): , Enter your height (m): , Your BMI: and BMI category. Please find the widget TextView from the Palette and drag and drop four TextViews as shown in Figure 6.3.

Figure 6.1. Setting the basic properties of the TextView (You can download full resolution colour images from the book‟s website)

Figure 6.2. Positioning the title label

Figure 6.3. Placing four TextViews

Once the first TextView is placed, the next one is positioned relative to the previous one. For out BMI Calculator app, the exact positions are not strict and I am not giving the exact positions here in order to confuse you. You can download the project files from the book‟s companion website if you‟d like to see which positions I exactly used but it is not mandatory of course. However, we need to leave a space between the second and the third TextViews for placing the button that will initiate the calculation.