Develop Reference

Top app bar not scrolling when custom size is set

Whenever I navigate within my screen the LazyColumn scrolls perfectly but the top app bar doesn't move at all. Is it possible to tell the enlarged top app bar to scroll or can this only be done with the 4 default top app bars provided in Material 3?
#Composable
fun MyScreen(navController: NavController) {
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
val mConfiguration = LocalConfiguration.current
val mScreenHeight = mConfiguration.screenHeightDp.dp
val mSize = mScreenHeight / 2
Column {
Box(
modifier = Modifier
.height(mSize)
.weight(1f)
.fillMaxWidth()
) {
LargeTopAppBar(
title = {
Text(
text = "Android Studio Dolphin", overflow = TextOverflow.Visible, maxLines = 1
)
},
scrollBehavior = scrollBehavior)
}
Box(
modifier = Modifier
.height(mSize)
.weight(1f)
.fillMaxWidth()
.background(Color.Green)
) {
MyScreenContent()
// contentPadding ->
// MyScreenContent(contentPadding = contentPadding)
}
}
}
#Composable
fun MyScreenContent(
modifier: Modifier = Modifier,
contentPadding: PaddingValues = PaddingValues()
) {
Box(modifier = modifier.fillMaxSize()) {
val listState = rememberLazyListState()
LazyColumn(
state = listState,
contentPadding = contentPadding,
verticalArrangement = Arrangement.spacedBy(16.dp),
modifier = Modifier
.fillMaxSize()
.padding(horizontal = 16.dp)
) {
item {
Text(text = "text", style = TextStyle(fontSize = 18.sp))
}
items(75) {
ListItem(it)
}
}
}
}

You should use a Scaffold applying the nestedScroll modifier.
Something like:
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
LargeTopAppBar(
title = {
Text(
text = "Android Studio Dolphin", overflow = TextOverflow.Visible, maxLines = 1
)
},
scrollBehavior = scrollBehavior)
},
content = { innerPadding ->
LazyColumn(contentPadding = innerPadding,){
//....
}
}
)

Why onboarding button not work in jetpack compose?

I am new in jetpack compose, and I am try to learn it, so I have simple onboarding screen in jetpack compose, when I update project to jetpack compose 1.1.1 , "Next" button not working for onboarding screen to scroll horizontally. it was working when I use jetpack compose 1.0.0 version, I do not know what change in new version, any idea?
#ExperimentalPagerApi
#Composable
fun OnBoardScreen() {
val scaffoldState = rememberScaffoldState()
val onBoardViewModel : OnBoardViewModel = viewModel()
val context = LocalContext.current
val currentPage = onBoardViewModel.currentPage.collectAsState()
Toast.makeText(context, "${currentPage.value}", Toast.LENGTH_SHORT).show()
val pagerState = rememberPagerState(
pageCount = onBoardItem.size,
initialOffscreenLimit = 2,
initialPage = 0,
infiniteLoop = false
)
Scaffold(
modifier = Modifier.fillMaxSize(),
scaffoldState = scaffoldState
) {
Surface(
modifier = Modifier.fillMaxSize()
) {
LaunchedEffect(scaffoldState.snackbarHostState){
pagerState.animateScrollToPage(
page = currentPage.value
)
}
Box(
modifier = Modifier
.fillMaxWidth()
.background(Gray200)
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
HorizontalPager(
state = pagerState
) { page ->
Column(
modifier = Modifier
.padding(top = 65.dp)
.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = onBoardItem[page].image),
contentDescription = "OnBoardImage",
modifier = Modifier
.size(250.dp)
)
Text(
text = onBoardItem[page].title,
modifier = Modifier
.padding(top = 50.dp),
color = Color.White,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
)
Text(
text = onBoardItem[page].desc,
modifier = Modifier
.padding(30.dp),
color = Color.White,
fontSize = 18.sp,
textAlign = TextAlign.Center
)
}
}
PagerIndicator(onBoardItem.size, pagerState.currentPage)
}
Box(
modifier = Modifier
.align(Alignment.BottomCenter)
) {
Row(
modifier = Modifier
.padding(bottom = 20.dp)
.fillMaxWidth(),
horizontalArrangement = if (pagerState.currentPage != 2 ) {
Arrangement.SpaceBetween
} else {
Arrangement.Center
}
) {
if (pagerState.currentPage == 2) {
OutlinedButton(
onClick = {
Toast.makeText(context, "Start the Screen", Toast.LENGTH_SHORT).show()
},
shape = RoundedCornerShape(45.dp)
) {
Text(
text = "Get Started",
modifier = Modifier.padding(
vertical = 8.dp,
horizontal = 40.dp
),
color = Color.Black
)
}
} else {
Text(
text = "Skip",
color = Color.White,
modifier = Modifier.padding(start = 20.dp),
fontSize = 18.sp,
fontWeight = FontWeight.Medium
)
Text(
text = "Next",
color = Color.White,
modifier = Modifier
.clickable {
onBoardViewModel.setCurrentPage(pagerState.currentPage + 1)
}
.padding(end = 20.dp),
fontSize = 18.sp,
fontWeight = FontWeight.Medium
)
}
}
}
}
}
}
}

