How to Build a Simple Bill Splitter App in Android?
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: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" 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: