basic setup of nav bar and fab

This commit is contained in:
Clara Dautermann 2025-05-13 17:57:24 +02:00
parent a627a8b279
commit 6b1945539d
Signed by: clara
GPG key ID: 223391B52FAD4463
8 changed files with 164 additions and 78 deletions

View file

@ -8,6 +8,9 @@
<SelectionState runConfigName="BottomNavigationBar">
<option name="selectionMode" value="DROPDOWN" />
</SelectionState>
<SelectionState runConfigName="MainContent">
<option name="selectionMode" value="DROPDOWN" />
</SelectionState>
</selectionStates>
</component>
</project>

View file

@ -11,6 +11,15 @@
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/Theme.DBTApp"
tools:targetApi="31" />
tools:targetApi="31">
<activity android:name=".MainActivity" android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

View file

@ -1,17 +1,93 @@
package de.cdaut.dbtapp
import android.graphics.drawable.shapes.Shape
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Emergency
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonColors
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Shapes
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.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.activity.compose.setContent
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.google.android.material.floatingactionbutton.FloatingActionButton
import de.cdaut.dbtapp.components.BottomNavigationBar
import de.cdaut.dbtapp.navigation.Screens
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MainContent()
}
}
}
@Preview(locale = "en-US")
@Composable
private fun MainContent() {
val navController = rememberNavController()
Box {
Scaffold(
modifier = Modifier.fillMaxSize(),
bottomBar = { BottomNavigationBar(navController) },
floatingActionButton = { EmergencyButton() }
) { paddingValues ->
NavHost(
navController = navController,
startDestination = Screens.Home.route,
modifier = Modifier.padding(paddingValues = paddingValues)
) {
composable(Screens.Tracking.route) {
Text("Tracking")
}
composable(Screens.Skillslist.route) {
Text("Skillslist")
}
composable(Screens.Home.route) {
Text("Home")
}
composable(Screens.Favourites.route) {
Text("Favourites")
}
composable(Screens.Skillschains.route) {
Text("Skillschains")
}
}
}
}
}
@Preview
@Composable
private fun EmergencyButton() {
FloatingActionButton(
onClick = {},
containerColor = Color.Red
) {
Icon(
imageVector = Icons.Filled.Emergency,
contentDescription = stringResource(R.string.emergency_button_description),
)
}
}

View file

@ -1,66 +0,0 @@
package de.cdaut.dbtapp.components
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavGraph.Companion.findStartDestination
import androidx.navigation.compose.rememberNavController
import de.cdaut.dbtapp.navigation.BottomNavigationItem
@Preview
@Composable
private fun BottomNavigationBar() {
var navigationSelectedItem by remember {
mutableIntStateOf(
BottomNavigationItem().bottomNavigationItems()
.find { item -> item.label == "Home" }!!.idx
)
}
val navController = rememberNavController()
Scaffold(
modifier = Modifier.fillMaxSize(),
bottomBar = {
NavigationBar {
BottomNavigationItem().bottomNavigationItems().sortedBy { item -> item.idx }
.forEachIndexed { index, item ->
NavigationBarItem(
selected = index == navigationSelectedItem,
label = {
if (index == navigationSelectedItem) {
Text(item.label)
}
},
icon = {
Icon(
item.icon,
contentDescription = item.label
)
},
onClick = {
navigationSelectedItem = index
navController.navigate(item.route) {
popUpTo(navController.graph.findStartDestination().id)
launchSingleTop = true
restoreState = true
}
}
)
}
}
}
) { paddingVals ->
Text("Test $paddingVals")
}
}

View file

@ -0,0 +1,62 @@
package de.cdaut.dbtapp.components
import androidx.compose.material3.Icon
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.NavigationBarItem
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.platform.LocalContext
import androidx.navigation.NavController
import androidx.navigation.NavGraph.Companion.findStartDestination
import de.cdaut.dbtapp.navigation.BottomNavigationItem
@Composable
fun BottomNavigationBar(navController: NavController) {
var context = LocalContext.current
//remember the currently selected view
var navigationSelectedItem by remember {
mutableIntStateOf(
//default view is home
BottomNavigationItem().bottomNavigationItems(ctx = context)
.find { item -> item.label == "Home" }!!.idx
)
}
NavigationBar {
//Create an entry in the bottom bar for each view
BottomNavigationItem().bottomNavigationItems(ctx = context).sortedBy { item -> item.idx }
.forEachIndexed { index, item ->
NavigationBarItem(
selected = index == navigationSelectedItem,
//label is only visible iff item is selected
label = {
if (index == navigationSelectedItem) {
Text(item.label)
}
},
icon = {
Icon(
item.icon,
contentDescription = item.label
)
},
//navigate to the target view
onClick = {
navigationSelectedItem = index
navController.navigate(item.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
)
}
}
}

View file

@ -1,16 +1,16 @@
package de.cdaut.dbtapp.navigation
import android.content.res.Resources
import android.content.Context
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.MenuBook
import androidx.compose.material.icons.filled.CalendarToday
import androidx.compose.material.icons.filled.Checklist
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.MenuBook
import androidx.compose.material.icons.outlined.Star
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
import androidx.core.content.ContextCompat.getString
import de.cdaut.dbtapp.R
import de.cdaut.dbtapp.navigation.BottomNavigationItem
data class BottomNavigationItem(
val label: String = "",
@ -18,34 +18,34 @@ data class BottomNavigationItem(
val route: String = "",
val idx: Int = 0
) {
fun bottomNavigationItems(): List<BottomNavigationItem> {
fun bottomNavigationItems(ctx: Context): List<BottomNavigationItem> {
return listOf(
BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_tracking),
label = getString(ctx, R.string.label_tracking),
icon = Icons.Filled.CalendarToday,
route = Screens.Tracking.route,
idx = 0
),
BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_skillslist),
label = getString(ctx, R.string.label_skillslist),
icon = Icons.AutoMirrored.Filled.MenuBook,
route = Screens.Skillslist.route,
idx = 1
),
BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_home),
label = getString(ctx, R.string.label_home),
icon = Icons.Filled.Home,
route = Screens.Home.route,
idx = 2
),
BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_favourites),
label = getString(ctx, R.string.label_favourites),
icon = Icons.Outlined.Star,
route = Screens.Favourites.route,
idx = 3
),
BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_skillschains),
label = getString(ctx, R.string.label_skillschains),
icon = Icons.Filled.Checklist,
route = Screens.Skillschains.route,
idx = 4

View file

@ -6,4 +6,5 @@
<string name="label_tracking">Tracking</string>
<string name="label_favourites">Favoriten</string>
<string name="label_skillschains">Skillsketten</string>
<string name="emergency_button_description">Notfallknopf</string>
</resources>

View file

@ -5,4 +5,5 @@
<string name="label_tracking">Tracking</string>
<string name="label_favourites">Favourites</string>
<string name="label_skillschains">Skills Chains</string>
<string name="emergency_button_description">Emergency Button</string>
</resources>