It looks like you expect these lines to scroll the pager every time you change the value of currentPage:
LaunchedEffect(scaffoldState.snackbarHostState) {
pagerState.animateScrollToPage(
page = currentPage.value
)
}
But scaffoldState.snackbarHostState in this scope is a static value, which means LaunchedEffect is not gonna be relaunched.
One option is to pass currentPage instead, but also, as your currentPage is backed by flow, it's cleaner to collect it:
LaunchedEffect(Unit) {
onBoardViewModel.currentPage
.collect {
pagerState.animateScrollToPage(
page = currentPage.value
)
}
}
p.s.
Also, when you need to make a text button, instead of adding clickable to the Text you can use TextButton:
TextButton(
onClick = {
}
) {
Text(/*...*/)
}

Align Box/Column to bottom of screen Jetpack Compose

I essentially want cards pinned to the top with a group of buttons pinned to the bottom (on screen keyboard)
Using Column with a modifier like so only leads to the buttons covering the top cards:
fun HomeScreen() {
Column(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.SpaceAround
) {
WordGrid()
}
Column(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.Bottom
) {
Keyboard()
}
I have tried using all the different Arrangements, using a row and using Boxes, but can't seem to get it to work.
Curiously, in the #Preview it looks as though the above code works, but when ran on an emulator they are both at the top of the screen.
Using a spacer is another option, but would this cause issues in other ways? maybe with screen sizes etc?

If you want your buttons row to be pinned to the bottom, you have to set the Column to have a weight of 1f, something like this
MyTheme {
Surface(color = MyTheme.colors.background) {
// Cards content
Column(
modifier = Modifier.fillMaxWidth()
) {
Column(
modifier = Modifier.fillMaxWidth().weight(1f)
) {
Card(
modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
backgroundColor = Color.Red,
) {
Text(text = "Card 1")
}
Card(
modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
backgroundColor = Color.Green,
) {
Text(text = "Card 2")
}
Card(
modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
backgroundColor = Color.Blue,
) {
Text(text = "Card 3")
}
}
// Buttons content
Row(
modifier = Modifier.fillMaxWidth()
) {
Button(
onClick = {},
modifier = Modifier.padding(horizontal = 8.dp)
) {
Text(text = "Button 1")
}
Button(
onClick = {},
modifier = Modifier.padding(horizontal = 8.dp)
) {
Text(text = "Button 3")
}
Button(
onClick = {},
modifier = Modifier.padding(horizontal = 8.dp)
) {
Text(text = "Button 2")
}
}
}
}
}

How to optimise laggy JetPack Compose layout

I'm using a HorizontalPager from accompanist package. The pager will have 1 page for each exercise stored by the user.
Each page in the pager has a LazyColumn which contain multiple cards with controls such as IconButtons and BasicTextField. The number of cards depends on number of sets configured by the user. I expect the typical number to be between 1 to 8 but only 3 to 5 would be visible on the screen at any given time (depending on the screen size and resolution).
The issue is that when this layout produces noticeable lag (animations skip frames) every time the HorizontalPager needs to build a new page that has more than 3 cards. This happens when swapping between pages. The same happens in debug and release versions running on a real device (Galaxy S10e) and emulator.
I'm trying to optimise this layout, so each frame renders in no more than 16ms regardless of the number of cards shown on the screen.
I've previously tried to solve this issue by setting fixed heights to some composables but that didn't help much. I've also tried using Text instead of BasicTextField, which would be then replaced with BasicTextField when users taps on the text but this hasn't helped much, therefore I removed this implementation.
Do you have some suggestions how performance of this layout could be improved to eliminate the lag?
Below is my code, screen shoot of the app screen and profiler:
#ExperimentalPagerApi
#Composable
fun WorkoutSessionScreen(
navHostController: NavHostController,
) {
val pagerState = rememberPagerState()
Scaffold(
topBar = { MyTopAppBar(navHostController = navHostController) }
) {
Box(
modifier = Modifier
.fillMaxHeight()
.fillMaxWidth()
.background(MaterialTheme.colors.background)
.imePadding()
) {
HorizontalPager(
count = 10, state =
pagerState,
itemSpacing = 16.dp
) {
Log.e("==>", "Building horizontal pager")
TrackingControls()
}
Box(
modifier = Modifier
.height(70.dp)
.fillMaxWidth()
.background(Color(0xFAF7F7FF))
.align(Alignment.BottomCenter)
) {
Column(
Modifier.fillMaxWidth()
) {
Divider(color = Color(0x2A5C5C5C))
BottomControls()
}
}
}
}
}
#Composable
private fun TrackingControls() {
LazyColumn(
Modifier
.fillMaxHeight()
.fillMaxWidth(),
contentPadding = PaddingValues(vertical = 8.dp)
) {
items(6) { item ->
SetsAndRepsTrackingControls(
modifier = Modifier
)
}
}
}
#Composable
private fun BottomControls() {
Text(text = "Bottom Controlls")
}
#Composable
fun SetsAndRepsTrackingControls(modifier: Modifier = Modifier) {
val add = painterResource(id = R.drawable.ic_round_add_24)
val remove = painterResource(id = R.drawable.ic_round_remove_24)
Card(
modifier
.fillMaxWidth()
.height(200.dp)
.padding(vertical = 16.dp, horizontal = 8.dp),
backgroundColor = MaterialTheme.colors.surface,
shape = RoundedCornerShape(12.dp),
) {
Column() {
ControlsHeader()
TrackingInput(label = "REPS", add, remove)
Divider(color = Color.LightGray)
TrackingInput(label = "WEIGHT (KG)", add, remove)
}
}
}
#Composable
private fun ControlsHeader() {
Row(
modifier = Modifier
.height(56.dp)
.fillMaxWidth()
.background(MaterialTheme.colors.primary, RoundedCornerShape(12.dp))
.padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(text = "Set 1")
Text(text = "CheckBox")
}
}
#Composable
private fun TrackingInput(label: String = "Preview", add: Painter, remove: Painter) {
Row(
modifier = Modifier
.fillMaxWidth()
.height(60.dp),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
IconButton(onClick = {}) {
Icon(
painter = painterResource(id = R.drawable.ic_round_remove_24),
contentDescription = "Minus",
tint = MaterialTheme.colors.onSurface
)
}
Column(
horizontalAlignment = Alignment.CenterHorizontally
) {
BasicTextField(
singleLine = true,
value = "8",
onValueChange = {},
textStyle = TextStyle(
textAlign = TextAlign.Center,
color = MaterialTheme.colors.onSurface
),
)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = label,
style = MaterialTheme.typography.overline.copy(color = MaterialTheme.colors.onSurface)
)
}
IconButton(onClick = { Log.d("==>", "tada") }) {
Icon(
painter = painterResource(id = R.drawable.ic_round_add_24),
contentDescription = "Minus",
tint = MaterialTheme.colors.onSurface
)
}
}
}
This profiler print screen shows rendering of a single card called SetsAndRepsTrackingControls

