animation o a lazycolumn android

animation o a lazycolumn android - android

I have a list with 10 items one of them have this elements "rankingCurrentPlace", "rankingPastPlace" and "isUser:true".
What i need to do its an animation on the lazycolumn if the api esponse is like this
"isUser:true", "rankingPastPlace:3" , "rankingCurrentPlace:7"
i need to show an animation in the list where the row starts in the third place and descend to the seventh place
is there a way to do this?
this is what I actually have
LazyColumn(
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp),
) {
items(
items = leaderboard,
key = { leaderBoard ->
leaderBoard.rankingPlace
}
) { leaderBoard ->
RowComposable( modifier = Modifier
.fillMaxWidth(),
topicsItem = leaderBoard,)
}

This answer works except when swapping first item with any item even with basic swap function without animation. I think it would be better to ask a new question about why swapping first item doesn't work or if it is bug. Other than that works as expected. If you need to move to items that are not in screen you can lazyListState.layoutInfo.visibleItemsInfo and compare with initial item and scroll to it before animation
1.Have a SnapshotStateList of data to trigger recomposition when we swap 2 items
class MyData(val uuid: String, val value: String)
val items: SnapshotStateList<MyData> = remember {
mutableStateListOf<MyData>().apply {
repeat(20) {
add(MyData( uuid = UUID.randomUUID().toString(), "Row $it"))
}
}
}
2.Function to swap items
private fun swap(list: SnapshotStateList<MyData>, from: Int, to: Int) {
val size = list.size
if (from in 0 until size && to in 0 until size) {
val temp = list[from]
list[from] = list[to]
list[to] = temp
}
}
3.Function to swap items one by one. There is a bug with swapping first item. Even if it's with function above when swapping first item other one moves up without showing animation via Modififer.animateItemPlacement().
#Composable
private fun animatedSwap(
lazyListState: LazyListState,
items: SnapshotStateList<MyData>,
from: Int,
to: Int,
onFinish: () -> Unit
) {
LaunchedEffect(key1 = Unit) {
val difference = from - to
val increasing = difference < 0
var currentValue: Int = from
repeat(abs(difference)) {
val temp = currentValue
if (increasing) {
currentValue++
} else {
currentValue--
}
swap(items, temp, currentValue)
if (!increasing && currentValue == 0) {
delay(300)
lazyListState.scrollToItem(0)
}
delay(350)
}
onFinish()
}
}
4.List with items that have Modifier.animateItemPlacement()
val lazyListState = rememberLazyListState()
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.weight(1f),
state = lazyListState,
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp),
verticalArrangement = Arrangement.spacedBy(4.dp)
) {
items(
items = items,
key = {
it.uuid
}
) {
Row(
modifier = Modifier
.animateItemPlacement(
tween(durationMillis = 200)
)
.shadow(1.dp, RoundedCornerShape(8.dp))
.background(Color.White)
.fillMaxWidth()
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.size(50.dp),
painter = painterResource(id = R.drawable.landscape1),
contentScale = ContentScale.FillBounds,
contentDescription = null
)
Spacer(modifier = Modifier.width(10.dp))
Text(it.value, fontSize = 18.sp)
}
}
}
Demo
#OptIn(ExperimentalFoundationApi::class)
#Composable
private fun AnimatedList() {
Column(modifier = Modifier.fillMaxSize()) {
val items: SnapshotStateList<MyData> = remember {
mutableStateListOf<MyData>().apply {
repeat(20) {
add(MyData(uuid = UUID.randomUUID().toString(), "Row $it"))
}
}
}
val lazyListState = rememberLazyListState()
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.weight(1f),
state = lazyListState,
contentPadding = PaddingValues(horizontal = 10.dp, vertical = 0.dp),
verticalArrangement = Arrangement.spacedBy(4.dp)
) {
items(
items = items,
key = {
it.uuid
}
) {
Row(
modifier = Modifier
.animateItemPlacement(
tween(durationMillis = 200)
)
.shadow(1.dp, RoundedCornerShape(8.dp))
.background(Color.White)
.fillMaxWidth()
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically
) {
Image(
modifier = Modifier
.clip(RoundedCornerShape(10.dp))
.size(50.dp),
painter = painterResource(id = R.drawable.landscape1),
contentScale = ContentScale.FillBounds,
contentDescription = null
)
Spacer(modifier = Modifier.width(10.dp))
Text(it.value, fontSize = 18.sp)
}
}
}
var fromString by remember {
mutableStateOf("7")
}
var toString by remember {
mutableStateOf("3")
}
var animate by remember { mutableStateOf(false) }
if (animate) {
val from = try {
Integer.parseInt(fromString)
} catch (e: Exception) {
0
}
val to = try {
Integer.parseInt(toString)
} catch (e: Exception) {
0
}
animatedSwap(
lazyListState = lazyListState,
items = items,
from = from,
to = to
) {
animate = false
}
}
Row(modifier = Modifier.fillMaxWidth()) {
TextField(
value = fromString,
onValueChange = {
fromString = it
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
TextField(
value = toString,
onValueChange = {
toString = it
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)
}
Button(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth(),
onClick = {
animate = true
}
) {
Text("Swap")
}
}
}
Edit: Animating with Animatable
Another method for animating is using Animatable with Integer vector.
val IntToVector: TwoWayConverter<Int, AnimationVector1D> =
TwoWayConverter({ AnimationVector1D(it.toFloat()) }, { it.value.toInt() })
val coroutineScope = rememberCoroutineScope()
val animatable = remember { Animatable(0, IntToVector) }
And can be used as
private fun alternativeAnimate(
from: Int,
to: Int,
coroutineScope: CoroutineScope,
animatable: Animatable<Int, AnimationVector1D>,
items: SnapshotStateList<MyData>
) {
val difference = from - to
var currentValue: Int = from
coroutineScope.launch {
animatable.snapTo(from)
animatable.animateTo(to,
tween(350 * abs(difference), easing = LinearEasing),
block = {
val nextValue = this.value
if (abs(currentValue -nextValue) ==1) {
swap(items, currentValue, nextValue)
currentValue = nextValue
}
}
)
}
}
on button click, i'm getting values from TextField fo i convert from String
Button(
modifier = Modifier
.padding(8.dp)
.fillMaxWidth(),
onClick = {
val from = try {
Integer.parseInt(fromString)
} catch (e: Exception) {
0
}
val to = try {
Integer.parseInt(toString)
} catch (e: Exception) {
0
}
alternativeAnimate(from, to, coroutineScope, animatable, items)
}
) {
Text("Swap")
}
Result

I suggest you to get your items from a data class. If your other items does not contain the variables you mentioned you can make them nullable in data class and put a condition checker in your lazycolumn
Like this
data class Items(
val otherItems: Other,
val rankingCurrentPlace: Int?,
val rankingLastPlace: Int?,
val isUser: Boolean?
)
Then you can make a list from this data class and pass it to lazycolumn
LazyColumn{
items(list){
(elements with condition)
}
}

Related

Auto scrolling pager not working properly in Android Jetpack Compose

I am learning jetpack compose.I am trying to implement a viewpager in jetpack compose where 5 image will be auto scrolled after 3 sec just like a carousel banner.Everything is alright before last index item image.After auto scroll to last index ,page should be scrolled to 0 index and will repeat.That's where the problem begain.The pager not working perfectly here .It's reapeting 3-4 index and sometimes stuck between to image/page after first auto scroll.
This is the img
My Code
#OptIn(ExperimentalPagerApi::class)
#Composable
fun HorizontalPagerScreen() {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(0.dp, 5.dp)
) {
val items = createItems()
val pagerState = rememberPagerState()
HorizontalPager(
modifier = Modifier
.fillMaxWidth()
.height(250.dp),
count = items.size,
state = pagerState,
verticalAlignment = Alignment.Top,
) { currentPage ->
Image(
painter = rememberAsyncImagePainter(items[currentPage].Image),
contentDescription = items[currentPage].title,
contentScale = ContentScale.Crop,
modifier = Modifier.fillMaxWidth(),
)
//Here's the code for auto scrolling
LaunchedEffect(key1= Unit, key2= pagerState.currentPage) {
while (true) {
yield()
delay(3000)
var newPage = pagerState.currentPage + 1
if (newPage > items.lastIndex) newPage = 0
pagerState.animateScrollToPage(newPage)
}
}
}
}
}
**How to make it auto scroll for infinite times **

You can create a loopingCount variable that you increment every few seconds using a LaunchedEffect and then mod it with the max amount of pages, you also need to take into account if the user is dragging on the pager or not.
The full code sample can be found here, but added below too:
#Composable
fun HorizontalPagerLoopingIndicatorSample() {
Scaffold(
modifier = Modifier.fillMaxSize()
) { padding ->
Column(
Modifier
.fillMaxSize()
.padding(padding)
) {
// Display 10 items
val pageCount = 10
// We start the pager in the middle of the raw number of pages
val loopingCount = Int.MAX_VALUE
val startIndex = loopingCount / 2
val pagerState = rememberPagerState(initialPage = startIndex)
fun pageMapper(index: Int): Int {
return (index - startIndex).floorMod(pageCount)
}
HorizontalPager(
// Set the raw page count to a really large number
pageCount = loopingCount,
state = pagerState,
// Add 32.dp horizontal padding to 'center' the pages
contentPadding = PaddingValues(horizontal = 32.dp),
// Add some horizontal spacing between items
pageSpacing = 4.dp,
modifier = Modifier
.weight(1f)
.fillMaxWidth()
) { index ->
// We calculate the page from the given index
val page = pageMapper(index)
PagerSampleItem(
page = page,
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
)
}
HorizontalPagerIndicator(
pagerState = pagerState,
modifier = Modifier
.align(Alignment.CenterHorizontally)
.padding(16.dp),
pageCount = pageCount,
pageIndexMapping = ::pageMapper
)
val loopState = remember {
mutableStateOf(true)
}
LoopControl(loopState, Modifier.align(Alignment.CenterHorizontally))
ActionsRow(
pagerState = pagerState,
modifier = Modifier.align(Alignment.CenterHorizontally),
infiniteLoop = true
)
var underDragging by remember {
mutableStateOf(false)
}
LaunchedEffect(key1 = Unit) {
pagerState.interactionSource.interactions.collect { interaction ->
when (interaction) {
is PressInteraction.Press -> underDragging = true
is PressInteraction.Release -> underDragging = false
is PressInteraction.Cancel -> underDragging = false
is DragInteraction.Start -> underDragging = true
is DragInteraction.Stop -> underDragging = false
is DragInteraction.Cancel -> underDragging = false
}
}
}
val looping = loopState.value
if (underDragging.not() && looping) {
LaunchedEffect(key1 = underDragging) {
try {
while (true) {
delay(1000L)
val current = pagerState.currentPage
val currentPos = pageMapper(current)
val nextPage = current + 1
if (underDragging.not()) {
val toPage = nextPage.takeIf { nextPage < pageCount } ?: (currentPos + startIndex + 1)
if (toPage > current) {
pagerState.animateScrollToPage(toPage)
} else {
pagerState.scrollToPage(toPage)
}
}
}
} catch (e: CancellationException) {
Log.i("page", "Launched paging cancelled")
}
}
}
}
}
}
#Composable
fun LoopControl(
loopState: MutableState<Boolean>,
modifier: Modifier = Modifier,
) {
IconButton(
onClick = { loopState.value = loopState.value.not() },
modifier = modifier
) {
val icon = if (loopState.value) {
Icons.Default.PauseCircle
} else {
Icons.Default.PlayCircle
}
Icon(imageVector = icon, contentDescription = null)
}
}
private fun Int.floorMod(other: Int): Int = when (other) {
0 -> this
else -> this - floorDiv(other) * other
}

My lazycolumn items and my textfield glide on the screen when the keyboard is opened in jetpack compose

I'm just at the beginning of a chat bot application and I'm showing dialogs with lazycolumn. I also have a textfield, the bot responds to the texts entered in this textfield and cards appear on the screen, but when the keyboard is opened, my lazycolumn items slide upwards and the textfield does not appear properly. To solve this, I used something called bringIntoViewRequester and
I added the following to
my
manifest android:windowSoftInputMode="adjustResize"
MainActivity window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN)
I'll share my codes below.
How can I solve this problem? also this method as far as I know is experimental, in my opinion if there is another non experimental method you know it would be better
my first screen
var index = 1
#Composable
fun FirstScreen() {
val list = remember { mutableStateListOf<Message>() }
val botList = listOf("Peter", "Francesca", "Luigi", "Igor")
val random = (0..3).random()
val botName: String = botList[random]
val hashMap: HashMap<String, String> = HashMap<String, String>()
customBotMessage(message = Message1, list)
LazyColumn {
items(list.size) { i ->
if (list[i].id == RECEIVE_ID)
Item(message = list[i], botName)
else
Item(message = list[i], "User")
}
}
SimpleOutlinedTextFieldSample(list, hashMap)
}
#OptIn(ExperimentalComposeUiApi::class, ExperimentalFoundationApi::class)
#Composable
fun SimpleOutlinedTextFieldSample(
list: SnapshotStateList<Message>,
hashMap: HashMap<String, String>
) {
val coroutineScope = rememberCoroutineScope()
val keyboardController = LocalSoftwareKeyboardController.current
val bringIntoViewRequester = remember { BringIntoViewRequester() }
var text by remember { mutableStateOf("") }
Column(
verticalArrangement = Arrangement.Bottom,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier.bringIntoViewRequester(bringIntoViewRequester)
) {
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.Bottom,
horizontalArrangement = Arrangement.Center
) {
OutlinedTextField(
modifier = Modifier
.padding(8.dp)
.onFocusEvent { focusState ->
if (focusState.isFocused) {
coroutineScope.launch {
bringIntoViewRequester.bringIntoView()
}
}
},
keyboardOptions = KeyboardOptions(imeAction = androidx.compose.ui.text.input.ImeAction.Done),
keyboardActions = KeyboardActions(onDone = { keyboardController?.hide() }),
value = text,
onValueChange = { text = it },
label = { Text("send message") })
IconButton(onClick = {
if (text.isNotEmpty()) {
list.add(
Message(
text,
SEND_ID,
Timestamp(System.currentTimeMillis()).toString()
)
)
hashMap.put(listOfMessageKeys[index - 1], text)
customBotMessage(listOfMessages[index], list)
index += 1
}
text = ""
}) {
Icon(
modifier = Modifier.padding(8.dp),
painter = painterResource(id = R.drawable.ic_baseline_send_24),
contentDescription = "send message img"
)
}
}
}
}
private fun customBotMessage(message: String, list: SnapshotStateList<Message>) {
GlobalScope.launch {
delay(1000)
withContext(Dispatchers.Main) {
list.add(Message(message, RECEIVE_ID, Timestamp(System.currentTimeMillis()).toString()))
}
}
}
LazyColumn - Item
#OptIn(ExperimentalFoundationApi::class, ExperimentalComposeUiApi::class)
#Composable
fun Item(
message : Message,
person : String,
){
val coroutineScope = rememberCoroutineScope()
val keyboardController = LocalSoftwareKeyboardController.current
val bringIntoViewRequester = remember { BringIntoViewRequester() }
Card(
modifier = Modifier
.padding(10.dp)
.bringIntoViewRequester(bringIntoViewRequester),
elevation = 10.dp
) {
Column(
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top,
modifier = Modifier
.padding(10.dp)
.height(IntrinsicSize.Min)){
Row(
horizontalArrangement = Arrangement.SpaceEvenly,
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.padding(4.dp)
){
Text(
buildAnnotatedString {
withStyle(style = SpanStyle(fontWeight = FontWeight.Light)) {
append("$person: ")
}
},
modifier = Modifier
.padding(4.dp)
.onFocusEvent { focusState ->
if (focusState.isFocused) {
coroutineScope.launch {
bringIntoViewRequester.bringIntoView()
}
}
}
)
Text(
buildAnnotatedString {
withStyle(
style = SpanStyle(
fontWeight = FontWeight.W900,
color = Color(0xFF4552B8)
))
{
append(message.message)
}
},
modifier = Modifier.onFocusEvent { focusState ->
if (focusState.isFocused) {
coroutineScope.launch {
bringIntoViewRequester.bringIntoView()
}
}
}
)
}
}
}
}

