Build Your First Android App with Java 📱

Project Goal

To create a single-screen application that allows a user to enter a bill amount, press a button, and see the calculated tip and total amount.

What You'll Need

• Android Studio: The official Integrated Development Environment (IDE) for Android app development. You can download it for free from the Android Developer website.
• Java Development Kit (JDK): Android Studio comes with its own embedded JDK, so you don't need to install it separately.
• A basic understanding of Java concepts.

First, we need to create a new project in Android Studio.

1. Open Android Studio and click on "New Project".
2. In the "Templates" window, select **"Empty Views Activity"** and click "Next".
3. Configure your project with the following details:
   • Name: `TipCalculator`
   • Package name: `com.example.tipcalculator` (you can leave this as the default)
   • Language: **Java**
   • Minimum SDK: Select a recent API level like `API 24: Android 7.0 (Nougat)`. This will ensure your app runs on most devices.
4. Click "Finish". Android Studio will take a moment to build your project structure.

Android user interfaces are built using XML. Let's design our calculator's layout.

Open the `activity_main.xml` file. In the top right corner of the editor, select the **"Split"** view to see both the code and a live visual preview.

Replace the entire contents of the file with the following XML code:

<?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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/editTextBillAmount"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="Enter Bill Amount"
        android:inputType="numberDecimal"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/buttonCalculate"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Calculate 15% Tip"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toBottomOf="@id/editTextBillAmount"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <TextView
        android:id="@+id/textViewResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tip and Total will be shown here."
        android:textSize="18sp"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@id/buttonCalculate"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Now that our UI is designed, we need to get references to these components (called "Views") in our `MainActivity.java` file so we can interact with them.

Open `MainActivity.java` and modify it to look like this:

package com.example.tipcalculator;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // 1. Declare the UI components as member variables
    EditText editTextBillAmount;
    Button buttonCalculate;
    TextView textViewResult;

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

        // 2. Initialize the components by finding them in the layout
        editTextBillAmount = findViewById(R.id.editTextBillAmount);
        buttonCalculate = findViewById(R.id.buttonCalculate);
        textViewResult = findViewById(R.id.textViewResult);
        
        // We'll add the button click listener here in the next step
    }
}

The final step is to add a click listener to our button. This code will execute when the user taps the button.

Add the following code inside the `onCreate` method, right after you initialize the components:

// 3. Set a click listener on the button
buttonCalculate.setOnClickListener(v -> {
    // This is the code that will run when the button is clicked
    String billAmountStr = editTextBillAmount.getText().toString();

    if (billAmountStr.isEmpty()) {
        textViewResult.setText("Please enter a bill amount.");
        return;
    }

    try {
        double billAmount = Double.parseDouble(billAmountStr);
        
        double tipAmount = billAmount * 0.15; // Calculate 15% tip
        double totalAmount = billAmount + tipAmount;

        // Format the output strings to two decimal places
        String resultText = String.format(
            "Tip: $%.2f\nTotal: $%.2f",
            tipAmount,
            totalAmount
        );

        textViewResult.setText(resultText);

    } catch (NumberFormatException e) {
        textViewResult.setText("Invalid number format.");
    }
});

It's time to see your app in action! You can run it on a virtual or physical device.

1. Using the Android Emulator

In Android Studio, go to `Tools > Device Manager`. If you don't have a virtual device, click "Create Device", choose a phone model (like a Pixel), and download a system image. Once it's set up, you can run your app on it.

2. Using a Physical Device

On your Android phone, enable "Developer options" and "USB debugging". Connect your phone to your computer with a USB cable. You may need to approve the connection on your phone.

Run It

Click the green "Run 'app'" button (a triangle icon) in the Android Studio toolbar. Select your emulator or physical device from the dropdown list. Android Studio will build, install, and launch the app on your selected device.