Code on the Go

Zoom Window Out
Larger Text | Smaller Text
Show Expanding Text
Print Topic
Send Mail Feedback
Share This Topic
Save Permalink URL

Navigation: » No topics above this level «

Tutorial: Build a weight converter app

Introduction

Welcome to Code on the Go! This tutorial helps you write, build, and test an Android app using Java. This tutorial contains:

•A specification for the app

•An overview of the app's code

•Step-by-step instructions for building the app in Code on the Go

This tutorial assumes that you have some experience with programming and are familiar with common features found in other IDEs. In the tutorial, sections that begin with a lightbulb icon () contain information about navigating the Code on the Go interface.

You will build a tool that converts kilograms to pounds and pounds to kilograms, depending on the user’s selection. When the user enters or changes a numerical value, the app will instantly display the converted measurement.

If you are new to Android development, some instructions may be difficult to follow. Complete text for main_activity.xml and MainActivity.java are provided in the tutorial so you can view the code. The standalone files are available in the CodeOnTheGoProjects/Tutorials folder. Using your file manager, you can move these files to your project directory.

Goal: Build a weight converter app

In the app, the user will enter a numerical value that is converted from kilograms to pounds or pounds to kilograms, depending on the selection. The user-provided value is the input measurement, and the value that the app provides is the converted measurement. This can be further divided into the following parts:

•The numerical value of the input measurement is the quantity.

•The unit of measurement of the input measurement is the input unit.

•The app displays an interface with the three following elements:

oA text field that lets the user enter an input quantity.

oA dropdown menu, which lets the user choose an input unit (either “kg” for kilograms or “lbs” for pounds).

oA result field, which displays the converted measurement, including its quantity and output unit (either “kg” for kilograms or “lbs” for pounds).

The image below is a screenshot of the finished app that you will create using this tutorial.

Completed WeightConverter app

When the user first opens the app, a default input measurement of 0 lbs will be displayed. If the user changes the input quantity or input unit, then the app will automatically update the result field to display a new converted measurement based on those choices.

Start the project

When you open Code on the Go for the first time after installation, the main menu is displayed.

Code on the Go main menu

1.On the main menu, tap Create project. The New project page is displayed, which contains templates with starter code for different kinds of projects. (Click here to learn more about templates.) The image below shows Code on the Go’s built-in application templates.

Tap a template to begin a new project

2.Tap the Empty Activity template. A configuration page for the project is displayed.

3.In the App name field, enter a name for your app. In this tutorial, enter the name WeightConverter. To use this tutorial's sample code, you must enter the text WeightConverter exactly as displayed.

4.In the Project language menu, select Java.

5.In the Minimum SDK menu, you can choose the lowest version of Android that your app will support. In this tutorial, we will use API 21: Android 5.0 (Lollipop), which is the default option.

6.In the lower-right corner, tap the Create project button. Co on the Go will initialize the project.

Configuring the WeightConverter project

What happens during initialization?

As part of project initialization, Code on the Go creates files and directories for the template you selected. During initialization, the top of the page displays a moving progress bar and the bottom of the page displays status messages. For detailed information about the initialization tasks, swipe up from the bottom to display the Build Output panel. Swipe down to hide the Build Output panel when you are done viewing it. (Learn more about output panels.)

When the project has fully initialized, the "Project initialized" message will be displayed at the bottom of the page. The Build icon (a green triangle) will be displayed at the top of page near the project's name. The image below shows the main project page after the project has initialized.

The tutorial project is initialized

Like most IDEs, Code on the Go provides a file browser to navigate the contents of your project. To use the file browser, follow these steps:

1.Tap the Project menu, which is represented by the “hamburger” icon in the top left corner.

2.Tap any of the folder icons to see the contents.

In this tutorial, you will only modify the following two files:

•MainActivity.java: The source file for the main activity of the app.

•activity_main.xml: The main activity’s layout XML file.

Open the MainActivity.java source file

First, tap the Project menu to open the file browser.

To open MainActivity.java, you must navigate to the folder where it is located. To open a folder, either tap its name or tap the arrow > next to it. In this tutorial, begin with the main project folder, which is represented by the folder icon in the top left corner, and then open the following folders in order:

app → src → main → java → com → example → weightconverter

Path to MainActivity.java file

The weightconverter/ folder contains the file MainActivity.java. Tap MainActivity.java to open the file. The file will open in the code editor. The file contains the default code for the template we selected, which will be replaced by the code for our project.