Recomposition every time on lazy column jetpack compose

I need help with a full recomposition in every row of my lazy column when they are in or out of the screen. The performance is not good at all. Its a simple lazy list with pagination on a lazy row
First the Pager on my viewmodel
val result = Pager(
PagingConfig(pageSize = PAGE_SIZE, enablePlaceholders = ENABLE_PLACEHOLDERS)
) {
repository.getRooms()
}.flow
.cachedIn(viewModelScope)
Now my fragment onCreatedView method:
return ComposeView(requireContext()).apply {
setContent {
CurrentTheme(provideCurrentTheme()) {
RoomsCFragmentScreen(
...
pager = viewModel.result
...
)
}
}
}
Now on my screen view:
Scaffold()
{ paddingValues ->
RoomsList(
modifier = Modifier
.fillMaxSize()
.padding(bottom = paddingValues.calculateBottomPadding()),
pager = pager,
...
)
}
Now the RoomList:
val roomListItems: LazyPagingItems<RoomItemView> = pager.collectAsLazyPagingItems()
LazyColumn(
modifier = modifier,
state = listState,
) {
items(items = roomListItems, key = { it.room!!.id }) { item ->
item?.let {
Surface() {
RoomItem(
roomItemView = it,
...
)
}
}
}
}
Now all the components that are on my RoomItem:
#Composable
fun RoomItem(
dateFormatter: DateFormatter.Formatter,
userId: String,
roomItemView: RoomItemView,
loadDraft: (roomId: String) -> String
) {
Column {
Row(
modifier = Modifier
.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceEvenly,
) {
Avatar(roomItemView = roomItemView)
CenterContent(
roomItemView = roomItemView,
dateFormatter = dateFormatter,
userId = userId,
loadDraft = loadDraft
)
}
Divider(
modifier = Modifier
.padding(top = 8.dp, end = 12.dp, start = 85.dp),
color = MaterialTheme.colors.secondary
)
}
}
#Composable
fun CenterContent(
roomItemView: RoomItemView,
dateFormatter: DateFormatter.Formatter,
userId: String,
loadDraft: (roomId: String) -> String
) {
Column(
modifier = Modifier
.fillMaxWidth(),
) {
CenterContentTop(roomItemView, dateFormatter)
CenterContentBottom(roomItemView, userId, loadDraft = loadDraft)
}
}
#Composable
fun CenterContentTop(roomItemView: RoomItemView, dateFormatter: DateFormatter.Formatter) {
Box(modifier = Modifier.padding(end = 12.dp, bottom = 5.dp)) {
RoomItemTitle(
roomItemView = roomItemView,
dateFormatter = dateFormatter
)
}
}
#Composable
fun CenterContentBottom(
roomItemView: RoomItemView,
userId: String,
loadDraft: (roomId: String) -> String
) {
Box(modifier = Modifier.padding(end = 12.dp)) {
LastMessage(roomItemView = roomItemView, userId = userId, loadDraft = loadDraft)
}
}

