add fab and collapsing top app bar

This commit is contained in:
Owen LeJeune
2022-02-09 20:49:03 -05:00
parent da908df664
commit be7eca362a

View File

@@ -1,11 +1,18 @@
package com.owenlejeune.tvtime package com.owenlejeune.tvtime
import android.os.Bundle import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent import androidx.activity.compose.setContent
import androidx.compose.animation.rememberSplineBasedDecay
import androidx.compose.material.Scaffold import androidx.compose.material.Scaffold
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Search
import androidx.compose.material3.* import androidx.compose.material3.*
import androidx.compose.runtime.* import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.Preview
import androidx.navigation.NavController import androidx.navigation.NavController
@@ -35,10 +42,14 @@ class MainActivity : ComponentActivity() {
fun MyApp() { fun MyApp() {
TVTimeTheme { TVTimeTheme {
val navController = rememberNavController() val navController = rememberNavController()
val appBarTitle = remember { mutableStateOf(NavItems.Items[0].name) } val appBarTitle = remember { mutableStateOf(NavItems.Items[0].name) }
val decayAnimationSpec = rememberSplineBasedDecay<Float>()
val scrollBehavior = remember(decayAnimationSpec) {
TopAppBarDefaults.exitUntilCollapsedScrollBehavior(decayAnimationSpec)
}
Scaffold( Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
backgroundColor = MaterialTheme.colorScheme.background, backgroundColor = MaterialTheme.colorScheme.background,
bottomBar = { bottomBar = {
BottomNavBar( BottomNavBar(
@@ -47,7 +58,13 @@ fun MyApp() {
) )
}, },
topBar = { topBar = {
TopBar(title = appBarTitle) TopBar(
title = appBarTitle,
scrollBehavior = scrollBehavior
)
},
floatingActionButton = {
SearchFab()
} }
) { ) {
NavigationRoutes(navController = navController) NavigationRoutes(navController = navController)
@@ -57,9 +74,10 @@ fun MyApp() {
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
private fun TopBar(title: MutableState<String>) { private fun TopBar(title: MutableState<String>, scrollBehavior: TopAppBarScrollBehavior) {
LargeTopAppBar( LargeTopAppBar(
title = { Text(text = title.value) } title = { Text(text = title.value) },
scrollBehavior = scrollBehavior
) )
} }
@@ -109,6 +127,16 @@ private fun NavigationRoutes(navController: NavHostController) {
} }
} }
@Composable
private fun SearchFab() {
val context = LocalContext.current
FloatingActionButton(onClick = {
Toast.makeText(context, "Search Clicked!", Toast.LENGTH_SHORT).show()
}) {
Icon(Icons.Filled.Search, "")
}
}
@Preview(showBackground = true) @Preview(showBackground = true)
@Composable @Composable
fun MyAppPreview() { fun MyAppPreview() {