Default contents of the MainActivity.java file

Open the activity_main.xml layout file

The activity_main.xml file contains the default layout for the template, which will be replaced by the XML layout code for our project.

To open activity_main.xml, tap the Project menu to reopen the file tree and navigate to the following location:

app → src → main → res → layout

File path to activity_main.xml layout file

Then, tap activity_main.xml to open the file.

After opening the files, both activity_main.xml and MainActivity.java are displayed in the code editor. To switch between the files, tap the tab that contains the filename.

Both MainActivity.java and activity_main.xml are open in the editor

Get help: View tooltips and documentation

Code on the Go contains detailed documentation on several subjects, including Java and Kotlin keywords, the Java API, the Kotlin Standard Library, and the Android API.

If you need help with any item in the Code on the Go interface, you can long-press that item to display a tooltip. To view more information, tap +See more. If you need additional help, each tooltip contains a link to a more detailed documentation page.

When you're using the editor, you can view tooltips for text that is displayed in the editor window including keywords, classes, packages, and more. To display a tooltip for text in the editor, follow these steps:

1.Select the text string.

2.Long-press the text string. The code editing toolbar will be displayed.

3.Tap the Help icon (the question mark at the right side of the code editing toolbar). A tooltip will be displayed.

4.To access more information, tap +See more.

5.To access the complete documentation, tap the link at the bottom of the tooltip.

To return to the editor, tap Back to Code on the Go at the top of the page.

Set up the app's layout

Layout overview

To implement the weight converter app, it's important to understand its overall visual design.

The user interface for the app will be divided into three main parts positioned horizontally across the center of the screen. You will add these items to the layout XML file for the main activity.

Item	Purpose	Size
Text field	User can enter a decimal value for the input quantity	25% of the screen's total width
Dropdown menu	User can choose whether the input is kilograms (kgs) or pounds (lbs)	25% of the screen's total width
Result field	The converted unit is displayed here	50% of the screen's total width

The tutorial app layout

Layout elements

The first step in creating the app is to build its interface. Since this is an example app with only one screen, you will start by setting up the layout in the activity_main.xml file.

You will add three main elements (called Views) to the layout:

•EditText: Accepts the user’s input quantity

•Spinner: Displays a dropdown menu to let the user select units

•TextView: Displays the converted measurement

1. Create EditText – Accept the user’s input quantity

This element is positioned on the left side of the screen. It should take up 25% of the screen’s total width. Note that this setup only accepts positive decimal numbers, so 25% will be entered as 0.25. The recommended attributes are as follows:

android:id="@+id/inputQuantity"

app:layout_constraintWidth_percent="0.25"

android:inputType="numberDecimal"

2. Spinner – Present a dropdown menu to let the user select units

This element is positioned directly to the right of the EditText element. It takes up 25% of the screen’s total width. (Later in this tutorial, you will edit MainActivity.java to make the dropdown menu show options for “kg” and “lbs.”) The recommended attributes are as follows:

android:id="@+id/inputUnits"

app:layout_constraintWidth_percent="0.25"

3. TextView – Displays the converted measurement

This element is positioned to the right of the Spinner element. It takes up 50% of the screen’s total width. The converted measurement is centered within the View and displayed in relatively large text (32dp), which increases visibility. The recommended attributes are as follows:

android:id="@+id/convertedMeasurement"

app:layout_constraintWidth_percent="0.50"

android:textSize="32dp"

android:gravity="center"

Add the tutorial code to activity_main.xml

The complete code for activity_main.xml is displayed below. If it's difficult to select and copy the code on this page, tap here to open the text in a new window.

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<EditText

android:id="@+id/inputQuantity"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:inputType="numberDecimal"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintWidth_percent="0.25" />

<Spinner

android:id="@+id/inputUnits"

android:layout_width="0dp"

android:layout_height="wrap_content"

android:background="@android:drawable/btn_dropdown"

android:spinnerMode="dropdown"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toRightOf="@id/inputQuantity"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintWidth_percent="0.25" />

<TextView

android:id="@+id/convertedMeasurement"

android:layout_width="0dp"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintLeft_toRightOf="@id/inputUnits"

app:layout_constraintTop_toTopOf="parent"

android:textSize="32dp"

android:gravity="center"

app:layout_constraintWidth_percent="0.50" />

</androidx.constraintlayout.widget.ConstraintLayout>

Build the app to see the layout

