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"> <SelectionState runConfigName="BottomNavigationBar">
<option name="selectionMode" value="DROPDOWN" /> <option name="selectionMode" value="DROPDOWN" />
</SelectionState> </SelectionState>
<SelectionState runConfigName="MainContent">
<option name="selectionMode" value="DROPDOWN" />
</SelectionState>
</selectionStates> </selectionStates>
</component> </component>
</project> </project>

View file

@ -11,6 +11,15 @@
android:roundIcon="@mipmap/ic_launcher_round" android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true" android:supportsRtl="true"
android:theme="@style/Theme.DBTApp" 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> </manifest>

View file

@ -1,17 +1,93 @@
package de.cdaut.dbtapp package de.cdaut.dbtapp
import android.graphics.drawable.shapes.Shape
import android.os.Bundle import android.os.Bundle
import androidx.activity.ComponentActivity 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.material3.Text
import androidx.compose.runtime.Composable 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.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() { class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) { override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) super.onCreate(savedInstanceState)
setContent { 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 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.Icons
import androidx.compose.material.icons.automirrored.filled.MenuBook import androidx.compose.material.icons.automirrored.filled.MenuBook
import androidx.compose.material.icons.filled.CalendarToday import androidx.compose.material.icons.filled.CalendarToday
import androidx.compose.material.icons.filled.Checklist import androidx.compose.material.icons.filled.Checklist
import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.MenuBook
import androidx.compose.material.icons.outlined.Star import androidx.compose.material.icons.outlined.Star
import androidx.compose.ui.graphics.vector.ImageVector 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.R
import de.cdaut.dbtapp.navigation.BottomNavigationItem
data class BottomNavigationItem( data class BottomNavigationItem(
val label: String = "", val label: String = "",
@ -18,34 +18,34 @@ data class BottomNavigationItem(
val route: String = "", val route: String = "",
val idx: Int = 0 val idx: Int = 0
) { ) {
fun bottomNavigationItems(): List<BottomNavigationItem> { fun bottomNavigationItems(ctx: Context): List<BottomNavigationItem> {
return listOf( return listOf(
BottomNavigationItem( BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_tracking), label = getString(ctx, R.string.label_tracking),
icon = Icons.Filled.CalendarToday, icon = Icons.Filled.CalendarToday,
route = Screens.Tracking.route, route = Screens.Tracking.route,
idx = 0 idx = 0
), ),
BottomNavigationItem( BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_skillslist), label = getString(ctx, R.string.label_skillslist),
icon = Icons.AutoMirrored.Filled.MenuBook, icon = Icons.AutoMirrored.Filled.MenuBook,
route = Screens.Skillslist.route, route = Screens.Skillslist.route,
idx = 1 idx = 1
), ),
BottomNavigationItem( BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_home), label = getString(ctx, R.string.label_home),
icon = Icons.Filled.Home, icon = Icons.Filled.Home,
route = Screens.Home.route, route = Screens.Home.route,
idx = 2 idx = 2
), ),
BottomNavigationItem( BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_favourites), label = getString(ctx, R.string.label_favourites),
icon = Icons.Outlined.Star, icon = Icons.Outlined.Star,
route = Screens.Favourites.route, route = Screens.Favourites.route,
idx = 3 idx = 3
), ),
BottomNavigationItem( BottomNavigationItem(
label = Resources.getSystem().getString(R.string.label_skillschains), label = getString(ctx, R.string.label_skillschains),
icon = Icons.Filled.Checklist, icon = Icons.Filled.Checklist,
route = Screens.Skillschains.route, route = Screens.Skillschains.route,
idx = 4 idx = 4

View file

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

View file

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