Tuesday, 1 March 2022

Reduce opacity of non focused items

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:

enter image description here

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:

enter image description here

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