Create an instance of MutableList that is observable and can be snapshot.
var yourMutableList = mutableStateListOf<YourList>()
LazyColumn {
items(yourMutableList) {
}
}

Sorting List Items in LazyColumn - Android Jetpack Compose

Trying to implement a feature where the user is able to select a way to sort the list of Breweries when a certain item in a dropdown menu is selected (Name, City, Address). I am having trouble figuring out what I am doing wrong. Whenever I select example "Name" in the dropdown menu, the list of breweries does not sort. I am new at this so any advice will really help. Thank you!
Here is the full code for the MainScreen -
#SuppressLint("UnusedMaterialScaffoldPaddingParameter")
#RequiresApi(Build.VERSION_CODES.O)
#Composable
fun MainScreen(
navController: NavController,
mainViewModel: MainViewModel,
search: String?
) {
val apiData = brewData(mainViewModel = mainViewModel, search = search)
Scaffold(
content = {
if (apiData.loading == true){
Column(
modifier = Modifier
.fillMaxSize()
.background(colorResource(id = R.color.grey_blue)),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
CircularProgressIndicator()
}
} else if (apiData.data != null){
MainContent(bData = apiData.data!!, viewModel = mainViewModel)
}
},
topBar = { BrewTopBar(navController, search) }
)
}
#Composable
fun BrewTopBar(navController: NavController, search: String?) {
TopAppBar(
modifier = Modifier
.height(55.dp)
.fillMaxWidth(),
title = {
Text(
stringResource(id = R.string.main_title),
style = MaterialTheme.typography.h5,
maxLines = 1
)
},
actions = {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Text(text = "$search")
IconButton(onClick = { navController.navigate(Screens.SearchScreen.name) }) {
Icon(
modifier = Modifier.padding(10.dp),
imageVector = Icons.Filled.Search,
contentDescription = stringResource(id = R.string.search)
)
}
}
},
backgroundColor = colorResource(id = R.color.light_purple)
)
}
#RequiresApi(Build.VERSION_CODES.O)
#Composable
fun MainContent(bData: List<BrewData>, viewModel: MainViewModel){
val allBreweries = bData.size
var sortByName by remember { mutableStateOf(false) }
var sortByCity by remember { mutableStateOf(false) }
var sortByAddress by remember { mutableStateOf(false) }
var dataSorted1 = remember { mutableStateOf(bData.sortedBy { it.name }) }
var dataSorted: MutableState<List<BrewData>>
Column(
modifier = Modifier
.fillMaxSize()
.background(colorResource(id = R.color.grey_blue))
){
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceAround,
verticalAlignment = Alignment.CenterVertically
){
// Amount text label
Text(
text = "Result(s): ${bData.size}",
modifier = Modifier.padding(top = 15.dp, start = 15.dp, bottom = 5.dp)
)
SortingMenu(sortByName, sortByCity, sortByAddress) // needs mutable booleans for sorting
}
// List of Brewery cards
LazyColumn(
Modifier
.fillMaxSize()
.padding(5.dp)
){
items(allBreweries){ index ->
Breweries(
bData = when {
sortByName == true -> remember { mutableStateOf(bData.sortedBy { it.name }) }
sortByCity == true -> remember { mutableStateOf(bData.sortedBy { it.city }) }
sortByAddress == true -> remember { mutableStateOf(bData.sortedBy { it.address_2 }) }
else -> remember { mutableStateOf(bData) }
} as MutableState<List<BrewData>>, // Todo: create a way to select different sorting conditions
position = index,
viewModel = viewModel
)
}
}
}
}
#RequiresApi(Build.VERSION_CODES.O)
#Composable
fun Breweries(
bData: MutableState<List<BrewData>>,
position: Int,
viewModel: MainViewModel
){
val cardNumber = position+1
val cityApiData = bData.value[position].city
val phoneNumberApiData = bData.value[position].phone
val countryApiData = bData.value[position].country
val breweryTypeApiData = bData.value[position].brewery_type
val countyApiData = bData.value[position].county_province
val postalCodeApiData = bData.value[position].postal_code
val stateApiData = bData.value[position].state
val streetApiData = bData.value[position].street
val apiLastUpdated = bData.value[position].updated_at
val context = LocalContext.current
val lastUpdated = apiLastUpdated?.let { viewModel.dateTextConverter(it) }
val websiteUrlApiData = bData.value[position].website_url
var expanded by remember { mutableStateOf(false) }
val clickableWebsiteText = buildAnnotatedString {
if (websiteUrlApiData != null) {
append(websiteUrlApiData)
}
}
val clickablePhoneNumberText = buildAnnotatedString {
if (phoneNumberApiData != null){
append(phoneNumberApiData)
}
}
Column(
Modifier.padding(10.dp)
) {
//Brewery Card
Card(
modifier = Modifier
.padding(start = 15.dp, end = 15.dp)
// .fillMaxSize()
.clickable(
enabled = true,
onClickLabel = "Expand to view details",
onClick = { expanded = !expanded }
)
.semantics { contentDescription = "Brewery Card" },
backgroundColor = colorResource(id = R.color.light_blue),
contentColor = Color.Black,
border = BorderStroke(0.5.dp, colorResource(id = R.color.pink)),
elevation = 15.dp
) {
Column(verticalArrangement = Arrangement.Center) {
//Number text for position of card
Text(
text = cardNumber.toString(),
modifier = Modifier.padding(15.dp),
fontSize = 10.sp,
)
// Second Row
BreweryTitle(bData = bData, position = position)
// Third Row
// Brewery Details
CardDetails(
cityApiData = cityApiData,
stateApiData = stateApiData,
streetApiData = streetApiData,
countryApiData = countryApiData,
countyApiData = countyApiData,
postalCodeApiData = postalCodeApiData,
breweryTypeApiData = breweryTypeApiData,
lastUpdated = lastUpdated,
expanded = expanded
)
//Fourth Row
Row(horizontalArrangement = Arrangement.Center,
modifier = Modifier.fillMaxWidth()
){
Column(
modifier = Modifier.padding(
start = 10.dp, end = 10.dp,
top = 15.dp, bottom = 15.dp
),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
//Phone Number Link
LinkBuilder(
clickablePhoneNumberText,
phoneNumberApiData,
modifier = Modifier.padding(bottom = 10.dp)
) {
if (phoneNumberApiData != null) {
viewModel.callNumber(phoneNumberApiData, context)
}
}
//Website Link
LinkBuilder(
clickableWebsiteText,
websiteUrlApiData,
modifier = Modifier.padding(bottom = 15.dp),
intentCall = {
if (websiteUrlApiData != null) {
viewModel.openWebsite(websiteUrlApiData, context)
}
}
)
}
}
}
}
}
}
#Composable
fun CardDetails(
cityApiData: String?,
stateApiData: String?,
streetApiData: String?,
countryApiData: String?,
countyApiData: String?,
postalCodeApiData: String?,
breweryTypeApiData: String?,
lastUpdated: String?,
expanded: Boolean
){
// Third Row
//Brewery Details
Column(
modifier = Modifier.padding(
start = 30.dp, end = 10.dp, top = 25.dp, bottom = 15.dp
),
verticalArrangement = Arrangement.Center
) {
if (expanded) {
Text(text = "City: $cityApiData")
Text(text = "State: $stateApiData")
Text(text = "Street: $streetApiData")
Text(text = "Country: $countryApiData")
Text(text = "County: $countyApiData")
Text(text = "Postal Code: $postalCodeApiData")
Text(text = "Type: $breweryTypeApiData")
Text(text = "Last updated: $lastUpdated")
}
}
}
#Composable
fun BreweryTitle(bData: MutableState<List<BrewData>>, position: Int){
// Second Row
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center,
) {
// Name of Brewery
Text(
text = bData.value[position].name!!,
modifier = Modifier.padding(start = 15.dp, end = 15.dp),
fontWeight = FontWeight.Bold,
maxLines = 3,
textAlign = TextAlign.Center,
softWrap = true,
style = TextStyle(
color = colorResource(id = R.color.purple_500),
fontStyle = FontStyle.Normal,
fontSize = 17.sp,
fontFamily = FontFamily.SansSerif,
letterSpacing = 2.sp,
)
)
}
}
}
#Composable
fun LinkBuilder(
clickableText: AnnotatedString,
dataText: String?,
modifier: Modifier,
intentCall: (String?) -> Unit
){
if (dataText != null){
ClickableText(
text = clickableText,
modifier = modifier,
style = TextStyle(
textDecoration = TextDecoration.Underline,
letterSpacing = 2.sp
),
onClick = {
intentCall(dataText)
}
)
}
else {
Text(
text = "Sorry, Not Available",
color = Color.Gray,
fontSize = 10.sp
)
}
}
//Gets data from view model
#Composable
fun brewData(
mainViewModel: MainViewModel, search: String?
): DataOrException<List<BrewData>, Boolean, Exception> {
return produceState<DataOrException<List<BrewData>, Boolean, Exception>>(
initialValue = DataOrException(loading = true)
) {
value = mainViewModel.getData(search)
}.value
}
#Composable
fun SortingMenu(sortByName: Boolean, sortByCity: Boolean, sortByAddress: Boolean,) {
var expanded by remember { mutableStateOf(false) }
val items = listOf("Name", "City", "Address")
val disabledValue = "B"
var selectedIndex by remember { mutableStateOf(0) }
Box(
modifier = Modifier
.wrapContentSize(Alignment.TopStart)
) {
Text(
text = "Sort by: ${items[selectedIndex]}",
modifier = Modifier
.clickable(onClick = { expanded = true })
.width(120.dp)
)
DropdownMenu(
expanded = expanded,
onDismissRequest = { expanded = false // todo: sort list data when clicked
when(selectedIndex){
0 -> sortByName == true
1 -> sortByCity == true
2 -> sortByAddress == true
} }
) {
items.forEachIndexed { index, text ->
DropdownMenuItem(onClick = {
selectedIndex = index
expanded = false
}) {
val disabledText = if (text == disabledValue) {
" (Disabled)"
} else {
""
}
Text(text = text + disabledText)
}
}
}
}
}
//not used
fun sorting(menuList: List<String>, dataList: List<BrewData>, index: Int){
when{
menuList[index] == "Name" -> dataList.sortedBy { it.name }
menuList[index] == "City" -> dataList.sortedBy { it.city }
menuList[index] == "Address" -> dataList.sortedBy { it.address_2 }
}
}

It's really difficult to track this much code especially on my 13 inch screen.
You should move your sort logic to ViewModel or useCase and create a sort function you can call on user interaction such as viewmodel.sort(sortType) and update value of one MutableState with new or use mutableStateListOf and update with sorted list.
Sorting is business logic and i would do it in a class that doesn't contain any Android related dependencies, i use MVI or MVVM so my preference is a UseCase class which i can unit test sorting with any type and a sample list and desired outcomes.

You can do it with Comparatorand Modifier.animateItemPlacement() so it would look even nicer!
I will post an example from Google so you can understand the logic:
#Preview
#OptIn(ExperimentalFoundationApi::class)
#Composable
fun PopularBooksDemo() {
MaterialTheme {
var comparator by remember { mutableStateOf(TitleComparator) }
Column {
Row(
modifier = Modifier.height(IntrinsicSize.Max),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text(
"Title",
Modifier.clickable { comparator = TitleComparator }
.weight(5f)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
Text(
"Author",
Modifier.clickable { comparator = AuthorComparator }
.weight(2f)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
Text(
"Year",
Modifier.clickable { comparator = YearComparator }
.width(50.dp)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
Text(
"Sales (M)",
Modifier.clickable { comparator = SalesComparator }
.width(65.dp)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
}
Divider(color = Color.LightGray, thickness = Dp.Hairline)
LazyColumn(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
val sortedList = PopularBooksList.sortedWith(comparator)
items(sortedList, key = { it.title }) {
Row(
Modifier.animateItemPlacement()
.height(IntrinsicSize.Max),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Text(
it.title,
Modifier.weight(5f)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
Text(
it.author,
Modifier.weight(2f)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
Text(
"${it.published}",
Modifier.width(55.dp)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
Text(
"${it.salesInMillions}",
Modifier.width(65.dp)
.fillMaxHeight()
.padding(4.dp)
.wrapContentHeight(Alignment.CenterVertically),
textAlign = TextAlign.Center
)
}
}
}
}
}
}
private val TitleComparator = Comparator<Book> { left, right ->
left.title.compareTo(right.title)
}
private val AuthorComparator = Comparator<Book> { left, right ->
left.author.compareTo(right.author)
}
private val YearComparator = Comparator<Book> { left, right ->
right.published.compareTo(left.published)
}
private val SalesComparator = Comparator<Book> { left, right ->
right.salesInMillions.compareTo(left.salesInMillions)
}
private val PopularBooksList = listOf(
Book("The Hobbit", "J. R. R. Tolkien", 1937, 140),
Book("Harry Potter and the Philosopher's Stone", "J. K. Rowling", 1997, 120),
Book("Dream of the Red Chamber", "Cao Xueqin", 1800, 100),
Book("And Then There Were None", "Agatha Christie", 1939, 100),
Book("The Little Prince", "Antoine de Saint-Exupéry", 1943, 100),
Book("The Lion, the Witch and the Wardrobe", "C. S. Lewis", 1950, 85),
Book("The Adventures of Pinocchio", "Carlo Collodi", 1881, 80),
Book("The Da Vinci Code", "Dan Brown", 2003, 80),
Book("Harry Potter and the Chamber of Secrets", "J. K. Rowling", 1998, 77),
Book("The Alchemist", "Paulo Coelho", 1988, 65),
Book("Harry Potter and the Prisoner of Azkaban", "J. K. Rowling", 1999, 65),
Book("Harry Potter and the Goblet of Fire", "J. K. Rowling", 2000, 65),
Book("Harry Potter and the Order of the Phoenix", "J. K. Rowling", 2003, 65)
)
private class Book(
val title: String,
val author: String,
val published: Int,
val salesInMillions: Int
)

You have tons of codes and I only see lists, so its hard to guess what's going on, but based on
the list of breweries does not sort
I would advice creating a very simple working app with 1 data class 1 Viewmodel 1 Screen with a LazyColumn and 1 Button.
Consider this:
Your data class
data class Person(
val id: Int,
val name: String
)
Your ViewModel
class MyViewModel {
val peopleList = mutableStateListOf<Person>() // SnapshotStateList
fun onSortButtonClicked() {
// do your sorting logic here
// update your mutable`State`List
}
}
Your Composable Screen
#Composable // I just put the view model as an argument, don't follow it you don't need to
fun MyScreen(viewModel: MyViewModel) {
val myList = viewModel.peopleList
LazyColumn {
items(items = myList, key = { person -> person.id }) { person ->
//.. your item composable //
}
Button(
onClick = { viewModel.onSortButtonClicked() }
)
}
}
It works but its not advisable to use MutableList inside a State or mutableState as any changes you make on its elements won't trigger re-composition, your best way to do it is to manually copy the entire List and create a new one which is again not advisable, thats why SnapshotStateList<T> or mutableStateListOf<T> is not only recommended but the only way to deal with lists in Jetpack Compose development efficiently.
Using SnapshotStateList, any updates (in my experience) such as deleting an element, modifying by doing .copy(..) and re-inserting to the same index will guarantee a re-composition on a Composable that reads that element, in the case of the "working sample code", if I change the name of a person in the SnapshotStateList like peopleList[index] = person.copy(name="Mr Person"), the item composable that reads that person object will re-compose. As for your Sorting problem, I haven't tried it yet so I'm not sure, but I think the list will sort if you simply perform a sorting operation in the SnapshotStateList.
Take everything I said with the grain of salt, though I'm confident with the usage of the SnapshotStateList for the "working sample code", however there are tons of nuances and things happening under the hood that I'm careful not to just simply throw around, but as you said
I am new at this
So am I. I'm confident this is a good starting point dealing with collections/list in jetpack compose.

Expendable Item with LazyColumn is not smooth while scrolling in Jetpack Compose

I get lists from API and display them in LazyColumn with the expendable scroll. All list items are initially in a not expended state and while the user clicks them, I want to show the detail of that item in the expendable item view.
When my list items are in expended state, scrolling is smooth but when the initial state ( not expended ) scrolling is not smooth. I saved expendable state with rememberSavable and update when user clicks the item.
These are my code:
My viewModel
#HiltViewModel
class MainViewModel #Inject constructor(
private val appRepository: AppRepository
) : ViewModel() {
val breeds: Flow<PagingData<BreedItem>> = Pager(
config = PagingConfig(pageSize = 3)
) {
BreedsPagingDataSource(appRepository)
}.flow.cachedIn(viewModelScope)
}
My ListScreen
#Composable
fun DoggoListScreen() {
val vm: MainViewModel = hiltViewModel()
DoggoListView(
breedItems = vm.breeds,
)
}
My ListView
#Composable
fun DoggoListView(
breedItems: Flow<PagingData<BreedItem>>,
) {
val breed: LazyPagingItems<BreedItem> = breedItems.collectAsLazyPagingItems()
LazyColumn(
modifier = Modifier
.fillMaxSize()
.padding(4.dp)
) {
items(breed) { item ->
FoldAbleItem(
item!!.toVo(),
onClick = {
//todo : do some click action
})
}
breed.apply {
when {
loadState.refresh is LoadState.Loading -> {
item {
LoadingView(modifier = Modifier.fillParentMaxSize())
}
}
loadState.append is LoadState.Loading -> {
item {
LoadingItem()
}
}
loadState.refresh is LoadState.Error -> {
val e = breed.loadState.refresh as LoadState.Error
item {
ErrorItem(
message = e.error.localizedMessage!!,
modifier = Modifier.fillParentMaxSize(),
onClickRetry = { retry() }
)
}
}
loadState.append is LoadState.Error -> {
val e = breed.loadState.append as LoadState.Error
item {
ErrorItem(
message = e.error.localizedMessage!!,
onClickRetry = { retry() }
)
}
}
}
}
}
}
My ItemView
#Composable
fun FoldAbleItem(
breed: Breed,
onClick: () -> Unit
) {
//you can save expandedState by remember if you don't want to save it across scrolling
var expandedState by rememberSaveable {
mutableStateOf(breed.isExpended)
}
val rotationState by animateFloatAsState(
targetValue = if (expandedState) 180f else 0f
)
val image = rememberCoilPainter(
request = breed.url,
fadeIn = true,
fadeInDurationMs = 500
)
Card(
modifier = Modifier
.fillMaxWidth()
.padding(4.dp)
.animateContentSize(
animationSpec = tween(
durationMillis = 300,
easing = LinearOutSlowInEasing
)
)
.clickable(
onClick = onClick
),
shape = MaterialTheme.shapes.medium,
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(12.dp)
) {
Row(
verticalAlignment = Alignment.CenterVertically
) {
Text(
modifier = Modifier.weight(1f),
text = breed.name,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
style = MaterialTheme.typography.h5
)
IconButton(
modifier = Modifier.rotate(rotationState),
onClick = { expandedState = !expandedState }
) {
Icon(
imageVector = Icons.Default.ArrowDropDown,
contentDescription = "Drop Arrow"
)
}
}
if (expandedState) {
Text(
text = breed.temperament ?: "movie.bred_for",
style = MaterialTheme.typography.body2
)
Spacer(modifier = Modifier.height(8.dp))
Image(
painter = image,
contentDescription = null,
//16:9 = 1.7f
modifier = Modifier
.aspectRatio(1.7f, false)
.clip(MaterialTheme.shapes.medium)
,
contentScale = ContentScale.FillWidth
)
breed.description?.let {
Spacer(modifier = Modifier.height(8.dp))
Text(
text = it,
style = MaterialTheme.typography.body2
)
}
}
}
}
}
I think I am doing well with implementation LazyColumn and DataSet. But I am not sure with the expendable state in rememberSavable. Please emphersize the part.
//you can save expandedState by remember if you don't want to save it across scrolling
var expandedState by rememberSaveable {
mutableStateOf(breed.isExpended)
}
val rotationState by animateFloatAsState(
targetValue = if (expandedState) 180f else 0f
)
val image = rememberCoilPainter(
request = breed.url,
fadeIn = true,
fadeInDurationMs = 500
)

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

animation o a lazycolumn android - android

Related

Auto scrolling pager not working properly in Android Jetpack Compose

My lazycolumn items and my textfield glide on the screen when the keyboard is opened in jetpack compose

Recomposition every time on lazy column jetpack compose

Sorting List Items in LazyColumn - Android Jetpack Compose

Expendable Item with LazyColumn is not smooth while scrolling in Jetpack Compose

Categories

Resources