Building Dashboards with Jetpack Compose

In modern Android development, creating visually appealing and informative dashboards is essential for providing users with key insights at a glance. Jetpack Compose, with its declarative UI paradigm, simplifies the process of building dynamic dashboards. This post explores how to create effective dashboards using Jetpack Compose, including practical code examples.

What is a Dashboard?

A dashboard is a visual display of the most important information needed to achieve one or more objectives; consolidated and arranged on a single screen so the information can be monitored at a glance. Modern dashboards often incorporate charts, graphs, and key performance indicators (KPIs) to offer a comprehensive overview of relevant data.

Why Use Jetpack Compose for Building Dashboards?

• Declarative UI: Compose simplifies UI creation by describing the desired state rather than manually updating views.
• Reusability: Compose components are highly reusable, making it easier to create consistent dashboard elements.
• Dynamic Updates: Compose efficiently handles state changes, ensuring that dashboard data updates are smooth and responsive.
• Interoperability: Compose works seamlessly with other Jetpack libraries, such as ViewModel and LiveData, for data management.

Implementing a Dashboard with Jetpack Compose

Let’s walk through the process of creating a sample dashboard with Jetpack Compose.

Step 1: Setting Up Dependencies

Ensure you have the necessary dependencies in your build.gradle file:

dependencies {
    implementation "androidx.compose.ui:ui:1.6.0"
    implementation "androidx.compose.material:material:1.6.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.6.0"
    implementation "androidx.lifecycle:lifecycle-runtime-compose:2.6.1"
    implementation "androidx.activity:activity-compose:1.8.2"
    
    // Optional - For Charts (e.g., using Accompanist Charts)
    implementation "com.google.accompanist:accompanist-charts:0.15.0"

    testImplementation "junit:junit:4.13.2"
    androidTestImplementation "androidx.test.ext:junit:1.1.5"
    androidTestImplementation "androidx.test.espresso:espresso-core:3.5.1"
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.6.0"
    debugImplementation "androidx.compose.ui:ui-tooling:1.6.0"
    debugImplementation "androidx.compose.ui:ui-test-manifest:1.6.0"
}

Step 2: Defining Data Models

Create data models for the information displayed on the dashboard. For example:

data class SalesData(val month: String, val revenue: Double)

data class PerformanceMetric(val name: String, val value: Double, val unit: String)

Step 3: Creating Reusable Dashboard Components

Design reusable components for different sections of the dashboard, such as KPI cards, charts, and data tables.

KPI Card

A KPI card displays a key performance indicator with a value and a unit.

import androidx.compose.foundation.layout.*
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun KPICard(metric: PerformanceMetric) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
    ) {
        Column(
            modifier = Modifier
                .padding(16.dp)
                .fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = metric.name,
                style = MaterialTheme.typography.subtitle1,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(
                text = "${metric.value} ${metric.unit}",
                style = MaterialTheme.typography.h6,
                fontSize = 24.sp
            )
        }
    }
}

Bar Chart (using Accompanist Charts)

Display data in a bar chart for quick visualization (note: replace with a suitable chart library if Accompanist Charts is deprecated).

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.*
import androidx.compose.material.Card
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun BarChart(salesDataList: List) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth()
            .height(300.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp)
        ) {
            Text(
                text = "Monthly Sales",
                style = MaterialTheme.typography.subtitle1,
                fontWeight = FontWeight.Bold
            )
            Spacer(modifier = Modifier.height(8.dp))
            Chart(salesDataList = salesDataList)
        }
    }
}

@Composable
fun Chart(salesDataList: List) {
    val maxValue = salesDataList.maxOf { it.revenue }
    Canvas(modifier = Modifier.fillMaxSize()) {
        val barWidth = size.width / salesDataList.size
        val barSpacing = barWidth * 0.1f
        val chartHeight = size.height - 20.dp.toPx()
        
        salesDataList.forEachIndexed { index, salesData ->
            val barHeight = (salesData.revenue / maxValue) * chartHeight
            val startX = index * barWidth + barSpacing / 2
            val startY = size.height

            drawRect(
                color = MaterialTheme.colors.primary,
                topLeft = Offset(startX, startY - barHeight),
                size = androidx.compose.ui.geometry.Size(barWidth - barSpacing, barHeight)
            )
        }

        // Draw chart border
        drawRect(
            color = Color.Black,
            topLeft = Offset(0f, 0f),
            size = androidx.compose.ui.geometry.Size(size.width, size.height),
            style = Stroke(width = 2f) // Set the width for border thickness
        )
    }
}

