Free AIA: BMI Calculator App In Kodular 2026



Hello everyone! Welcome back to Kodular Free AIA. This is Hifza, and today we're sharing a BMI Calculator app made in Kodular, with the free AIA file so you can import it and see every block for yourself.

A BMI (Body Mass Index) calculator is one of the best first projects in Kodular. It is small, it is useful, and it teaches the skills you will use in almost every app: reading input from a TextBox, doing maths with blocks, making decisions with if / else if, and showing results in Labels. It also uses only built-in components, so you don't need any extensions or API keys.

If you are completely new, you may also like our Calculator App Kodular tutorial, which covers buttons and maths blocks in a simpler way.

What the BMI Calculator App Does

The user types their weight in kilograms and height in centimetres and taps Calculate. The app then:

  • Checks that both boxes are filled in, contain numbers, and are greater than 0. If not, it shows a short alert message.
  • Calculates BMI with the standard formula: BMI = weight (kg) ÷ (height (m) × height (m)). Because the user enters height in cm, the app divides it by 100 first.
  • Shows the result rounded to 1 decimal place, for example Your BMI: 22.9.
  • Shows the category in a matching colour: Underweight (blue), Normal weight (green), Overweight (orange) or Obese (red).
  • Hides the keyboard so the result is easy to read.

A Reset button clears everything so you can try again.

The categories used are the common adult BMI ranges: below 18.5 is underweight, 18.5 to 24.9 is normal, 25 to 29.9 is overweight, and 30 or above is obese. (BMI is a simple screening number, not a medical diagnosis, so it's a good idea to say that in your own app too.)

Designer: Components Used

Here is the full component list on Screen1, exactly as it is in the AIA. Screen1 has AlignHorizontal = Center and Title = BMI Calculator.

ComponentNameImportant properties
LabellblTitleText: BMI Calculator, FontSize 26, Bold, Center, Width: Fill parent
LabellblSubtitleText: Check your Body Mass Index, FontSize 14, grey
TextBoxtxtWeightHint: Weight (kg), Width: Fill parent
TextBoxtxtHeightHint: Height (cm), Width: Fill parent
HorizontalArrangementHorizontalArrangement1AlignHorizontal: Center, Width: Fill parent
  ↳ ButtonbtnCalculateText: Calculate, green background (#57B273), white bold text
  ↳ ButtonbtnResetText: Reset
LabellblResultText: Your BMI: --, FontSize 28, Bold, Center
LabellblCategoryText: Enter your details and tap Calculate, FontSize 18, Center
LabellblInfoText: the four BMI ranges, FontSize 12, grey
Notifier (non-visible)Notifier1Default properties

Tip: In Kodular the old Numbers Only TextBox property is marked as deprecated in the docs, which say to use Input Type instead. You can set Input Type to a number type for both TextBoxes so the phone shows a number keyboard. The AIA still checks the input with blocks, so it stays safe even if someone pastes text.

Blocks Explained

The app has just two event blocks: one for btnCalculate.Click and one for btnReset.Click.

1. When btnCalculate.Click: check the input

First we use one if / else if / else block to catch every mistake before doing any maths. The order matters: we check for empty boxes first, then for numbers, and only then compare the values with 0.

when btnCalculate.Click
  if   is empty (txtWeight.Text)
       call Notifier1.ShowAlert  notice: "Please enter your weight in kg"
  else if   is empty (txtHeight.Text)
       call Notifier1.ShowAlert  notice: "Please enter your height in cm"
  else if   not ( is number? (txtWeight.Text) )
       call Notifier1.ShowAlert  notice: "Weight must be a number"
  else if   not ( is number? (txtHeight.Text) )
       call Notifier1.ShowAlert  notice: "Height must be a number"
  else if   txtWeight.Text ≤ 0
       call Notifier1.ShowAlert  notice: "Weight must be greater than 0"
  else if   txtHeight.Text ≤ 0
       call Notifier1.ShowAlert  notice: "Height must be greater than 0"
  else
       ...calculate (see step 2)

2. Calculate the BMI with a local variable

Inside the else part we create a local variable called bmi with the initialize local ... in block. Height is converted from centimetres to metres by dividing by 100, and then multiplied by itself.

  else
    initialize local bmi to
        txtWeight.Text ÷ ( (txtHeight.Text ÷ 100) × (txtHeight.Text ÷ 100) )
    in
        set lblResult.Text to  join( "Your BMI: ",
                                     format as decimal  number: get bmi  places: 1 )
        ...choose the category (see step 3)
    call txtWeight.HideKeyboard
    call txtHeight.HideKeyboard

The format as decimal block (from the Math drawer) rounds the result to 1 decimal place, so 22.857 shows as 22.9.

3. Choose the category and colour

Still inside the local variable block, a second if / else if / else picks the category. Because the checks go from smallest to biggest, each else if only needs one comparison.

        if   get bmi < 18.5
             set lblCategory.Text to "Underweight"
             set lblCategory.TextColor to  (blue)
        else if   get bmi < 25
             set lblCategory.Text to "Normal weight"
             set lblCategory.TextColor to  (green)
        else if   get bmi < 30
             set lblCategory.Text to "Overweight"
             set lblCategory.TextColor to  (orange)
        else
             set lblCategory.Text to "Obese"
             set lblCategory.TextColor to  (red)

4. When btnReset.Click

when btnReset.Click
  set txtWeight.Text to ""
  set txtHeight.Text to ""
  set lblResult.Text to "Your BMI: --"
  set lblCategory.Text to "Enter your details and tap Calculate"
  set lblCategory.TextColor to  (dark gray)

That's the whole app! Around 85 blocks, and every one of them is a built-in Kodular block.




How to Import the AIA into Kodular

  1. Download BMICalculator.aia from the button below.
  2. Open Kodular Creator and sign in.
  3. Go to Projects → Import project (.aia) from my computer.
  4. Choose the downloaded file and click OK. The project opens in the Designer.
  5. Click Blocks to see the logic, then test it with the Kodular Companion app or build the APK.

Common Mistakes

  • Forgetting to convert cm to metres. If you use 175 instead of 1.75, the BMI comes out as 0.002. Always divide the height by 100.
  • Doing maths on an empty TextBox. An empty Text is not a number, so the maths block shows an error. That's why the empty and is number? checks come first.
  • Wrong order in the else if chain. If you check bmi < 30 before bmi < 18.5, everyone below 30 would be called "Overweight". Go from the smallest limit to the biggest.
  • Too many decimal places. Without format as decimal, users see long numbers like 22.857142857.
  • Renaming components after writing blocks. If you rename a TextBox, check that the blocks still point to the right component.

Ideas to Extend the App

  • Save the last result with TinyDB so it shows when the app opens again. Our Kodular TinyDB tutorial explains StoreValue and GetValue step by step.
  • Keep a BMI history list with a ListView, just like the tasks list in our To-Do List App in Kodular.
  • Add imperial units (pounds and feet/inches) with a Spinner or Switch. The formula is BMI = 703 × weight (lb) ÷ height (in)².
  • Show a tip for each category with Notifier.ShowMessageDialog.
  • Add an Image or a coloured bar that changes with the category.

Download Free AIA:

Download

Conclusion

That's how you make a BMI Calculator in Kodular with just TextBoxes, Buttons, Labels and a Notifier. Once you understand this one, you can build almost any "type a value, get a result" app, like a tip calculator, unit converter or age calculator, using the same pattern.

Did the AIA import correctly for you? Which app should we build next? Tell us in the comments below. And don't forget to share this post with your friends who are learning Kodular. See you in the next Free AIA!

Post a Comment

Previous Post Next Post