Open In App

How to Build a Simple Bill Splitter App in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

Many payment applications such as Paytm, PhonePe, and others provide the functionality to split the bills among a number of people to divide it equally. This is a very useful feature that helps users to split the bills amongst each other. In this article, we will take a look at How to create a simple Bill Splitter app in Android. A sample video is given below to get an idea about what we are going to do in this article.

Note: This Android article covered in both Java and Kotlin languages. 

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Working with the activity_main.xml file

Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail. 

XML




<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!--edit text to enter amount-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/idTILAmount"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:hint="Enter total amount to split"
        android:padding="5dp"
        android:textColorHint="@color/black"
        app:hintTextColor="@color/black">
 
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/idEdtAMount"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ems="10"
            android:importantForAutofill="no"
            android:inputType="phone"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:textSize="14sp" />
    </com.google.android.material.textfield.TextInputLayout>
 
    <!--edit text to enter number of person to split amount-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/idTILPerson"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:hint="Enter number of people to split"
        android:padding="5dp"
        android:textColorHint="@color/black"
        app:hintTextColor="@color/black">
 
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/idEdtPeople"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ems="10"
            android:importantForAutofill="no"
            android:inputType="phone"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:textSize="14sp" />
    </com.google.android.material.textfield.TextInputLayout>
 
    <!--edit text to enter tip amount-->
    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/idTILTip"
        style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:hint="Enter tip amount"
        android:padding="5dp"
        android:textColorHint="@color/black"
        app:hintTextColor="@color/black">
 
        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/idEdtTip"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:ems="10"
            android:importantForAutofill="no"
            android:inputType="phone"
            android:textColor="@color/black"
            android:textColorHint="@color/black"
            android:textSize="14sp" />
    </com.google.android.material.textfield.TextInputLayout>
 
    <!--button to get the amount for individual-->
    <Button
        android:id="@+id/idBtnGetAmount"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="10dp"
        android:padding="15dp"
        android:text="Get Amount"
        android:textAllCaps="false"
        android:textStyle="bold" />
 
    <!--button to reset -->
    <Button
        android:id="@+id/idBtnReset"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="20dp"
        android:padding="15dp"
        android:text="Reset"
        android:textAllCaps="false"
        android:textStyle="bold" />
 
    <!-- text view to display amount for individual-->
    <TextView
        android:id="@+id/idTVIndividualAmount"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="20dp"
        android:padding="5dp"
        android:text="Individual Amount : "
        android:textAlignment="center"
        android:textAllCaps="false"
        android:textColor="@color/black"
        android:textSize="18sp"
        android:textStyle="bold" />
 
</LinearLayout>


Step 3: Working with the MainActivity file 

Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail. 

Kotlin




package com.gtappdevelopers.draganddrop
 
import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.textfield.TextInputEditText
 
class MainActivity : AppCompatActivity() {
 
    // creating variables for edit text, button and text views.
    lateinit var amountEdt: TextInputEditText
    lateinit var peopleEdt: TextInputEditText
    lateinit var tipEdt: TextInputEditText
    lateinit var amtBtn: Button
    lateinit var resetBtn: Button
    lateinit var amtTV: TextView
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // initializing variables with ids.
        amountEdt = findViewById(R.id.idEdtAMount)
        peopleEdt = findViewById(R.id.idEdtPeople)
        tipEdt = findViewById(R.id.idEdtTip)
        amtBtn = findViewById(R.id.idBtnGetAmount)
        resetBtn = findViewById(R.id.idBtnReset)
        amtTV = findViewById(R.id.idTVIndividualAmount)
 
        // adding click listener for amount button.
        amtBtn.setOnClickListener {
            // validating if edit text is not empty
            if (amountEdt.text.toString() != null && peopleEdt.text.toString() != null && tipEdt.text.toString() != null) {
                // adding number from amount and tip
                // and dividing it by number of people.
                val individualAmt: Int =
                    (Integer.parseInt(amountEdt.text.toString()) + Integer.parseInt(tipEdt.text.toString())) / Integer.parseInt(
                        peopleEdt.text.toString()
                    )
                // setting amount to text view.
                amtTV.text = "Individual Amount : \n" + individualAmt.toString()
            }
        }
 
        // adding click listener for reset button.
        resetBtn.setOnClickListener {
            // setting empty text for edit text.
            amountEdt.setText("")
            peopleEdt.setText("")
            tipEdt.setText("")
            amtTV.text = ""
        }
    }
}


Java




package com.gtappdevelopers.textencryptionjava;
 
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.textfield.TextInputEditText;
 
public class MainActivity extends AppCompatActivity {
    private TextInputEditText amountEdt, peopleEdt, tipEdt;
    private TextView amtTV;
    private Button resetBtn, amtBtn;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initializing variables with ids.
        amountEdt = findViewById(R.id.idEdtAMount);
        peopleEdt = findViewById(R.id.idEdtPeople);
        tipEdt = findViewById(R.id.idEdtTip);
        amtBtn = findViewById(R.id.idBtnGetAmount);
        resetBtn = findViewById(R.id.idBtnReset);
        amtTV = findViewById(R.id.idTVIndividualAmount);
 
        // adding click listener for amount button.
        amtBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // validating if edit text is not empty
                if (amountEdt.getText().toString() != null && peopleEdt.getText().toString() != null && tipEdt.getText().toString() != null) {
                    // adding number from amount and tip
                    // and dividing it by number of people.
                    Integer individualAmt =
                            (Integer.parseInt(amountEdt.getText().toString()) + Integer.parseInt(tipEdt.getText().toString())) / Integer.parseInt(
                                    peopleEdt.getText().toString()
                            );
                    // setting amount to text view.
                    amtTV.setText("Individual Amount : \n" + individualAmt.toString());
                }
            }
        });
 
        // adding click listener for reset button.
        resetBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // setting empty text for edit text.
                amountEdt.setText("");
                peopleEdt.setText("");
                tipEdt.setText("");
                amtTV.setText("");
            }
        });
    }
}


Now run your application to see the output of it.

Output:



Last Updated : 01 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads