diff --git a/app/build.gradle.kts b/app/build.gradle.kts index 5ef8882b..6e0720ed 100644 --- a/app/build.gradle.kts +++ b/app/build.gradle.kts @@ -202,6 +202,8 @@ dependencies { implementation(composeBom) androidTestImplementation(composeBom) implementation("androidx.compose.material3:material3") + implementation("androidx.compose.material:material:1.7.6") + implementation("com.google.android.material:material:1.12.0") implementation("androidx.compose.ui:ui-tooling-preview") debugImplementation("androidx.compose.ui:ui-tooling") androidTestImplementation("androidx.compose.ui:ui-test-junit4") diff --git a/app/src/main/java/be/scri/App.kt b/app/src/main/java/be/scri/App.kt index b4744e80..92bf0e4e 100644 --- a/app/src/main/java/be/scri/App.kt +++ b/app/src/main/java/be/scri/App.kt @@ -87,7 +87,6 @@ fun ScribeApp( pagerState = pagerState, modifier = Modifier - .background(color = colorResource(R.color.background_color)), ) }, modifier = modifier.fillMaxSize(), diff --git a/app/src/main/java/be/scri/activities/MainActivity.kt b/app/src/main/java/be/scri/activities/MainActivity.kt index ffbe0398..95536ca8 100644 --- a/app/src/main/java/be/scri/activities/MainActivity.kt +++ b/app/src/main/java/be/scri/activities/MainActivity.kt @@ -24,10 +24,12 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.appcompat.app.AppCompatDelegate +import androidx.compose.foundation.layout.navigationBarsPadding import androidx.compose.foundation.pager.rememberPagerState import androidx.compose.runtime.mutableStateMapOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.navigation.compose.rememberNavController import be.scri.ScribeApp @@ -97,6 +99,7 @@ class MainActivity : ComponentActivity() { }, context = context, navController = navController, + modifier = Modifier.navigationBarsPadding() ) } } diff --git a/app/src/main/java/be/scri/ui/common/ScribeBaseScreen.kt b/app/src/main/java/be/scri/ui/common/ScribeBaseScreen.kt index 39870904..a78b829b 100644 --- a/app/src/main/java/be/scri/ui/common/ScribeBaseScreen.kt +++ b/app/src/main/java/be/scri/ui/common/ScribeBaseScreen.kt @@ -24,7 +24,8 @@ fun ScribeBaseScreen( Scaffold( modifier = modifier - .fillMaxSize(), + .fillMaxSize() + .padding(top = 8.dp), containerColor = MaterialTheme.colorScheme.background, ) { Column( diff --git a/app/src/main/java/be/scri/ui/common/bottombar/BottomBarItem.kt b/app/src/main/java/be/scri/ui/common/bottombar/BottomBarItem.kt deleted file mode 100644 index 67f778f2..00000000 --- a/app/src/main/java/be/scri/ui/common/bottombar/BottomBarItem.kt +++ /dev/null @@ -1,83 +0,0 @@ -package be.scri.ui.common.bottombar - -import androidx.annotation.DrawableRes -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.size -import androidx.compose.material3.Icon -import androidx.compose.material3.IconButton -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.Text -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.unit.dp -import androidx.compose.ui.unit.sp - -@Suppress("MagicNumber") -@Composable -fun BottomBarItem( - @DrawableRes icon: Int, - title: String, - isSelected: Boolean, - onItemClick: () -> Unit, - modifier: Modifier = Modifier, -) { - val color = - if (isSelected) { - MaterialTheme.colorScheme.secondary - } else { - MaterialTheme.colorScheme.onSurface - } - - val iconSize = - if (isSelected) { - 26.dp - } else { - 24.dp - } - - val textSize = - if (isSelected) { - 13.sp - } else { - 12.sp - } - Column( - modifier = modifier, - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.spacedBy((-10).dp), - ) { - IconButton( - onClick = { - onItemClick() - }, - ) { - Icon( - painter = - painterResource( - id = icon, - ), - tint = color, - contentDescription = "Keyboard", - modifier = - Modifier - .clip(MaterialTheme.shapes.medium) - .size(iconSize), - ) - } - Text( - text = title, - color = color, - style = - MaterialTheme.typography.labelMedium.copy( - fontSize = textSize, - fontWeight = if (isSelected) FontWeight.ExtraBold else FontWeight.W600, - letterSpacing = (0).sp, - ), - ) - } -} diff --git a/app/src/main/java/be/scri/ui/common/bottombar/ScribeBottomBar.kt b/app/src/main/java/be/scri/ui/common/bottombar/ScribeBottomBar.kt index 9367ad9c..0df1fd48 100644 --- a/app/src/main/java/be/scri/ui/common/bottombar/ScribeBottomBar.kt +++ b/app/src/main/java/be/scri/ui/common/bottombar/ScribeBottomBar.kt @@ -1,16 +1,37 @@ package be.scri.ui.common.bottombar +import android.util.Log +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.asPaddingValues +import androidx.compose.foundation.layout.consumeWindowInsets import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.navigationBars import androidx.compose.foundation.layout.offset import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.pager.PagerState +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material.BottomNavigation +import androidx.compose.material.BottomNavigationItem +import androidx.compose.material.Icon import androidx.compose.material3.BottomAppBar import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.NavigationBar +import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.google.android.material.bottomnavigation.BottomNavigationItemView @Composable fun ScribeBottomBar( @@ -18,42 +39,71 @@ fun ScribeBottomBar( pagerState: PagerState, modifier: Modifier = Modifier, ) { - Column(modifier = modifier) { - BottomAppBar( - containerColor = MaterialTheme.colorScheme.surface, - modifier = - Modifier - .fillMaxWidth() - .height(57.dp), + Column ( + modifier = modifier + ) { + BottomNavigation( + backgroundColor = MaterialTheme.colorScheme.surface, + modifier = Modifier ) { bottomBarScreens.forEachIndexed { index, item -> - BottomBarItem( - icon = item.icon, - title = item.label, - isSelected = pagerState.currentPage == index, - onItemClick = { - onItemClick(index) + val isSelected = pagerState.currentPage == index + + val iconSize = + if (isSelected) { + 26.dp + } else { + 24.dp + } + + val textSize = + if (isSelected) { + 13.sp + } else { + 12.sp + } + + val color = + if (isSelected) { + MaterialTheme.colorScheme.secondary + } else { + MaterialTheme.colorScheme.onSurface + } + + BottomNavigationItem( + selected = pagerState.currentPage == index, + onClick = { onItemClick(index) }, + icon = { + androidx.compose.material3.Icon( + painter = + painterResource( + id = item.icon, + ), + tint = color, + contentDescription = "Keyboard", + modifier = + Modifier + .clip(MaterialTheme.shapes.medium) + .size(iconSize), + ) }, - modifier = - Modifier - .weight(1f) - .padding( - start = 16.dp, - end = 16.dp, - ).offset( - y = (-8).dp, + label = { + Text( + text = item.label, + style = + MaterialTheme.typography.labelMedium.copy( + fontSize = textSize, + fontWeight = if (isSelected) FontWeight.ExtraBold else FontWeight.W600, + letterSpacing = (0).sp, + color = color ), + ) + }, + alwaysShowLabel = true, + selectedContentColor = MaterialTheme.colorScheme.secondary, + unselectedContentColor = MaterialTheme.colorScheme.onSurface ) } } } - -// LaunchedEffect(pagerState.currentPage) { -// val route = bottomBarScreens[pagerState.currentPage].route -// navController.navigate("$route/page") { -// // popUpTo(Screen.Installation.route) { saveState = true } -// launchSingleTop = true -// restoreState = true -// } -// } }