APP development

 

Setup Instructions

1. Open Android Studio and create a "New Project" -> Empty Compose Activity.
   

   
   
   

1. Create the Expense.kt File

In the Android view, right-click on com.example.dhanmulam (or your specific package name), select New > Kotlin Class/File, name it Expense, and paste this code:

Kotlin

package com.example.dhanmulam

data class User(
    val id: String,
    val name: String
)

enum class SplitType {
    EQUAL, PERCENTAGE, EXACT
}

data class Expense(
    val id: String = java.util.UUID.randomUUID().toString(),
    val description: String,
    val totalAmount: Double,
    val paidBy: User,
    val participants: List<User>,
    val splitType: SplitType = SplitType.EQUAL
)

---

2. Create the ExpenseViewModel.kt File

The ViewModel is like the "brain" of your screen. It holds the data even if you rotate your phone. Right-click the same package, select New > Kotlin Class/File, name it ExpenseViewModel, and paste this:

Kotlin

package com.example.dhanmulam

import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow

class ExpenseViewModel : ViewModel() {
    // This holds the list of expenses in memory
    private val _expenses = MutableStateFlow<List<Expense>>(emptyList())
    val expenses: StateFlow<List<Expense>> = _expenses

    fun addExpense(description: String, amount: Double) {
        val currentUser = User("1", "You")
        val newExpense = Expense(
            description = description,
            totalAmount = amount,
            paidBy = currentUser,
            participants = listOf(currentUser) // Default to just you for now
        )
        _expenses.value = _expenses.value + newExpense
    }
}

---

3. Update MainActivity.kt

Now, let's connect these files to your screen. Open MainActivity.kt and replace the code inside the setContent block with this:

Kotlin

package com.example.dhanmulam

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                Surface(color = MaterialTheme.colorScheme.background) {
                    DhanMulamApp()
                }
            }
        }
    }
}

@Composable
fun DhanMulamApp(viewModel: ExpenseViewModel = viewModel()) {
    var desc by remember { mutableStateOf("") }
    var amount by remember { mutableStateOf("") }
    val expenseList by viewModel.expenses.collectAsState()

    Column(modifier = Modifier.padding(16.dp)) {
        Text("DhanMulam - Bill Splitter", style = MaterialTheme.typography.headlineMedium)
        
        Spacer(modifier = Modifier.height(16.dp))

        OutlinedTextField(
            value = desc,
            onValueChange = { desc = it },
            label = { Text("Expense Name (e.g. Dinner)") },
            modifier = Modifier.fillMaxWidth()
        )

        OutlinedTextField(
            value = amount,
            onValueChange = { amount = it },
            label = { Text("Amount") },
            modifier = Modifier.fillMaxWidth()
        )

        Button(
            onClick = {
                if (desc.isNotEmpty() && amount.isNotEmpty()) {
                    viewModel.addExpense(desc, amount.toDoubleOrNull() ?: 0.0)
                    desc = ""
                    amount = ""
                }
            },
            modifier = Modifier.fillMaxWidth().padding(top = 8.dp)
        ) {
            Text("Add Expense")
        }

        Spacer(modifier = Modifier.height(24.dp))

        // History List
        LazyColumn {
            items(expenseList) { expense ->
                Card(modifier = Modifier.fillMaxWidth().padding(vertical = 4.dp)) {
                    Row(modifier = Modifier.padding(16.dp), horizontalArrangement = Arrangement.SpaceBetween) {
                        Text(expense.description)
                        Text("₹${expense.totalAmount}")
                    }
                }
            }
        }
    }
}

---

Next Step

Once you paste this, click the Run (Green Play Button) in Android Studio. You should be able to type an expense name and an amount, and see it appear in a list below!