{"id":4865,"date":"2021-01-08T16:50:57","date_gmt":"2021-01-08T06:50:57","guid":{"rendered":"https:\/\/learntodroid.com\/?p=4865"},"modified":"2021-01-08T16:51:03","modified_gmt":"2021-01-08T06:51:03","slug":"how-to-create-a-bmi-calculator-android-app","status":"publish","type":"post","link":"http:\/\/10.0.0.14:32769\/how-to-create-a-bmi-calculator-android-app\/","title":{"rendered":"How to Create a BMI Calculator Android App"},"content":{"rendered":"\n<p>As a part of the <a rel=\"noreferrer noopener\" href=\"http:\/\/10.0.0.14:32769\/category\/create-an-app-from-scratch\/\" data-type=\"URL\" data-id=\"http:\/\/10.0.0.14:32769\/category\/create-an-app-from-scratch\/\" target=\"_blank\">series for creating apps from scratch<\/a>, I have put together a tutorial on how to build a BMI calculator app for Android.<\/p>\n\n\n\n<p>In this tutorial, we will build a BMI calculator app for Android that:<\/p>\n\n\n\n<ul><li>Captures weight and height with EditText widgets<\/li><li>Contains a class that uses the Singleton Pattern and contains the calculation logic for BMI<\/li><li>Uses a ToggleButton to support calculation of BMI with both the metric and imperial measurement systems<\/li><li>Displays the calculated BMI and categorization of the BMI inside a CardView widget<\/li><\/ul>\n\n\n\n<p>All of the code samples shared in this post are available in <a rel=\"noreferrer noopener\" href=\"https:\/\/github.com\/learntodroid\/BMICalculator\" data-type=\"URL\" data-id=\"https:\/\/github.com\/learntodroid\/BMICalculator\" target=\"_blank\">GitHub<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Creating a BMI Calculator Android App Tutorial<\/h2>\n\n\n\n<p>In this tutorial, we will be creating an Android app that calculates Body Mass Index (BMI) based height and weight entered by the user.<\/p>\n\n\n\n<p>We will support both the metric unit system and the imperial unit system for calculating the BMI which allows the user to enter weight in either kilograms or pounds and the height in centimeters or feet and inches.<\/p>\n\n\n\n<p>See the sample screenshots below for the Android app we will build.<\/p>\n\n\n\n<figure class=\"wp-block-gallery columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\"><ul class=\"blocks-gallery-grid\"><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"417\" height=\"859\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator.png\" alt=\"\" data-id=\"4873\" data-full-url=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator.png\" data-link=\"http:\/\/10.0.0.14:32769\/?attachment_id=4873\" class=\"wp-image-4873\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator.png 417w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-146x300.png 146w\" sizes=\"(max-width: 417px) 100vw, 417px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"859\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Metric-Units.png\" alt=\"\" data-id=\"4872\" data-full-url=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Metric-Units.png\" data-link=\"http:\/\/10.0.0.14:32769\/?attachment_id=4872\" class=\"wp-image-4872\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Metric-Units.png 411w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Metric-Units-144x300.png 144w\" sizes=\"(max-width: 411px) 100vw, 411px\" \/><\/figure><\/li><li class=\"blocks-gallery-item\"><figure><img loading=\"lazy\" decoding=\"async\" width=\"411\" height=\"861\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Imperial-Units.png\" alt=\"\" data-id=\"4871\" data-full-url=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Imperial-Units.png\" data-link=\"http:\/\/10.0.0.14:32769\/?attachment_id=4871\" class=\"wp-image-4871\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Imperial-Units.png 411w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-BMI-Calculator-Imperial-Units-143x300.png 143w\" sizes=\"(max-width: 411px) 100vw, 411px\" \/><\/figure><\/li><\/ul><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Creating a New Android Project<\/h3>\n\n\n\n<p>We will start this tutorial for building a BMI calculator by creating a brand new project in Android Studio.<\/p>\n\n\n\n<p>Open Android Studio and follow the wizard for creating a new Android project. Select the &#8220;Blank Activity&#8221; project template and provide a project name, set the package name then select &#8220;Finish&#8221; to create the Android project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"897\" height=\"682\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-Project-Template-Blank-Activity.png\" alt=\"\" class=\"wp-image-4876\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-Project-Template-Blank-Activity.png 897w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-Project-Template-Blank-Activity-300x228.png 300w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/Android-Project-Template-Blank-Activity-768x584.png 768w\" sizes=\"(max-width: 897px) 100vw, 897px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Removing the Action Bar<\/h3>\n\n\n\n<p>Once the Android project has been created, open the styles.xml resource file in the \/app\/src\/main\/res\/values directory and update the parent attribute on the style element to value &#8220;Theme.AppCompat.Light.NoActionBar&#8221; to remove the Action Bar from the Activity.<\/p>\n\n\n\n<p>See a sample of the styles.xml resource file that has removed the Action Bar below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/a52c5f81a2baa62b613656db796adffa.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Setting up the Activity Layout Resource<\/h3>\n\n\n\n<p>We will be using a single Activity for the BMI calculator app.<\/p>\n\n\n\n<p>In the layout resource file for this Activity activity_main.xml, we will add the following user interface elements inside a LinearLayout with a vertical orientation.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/8b40b3f349fef409c9f1751c0d77872a.js\"><\/script><\/p>\n\n\n<p>First, we will add a TextView inside the LinearLayout, that will display the title of the app as &#8220;BMI Calculator&#8221;. We will center the TextView horizontally by setting the &#8220;android:gravity&#8221; attribute to &#8220;center_horizontally&#8221;.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/b9404073eba518e536c771e4dabf1dc2.js\"><\/script><\/p>\n\n\n<p>Then, we will add a ToggleButton that we will use for toggling between the metric system and the imperial system of measurements for weight and height. We will default it to the metric system by setting the &#8220;android:checked&#8221; attribute value to &#8220;true&#8221; and setting the &#8220;android:textOn&#8221; attribute value to &#8220;Metric Units&#8221; and &#8220;android:textOff&#8221; to &#8220;Imperial Units&#8221;.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/f6d7a25bd03ab6685d739c5a12e318d5.js\"><\/script><\/p>\n\n\n<p>Next, we will add LinearLayout with a horizontal orientation and we will place two CardView widgets that will sit next to each other. These CardView widgets will be used for populating the height and weight information.<\/p>\n\n\n\n<p>Both will the following attribute values populated to give the the CardView widgets rounded corners with a margin in between:<\/p>\n\n\n\n<ul><li>&#8220;android:layout_margin&#8221; set to &#8220;6dp&#8221;<\/li><li>&#8220;app:cardElevation&#8221; set to &#8220;6dp&#8221;<\/li><li>&#8220;app:cardCornerRadius&#8221; set to &#8220;6dp&#8221;<\/li><\/ul>\n\n\n\n<p>The CardView on the left side will contain the height information. There will be TextView with the text of &#8220;Height&#8221; centered inside the CardView. <\/p>\n\n\n\n<p>Underneath the TextView there will be an EditText for capturing the height in centimeters which only accepts decimal numbers via the attribute value of &#8220;android:inputType&#8221; set to &#8220;numberDecimal&#8221;.<\/p>\n\n\n\n<p>There will also be a LinearLayout with a horizontal orientation containing two EditText widgets for capturing the height in feet and inches.<\/p>\n\n\n\n<p>Later inside the Main Activity class, we will control the display of these EditText widgets based on whether the user has chosen to use the metric measurement system or the imperial system using the ToggleButton.<\/p>\n\n\n\n<p>The CardView on the right side will contain the weight information. There will be TextView with the text of &#8220;Weight&#8221; centered inside the CardView.<\/p>\n\n\n\n<p>Underneath that TextView there will be two EditText widgets that also only accept decimal numbers that will be used for capturing the weight in kilograms or in pounds.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/4189e6219df739c9f075aa4d3849a4d0.js\"><\/script><\/p>\n\n\n<p>Next, we will add a Button with the label of &#8220;Calculate&#8221; which when selected will calculate the BMI and display the results underneath.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/5d25fc81726d996b44931785655eb536.js\"><\/script><\/p>\n\n\n<p>For that last part of the Activity layout we will add some UI elements for displaying the calculated BMI results.<\/p>\n\n\n\n<p>We will add a CardView widget that will take up the full width of the screen.<\/p>\n\n\n\n<p>Inside this CardView, we will show a TextView with the text of &#8220;BMI&#8221; centered inside the CardView.<\/p>\n\n\n\n<p>Underneath this TextView, we will add another TextView that will be used for displaying the calculated BMI value.<\/p>\n\n\n\n<p>Then finally, we will have one more TextView that will display the category of the BMI calculated. These categories include &#8220;Underweight&#8221;, &#8220;Healthy Weight&#8221;, &#8220;Overweight&#8221; and &#8220;Obese&#8221;.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/50140c59aff3d9c0851f1cc7d18013ac.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Implement a Class for Calculating BMI<\/h3>\n\n\n\n<p>In this section of the tutorial, we will create a new class that will contain methods used for calculating BMI in both imperial and metric units.<\/p>\n\n\n\n<p>We will be creating this new class to separate the logic from calculating the BMI outside of the MainActivity logic that will be used for setting up the user interface and responding to events that occur in the UI.<\/p>\n\n\n\n<p>We will give this new class the name &#8220;BMICalcUtil&#8221; and we will follow a singleton pattern where we will initialize a single instance of the BMICalcUtil and assign it to a class variable. We will then use a getter method called getInstance to retrieve this BMICalcUtil instance from within the MainActivity class.<\/p>\n\n\n\n<p>We will add three more methods to the BMICalcUtil class.<\/p>\n\n\n\n<p>Two of these methods will be used for calculating the BMI in the metric and the imperial unit system using the formulas below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"416\" height=\"218\" src=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/bmi-formula-metric-and-english.png\" alt=\"\" class=\"wp-image-4898\" srcset=\"http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/bmi-formula-metric-and-english.png 416w, http:\/\/10.0.0.14:32769\/wp-content\/uploads\/2021\/01\/bmi-formula-metric-and-english-300x157.png 300w\" sizes=\"(max-width: 416px) 100vw, 416px\" \/><figcaption>Source: <a href=\"https:\/\/www.vertex42.com\/Calculators\/bmi-calculator.html\" data-type=\"URL\" data-id=\"https:\/\/www.vertex42.com\/Calculators\/bmi-calculator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Vertex42.com<\/a><\/figcaption><\/figure>\n\n\n\n<p>The third method will be used for classifying the BMI value as either &#8220;Underweight&#8221;, &#8220;Healthy Weight&#8221;, &#8220;Overweight&#8221; and &#8220;Obese&#8221; based on the table below.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table><thead><tr><th>BMI<\/th><th>Category<\/th><\/tr><\/thead><tbody><tr><td>Less than 18.5<\/td><td>Underweight<\/td><\/tr><tr><td>Greater than or equal to 18.5 and less than 25 <\/td><td>Healthy Weight<\/td><\/tr><tr><td>Greater than or equal to 25 and less than 30<\/td><td>Overweight<\/td><\/tr><tr><td>Greater than or equal to 30<\/td><td>Obese<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>See a code sample of the BMICalcUtil class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/7bd0f2f8a63d908ae4c59c85ea26fcdf.js\"><\/script><\/p>\n\n\n<h3 class=\"wp-block-heading\">Setting up the Main Activity Class to Calculate and Display BMI Results<\/h3>\n\n\n\n<p>In this last section of the tutorial, we will update the MainActivity class to retrieve height and weight measurements entered by the user and to interact with the BMICalcUtil class to calculate then display the BMI results.<\/p>\n\n\n\n<p>In the onCreate method, we will use the findViewById method to initialize class variables for the various UI elements we have added to the Activity layout resource.<\/p>\n\n\n\n<p>These UI elements include:<\/p>\n\n\n\n<ul><li>EditText widgets for capturing the weight and height measurements in both measurement systems<\/li><li>A ToggleButton for switching between the metric and imperial unit system<\/li><li>A Button for calculating the BMI results<\/li><li>A CardView widget that will contain two TextView widgets for displaying the BMI result and category<\/li><\/ul>\n\n\n\n<p>Then, in the onCreate method we will enable the metric system by default by setting the inMetricUnits boolean class variable to true.<\/p>\n\n\n\n<p>After that, we will invoke the updateInputsVisibility method we will add to the MainActivity class that is responsible for ensuring the correct EditText widgets are displayed on screen based on the measurement system that is being used.<\/p>\n\n\n\n<p>Also in the onCreate method, we will hide the CardView widget used for displaying the BMI results by using the setVisibility method and passing the View.GONE value as a paramater.<\/p>\n\n\n\n<p>Then, we will set OnClickListeners to the Button used for calculating the BMI results and the ToggleButton for switching measurement systems.<\/p>\n\n\n\n<p>Inside the OnClickListener for the ToggleButton in the onClick method we will toggle the value for the inMetricUnits boolean variable then call the updateInputsVisibility method to display the relevant EditText widgets on screen.<\/p>\n\n\n\n<p>In the onClick method for the OnClickListener on the Button used for calculating the BMI results we will first check which measurement system is being used.<\/p>\n\n\n\n<p>Then we will check that those EditText widgets that relate to the selected measurement system are not blank. If any of the applicable EditText widgets are blank a Toast message will be shown to the user advising them to populate the weight and height information.<\/p>\n\n\n\n<p>After that, the values from the EditText widgets will be passed the BMICalcUtil by invoking either the calculateBMIMetric or calculateBMIImperial methods.<\/p>\n\n\n\n<p>The BMI result will then be provided as a parameter to the displayBMI method which will show the BMI results CardView and update the TextView widgets inside the CardView with the BMI and the category.<\/p>\n\n\n\n<p>See a code sample of the MainActivity class below.<\/p>\n\n\n<p><script src=\"https:\/\/gist.github.com\/learntodroid\/99704361d84e27e2e19741fc39a1c61d.js\"><\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>As a part of the series for creating apps from scratch, I have put together a tutorial on how to build a BMI calculator app for Android. In this tutorial,<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[22],"tags":[],"acf":[],"_links":{"self":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4865"}],"collection":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/comments?post=4865"}],"version-history":[{"count":5,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4865\/revisions"}],"predecessor-version":[{"id":4915,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/posts\/4865\/revisions\/4915"}],"wp:attachment":[{"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/media?parent=4865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/categories?post=4865"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/10.0.0.14:32769\/wp-json\/wp\/v2\/tags?post=4865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}