Tracker Overview UI

app/src/main/java/com/roshan/calorietracker/MainActivity.kt

@@ -21,6 +21,7 @@ import com.roshan.onboarding_presentation.height.HeightScreen
 import com.roshan.onboarding_presentation.nutrient_goal.NutrientGoalScreen
 import com.roshan.onboarding_presentation.weight.WeightScreen
 import com.roshan.onboarding_presentation.welcome.WelcomeScreen
+import com.roshan.tracker_presentation.tracker_overview.TrackerOverviewScreen
 import dagger.hilt.android.AndroidEntryPoint
 
 @AndroidEntryPoint
@@ -58,7 +59,7 @@ class MainActivity : ComponentActivity() {
  GoalScreen(onNavigate = navController::navigate)
  }
  composable(Route.TRACKER_OVERVIEW) {
-
+ TrackerOverviewScreen(onNavigate = navController::navigate)
  }
  composable(Route.SEARCH) {
 

core-ui/src/main/java/com/roshan/core_ui/Color.kt

@@ -0,0 +1,14 @@
+package com.roshan.core_ui
+
+import androidx.compose.ui.graphics.Color
+
+val BrightGreen = Color(0xFF00C713)
+val DarkGreen = Color(0xFF00790C)
+val Orange = Color(0xFFFFAA00)
+val CarbColor = Color(0xFFEEFF00)
+val ProteinColor = Orange
+val FatColor = Color(0xFFF44336)
+val LightGray = Color(0xFF808080)
+val MediumGray = Color(0xFF404040)
+val DarkGray = Color(0xFF202020)
+val TextWhite = Color(0xFFEEEEEE)

tracker/tracker_presentation/build.gradle.kts

@@ -4,6 +4,7 @@ apply {
 
 dependencies {
  "implementation"(project(Modules.core))
+ "implementation"(project(Modules.coreUI))
  "implementation"(project(Modules.trackerDomain))
 
  "implementation"(Coil.coilCompose)

tracker/tracker_presentation/src/main/java/com/roshan/tracker_presentation/components/UnitDisplay.kt

@@ -0,0 +1,43 @@
+package com.roshan.tracker_presentation.components
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.layout.LastBaseline
+import androidx.compose.ui.unit.TextUnit
+import androidx.compose.ui.unit.sp
+import com.roshan.core_ui.LocalSpacing
+
+@Composable
+fun UnitDisplay(
+ amount: Int,
+ unit: String,
+ modifier: Modifier = Modifier,
+ amountTextSize: TextUnit = 20.sp,
+ amountColor: Color = MaterialTheme.colors.onBackground,
+ unitTextSize: TextUnit = 14.sp,
+ unitColor: Color = MaterialTheme.colors.onBackground
+) {
+ val spacing = LocalSpacing.current
+ Row(modifier = modifier) {
+ Text(
+ text = amount.toString(),
+ style = MaterialTheme.typography.h1,
+ fontSize = amountTextSize,
+ color = amountColor,
+ modifier = Modifier.alignBy(LastBaseline)
+ )
+ Spacer(modifier = Modifier.width(spacing.spaceExtraSmall))
+ Text(
+ text = unit,
+ style = MaterialTheme.typography.body1,
+ fontSize = unitTextSize,
+ color = unitColor,
+ modifier = Modifier.alignBy(LastBaseline)
+ )
+ }
+}

tracker/tracker_presentation/src/main/java/com/roshan/tracker_presentation/tracker_overview/TrackerOverviewScreen.kt

@@ -0,0 +1,40 @@
+package com.roshan.tracker_presentation.tracker_overview
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalContext
+import androidx.hilt.navigation.compose.hiltViewModel
+import com.roshan.core.util.UiEvent
+import com.roshan.core_ui.LocalSpacing
+import com.roshan.tracker_presentation.tracker_overview.components.DaySelector
+import com.roshan.tracker_presentation.tracker_overview.components.NutrientsHeader
+
+
+@Composable
+fun TrackerOverviewScreen(
+ onNavigate: (UiEvent.Navigate) -> Unit,
+ viewModel: TrackerOverviewViewModel = hiltViewModel()
+) {
+ val spacing = LocalSpacing.current
+ val state = viewModel.state
+ val context = LocalContext.current
+ LazyColumn(
+ modifier = Modifier
+ .fillMaxSize()
+ .padding(bottom = spacing.spaceMedium)
+ ) {
+ item {
+ NutrientsHeader(state = state)
+ Spacer(modifier = Modifier.height(spacing.spaceMedium))
+ DaySelector(
+ date = state.date,
+ onPreviousDayClick = { viewModel.onEvent(TrackerOverviewEvent.OnPreviousDayClick) },
+ onNextDayClick = { viewModel.onEvent(TrackerOverviewEvent.OnNextDayClick) },
+ modifier = Modifier.fillMaxWidth()
+ )
+ Spacer(modifier = Modifier.height(spacing.spaceMedium))
+ }
+ }
+}

tracker/tracker_presentation/src/main/java/com/roshan/tracker_presentation/tracker_overview/components/DaySelector.kt

@@ -0,0 +1,48 @@
+package com.roshan.tracker_presentation.tracker_overview.components
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.material.Icon
+import androidx.compose.material.IconButton
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.ArrowBack
+import androidx.compose.material.icons.filled.ArrowForward
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import com.roshan.tracker_presentation.R
+import java.time.LocalDate
+
+@Composable
+fun DaySelector(
+ date: LocalDate,
+ onPreviousDayClick: () -> Unit,
+ onNextDayClick: () -> Unit,
+ modifier: Modifier = Modifier
+) {
+ Row(
+ modifier = modifier,
+ horizontalArrangement = Arrangement.SpaceBetween,
+ verticalAlignment = Alignment.CenterVertically
+ ) {
+ IconButton(onClick = onPreviousDayClick) {
+ Icon(
+ imageVector = Icons.Default.ArrowBack,
+ contentDescription = stringResource(id = R.string.previous_day)
+ )
+ }
+ Text(
+ text = parseDateText(date = date),
+ style = MaterialTheme.typography.h2
+ )
+ IconButton(onClick = onNextDayClick) {
+ Icon(
+ imageVector = Icons.Default.ArrowForward,
+ contentDescription = stringResource(id = R.string.next_day)
+ )
+ }
+ }
+}

tracker/tracker_presentation/src/main/java/com/roshan/tracker_presentation/tracker_overview/components/NutrientBarInfo.kt

@@ -0,0 +1,109 @@
+package com.roshan.tracker_presentation.tracker_overview.components
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.animation.core.tween
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.drawscope.Stroke
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.roshan.tracker_presentation.R
+import com.roshan.tracker_presentation.components.UnitDisplay
+
+@Composable
+fun NutrientBarInfo(
+ value: Int,
+ goal: Int,
+ name: String,
+ color: Color,
+ modifier: Modifier = Modifier,
+ strokeWidth: Dp = 8.dp,
+) {
+ val background = MaterialTheme.colors.background
+ val goalExceededColor = MaterialTheme.colors.error
+ val angleRatio = remember {
+ Animatable(0f)
+ }
+ LaunchedEffect(key1 = value) {
+ angleRatio.animateTo(
+ targetValue = if (goal > 0) {
+ value / goal.toFloat()
+ } else 0f,
+ animationSpec = tween(
+ durationMillis = 300
+ )
+ )
+ }
+ Box(
+ modifier = modifier,
+ contentAlignment = Alignment.Center
+ ) {
+ Canvas(
+ modifier = Modifier
+ .fillMaxWidth()
+ .aspectRatio(1f),
+ ) {
+ drawArc(
+ color = if (value <= goal) background else goalExceededColor,
+ startAngle = 0f,
+ sweepAngle = 360f,
+ useCenter = false,
+ size = size,
+ style = Stroke(
+ width = strokeWidth.toPx(),
+ cap = StrokeCap.Round
+ )
+ )
+ if (value <= goal) {
+ drawArc(
+ color = color,
+ startAngle = 90f,
+ sweepAngle = 360f * angleRatio.value,
+ useCenter = false,
+ size = size,
+ style = Stroke(
+ width = strokeWidth.toPx(),
+ cap = StrokeCap.Round
+ )
+ )
+ }
+ }
+ Column(
+ modifier = Modifier.fillMaxWidth(),
+ horizontalAlignment = Alignment.CenterHorizontally
+ ) {
+ UnitDisplay(
+ amount = value,
+ unit = stringResource(id = R.string.grams),
+ amountColor = if (value <= goal) {
+ MaterialTheme.colors.onPrimary
+ } else goalExceededColor,
+ unitColor = if (value <= goal) {
+ MaterialTheme.colors.onPrimary
+ } else goalExceededColor
+ )
+ Text(
+ text = name,
+ color = if (value <= goal) {
+ MaterialTheme.colors.onPrimary
+ } else goalExceededColor,
+ style = MaterialTheme.typography.body1,
+ fontWeight = FontWeight.Light
+ )
+ }
+ }
+}

tracker/tracker_presentation/src/main/java/com/roshan/tracker_presentation/tracker_overview/components/NutrientsBar.kt

@@ -0,0 +1,94 @@
+package com.roshan.tracker_presentation.tracker_overview.components
+
+import androidx.compose.animation.core.Animatable
+import androidx.compose.foundation.Canvas
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.CornerRadius
+import androidx.compose.ui.geometry.Size
+import com.roshan.core_ui.CarbColor
+import com.roshan.core_ui.FatColor
+import com.roshan.core_ui.ProteinColor
+
+
+@Composable
+fun NutrientsBar(
+ carbs: Int,
+ protein: Int,
+ fat: Int,
+ calories: Int,
+ calorieGoal: Int,
+ modifier: Modifier = Modifier
+) {
+ val background = MaterialTheme.colors.background
+ val caloriesExceedColor = MaterialTheme.colors.error
+ val carbWidthRatio = remember {
+ Animatable(0f)
+ }
+ val proteinWidthRatio = remember {
+ Animatable(0f)
+ }
+ val fatWidthRatio = remember {
+ Animatable(0f)
+ }
+ LaunchedEffect(key1 = carbs) {
+ carbWidthRatio.animateTo(
+ targetValue = ((carbs * 4f) / calorieGoal)
+ )
+ }
+ LaunchedEffect(key1 = protein) {
+ proteinWidthRatio.animateTo(
+ targetValue = ((protein * 4f) / calorieGoal)
+ )
+ }
+ LaunchedEffect(key1 = fat) {
+ fatWidthRatio.animateTo(
+ targetValue = ((fat * 9f) / calorieGoal)
+ )
+ }
+ Canvas(modifier = modifier) {
+ if(calories <= calorieGoal) {
+ val carbsWidth = carbWidthRatio.value * size.width
+ val proteinWidth = proteinWidthRatio.value * size.width
+ val fatWidth = fatWidthRatio.value * size.width
+ drawRoundRect(
+ color = background,
+ size = size,
+ cornerRadius = CornerRadius(100f)
+ )
+ drawRoundRect(
+ color = FatColor,
+ size = Size(
+ width = carbsWidth + proteinWidth + fatWidth,
+ height = size.height
+ ),
+ cornerRadius = CornerRadius(100f)
+ )
+ drawRoundRect(
+ color = ProteinColor,
+ size = Size(
+ width = carbsWidth + proteinWidth,
+ height = size.height
+ ),
+ cornerRadius = CornerRadius(100f)
+ )
+ drawRoundRect(
+ color = CarbColor,
+ size = Size(
+ width = carbsWidth,
+ height = size.height
+ ),
+ cornerRadius = CornerRadius(100f)
+ )
+ } else {
+ drawRoundRect(
+ color = caloriesExceedColor,
+ size = size,
+ cornerRadius = CornerRadius(100f)
+ )
+ }
+ }
+}