finance-app-ui

This project is a test mock application with an internal UI library for a Finance App. It provides various UI Composables that can be used to build the user interface of a finance-related application. The library includes the following sections:

• Asset Performance Card: A Composable to display the status of an Asset of your wallet
• Pie Row View: A Composable for displaying two different categories of budgets with a pie chart and current amount.
• Plain Pie: A standalone Composable for displaying the state of a budget with a pie chart.
• Crypto Card: A Composable for displaying the current state of a cryptocurrency.

Feel free to explore each section for more details and examples on how to use the UI Composables in your project.

Asset Performance Card

Design by Roman Lieliushkin

The FinanceUI Asset Card Composable is a reusable component for displaying information about a specific asset or stock in a finance application. It includes visual representations of the asset's performance, such as a performance chart, as well as the asset's current value and total value.

Usage

To use is simply bring the AssetPerformanceCard composable into your project and pass in the required parameters. The AssetCard composable requires an AssetCardData object to be passed in. The AssetCardData class has the following properties:

data class AssetInfo(
    val iconDrawable: Int,
    val name: String,
    val tickerName: String,
    val lastDayChange: List<Float>,
    val currentValue: Float,
    val total: Float,
)

Checkout the AssetCardDemoScreen for an example of how to use the AssetCard composable.

Pie Row View

Hey there, ready to slice some pie? The Pie Row View Composable is designed to display two different categories of budgets with three key values:

• Label: Describes the category
• Pie Chart: Represents the current status visually
• Current Amount: Displays the current amount of money for that category

To initialize the Pie Row View, you need to create two FinancePieData objects and pass them as a Pair to the Composable. The FinancePieData class has the following properties:

data class FinancePieData(
    val label: String,
    val currentValue: Float,
    val fullValue: Float,
    val keyColor: Color
)

Here's an example of how to use it:

val servicesBudget = FinancePieData("Services", 51.01f, 300f, Green)
val transportBudget = FinancePieData("Transport", 30.50f, 500f, Red)

val pieDataPair = Pair(servicesBudget, transportBudget)

FinancePieRowView(pieDataPair)

For more usage examples, refer to the FinancePieRowDemoScreen file in this repository.

Plain Pie

Why settle for a plain pie when you can have a scrumptious Plain Pie? The Plain Pie is one of the parts of the Pie Row View. It's used to display the state of the budget and can be used as a standalone Composable.

Here's an example of initialization:

PlainPie(
    keyColor = Pine,
    currentValue = 2.0f,
    fullValue = 13.0f,
    pieSize = 150.dp,
    strokeSize = 40.0f
)

To find out some usage examples, refer to the PlainPieDemoScreen.

Crypto Card

Design by Roman Lieliushkin

Are you ready to dive into the world of crypto? The Crypto Card is a Composable that displays the current state of a cryptocurrency.

To initialize it, a CryptoCardData class needs to be passed into it. The class has the following properties:

data class CryptoCardData(
    val name: String,
    val value: Float,
    val valueChange: Int,
    val currentTotal: Long,
    val icon: Int
)

On top of this, it supports Light and Dark styling. This needs to be passed as a parameter into the Composable in the style parameter.

Here's an example of initialization:

CryptoCard(
    style = CryptoCardStyle.Dark,
    data = CryptoWalletCoinCardData(
        name = "Bitcoin",
        icon = R.drawable.ic_btc,
        value = 3.689087f,
        valueChange = -18,
        currentTotal = 98160
    )
)

To find out some usage examples, refer to the CryptoCardDemoScreen.