diff options
Diffstat (limited to 'app/src/main/java')
8 files changed, 546 insertions, 185 deletions
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt index 59a91f0..76dff27 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/activities/MainActivity.kt @@ -9,6 +9,7 @@ import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import com.pwc.calculatorv2.presentation.screens.BottomNavScreen import com.pwc.calculatorv2.presentation.ui.theme.CalculatorV2Theme @@ -18,10 +19,8 @@ class MainActivity : ComponentActivity() { super.onCreate(savedInstanceState) setContent { CalculatorV2Theme { - // A surface container using the 'background' color from the theme Surface( - modifier = Modifier.fillMaxSize(), - color = MaterialTheme.colorScheme.background + modifier = Modifier.fillMaxSize() ) { BottomNavScreen() } diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt index 1f05318..2e69faa 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/BottomNavScreen.kt @@ -1,7 +1,15 @@ package com.pwc.calculatorv2.presentation.screens
+import androidx.compose.foundation.Canvas
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
@@ -18,7 +26,16 @@ import com.pwc.calculatorv2.data.viewmodels.CalculatorViewModel import com.pwc.calculatorv2.presentation.navigation.AppScreens
import com.pwc.calculatorv2.presentation.ui.widgets.BottomNav
import androidx.compose.runtime.getValue
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.Shadow
+import androidx.compose.ui.graphics.drawscope.Fill
import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
@OptIn(ExperimentalMaterial3Api::class)
@Composable
@@ -41,6 +58,55 @@ fun BottomNavScreen() { .padding(bottom = it.calculateBottomPadding()),
color = MaterialTheme.colorScheme.background
) {
+ Column (
+ modifier = Modifier.fillMaxSize()
+ ) {
+ Box (
+ modifier = Modifier
+ .weight(1f)
+ .fillMaxWidth(.5f)
+ ){
+ Canvas(
+ modifier = Modifier
+ .fillMaxSize()
+ ) {
+ val path = Path().apply {
+ moveTo(0f, 0f) // Top-left corner
+ lineTo(size.width, 0f) // Top-right corner
+ lineTo(0f, size.height) // Bottom-left corner
+ close() // Closes the path to form a triangle
+ }
+
+ drawPath(
+ path = path,
+ color = Color(0xFF222222) ,
+ style = Fill,
+ )
+ }
+ BasicTextField(value = "ACV-1",
+ onValueChange = {},
+ readOnly = true, // Makes the field non-writable
+ modifier = Modifier
+ .width(300.dp)
+ .padding(20.dp),
+ textStyle = TextStyle(
+ fontSize = 12.sp,
+ fontWeight = FontWeight.Medium,
+ color = MaterialTheme.colorScheme.secondary, // Using your theme's color for text
+ shadow = Shadow(
+ color = MaterialTheme.colorScheme.secondary.copy(alpha = 0.2f), // White glow with some transparency
+ blurRadius = 2f // Adjust the blur for the glow effect
+ )
+
+ ),
+ )
+ }
+ Spacer(
+ modifier = Modifier
+ .fillMaxWidth()
+ .weight(2f) // Spacer takes the other half of the available height
+ )
+ }
NavHost(
navController = bottomNavController,
startDestination = AppScreens.CalculatorScreen.route
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt index 5cef814..a22cc31 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/screens/CalculatorScreen.kt @@ -1,31 +1,38 @@ package com.pwc.calculatorv2.presentation.screens
import android.annotation.SuppressLint
+import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
-import androidx.compose.material3.Button
+import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
-import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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.Shadow
import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
+import com.pwc.calculatorv2.R
import com.pwc.calculatorv2.data.viewmodels.CalculatorViewModel
-import com.pwc.calculatorv2.data.viewmodels.CalculatorViewState
+import com.pwc.calculatorv2.presentation.ui.widgets.NeumorphicButton
@SuppressLint("StateFlowValueCalledInComposition")
@OptIn(ExperimentalMaterial3Api::class)
@@ -34,189 +41,227 @@ fun CalculatorScreen( viewModel: CalculatorViewModel,
) {
+ val isVisible = remember { mutableStateOf(false) }
val expression = remember { mutableStateOf("") }
Box(
modifier = Modifier
.fillMaxSize(),
- contentAlignment = Alignment.Center)
+ contentAlignment = Alignment.BottomCenter)
{
Column(
- modifier = Modifier.width(width = 300.dp),
- verticalArrangement = Arrangement.Center,
+ modifier = Modifier.width(width = 500.dp),
+ verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally
) {
- TextField(
- value = expression.value,
- onValueChange = { expression.value = it },
- modifier = Modifier.width(300.dp),
- textStyle = TextStyle(fontSize = 24.sp, textAlign = TextAlign.End)
- )
-
+ BasicTextField(value = expression.value,
+ onValueChange = {expression.value = it},
+ readOnly = true, // Makes the field non-writable
+ modifier = Modifier
+ .width(300.dp),
+ textStyle = TextStyle(
+ fontSize = 32.sp,
+ fontWeight = FontWeight.Medium,
+ color = MaterialTheme.colorScheme.onBackground, // Using your theme's color for text
+ textAlign = TextAlign.End,
+ shadow = Shadow(
+ color = Color.White.copy(alpha = 0.6f), // White glow with some transparency
+ blurRadius = 2f // Adjust the blur for the glow effect
+ )
+ ),
+ )
Column(
modifier = Modifier
.padding(16.dp)
- .width(300.dp)
+ .width(500.dp),
+
+ verticalArrangement = Arrangement.Center
) {
Row(
- modifier = Modifier
- .fillMaxWidth()
- .padding(horizontal = 0.dp),
- horizontalArrangement = Arrangement.SpaceEvenly
+ modifier = Modifier.fillMaxWidth(),
+ horizontalArrangement = Arrangement.Center
) {
- Button(
- onClick = { viewModel.calculatorViewState.value?.let { expression.value = viewModel.showLast() } },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "^", color = Color.Black)
+ NeumorphicButton(
+ text = "CE",
+ color = MaterialTheme.colorScheme.error,
+ textColor = MaterialTheme.colorScheme.onError,
+ backgroundColor = MaterialTheme.colorScheme.primary
+ ){
+ clearExpression(expression)
}
- Button(
- onClick = { appendToExpression(expression, " ( ") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "(", color = Color.Black)
+ NeumorphicButton(
+ text = "(",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ ){
+ appendToExpression(expression, " ( ")
}
- Button(
- onClick = { appendToExpression(expression, " ) ") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = ")", color = Color.Black)
+ NeumorphicButton(
+ text = ")",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ ){
+ appendToExpression(expression, " ) ")
}
- Button(
- onClick = { erase(expression) },
- modifier = Modifier.width(57.dp)
- ) {
- Text(text = "<", color = Color.Black)
+ NeumorphicButton(
+ text = "undo",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ imageDrawable = R.drawable.undo,
+ ){
+ viewModel.calculatorViewState.value?.let { expression.value = viewModel.showLast() }
+ }
+ NeumorphicButton(
+ text = "more",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ imageDrawable = R.drawable.dots,
+ isMore = true
+ ){
+ isVisible.value = !isVisible.value
+ }
+ }
+ AnimatedVisibility(visible = isVisible.value) {
+ Column {
+ Text(
+ text = "test",
+ fontWeight = FontWeight.Normal,
+ style = MaterialTheme.typography.bodyMedium, // Adjust this as needed
+ )
}
}
Row(
- modifier = Modifier.fillMaxWidth(),
- horizontalArrangement = Arrangement.SpaceEvenly
+ modifier = Modifier
+ .fillMaxWidth()
+ .padding(horizontal = 0.dp),
+ horizontalArrangement = Arrangement.Center
) {
- Button(
- onClick = { appendToExpression(expression, "7") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "7", color = Color.Black)
+ NeumorphicButton(
+ text = "erase",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ imageDrawable = R.drawable.erase
+ ){
+ erase(expression)
+ }
+ NeumorphicButton(
+ text = "*",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ ){
+ appendToExpression(expression, " * ")
}
- Button(
- onClick = { appendToExpression(expression, "8") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "8", color = Color.Black)
+ NeumorphicButton(
+ text = "+",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ ){
+ appendToExpression(expression, " + ")
}
- Button(
- onClick = { appendToExpression(expression, "9") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "9", color = Color.Black)
+ NeumorphicButton(
+ text = "-",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ ){
+ appendToExpression(expression, " - ")
}
- Button(
- onClick = { appendToExpression(expression, " + ") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "+", color = Color.Black)
+ NeumorphicButton(
+ text = "/",
+ color = MaterialTheme.colorScheme.secondary,
+ textColor = MaterialTheme.colorScheme.onSecondary,
+ ){
+ appendToExpression(expression, " / ")
}
}
Row(
modifier = Modifier.fillMaxWidth(),
- horizontalArrangement = Arrangement.SpaceEvenly
+ horizontalArrangement = Arrangement.Center
) {
- Button(
- onClick = { appendToExpression(expression, "4") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "4", color = Color.Black)
+ NeumorphicButton(
+ text = "1"
+ ){
+ appendToExpression(expression, "1")
}
- Button(
- onClick = { appendToExpression(expression, "5") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "5", color = Color.Black)
+ NeumorphicButton(
+ text = "2"
+ ){
+ appendToExpression(expression, "2")
}
- Button(
- onClick = { appendToExpression(expression, "6") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "6", color = Color.Black)
+ NeumorphicButton(
+ text = "3"
+ ){
+ appendToExpression(expression, "3")
}
- Button(
- onClick = { appendToExpression(expression, " - ") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "-", color = Color.Black)
+ NeumorphicButton(
+ text = "4"
+ ){
+ appendToExpression(expression, "4")
+ }
+ NeumorphicButton(
+ text = "5"
+ ){
+ appendToExpression(expression, "5")
}
}
Row(
modifier = Modifier.fillMaxWidth(),
- horizontalArrangement = Arrangement.SpaceEvenly
+ horizontalArrangement = Arrangement.Center
) {
- Button(
- onClick = { appendToExpression(expression, "1") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "1", color = Color.Black)
+ NeumorphicButton(
+ text = "6"
+ ){
+ appendToExpression(expression, "6")
+ }
+ NeumorphicButton(
+ text = "7"
+ ){
+ appendToExpression(expression, "7")
}
- Button(
- onClick = { appendToExpression(expression, "2") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "2", color = Color.Black)
+ NeumorphicButton(
+ text = "8"
+ ){
+ appendToExpression(expression, "8")
}
- Button(
- onClick = { appendToExpression(expression, "3") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "3", color = Color.Black)
+ NeumorphicButton(
+ text = "9"
+ ){
+ appendToExpression(expression, "9")
}
- Button(
- onClick = { appendToExpression(expression, " * ") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "*", color = Color.Black)
+ NeumorphicButton(
+ text = "0"
+ ){
+ appendToExpression(expression, "0")
}
}
-
Row(
modifier = Modifier.fillMaxWidth(),
- horizontalArrangement = Arrangement.SpaceEvenly
+ horizontalArrangement = Arrangement.Center
) {
- Button(
- onClick = { appendDotToExpression(expression) },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = ".", color = Color.Black)
- }
- Button(
- onClick = { appendToExpression(expression, "0") },
- modifier = Modifier.width(75.dp)
- ) {
- Text(text = "0", color = Color.Black)
- }
- Button(
- onClick = { viewModel.calculateResult(expression) },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "=", color = Color.Black)
- }
- Button(
- onClick = { appendToExpression(expression, " / ") },
- modifier = Modifier.width(70.dp)
- ) {
- Text(text = "/", color = Color.Black)
- }
}
- // Add more rows of buttons for other numbers and operators
- Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
- Button(
- onClick = { clearExpression(expression) },
- modifier = Modifier.width(145.dp)
- ) {
- Text(text = "Clear", color = Color.Black)
+ Row(
+ modifier = Modifier.fillMaxWidth(),
+ horizontalArrangement = Arrangement.Center
+ ) {
+ NeumorphicButton(
+ text = "=",
+ backgroundWidth = 266.dp,
+ buttonWidth = 240.dp,
+ color = MaterialTheme.colorScheme.tertiary,
+ textColor = MaterialTheme.colorScheme.onTertiary
+ ){
+ viewModel.calculateResult(expression)
+ }
+ NeumorphicButton(
+ text = ".",
+ backgroundWidth = 114.dp,
+ alignment = Alignment.CenterEnd
+ ){
+ appendDotToExpression(expression)
}
}
}
+ Spacer(modifier = Modifier.height(30.dp))
}
}
}
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt index 47ec008..c5420b4 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Color.kt @@ -2,10 +2,12 @@ package com.pwc.calculatorv2.presentation.ui.theme import androidx.compose.ui.graphics.Color -val Purple80 = Color(0xFFD0BCFF) -val PurpleGrey80 = Color(0xFFCCC2DC) -val Pink80 = Color(0xFFEFB8C8) -val Purple40 = Color(0xFF6650a4) -val PurpleGrey40 = Color(0xFF625b71) -val Pink40 = Color(0xFF7D5260)
\ No newline at end of file +val Dark = Color(0xFF1E1E1E) +val Clear = Color(0xFFEAE9E7) + +val ButtonsWhite = Color(0xFFD5D1CC) +val ButtonsGrey = Color(0xFF81807F) +val ButtonsRed = Color(0xFFD74626) +val TextWhite = Color(0xFFECEAE8) +val TextBlack = Color(0xFF181B1C) diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt index 5568c46..2655814 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Theme.kt @@ -16,15 +16,27 @@ import androidx.compose.ui.platform.LocalView import androidx.core.view.WindowCompat private val DarkColorScheme = darkColorScheme( - primary = Purple80, - secondary = PurpleGrey80, - tertiary = Pink80 + primary = ButtonsWhite, + secondary = ButtonsGrey, + tertiary = ButtonsRed, + background = Dark, + onBackground = Clear, + onSurface = Clear, + onPrimary = TextBlack, + onSecondary = TextWhite, + onTertiary = TextWhite, ) private val LightColorScheme = lightColorScheme( - primary = Purple40, - secondary = PurpleGrey40, - tertiary = Pink40 + primary = ButtonsWhite, + secondary = ButtonsGrey, + tertiary = ButtonsRed, + background = Dark, + onBackground = Clear, + onPrimary = TextBlack, + onSecondary = TextWhite, + onTertiary = TextWhite, + onSurface = Clear, /* Other default colors to override background = Color(0xFFFFFBFE), @@ -41,7 +53,7 @@ private val LightColorScheme = lightColorScheme( fun CalculatorV2Theme( darkTheme: Boolean = isSystemInDarkTheme(), // Dynamic color is available on Android 12+ - dynamicColor: Boolean = true, + dynamicColor: Boolean = false, content: @Composable () -> Unit ) { val colorScheme = when { diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt index 424eda5..a92980f 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/theme/Type.kt @@ -2,33 +2,34 @@ package com.pwc.calculatorv2.presentation.ui.theme import androidx.compose.material3.Typography import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.Font import androidx.compose.ui.text.font.FontFamily import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.sp +import com.pwc.calculatorv2.R + +val robotoFamily = FontFamily( + Font(R.font.robotoregular, FontWeight.Normal), + Font(R.font.robotomedium, FontWeight.Medium), + Font(R.font.robotobold, FontWeight.Bold) +) -// Set of Material typography styles to start with val Typography = Typography( bodyLarge = TextStyle( - fontFamily = FontFamily.Default, + fontFamily = robotoFamily, fontWeight = FontWeight.Normal, fontSize = 16.sp, lineHeight = 24.sp, letterSpacing = 0.5.sp - ) - /* Other default text styles to override - titleLarge = TextStyle( - fontFamily = FontFamily.Default, - fontWeight = FontWeight.Normal, - fontSize = 22.sp, - lineHeight = 28.sp, - letterSpacing = 0.sp ), - labelSmall = TextStyle( - fontFamily = FontFamily.Default, + bodyMedium = TextStyle( + fontFamily = robotoFamily, fontWeight = FontWeight.Medium, - fontSize = 11.sp, - lineHeight = 16.sp, - letterSpacing = 0.5.sp + fontSize = 14.sp + ), + bodySmall = TextStyle( + fontFamily = robotoFamily, + fontWeight = FontWeight.Bold, + fontSize = 12.sp ) - */ )
\ No newline at end of file diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt index 1ba2d4c..1cb79e1 100644 --- a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/BottomNav.kt @@ -1,32 +1,81 @@ package com.pwc.calculatorv2.presentation.ui.widgets
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.material.BottomNavigation
-import androidx.compose.material.Button
-import androidx.compose.material.Text
-import androidx.compose.material.TopAppBar
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+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.unit.dp
+import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.pwc.calculatorv2.presentation.navigation.AppScreens
@Composable
fun BottomNav(navController: NavController) {
BottomNavigation(
-
+ backgroundColor = MaterialTheme.colorScheme.tertiary,
) {
- Button(onClick = {
- navController.navigate(AppScreens.CalculatorScreen.route)
- }) {
- Text(text = "Calculator")
- }
- Button(onClick = {
- navController.navigate(AppScreens.FunctionListScreen.route)
- }) {
- Text(text = "History")
- }
- Button(onClick = {
- navController.navigate(AppScreens.WipeScreen.route)
- }) {
- Text(text = "Wipe")
+ Row (
+ modifier = Modifier
+ .fillMaxSize(),
+ verticalAlignment = Alignment.CenterVertically,
+ horizontalArrangement = Arrangement.SpaceEvenly
+ ){
+ Box(
+ modifier = Modifier
+ .height(40.dp)
+ .width(100.dp)
+ .clickable(
+ indication = null, // Remove the default highlight
+ interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly
+ onClick = {
+ navController.navigate(AppScreens.CalculatorScreen.route)
+ }
+ ),
+ contentAlignment = Alignment.Center
+ ) {
+ Text(
+ text = "Calculator",
+ fontSize = 16.sp,
+ color = MaterialTheme.colorScheme.onTertiary
+ )
+ }
+
+ Box(
+ modifier = Modifier
+ .height(40.dp)
+ .width(100.dp)
+ .clickable(
+ indication = null, // Remove the default highlight
+ interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly
+ onClick = {
+ navController.navigate(AppScreens.FunctionListScreen.route)
+ }
+ ),
+ contentAlignment = Alignment.Center
+ ) {
+ Text(
+ text = "Formulas",
+ fontSize = 16.sp,
+ color = MaterialTheme.colorScheme.onTertiary
+ )
+ }
}
}
}
diff --git a/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt new file mode 100644 index 0000000..f6abcb0 --- /dev/null +++ b/app/src/main/java/com/pwc/calculatorv2/presentation/ui/widgets/Button.kt @@ -0,0 +1,187 @@ +package com.pwc.calculatorv2.presentation.ui.widgets + +import android.graphics.drawable.AnimatedImageDrawable +import androidx.compose.animation.core.animateDpAsState +import androidx.compose.animation.core.animateIntAsState +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.clickable +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.LaunchedEffect +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableStateOf +import androidx.compose.runtime.remember +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.BlurredEdgeTreatment +import androidx.compose.ui.draw.blur +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.geometry.Size +import androidx.compose.ui.graphics.Brush +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.ColorFilter +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.graphics.lerp +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.IntOffset +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import kotlinx.coroutines.delay + + +@Composable +fun NeumorphicButton( + text: String, + color: Color = MaterialTheme.colorScheme.primary, + backgroundColor: Color? = null, + backgroundWidth: Dp = 76.dp, + textColor: Color = MaterialTheme.colorScheme.onPrimary, + buttonWidth: Dp = 50.dp, + buttonHeight: Dp = 50.dp, + alignment: Alignment = Alignment.Center, + fontSize: Int = 24, + isMenu: Boolean = false, + imageDrawable: Int? = null, + isMore: Boolean = false, + onClick: () -> Unit, +) { + val isPressed = remember { mutableStateOf(false) } + + val offset by animateIntAsState(targetValue = if (isPressed.value) 2 else 12) + val sizeReduction by animateIntAsState(targetValue = if (isPressed.value) 2 else 0) + val blur by animateDpAsState(targetValue = if (isPressed.value) 4.dp else 10.dp) + + LaunchedEffect(isPressed.value) { + if (isPressed.value) { + if(!isMore){ + delay(100) // Delay for 2 seconds + isPressed.value = false // Reset after delay + } + } + } + + + fun lightenOrDarkenColor(color: Color, factor: Float): Color { + return lerp(color, if (factor < 0) Color.Black else Color.White, kotlin.math.abs(factor)) + } + + val buttonShadeColor = if (color == MaterialTheme.colorScheme.error){ + color + } + else{ + lightenOrDarkenColor(color, -.1f) + } + val backgroundColorReal = backgroundColor ?: color + val clearShadeColor = lightenOrDarkenColor(backgroundColorReal, .3f) + val darkShadeColor = lightenOrDarkenColor(backgroundColorReal, -.3f) + + Box( + Modifier + .width(backgroundWidth) + .height(76.dp) + .fillMaxSize() + .padding(3.dp) + .background(backgroundColorReal, + shape = RoundedCornerShape(16.dp) // Same rounded shape for the background + ) + .clickable( + indication = null, // Remove the default highlight + interactionSource = remember { MutableInteractionSource() }, // Required for indication to work properly + onClick = { + if (isMore){ + isPressed.value = !isPressed.value + }else{ + isPressed.value = true + } + onClick() + }) + .padding( horizontal = if (isMenu) {0.dp}else{10.dp}) + , + contentAlignment = alignment, + ) { + Box( + Modifier + .width(buttonWidth - sizeReduction.dp) + .height(buttonHeight - sizeReduction.dp) + .offset { IntOffset(-offset, -offset) } + .blur(blur, edgeTreatment = BlurredEdgeTreatment.Unbounded) + .background(clearShadeColor, if (isMenu) RoundedCornerShape(12.dp) else CircleShape) + ) + + Box( + Modifier + .width(buttonWidth - sizeReduction.dp) + .height(buttonHeight - sizeReduction.dp) + .offset { IntOffset(offset, offset) } + .blur(blur, edgeTreatment = BlurredEdgeTreatment.Unbounded) + .background(darkShadeColor, if (isMenu) RoundedCornerShape(12.dp) else CircleShape) + ) + Box( + Modifier + .width(buttonWidth - sizeReduction.dp) + .height(buttonHeight - sizeReduction.dp) + .background( + brush = Brush.verticalGradient( + colors = listOf( + color, + buttonShadeColor + ) + ), + shape = if (isMenu) RoundedCornerShape(12.dp) else CircleShape, + ) + .border( + width = 1.dp, + shape = if (isMenu) RoundedCornerShape(12.dp) else CircleShape, + brush = if(buttonWidth == 50.dp) { + Brush.linearGradient( + colors = listOf( + clearShadeColor, + darkShadeColor, + ), + ) + }else { + Brush.verticalGradient( + colors = listOf( + clearShadeColor, + darkShadeColor, + ), + ) + } + ), + contentAlignment = Alignment.Center + ){ + if(imageDrawable == null){ + Text( + text = text, + fontWeight = FontWeight.Normal, + fontSize = (fontSize - sizeReduction).sp, // Ensure font doesn't shrink too much + color = textColor, + style = MaterialTheme.typography.bodyMedium, // Adjust this as needed + ) + }else{ + Image( + painter = painterResource(id = imageDrawable), + contentDescription = text, + modifier = Modifier + .height((25-sizeReduction).dp), + colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSecondary) + ) + } + } + } +} |