In this step, you will build the app so you can view the layout on your device. To build the app, tap the Build icon (the green triangle) in the slider on the top right side of the screen.

Code on the Go will begin building your app. Like when you initialized the project, a progress indicator is displayed at the top of the page and status messages are displayed at the bottom. When the build is finished, a message about the build's success or failure will be displayed. To view more information, including details on the build process, swipe up to display the Build Output panel. (Learn more about output panels.)

After the build is finished successfully, you have built the app! (Later in this tutorial, you will make changes and build the app again.) The first time you successfully build an app, a prompt will ask if you want to install it on your device. Tap Yes to install the app.

After you tap Install, Android will display a security warning because the app you just build has not been verified as secure by Google Play Protect. The text and appearance of this prompt will differ depending on your device. The image below shows an example of the security warning.

Before installing, Android will scan the app for safety

To proceed, tap Scan app. Android will scan the app to ensure that it isn’t harmful. When the scan is complete, tap Install.

When the scan is complete, you can install the app

After the app is installed, you'll be asked if you want to launch the app. Tap Yes to launch the app. The app will open and display the layout you created. Because we haven't written any of the app's logic, only the layout elements are displayed.

The app shows only the layout

Next, you will write the Java code to convert units that the user enters.

Code editor features

Before you edit MainActivity.java, let’s look at three useful features of the code editor in Code on the Go. These tools can help you write code faster and fix problems more easily.

Auto-complete suggestions

As you type, Code on the Go will suggest ways to complete your code. A pop-up list will contain options to complete the text you've started to type, including:

•Variable names

•Class names

•Keywords (such as if, while, or return)

•Common code snippets

This can save you time and help you avoid mistakes. Learn more about autocomplete.

Code actions

For Java, Code on the Go also includes special time-saving features called code actions. To use code actions, follow these steps:

1.Long-press to select any text in the code editor. The code editing toolbar is displayed.

2.Tap the angle brackets (< >) on the left side of the toolbar. A menu of options is displayed.

Code actions can automate common tasks including:

•Adding or removing comments in the code

•Finding where a variable is used or declared

•Automatically creating setters/getters, constructors, and toString()

•Organizing imports and removing unused imports

Learn more about code actions.

Diagnostics (error checking)

Code on the Go displays a red wavy line under any part of your code that may need correction. In addition, the built-in diagnostics can identify several potential problems, including typing errors, the use of a variable that has not been created, the wrong type of value for a variable, and more. Learn more about diagnostics.

Start entering the main activity code

For the unit converter to work, you must add event listeners to both the input quantity field and dropdown menu. These listeners will detect any changes made by the user. For example, the user may enter a new input quantity or switch the unit type from "kg" to "lbs."

When a change is detected, the listener will call a method named updateConversionResult that will:

•Read the quantity and unit of the current input measurement.

•Perform the conversion based on the input measurement.

•Update the result field to display the converted measurement quantity and unit (for example, 45.36 kg or 100.0 lbs).

The updateConversionResult method causes the result field to immediately display a new measurement conversion any time the user changes an input.

The next step is to add options to the Spinner dropdown.

The Spinner is a type of view called AdapterView, which uses an Adapter to display a list of options. In this tutorial, you will create an ArrayAdapter that uses a list of strings containing two items: kg and lbs. The Adapter will use a simple layout to display options in the dropdown menu.

We'll begin by replacing the contents of MainActivity.java with the code for this part of the project.

Add the tutorial start code from MainActivity.java

The starting code for MainActivity.java is displayed below. If it's difficult to select and copy the code on this page, tap here to open the text in a new window.

package com.example.weightconverter;

import android.view.View;a

import android.widget.EditText;

import android.widget.Spinner;

import android.widget.AdapterView;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log; // Import for Log

import android.text.Editable; // Import for Editable

import android.text.TextWatcher; // Import for TextWatcher

import java.util.List;

import java.util.ArrayList;

import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

// Strings for kilograms and pounds as units be used in the dropdown Spinner

// and unit conversion function. The best practice is to declare these in

// res/values/strings.xml but for this tutorial we'll declare them here.

private String kg_str = "kg";

private String lbs_str = "lbs";

private EditText inputQuantity;

private Spinner inputUnits;

private TextView convertedMeasurement;

// 1 kg = 2.20462 lbs

private Double kg_to_lbs_factor = 2.20462;

// 1 lbs = 0.45359 kg

private Double lbs_to_kg_factor = 0.45359;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// Set content view to the main layout

