¿Cómo crear una aplicación de calculadora de gastos simple en Android?

Requisitos previos:

• Fundamentos de desarrollo de aplicaciones de Android para principiantes
• Guía para instalar y configurar Android Studio
• ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?
• Ejecutando tu primera aplicación de Android
• RecyclerView en Android con ejemplo
• Preferencias compartidas en Android con ejemplo

Una sencilla calculadora de gastos le permite agregar ingresos y gastos de manera simplificada. Este es un vistazo de la aplicación que vamos a construir. La aplicación contiene una sola actividad con un RecyclerView, dos EditText (uno para ingresar el monto y el otro para ingresar una nota breve de la transacción), 1 TextView en el que se puede hacer clic para especificar la pérdida o la ganancia, 1 imagen en la que se puede hacer clic para agregar la transacción a RecyclerView, y finalmente una ActionBar personalizada para mostrar el saldo. Incluye Preferencias Compartidas para almacenar los datos localmente. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2:

Antes de pasar a la sección de codificación, agreguemos las dependencias necesarias. La única dependencia que tenemos que agregar para el proyecto es para Gson . Es una biblioteca Java que se puede usar para convertir objetos Java en su representación JSON. También se puede usar para convertir una string JSON en un objeto Java equivalente. Vaya al archivo build.gradle del nivel de la aplicación , agregue la siguiente dependencia y haga clic en sincronizar ahora.

implementation 'com.google.code.gson:gson:2.8.6'

Aquí hay una referencia,

Paso 3:

Agreguemos los activos vectoriales necesarios y los archivos de recursos dibujables. Vaya a app > res > drawable y agregue los siguientes archivos xml. 

ic_delete.xml (Eliminar icono)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    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>

Avance:

ic_send.xml (Icono de envío)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    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>

Avance:

ic_balance.xml (icono de billetera)

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <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>

Avance:

etbg.xml (Selector para editar texto)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <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>

Aquí hay una captura de pantalla como referencia.

Paso 4:

Ahora agreguemos archivos de recursos de diseño para el diseño de fila personalizado de ActionBar y RecyclerView. Vaya a aplicación > res > diseño y agregue los siguientes archivos xml. barra_de_acción_personalizada .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"
    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>

Avance:

transaction_row_layout .xml (RecyclerView Row Layout)

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 
    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="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>

Avance:

Aquí hay una captura de pantalla como referencia.

Paso 5:

Hemos agregado los archivos de recursos necesarios para la aplicación que estamos construyendo. Ahora, diseñemos la interfaz de usuario para nuestra aplicación. Agregue este archivo xml a la aplicación> res> diseño. A continuación se muestra el código para el archivo  activity_main.xml .