Step 4: Composing the Dashboard

Assemble the individual components into a cohesive dashboard layout.

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable
fun DashboardScreen() {
    val performanceMetrics = listOf(
        PerformanceMetric("Revenue", 120000.0, "USD"),
        PerformanceMetric("Customers", 500.0, ""),
        PerformanceMetric("Conversion Rate", 5.0, "%")
    )

    val salesDataList = listOf(
        SalesData("Jan", 10000.0),
        SalesData("Feb", 12000.0),
        SalesData("Mar", 15000.0),
        SalesData("Apr", 13000.0),
        SalesData("May", 16000.0)
    )

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Business Dashboard") })
        }
    ) { paddingValues ->
        Surface(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
            color = MaterialTheme.colors.background
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text(text = "Overview", style = MaterialTheme.typography.h5)

                // KPIs
                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                    performanceMetrics.forEach { metric ->
                        KPICard(metric = metric)
                    }
                }

                // Chart
                BarChart(salesDataList = salesDataList)
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DashboardPreview() {
    MaterialTheme {
        DashboardScreen()
    }
}

Step 5: Binding Data to the UI

Use ViewModels and LiveData (or StateFlows) to observe and react to changes in your data.

import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class DashboardViewModel : ViewModel() {
    private val _performanceMetrics = MutableLiveData>()
    val performanceMetrics: LiveData> = _performanceMetrics

    private val _salesData = MutableLiveData>()
    val salesData: LiveData> = _salesData

    init {
        loadData()
    }

    private fun loadData() {
        viewModelScope.launch {
            // Simulate data loading from a repository
            delay(1000) // Simulate network delay
            
            _performanceMetrics.value = listOf(
                PerformanceMetric("Revenue", 120000.0, "USD"),
                PerformanceMetric("Customers", 500.0, ""),
                PerformanceMetric("Conversion Rate", 5.0, "%")
            )

            _salesData.value = listOf(
                SalesData("Jan", 10000.0),
                SalesData("Feb", 12000.0),
                SalesData("Mar", 15000.0),
                SalesData("Apr", 13000.0),
                SalesData("May", 16000.0)
            )
        }
    }
}

Then, connect the ViewModel to your composable function:

import androidx.compose.runtime.livedata.observeAsState
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun DashboardScreen() {
    val dashboardViewModel: DashboardViewModel = viewModel()
    val performanceMetrics by dashboardViewModel.performanceMetrics.observeAsState(initial = emptyList())
    val salesData by dashboardViewModel.salesData.observeAsState(initial = emptyList())

    Scaffold(
        topBar = {
            TopAppBar(title = { Text("Business Dashboard") })
        }
    ) { paddingValues ->
        Surface(
            modifier = Modifier
                .fillMaxSize()
                .padding(paddingValues),
            color = MaterialTheme.colors.background
        ) {
            Column(
                modifier = Modifier
                    .verticalScroll(rememberScrollState())
                    .padding(16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp)
            ) {
                Text(text = "Overview", style = MaterialTheme.typography.h5)

                // KPIs
                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
                    performanceMetrics.forEach { metric ->
                        KPICard(metric = metric)
                    }
                }

                // Chart
                BarChart(salesDataList = salesData)
            }
        }
    }
}

Best Practices for Building Dashboards

• Prioritize Key Metrics: Focus on the most important data points that users need at a glance.
• Use Visualizations Effectively: Choose appropriate chart types to represent data clearly.
• Optimize for Performance: Avoid unnecessary re-compositions and use efficient data structures.
• Accessibility: Ensure that your dashboard is accessible to users with disabilities by providing proper content descriptions and keyboard navigation.

Conclusion

Building dashboards with Jetpack Compose offers a powerful and flexible way to present critical information in a visually appealing format. By using reusable components, integrating data with ViewModels and LiveData, and adhering to best practices, you can create effective and engaging dashboards for your Android applications. As Jetpack Compose evolves, its capabilities for building complex UI elements like dashboards will only continue to improve, making it an ideal choice for modern Android development.