How to Create a Simple Currency Converter App in Android Studio

I have been working on a number of projects as of late and today I wanted to share with you some of them.

This tutorial will take you through a step-by-step process on how to create a simple currency converter app in Android studio.

We shall be using Java and at the same time to convert this application to Kotlin (if time allows).

Java and Kotlin are now the most popular Android development languages, with the latter being the official programming language for making apps in Android Studio.

We assume all factors EW constant, you have Android Studio installed on your PC, and the environment has been properly set up.

As such, in this tutorial, we are going to use Android Studio for our simple currency converter Android application.

Simple Currency Converter Android App Example and How to Create It

Open Android Studio from Start Menu > All Programs or simply tap the icon on the desktop to get started.

Wait for a few minutes as Android Studio launches. This may take a while depending on the computer speed processor or RAM. You may need to wait until Gradle Sync is finished.

Once Android Studio has been fully launched, go to File > New and Create a new Project and name it Currency Converter App or anything you want.

Click Next, then select the Form Factors and minimum SDK. Just tick Phone and Tablet and select at least API 15: Android  4.0.3 (IceCreamSandwich). We are targeting this API because it powers at least 90% of all Android devices in the world.

You should always try to make Android applications compatible with the majority of the Android devices in the market.

Click Next and Add an empty Activity to our Project.

In Create a new empty Activity, simply continue with defaults and click Finish.

It’s now time we make our simple currency converter application. You’ll have to wait until Gradle Sync is finished to continue with the tutorial.

So, in this case, we shall create two files (in fact, Android Studio has already created them for you) the MainActivity.java and Activity_main.xml.

We shall put all our Simple Currency Converter source code in activity_main.xml and the Java implementations in MainActivity.java.

Activity_main.xml

To create the interface below, you can simply copy and paste the source code below or follow some of these procedures to create this simple Currency Converter interface.

Go to res folder > Layout and select activity_main.xml. Click Text to add the following piece of XML code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Enter Currency in dollars"
        android:textSize="20sp"/>
    <EditText
        android:id="@+id/edtText"
        android:layout_below="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="Enter dollars"/>
    <Button
        android:id="@+id/button"
        android:layout_below="@+id/edtText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:text="CONVERT"
        android:textSize="20sp"
        android:onClick="convertToEuro"/>
    <ImageView
        android:id="@+id/image"
        android:layout_below="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/dollars"/>
    <TextView
        android:layout_below="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Developed By Martin Tumusiime"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>


</RelativeLayout>

Relative Layout

In this tutorial, we shall use Relative Layout to align our currency converter app widgets. You can add Relative Layout to the activity_main.xml file by implementing the code snippet below.

<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</RelativeLayout>

Plain Text (Text View)

We need to add a Text View with the text "Enter Currency in dollars," assuming we are doing a currency converter for converting dollars to euros.

You can implement this by adding the following code below to activity_main.xml file.

<TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Enter Currency in dollars"
        android:textSize="20sp"/>

Edit Text View

This widget will allow a user to add a figure or currency that needs to be converted. You can also implement the Edit Text widget in activity_main.xml using the code snippet below. 

Note: Text hint allows Edit Text widget to show sample information or give a hint; a user is required to add to this field or box.

<EditText
        android:id="@+id/edtText"
        android:layout_below="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="Enter dollars"/>

Button Widget

You can now add the button widget that a user clicks and converts the figures in an Edit Text widget to another currency. Use the code snippet below to implement this. 

Note: The on Click Method, convertToEuro, will be used in our Java code.

<Button
        android:id="@+id/button"
        android:layout_below="@+id/edtText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:text="CONVERT"
        android:textSize="20sp"
        android:onClick="convertToEuro"/>

Image View

To make our application look nice, you may need to add some image widgets with an image placed below the button. Use the code snippet below to add this piece of code to your Simple Currency Converter App.

<ImageView
        android:id="@+id/image"
        android:layout_below="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/dollars"/>

Note: You’ll have to download a sample image from Google. Copy and paste it in your drawable folder (drawable is also under res).

After that, everything is complete for our activity_main.xml file. We shall have something like the code below.

Activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Enter Currency in dollars"
        android:textSize="20sp"/>
    <EditText
        android:id="@+id/edtText"
        android:layout_below="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:hint="Enter dollars"/>
    <Button
        android:id="@+id/button"
        android:layout_below="@+id/edtText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:text="CONVERT"
        android:textSize="20sp"
        android:onClick="convertToEuro"/>
    <ImageView
        android:id="@+id/image"
        android:layout_below="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/dollars"/>
    <TextView
        android:layout_below="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Developed By Martin Tumusiime"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>
</RelativeLayout>

Add Java Code Implementations in the MainActivity.java File

Head back to Java > com.example.currencyconverterApp and select MainActivity.

First, you’ll find the onCreate method already created for you in the Main Activity Java file. This is code snippet for the onCreate method.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

We now need to implement our very own convertToEuro method that we added to the button in activity_main.xml, as shown below.

public void convertToEuro(View view){
    EditText editText = (EditText) findViewById(R.id.edtText);

    int dollars = Integer.parseInt(editText.getText().toString());
    int euro = 2000;

    double result = dollars * euro ;

    Toast.makeText(MainActivity.this, Double.toString(result), Toast.LENGTH_LONG).show();
}

Note:

1. In the int euro = 2000; bit of code, 2000 is just a variable you can change to any currency rate depending on the Currency Converter App you want to make.

2. The result/output will be displayed as a toast. You can as well show it on the Activity_main.xml interface as TextView by adding the code snippet below.

TextView textView = (TextView)findViewById(R.id.textview);
textView.setText(Double.toString(result));

MainActivity.java

Add this code implementation in the Java file, MainActivity.

public class MainActivity extends AppCompatActivity {

    public void convertToEuro(View view){
        EditText editText = (EditText) findViewById(R.id.edtText);

        int dollars = Integer.parseInt(editText.getText().toString());
        int euro = 2000;

        double result = dollars * euro ;

        Toast.makeText(MainActivity.this, Double.toString(result), Toast.LENGTH_LONG).show();
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

I hope this was helpful to all those who want to create a simple app in Android Studio. You can leave a comment in the section below if you any issues with the implementations.