setContentView(R.layout.activity_main);

// Populate dropdown Spinner with kg and lbs options

List<String> spinnerArray = new ArrayList<>();

spinnerArray.add(kg_str);

spinnerArray.add(lbs_str);

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, spinnerArray);

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

inputUnits = (Spinner) findViewById(R.id.inputUnits); // Assuming your Spinner ID in XML is "inputUnits"

inputUnits.setAdapter(adapter);

inputQuantity = (EditText)findViewById(R.id.inputQuantity);

convertedMeasurement = (TextView)findViewById(R.id.convertedMeasurement);

// Initial display based on the default spinner selection (kg_str)

updateConversionResult();

// Listener for text changes on the input EditText

inputQuantity = findViewById(R.id.inputQuantity);

}

/**

* This method handles the conversion logic and updates the convResult TextView.

private void updateConversionResult() {

String inputText = inputQuantity.getText().toString();

String selectedUnit = inputUnits.getSelectedItem().toString();

double inputValue = 0;

try {

if (!inputText.isEmpty()) {

inputValue = Double.parseDouble(inputText);

}

} catch (NumberFormatException e) {

convertedMeasurement.setText("Invalid input");

return;

}

// Convert measurement and display it truncated to 2 decimal places

double result = 0;

if (selectedUnit.equals(kg_str)) {

result = inputValue * kg_to_lbs_factor;

convertedMeasurement.setText(String.format("%.2f %s", result, lbs_str));

} else {

result = inputValue * lbs_to_kg_factor;

convertedMeasurement.setText(String.format("%.2f %s", result, kg_str));

}

Build the app

you enter the code in MainActivity.java, press the green Build icon in the options slider bar to rebuild your app. Because you have already installed one version of the app, you will be prompted to update (not install) the app when it finishes building this time.

When you launch the updated app, it will contain a populated dropdown menu like the one shown in the image below.

Add event handlers and conversion logic

Event handlers

Next, you will set up event handlers that call a method named updateConversionResult(). This method will update the result field when the input value or unit changes. You will write the updateConversionResult() method later in this tutorial.

You must add two event handlers: one for the text field where the user enters numbers, and one for the dropdown menu where the user selects a unit.

1. Input Quantity Update Handler

You will add a TextWatcher to the inputQuantity text field using addTextChangedListener(). A TextWatcher has three required methods, as follows:

beforeTextChanged()

onTextChanged()

afterTextChanged()

For this app, you only need onTextChanged(), which calls updateConversionResult(). Because the other two methods are not needed, you will leave them empty.

2. Input Units Update Handler

You will also add a listener to the inputUnits Spinner with the method named setOnItemSelectedListener(). This listener must include two methods, as follows:

onItemSelected()

onNothingSelected()

For this app, you only need onItemSelected(), which calls updateConversionResult() when the user changes the unit (for example, kg to lbs). Because the other method is not needed, you will leave it empty.

Conversion logic

The final step is to add the updateConversionResult() method. Basic math will be used to convert measurements between pounds and kilograms. Specifically, the following values are used:

•For kilograms: 1 kg = 2.20462 lbs

•For pounds: 1 lbs = 0.45359 kg

The overall program logic is the following:

1.Get current values from the input quantity in the text field and the unit selected in the dropdown menu.

2.Parse the input quantity as a Double, then store it in the variable inputQuantity.

3.Store the selected units as the String inputUnits.

4.Create the variables convertedQuantity and convertedUnits to store the quantity and unit of the converted measurement.

5.Compute the converted measurement, then update the result field, as follows:

•If inputUnits == “lbs”:

oconvertedQuantity = 0.45359 * inputQuantity

oconvertedUnits = “kg”

•If inputUnits == “kg”:

oconvertedQuantity = 2.20462 * inputQuantity

oconvertedUnits = “lbs”

•Set the text of the converted measurement TextView to a formatted string with the full converted measurement.

oIn the recommended implementation, it is stored as String.format("%.2f %s", convertedQuantity, convertedUnits).

Add the complete tutorial code to MainActivity.java

The complete tutorial code is displayed below. You can revise the existing MainActivity.java file to include the event handlers and conversion logic, or you can replace the file contents entirely with the complete code. If it's difficult to select and copy the code on this page, tap here to open the text in a new window.

package com.example.weightconverter;

import android.view.View;

import android.widget.ArrayAdapter;

import android.widget.EditText;

import android.widget.Spinner;

import android.widget.AdapterView;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.util.Log; // Import for Log

import android.text.Editable; // Import for Editable

import android.text.TextWatcher; // Import for TextWatcher

import java.util.List;

import java.util.ArrayList;

import android.widget.AdapterView.OnItemSelectedListener;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

// Strings for kilograms and pounds as units be used in the dropdown Spinner

// and unit conversion function. The best practice is to declare these in

// res/values/strings.xml but for this tutorial we'll declare them here.

private String kg_str = "kg";

private String lbs_str = "lbs";

private EditText inputQuantity;

private Spinner inputUnits;

private TextView convertedMeasurement;

// 1 kg = 2.20462 lbs

private Double kg_to_lbs_factor = 2.20462;

// 1 lbs = 0.45359 kg

private Double lbs_to_kg_factor = 0.45359;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// Set content view to the main layout

setContentView(R.layout.activity_main);

// Populate dropdown Spinner with kg and lbs options

List<String> spinnerArray = new ArrayList<>();

spinnerArray.add(kg_str);

spinnerArray.add(lbs_str);

ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, spinnerArray);

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

inputUnits = (Spinner) findViewById(R.id.inputUnits); // Assuming your Spinner ID in XML is "inputUnits"

inputUnits.setAdapter(adapter);

inputQuantity = (EditText)findViewById(R.id.inputQuantity);

convertedMeasurement = (TextView)findViewById(R.id.convertedMeasurement);

// Initial display based on the default spinner selection (kg_str)

updateConversionResult();

// Listener for text changes on the input EditText

inputQuantity = findViewById(R.id.inputQuantity);

inputQuantity.addTextChangedListener(new TextWatcher() {

@Override

public void beforeTextChanged(CharSequence s, int start, int count, int after) {

// Do nothing

}

@Override

public void onTextChanged(CharSequence s, int start, int before, int count) {

// Update converted measurement when input quantity changes

updateConversionResult();

}

@Override

public void afterTextChanged(Editable s) {

// Do nothing

}

});

// Listener for spinner item selection changes

inputUnits.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {

@Override

public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

// Update converted measurement when input units change

updateConversionResult();

}

@Override

public void onNothingSelected(AdapterView<?> parent) {

// Do nothing

}

});

}

/**

* This method handles the conversion logic and updates the convResult TextView.

private void updateConversionResult() {

String inputText = inputQuantity.getText().toString();

String selectedUnit = inputUnits.getS\electedItem().toString();

double inputValue = 0;

try {

if (!inputText.isEmpty()) {

inputValue = Double.parseDouble(inputText);

}

} catch (NumberFormatException e) {

convertedMeasurement.setText("Invalid input");

return;

}

// Convert measurement and display it truncated to 2 decimal places

double result = 0;

if (selectedUnit.equals(kg_str)) {

result = inputValue * kg_to_lbs_factor;

convertedMeasurement.setText(String.format("%.2f %s", result, lbs_str));

} else {

result = inputValue * lbs_to_kg_factor;

convertedMeasurement.setText(String.format("%.2f %s", result, kg_str));

}

Check diagnostics

After you've entered all the code, it's a good idea to look at the built-in diagnostics to identify typos and other kinds of errors.

•For Java projects, Code on the Go adds a red wavy underline to code that may have problems. Please note that the diagnostics may flag error-free code, notably import statements that refer to your app's own generated code and not to external libraries. (For example, diagnostics will flag the statement import com.example.weightconverter.databinding.ActivityMainBinding; because it's not a recognized outside class, even though it's valid and required for your app.)

•The Diagnostics panel contains a complete list of potential issues. To display the diagnostics panel, swipe up from the bottom of the page and then tap the Diagnostics tab. Tap anything in the list to go to that item in the code editor. (Learn more about output panels.)

Build the completed app

When you've entered all of the code and resolved any problems , tap the green Build icon in the action bar to rebuild and run it. When your app finishes building, tap Update application. Congratulations! You have built your first app using Code on the Go.

Please enable JavaScript to view this site.

Code on the Go

Introduction

To implement the weight converter app, it's important to understand its overall visual design.

1. Create EditText – Accept the user’s input quantity

3. TextView – Displays the converted measurement

Code actions

Diagnostics (error checking)

1. Input Quantity Update Handler

2. Input Units Update Handler

The final step is to add the updateConversionResult() method. Basic math will be used to convert measurements between pounds and kilograms. Specifically, the following values are used: