basic setup of nav bar and fab
This commit is contained in:
parent
a627a8b279
commit
6b1945539d
8 changed files with 164 additions and 78 deletions
3
DBTApp/.idea/deploymentTargetSelector.xml
generated
3
DBTApp/.idea/deploymentTargetSelector.xml
generated
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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")
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue