This assignment has a release code! Please download it below, extract it, and open it in Android Studio. Ensure it can compile and run fine on your emulator before starting this assignment.
For our second assignment, we'll be making a stock-trading app competitor! Of course we won't be working with real money, but we've set up the above release code to give the semblance of trading your hard-earned cash!
Let's walk through the code, shall we?
NOTE: This is a longer assignment, so we made sure to provide lots of Hints!
Release Code:
Expand each of the files below for a description of the release code!
WalletRepository.kt
This repository manages the user's virtual wallet. It keeps track of the current balance and allows the user to deposit or withdraw money when buying or selling stocks. Additionally, it maintains a record of the stocks the user owns.
Methods you will use:
getBalance(): Gets a numeric value for the balance that you can freely use in your UI!
percentageBalanceChange(): Returns a float representing the percentage that the user's wallet has recently changed by (rise is positive, fall is negative).
buyStock(): Buys a stock.
sellStock(): Sells a stock.
YOU SHOULD NOT EDIT THIS FILE.
StockRepository.kt
This repository handles the dynamic pricing of stocks, where each stock is identified by a ticker symbol. It provides methods to retrieve the current price of a stock based on its ticker.
Behind the scenes, it randomly updates the stock prices every 3 seconds to simulate market fluctuations.
Methods you will use:
getStockPrice(): Returns the (current) stock price of the given ticker that you can use in your UI.
increaseOrDecreaseStockPrice(): Returns a boolean; if true, the specified stock has increased in price. If false, it has decreased. Can freely use in your UI.
Note: do NOT use `readStockPrice()`. The way it is implemented will not work in your UI.
YOU SHOULD NOT EDIT THIS FILE.
MainScreen.kt
MainScreen is an incomplete main screen that shows the home for our app, RobbingGood!
It consists of a place where your WalletRow and TickerRows will go!
Note: These two files violate the MVVM paradigm. They are NOT a good example for what to do for the Hack Challenge; please refer to lectures 4, 5, and 6 for MVVM practices. These files are simply a bare minimum functionality we provide for this assignment.
Requirements:
Okay, onto the assignment!
(expand each file below to see your requirements!)
WalletRow.kt
WalletRow is a component that shows the user's balance with animations. If the user's balance has recently risen, the text shows green, otherwise red, and a little animation plays to swap the text out.
In general, try to match this UI:
Display the user's wallet balance given by getBalance() as a nicely formatted ($XXX.XX), along with its percentage change (percentageBalanceChange()) to the far right, 2 decimal places max.
Whenever the balance changes, an AnimatedContent should swap out the percentage text.
If the percentage is positive, the percentage text should be a (bold) green, otherwise a (bold) red.
Once you've made this component, WalletRow should be replaced on the MainScreen, and you'll also later use it in StockDetailScreen.
Hints:
Given a percentage, you can use the following code snippet to convert it into a nicely readable string:
// Format 2 digits after the decimal
val formattedPercentage = "%.2f".format(abs(percentage * 100f))
val percentageString = if (percentage < 0) {
"(-$formattedPercentage%)"
} else {
"(+$formattedPercentage%)"
}
To achieve the space in between the left and right parts of the row, you might want to use Arrangement.SpaceBetween.
TickerRow.kt
TickerRow is a UI component that displays a quick and dirty summary of a stock's price and which allows the user to click on the row to navigate to the Stock Detail Screen (SDS).
In general, try to match this UI:
You
Similar to WalletRow, display the balance and percentage change of this stock.
Whenever the stock price changes, an AnimatedContent should swap the balance/percentage text out.
Green if rise, red if fall.
If the user taps on this row, they should navigate to the SDS, sending the ticker as a navigation argument.
Once you've made TickerRow, use it in the LazyColumn in MainScreen to show the tickers!
Hints:
You'll have to set up a NavHost! Please refer to our demo this week for tips.
(!!!) Make sure to then call your navigation code in MainActivity — it's currently just calling MainScreen().
Do NOT make the NavHost inside of MainScreen() — the nav host should exist outisde of main screen, and then have main screen as one of the routes, and SDS as another route.
Think about what the state should be for the AnimatedContent--there are multiple correct answers!
For example, you can say that the text and color is a state! Or that the price/percentage is a state, and then you calculate the text with those values inside the AnimatedContentbody. As long as it looks like it's animating right, you're good!
You can reuse snippets of code from WalletRowand A2 to achieve the money text formatting.
Use Modifier.clickable() to make any Composable clickable.
You'll likely want to thus provide an onClick: () -> Unit as an argument to TickerRow.kt.
StockDetailScreen.kt
The Stock Detail Screen is a full screen which displays the current price of the selected stock, the user's wallet, and the amount of that stock owned. It also provides the option to buy or sell instances of that stock, updating the user's wallet accordingly.
In general, try to match this UI:
The ticker that the user has selected (and given to this screen as a nav argument) should be displayed at the top of this page as the title.
In the (roughly) middle of the screen, there should be 2 large, bold texts— one for the balance, and one for the percentage.
These should animate differently from the others; The float balance and percentage here should animate to the correct balance (meaning the literal number itself animates).
These texts can just be black.
The background of the entire screen should animate to a very light green if the stock is up, or a light red if the stock is down.
You must use animateColorAsState to achieve a smooth color animation.
At the footer of the screen, you should use WalletRow to display the user's current balance.
Add a text of some sort to display how many of the current stock the user has. You may use amountStockOwned().
Add two buttons, Buy and Sell. Buying should call buyStock()and Selling should call sellStock().
Note: To navigate back to the home screen, just use the in-built navigation. If you don't see nav buttons, on android, that just means dragging and letting go from the left-hand of the screen.
Hints:
You'll have to provide the stock ticker as a navigation argument. See lecture for to how to do this!
To achieve the faded green/red color, you can leverage doubling up a background Modifier! The following code will first make the background White, then layer a faded (0.2 opacity) color on top (for some backgroundColor):
