Hello Jetpack community,
I faced issue regarding Carousel.
Here I shared my code. in this code i want to perform autoscroll my images.
when i am focusing any of other view around carousel that time autoscroll will properly as expect working but when i move focus on carousel that time autoscrolling will stop.
and again move focus on any other view so again working fine.
I want to autoscrolling my all images without stop the autoscrolling features where the focus i don’t care about just autoscroll needed.
So anyone who know solution or hint regarding the issue was facing by me please help me out of this.
My Code
@ExperimentalTvMaterial3Api
@Composable
fun HeroBanner(
focusRequesters: MutableMap<Pair<String, Int>, FocusRequester>,
categoryItem: HomeLayout.CategoryItem,
cateItems: List<HomeLayout.CategoryItem.Item>?,
onFocusChange: (focusState: FocusState, pos: Int) -> Unit,
goToVideoPlayer: (pos: Int, item: HomeLayout.CategoryItem.Item) -> Unit,
) {
val carouselHeight = LocalConfiguration.current.screenHeightDp.dp.times(0.60f)
var carouselCurrentIndex by rememberSaveable { mutableIntStateOf(0) }
val carouselState = rememberCarouselState()
var isCarouselFocused by remember { mutableStateOf(false) }
LaunchedEffect(carouselState.activeItemIndex) {
carouselCurrentIndex = carouselState.activeItemIndex
}
val fr = remember { FocusRequester() }
focusRequesters[Pair(categoryItem.id, 0)] = fr
if (cateItems != null) {
Spacer(modifier = Modifier.height(20.dp))
cateItems.sortedBy { it.priority }
AnimatedContent(targetState = cateItems,
label = "Featured Carousel animation",
modifier = Modifier
.fillMaxWidth()
.height(carouselHeight)
.padding(start = 20.dp, end = 20.dp)
.focusRequester(fr)
.onFocusChanged {
onFocusChange(it, 0)
// Because the carousel itself never gets the focus
isCarouselFocused = it.hasFocus
}) { itemState ->
Carousel(modifier = Modifier
.onFocusChanged {
Log.e("TAG", "HeroBanner: focus ${it.isFocused}")
// onFocusChange(it, 0)
}
.fillMaxSize()
.semantics {
contentDescription = "MoviesCarousel"
}
.handleDPadKeyEvents(onEnter = {
goToVideoPlayer(
carouselState.activeItemIndex,
cateItems[carouselState.activeItemIndex]
)
}),
itemCount = itemState.size,
carouselState = carouselState,
carouselIndicator = {
Box(modifier = Modifier
.padding(10.dp)
.graphicsLayer {
clip = true
shape = ShapeDefaults.ExtraSmall
}
.align(Alignment.BottomEnd)) {
CarouselDefaults.IndicatorRow(
modifier = Modifier
.align(Alignment.BottomEnd)
.padding(8.dp),
itemCount = itemState.size,
activeItemIndex = carouselState.activeItemIndex,
)
}
},
contentTransformStartToEnd = CarouselDefaults.contentTransform,
contentTransformEndToStart = CarouselDefaults.contentTransform,
autoScrollDurationMillis = 5000,
content = { index ->
val item = remember(index) { itemState[index] }
HeroBannerContent(item = item, categoryItem = categoryItem) {
goToVideoPlayer(carouselState.activeItemIndex, item)
}
})
}
Spacer(modifier = Modifier.height(10.dp))
}
}
Here when Log : HeroBanner: focus false
That time autoscroll will working fine.
but when i move focus on Carousel then
Log : HeroBanner: focus true
So now autoscrolling will stop.
My requirement is autoscroll continues even carousel is focused or not.
Note : This code is for Android Tv app.