A2: Shopping List

Keeping track of expenses!

As this is a smaller-scope assignment, there is no release code. Simply start from an empty Compose activity / new project.

For our second (and first graded) assignment, we'll be making a simple app to keep track of some expenses!

We'll need to leverage states and make some components to, in the end, use a LazyColumn to show our expenses in the following UI:

(An @Preview of) the final product!

Requirements:

(expand each file below to see your requirements!)

ExpenseRow.kt (3pt)

We'll start off by making a very simple UI for an expense row in our app!

In general, try to match this UI:

1. The expense row should have a title section for the expense title.

2. Below, the expense row should have a time section for the date/time the expense occurred.

3. To the far right, the expense row should have the expense.

   1. This text must be bold.

   2. If the amount is positive, it should be green. Otherwise, red.

Hints:

• Although not required, we highly recommend making a @Preview function in this file so you can see your expense row as you are developing!

• If you are unsure of how to specifically match this UI, look at Modifiers and the input arguments to components like Text , Row, and Column.

• Use the following logical code to convert a amountnumber (Float) to a nice 2-digit-formatted string:

    // Format 2 digits after the decimal
    val formatted = "%.2f".format(abs(amount))
    val amountString = if (amount < 0) {
        "-$$formatted"
    } else {
        "+$$formatted"
    }
    // use amountString...

ExpenseHeader.kt (4pt)

In this file, you'll make the app's top header which relies on user input to allow the user to input new expenses into the app.

In general, try to match this UI:

1. Add a TextField that takes in the name of the expense, allowing the user to type with any characters.

   1. The placeholder of this should read "Expense Name"

2. Add a TextFieldthat takes in the cost of the expense.

   1. The placeholder of this should read something similar to the above.

3. Add a Button that, when pressed, fires an onClick or similar function passed into the component to tell the parent component that a new entry was submitted with the corresponding Stringname and Float amount.

   1. When you call the onClick, you should also afterwards clear the input of both text fields.

   2. It's okay if your code only works if the user has actually typed in a valid amount.

4. Add a nice title text to the top of it all!

Hints:

• If you make an @Preview to test out your component, you can actually RUN the preview and test typing into your component to see if it works! Just hit this button:

Then, you can type into the text fields and even hit submit! (You won't see an OS keyboard; just type in with your computer keyboard. Make sure then to only type numbers into the other text field.)

MainScreen.kt (5pt)

iIn this file, you'll assemble everything together to make the app's screen!

1. Make a new file called MainScreen.kt with a corresponding @Composable.

2. Arrange the UI with a LazyColumn so that the header is on top, and several expense rows render underneath.

3. Whenever the user enters a new expense and clicks "Create", a new expense row should appear in the LazyColumn.

   1. This expense should have the same title, expense, and (some form) of representing the (system) time at which the expense was created.

Hints:

• You'll need a state to represent the list of expenses. When you update this state, the lazy column will auto-render new rows (Recomposition Lifecycle!)

• Use callback functions from the ExpenseHeader that will fire whenever the user enters/submits a new expense.

• For the system time, feel free to ask ChatGPT conceptual questions as to how to get the system time and convert it into a date-time readable format! Here's one possible way to do that:

// Get the current time as a number.
val currentTimeMillis = System.currentTimeMillis()

// Format it into a readable string.
val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")
    .withZone(ZoneId.systemDefault())
val formattedTime = formatter.format(Instant.ofEpochMilli(currentTimeMillis))

• You'll probably want to make some data classthat represents an Entry. This data class would be called something like Expense and could have fields such as title, dateTime, and cost.

  • Then you can make a State that is a list of these expenses!

Make sure to also change the proper things in MainActivity.kt to actually get your screen to show when you run your emulator! Once finished, your app should look something like this:

11MB

a2-soln-demo.webm

Solution Demo Video!

When you're done, export your project through Android Studio and upload your ZIP to CMS! Congrats on finishing A2!

Exporting with File -> Export -> Export to Zip File...