Android Compose LazyColum Rendering Issue when changing list sorting

This is how it looks when I hardcode the text inside the cards:
This is how it looks when I use my data from the viewModel, but it only has this issue after changing the sorting method of the list and it only happens in the middle of the list:
Here is the Code of the two Composables:
#Composable
fun BookShelfList(
navController: NavController,
viewModel: BookShelfViewModel,
toolbarHeight: Dp
) {
val bookList by remember { viewModel.books }
LazyColumn(
contentPadding = PaddingValues(
start = 16.dp,
top = toolbarHeight + 16.dp,
end = 16.dp,
bottom = 16.dp
),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
var items = bookList
if (viewModel.sortingMethod.value == "A-Z")
items = bookList.sortedWith(compareBy { it.title })
items(items) { book ->
BookShelfListItem(navController, book)
}
}
}
#Composable
fun BookShelfListItem(navController: NavController, book: Book) {
Card(
elevation = 4.dp,
modifier = Modifier
.fillMaxWidth()
.clickable { navController.navigate("second_screen") }
) {
Row(
modifier = Modifier
.height(120.dp)
) {
Image(
modifier = Modifier.width(90.dp),
painter = painterResource(id = R.drawable.book_cover_placeholder),
contentDescription = "Book cover",
contentScale = ContentScale.Crop
)
Column(
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Text(
text = book.title,
fontWeight = FontWeight.Bold,
fontSize = 18.sp,
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
}
}
}
}