Hello everyone! Welcome back to Kodular Free AIA. This is Hifza, and today we're sharing a Unit Converter app in Kodular with a free AIA file you can import and study. This app converts length between millimeters, centimeters, meters, kilometers, inches, feet, yards and miles.
It is a great beginner project because it teaches you the Spinner component (a drop-down list), how to store numbers in a global list, how to pick an item from a list by its index, and how to reuse code with a procedure. Everything is built with built-in Kodular components only, so there are no extensions and no API keys.
What the Unit Converter App Does
- The user types a number into a TextBox (for example 5).
- They choose the unit to convert from and the unit to convert to using two Spinners.
- Tapping Convert shows the answer, e.g. 5 Kilometer = 3.1069 Mile.
- Swap flips the two units and converts again, and Clear resets the screen.
- If the box is empty or the text is not a number, a Notifier alert tells the user what to fix.
The trick behind the app is simple: every unit is first converted to meters, then from meters to the target unit. So we only need one number per unit instead of a huge table of every pair. With 8 units there are 56 possible conversions, but we only store 8 numbers. If you have already built our Stopwatch App in Kodular, you'll find this project even easier because it has no timers at all, just clean logic.
Designer: Components Used
Everything is on Screen1 (Title: Unit Converter, AlignHorizontal: Center, Scrollable: checked). Add these components from top to bottom:
| Component | Name | Important properties |
|---|---|---|
| Label | lblTitle | Text: Length Unit Converter, FontSize 24, FontBold, centered, Width: Fill parent |
| Label | lblSubtitle | Text: Convert mm, cm, m, km, inch, foot, yard and mile |
| TextBox | txtValue | Hint: Enter a value, e.g. 25, FontSize 18, Width: Fill parent |
| Label | lblFrom | Text: From, FontBold |
| Spinner | spnFrom | ElementsFromString: Millimeter,Centimeter,Meter,Kilometer,Inch,Foot,Yard,Mile |
| Label | lblTo | Text: To, FontBold |
| Spinner | spnTo | ElementsFromString: same list as spnFrom |
| HorizontalArrangement | HorizontalArrangement1 | Width: Fill parent, contains the three buttons below |
| Button | btnConvert | Text: Convert, BackgroundColor indigo, white bold text |
| Button | btnSwap | Text: Swap, BackgroundColor green |
| Button | btnClear | Text: Clear, BackgroundColor grey |
| Label | lblResult | Text: Result will appear here, FontSize 20, FontBold, centered |
| Notifier (non-visible) | Notifier1 | Default settings |
Important: the order of units in ElementsFromString must match the order of numbers in the factors list in the blocks. Item 1 is Millimeter, item 2 is Centimeter, and so on.
Blocks Explained
1. The global factors list
This list stores how many meters are in one of each unit, in the same order as the Spinner items.
initialize global factors to
make a list
0.001 (Millimeter)
0.01 (Centimeter)
1 (Meter)
1000 (Kilometer)
0.0254 (Inch)
0.3048 (Foot)
0.9144 (Yard)
1609.344 (Mile)
2. When Screen1.Initialize
When the app opens we select default units so the Spinners are never empty: Meter (item 3) to Centimeter (item 2).
when Screen1.Initialize
set spnFrom.SelectionIndex to 3
set spnTo.SelectionIndex to 2
3. The convert procedure
We put the main logic in a procedure so both the Convert and Swap buttons can use it without copying blocks.
to convert
if is empty txtValue.Text
call Notifier1.ShowAlert notice: "Please enter a value first"
else if not ( is number? txtValue.Text )
call Notifier1.ShowAlert notice: "Please enter a valid number"
else
initialize local result to
( txtValue.Text
× select list item list: get global factors
index: spnFrom.SelectionIndex )
÷ select list item list: get global factors
index: spnTo.SelectionIndex
in
set lblResult.Text to join
txtValue.Text
" "
spnFrom.Selection
" = "
format as decimal number: get result places: 4
" "
spnTo.Selection
Example: 5 Kilometer to Mile = 5 × 1000 ÷ 1609.344 = 3.1069. First we turn the value into meters (multiply), then into the target unit (divide).
4. When btnConvert.Click
when btnConvert.Click
call convert
5. When btnSwap.Click
A local variable temp holds the first index while we swap, just like swapping two cups of water using a third cup.
when btnSwap.Click
initialize local temp to spnFrom.SelectionIndex
in
set spnFrom.SelectionIndex to spnTo.SelectionIndex
set spnTo.SelectionIndex to get temp
if not ( is empty txtValue.Text )
call convert
6. When btnClear.Click
when btnClear.Click
set txtValue.Text to ""
set lblResult.Text to "Result will appear here"
How to Import the AIA into Kodular
- Download the UnitConverter.aia file from the button below.
- Open Kodular Creator and sign in.
- Go to Projects → Import project (.aia) from my computer.
- Choose the downloaded file and wait for the project to open.
- Test it with the Kodular Companion app or build an APK.
Common Mistakes
- List order doesn't match: if you add a new unit to ElementsFromString, add its factor at the same position in the factors list, or you will get wrong answers.
- Spaces in ElementsFromString: type the items separated by commas only (Millimeter,Centimeter,Meter) and keep the same spelling in both Spinners, so the result text looks clean.
- Index 0 error: SelectionIndex is 0 when nothing is selected, and "select list item" fails with index 0. That's why we set both Spinners in Screen1.Initialize.
- Skipping the number check: without the is number? block, typing letters like "abc" makes the app show a math error.
- Dividing in the wrong order: always multiply by the FROM factor and divide by the TO factor.
Ideas to Extend the App
- Add a third Spinner for the category (Length, Weight, Temperature) and swap the units and factors lists when it changes.
- Convert automatically in spnFrom.AfterSelecting and spnTo.AfterSelecting.
- Save the last used units with TinyDB, like in our Kodular TinyDB tutorial.
- Show a history of conversions in a ListView, the same way we list tasks in the To-Do List App in Kodular.
- Combine it with our BMI Calculator App so users can enter height in feet and inches.
Frequently Asked Questions
Does this unit converter app need internet?
No. All the math happens on the phone with built-in blocks, so it works fully offline.
Can I use this AIA in MIT App Inventor or Niotron?
The project uses standard components (Label, TextBox, Spinner, Button, Notifier) and standard blocks, so the logic is the same everywhere. The AIA itself is prepared for Kodular, so import it there first.
How do I add weight or temperature?
Weight works exactly like length: pick a base unit (for example kilogram) and store how many kilograms are in each unit. Temperature is different because Celsius, Fahrenheit and Kelvin need a formula with addition, not just multiplication, so use an if / else if block for each pair.
Why does the answer show 4 decimal places?
We used the format as decimal block with places set to 4. Change it to 2 for shorter answers, or to 6 when converting very small values like millimeters to miles.
Download Free AIA:
Conclusion
That's it! You now have a working Unit Converter app in Kodular and you learned how to use Spinners, global lists, list indexes, local variables and procedures. These skills appear in almost every real app, so try adding your own units and categories. If you get stuck or want a tutorial on another topic, tell us in the comments below. Happy app building!