Pre-requisites:
- Android App Development Fundamentals for Beginners
- Guide to Install and Set up Android Studio
- How to Create/Start a New Project in Android Studio?
- Running your first Android app
- RecyclerView in Android with Example
- Shared Preferences in Android with Example
A simple expense calculator lets you add income and expenditures in a simplified manner. This is a glimpse of the application we are going to build. The application contains a single Activity with a RecyclerView, two EditTexts (one to enter amount and the other to enter a short note of the transaction), 1 clickable TextView to specify loss or gain, 1 clickable image to add the transaction to RecyclerView, and finally a custom ActionBar to show the balance. It includes Shared Preferences to store the data locally. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.Â
Step by Step Implementation
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.
Step 2:
Before moving to the coding section let’s add the necessary dependencies. The only dependency we have to add for the project is for Gson. It is a Java library that can be used to convert Java Objects into their JSON representation. It can also be used to convert a JSON string to an equivalent Java object. Go to app-level build.gradle file and add the following dependency and click on sync now.
implementation 'com.google.code.gson:gson:2.8.6'
Here is a reference,
Step 3:
Let’s add the necessary vector assets and drawable resource files. Go to app > res > drawable and add the following xml files.Â
ic_delete.xml (Delete Icon)
XML
    android:width="24dp"    android:height="24dp"    android:viewportWidth="24"    android:viewportHeight="24"    android:tint="?attr/colorControlNormal">  <path      android:fillColor="@android:color/white"      android:pathData="M6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM19,4h-3.5l-1,-1h-5l-1,1H5v2h14V4z"/></vector> |
Preview:
ic_send.xml (Send Icon)
XML
    android:width="24dp"    android:height="24dp"    android:viewportWidth="24"    android:viewportHeight="24"    android:tint="?attr/colorPrimarySurface"    android:autoMirrored="true">  <path      android:fillColor="@color/white"      android:pathData="M2.01,21L23,12 2.01,3 2,10l15,2 -15,2z"/></vector> |
Preview:
ic_balance.xml (Wallet Icon)
XML
<vector android:height="24dp" android:tint="#FFFFFF"Â Â Â Â android:viewportHeight="24" android:viewportWidth="24"Â Â Â Â <path android:fillColor="@android:color/white" android:pathData="M21,18v1c0,1.1 -0.9,2 -2,2L5,21c-1.11,0 -2,-0.9 -2,-2L3,5c0,-1.1 0.89,-2 2,-2h14c1.1,0 2,0.9 2,2v1h-9c-1.11,0 -2,0.9 -2,2v8c0,1.1 0.89,2 2,2h9zM12,16h10L22,8L12,8v8zM16,13.5c-0.83,0 -1.5,-0.67 -1.5,-1.5s0.67,-1.5 1.5,-1.5 1.5,0.67 1.5,1.5 -0.67,1.5 -1.5,1.5z"/></vector> |
Preview:
etbg.xml (Selector for Edit Text)
XML
<?xml version="1.0" encoding="utf-8"?>Â Â <item android:state_focused="false">Â Â Â Â Â Â <shape android:shape="rectangle">Â Â Â Â Â Â Â Â Â Â <corners android:radius="3dp"/>Â Â Â Â Â Â Â Â Â Â <stroke android:color="#DDD" android:width="2dp"/>Â Â Â Â Â Â </shape>Â Â </item>Â Â Â Â <item android:state_focused="true">Â Â Â Â Â Â Â Â <shape android:shape="rectangle">Â Â Â Â Â Â Â Â Â Â Â Â <corners android:radius="3dp"/>Â Â Â Â Â Â Â Â Â Â Â Â <stroke android:color="@color/purple_500" android:width="2dp"/>Â Â Â Â Â Â Â Â </shape>Â Â Â Â </item></selector> |
Here is a screenshot for reference.
Step 4:
Now let’s add layout resource files for the custom ActionBar and RecyclerView row layout. Go to app > res > layout and add the following xml files. Below is the code for the custom_action_bar.xml file.Â
XML
<?xml version = "1.0" encoding = "utf-8"?><LinearLayout     android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@color/purple_500"    android:gravity="center_vertical"    android:paddingStart="5dp"    android:paddingTop="10dp"    android:paddingEnd="5dp"    android:paddingBottom="10dp">      <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_marginEnd="10dp"        android:text="Expense Calculator"        android:textColor="@color/white"        android:textSize="20sp"        android:textStyle="bold" />      <ImageView        android:id="@+id/imageView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_marginStart="10dp"        android:layout_marginEnd="10dp"        app:srcCompat="@drawable/ic_balance" />      <TextView        android:id="@+id/tvBalance"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:gravity="start"        android:text="0.00"        android:textColor="@color/white"        android:textSize="20sp" />    </LinearLayout> |
Preview:
Below is the code for the transaction_row_layout.xml file. (RecyclerView Row Layout)
XML
<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardView     android:layout_width="match_parent"    android:layout_height="wrap_content"    app:cardBackgroundColor="#000000"    app:cardUseCompatPadding="true">      <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/white"        android:orientation="horizontal"        android:padding="5dp">          <LinearLayout            android:layout_width="0dp"            android:layout_height="wrap_content"            android:layout_weight="6"            android:orientation="vertical">              <TextView                android:id="@+id/tvAmount"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="Amount"                android:textColor="@color/black"                android:textSize="24sp"                android:textStyle="bold" />              <TextView                android:id="@+id/tvMessage"                android:layout_width="match_parent"                android:layout_height="wrap_content"                android:text="Message"                android:textColor="@color/black" />          </LinearLayout>          <ImageView            android:id="@+id/ivDelete"            android:layout_width="0dp"            android:layout_height="32dp"            android:layout_gravity="center"            android:layout_weight="1"            android:clickable="true"            app:srcCompat="@drawable/ic_delete"            tools:ignore="SpeakableTextPresentCheck,TouchTargetSizeCheck" />    </LinearLayout>    </androidx.cardview.widget.CardView> |
Preview:
Here is a screenshot for reference.
Step 5:
We have added the necessary resource files for the application we are building. Now, Let’s design the UI for our application. Add this xml file to app > res > layout. Below is the code for the activity_main.xml file.Â
