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 version = "1.0" encoding = "utf-8" ?>
< LinearLayout
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.
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 = ""
}
}
} |
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: