I have a list of items which are displayed on the home screen, the list is vertically scrollable. At the moment I have 5 items but items are added as the user approaches the last item creating an infinite scroll.
I want to have all the items faded out but the one in focus should be fully trasparent like so:
As you can see the item to the left and right are faded and are a little smaller whilst the item in focus is fully transparent and is slightly bigger indicating that this is the item in focus.
This is what I have so far:
I'm struggling to achieve this.
This is my Composable
list:
@Composable
fun HomeScreenList() {
val homeScreenItems = getItems()
val listState = rememberLazyListState(Int.MAX_VALUE / 2)
LazyRow(
state = listState,
modifier = Modifier
.fillMaxWidth(),
contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
) {
items(Int.MAX_VALUE, itemContent = {
val index = it % homeScreenItems.size
HomeScreenItem(model = homeScreenItems[index])
})
}
}
And the HomeScreenItem
:
@Composable
fun HomeScreenItem(model: HomeScreenViewModel) {
Card(
modifier = Modifier
.padding(horizontal = 10.dp, vertical = 20.dp),
elevation = 2.dp,
backgroundColor = model.mBackgroundColor,
shape = Shapes.large,
) {
Row {
Icon(model.mIcon)
}
}
}
@Composable
private fun Icon(id: Int) {
Image(
painter = painterResource(id = id),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.padding(20.dp)
.size(100.dp)
)
}
Does anyone know how I should achieve this?
from Reduce opacity of non focused items
No comments:
Post a Comment