How to Build Decimal to Hexadecimal Converter Android App in Android Studio?

In this article, we would be learning how to make a Decimal to Hexadecimal Converter App in Java in Android Studio. This app would take an input of a Decimal number, convert it into a Hexadecimal number and then show the output. So let’s go through the brief go through of how we would be making the app.

Brief Go through

We will begin by first creating the drawable resource file and working with the XML of it to give an outline to the Edit Texts which we will be implementing further. After that we will be working with the activity_main.xml, where we would be adding two Edit Texts, one for taking the input of decimal number and another for showing the output, two buttons for submitting which will submit the input and clear to reset it and then two Text Views to show some instructions to the user of how to use the app. At the last, we would be working with the MainActivity.java, where we implement some functions which would do the whole conversion when the user clicks on the buttons. Note that we are going to implement the whole application in the Java programming language. Below is the sample gif of the working app which will give you an idea of what we will are going to make in this article.

Step by Step Implementation

Step 1: Create a New Project with an Empty Activity

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We would first select a Project Template and then Configure our project by giving the name and choosing the language in which we are making the app. Note that select Java as the programming language.

Step 2: Adding a new Drawable Resource File 

In this step, we would be adding a new drawable resource file by navigating to app/res/drawable and then right-click on the drawable folder and go to New/Drawable Resource File.

Now, we would name the drawable resource file and select the root element as a shape. With the remaining default settings click on the “ok” button. Note that while naming the resource file, the name should not contain any capital letters.

Step 3: Working with the Drawable Resource File

After creating the drawable resource file in the previous step, now we have to write some code in the XML such that it will give the outline to the EditText. First of all, we will define the shape as a “rectangle“. Then add a stroke to the shape which will make an outline around the shape. Under the same attribute, we will specify the width and color of the stroke. Finally, we will give a round shape in the corners by specifying the radius of the corners. Refer to the XML code below to understand the above lines:

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape = "rectangle">

    <stroke
        android:width="2dp"
        android:color="@color/gfg_official"/>

    <corners
        android:radius="20dp"/>

</shape>

Step 4: Working with the activity_main.xml file

Navigate to the app/res/layout/activity_main.xml and add the below code to that file. In the activity_main.xml file, we have to add two EditText for Input and Output text to display, two buttons for submitting which will submit the input and clear to reset it and we have added two TextView to show some text so that we can guide the user about how to use this app. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="200dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/edit_text_border"
        android:hint="Enter a Decimal Number"
        android:inputType="numberDecimal"
        android:padding="10dp"
        android:textAlignment="center"
        android:textSize="20sp" />

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/editText"
        android:layout_centerHorizontal="true"
        android:layout_margin="8dp"
        android:text="Submit"
        android:textAllCaps="false" />

    <EditText
        android:id="@+id/output"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/submit"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="40dp"
        android:layout_marginRight="8dp"
        android:background="@drawable/edit_text_border"
        android:hint="Answer will appear here"
        android:padding="10dp"
        android:textAlignment="center"
        android:textSize="20sp" />

    <Button
        android:id="@+id/reset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/output"
        android:layout_centerHorizontal="true"
        android:layout_margin="8dp"
        android:text="Reset"
        android:textAllCaps="false" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/reset"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="50dp"
        android:text="⚫ Click on Submit Button after entering a Decimal Number"
        android:textSize="15dp" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="⚫ Click on Reset Button to reset"
        android:textSize="15dp" />

</RelativeLayout>

After writing the code of the XML file for the app, the design will look something like this: 

Step 5: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    // Giving name to the variables for two EditTexts and two Buttons
    // input is where the user will input the decimal number
    // output is where the user will get the output in the form of binary number
    // submit is the button created to submit the decimal number entered by the user
    // clear is the button to clear the answer
    EditText input, output;
    Button submit, reset;

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

        // Calling the EditText by id which we gave in xml file
        input = (EditText) findViewById(R.id.editText);
        output = (EditText) findViewById(R.id.output);

        submit = (Button) findViewById(R.id.submit);

        // It is set so that when the user clicks on submit button, the data
        // gets send in the function created below which will convert it and then
        // show the answer to the user in the output
        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                // Creating a string method argument
                String string = input.getText().toString();

                // Here, we are parsing a string
                // method argument into an integer object
                int i = Integer.parseInt(string);

                // Converts and stores it in the form of string
                String hexadecimal = Integer.toHexString(i);

                // It will show the output in the
                // second edit text that we created
                output.setText(hexadecimal);
            }
        });

        // Here, we will define a function which will
        // clear the whole text and reset it
        reset = (Button) findViewById(R.id.reset);
        reset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                input.setText("");
                output.setText("");
            }
        });

    }
}

Output:

Image

Video