I have a #Composable Text("Dropbox") whose Modifier also implements a
clickable {
//..
}
But when I tapping on it
, it gets a grey highlight!?
I do not want this grey hightlight. Can I get rid of this?
Here indication is responsible for showing the highlight.
So making indication = null should do the job
.clickable(
onClick = {
//..
},
indication = null,
interactionSource = remember { MutableInteractionSource() }
)
Related
I am experiencing flicker or overlapping when having a compose tabBar implementation with webviews as content. If I change the webviews with another view (ex. Box{Text}) it does not happen.
It seems as if the webview is filling more than it's border for a short while (See .gif below)
Update: I have been looking into if it was a recomposition issue (hence the simple test project) and I cannot identify any reason why it should recompose the tab bar.
When I add height to the tab bar, I can see the text is in the tab bar at all times.
A test project can be fetched here: https://github.com/msuhl/ComposeTabTest and is a very standard implementation
#Composable
private fun MyTabRow(
pagerState: PagerState,
coroutineScope: CoroutineScope,
) {
TabRow(
selectedTabIndex = pagerState.currentPage,
indicator = { tabPositions ->
TabRowDefaults.Indicator(
Modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
color = MaterialTheme.colors.secondary
)
},
) {
tabRowItems.forEachIndexed { index, item ->
Tab(
selected = pagerState.currentPage == index,
onClick = { coroutineScope.launch { pagerState.animateScrollToPage(index) } },
icon = {
Icon(imageVector = item.icon, contentDescription = "")
},
text = {
Text(
text = item.title,
maxLines = 2,
overflow = TextOverflow.Ellipsis,
)
},
)
}
}
HorizontalPager(
count = tabRowItems.size,
state = pagerState,
) {
ShowWebView("http://google.com")
}
}
It was related to the lazy loading of webview and I was not able to make a direct fix.
Instead I ended up with a working, although kind og hackish, solution
If a LazyColumn is introduced around the webview, the issue does not occur.
In code:
HorizontalPager(
count = tabRowItems.size,
state = pagerState,
) {
LazyColumn {
item {
ShowWebView(url)
}
}
}
I am trying to add scrolling behaviour to a Column by setting verticalScroll(state = rememberScrollState()) modifier.
I checked out some examples in the official compose-jb repository, and it seems that that is the right way to do it, yet in my case the content is not scrollable.
Here the full code:
#Composable
#Preview
fun App() {
MaterialTheme {
// add scroll behaviour
val stateVertical = rememberScrollState(0)
Column(modifier = Modifier.verticalScroll(state = stateVertical)) {
repeat(100){
Text("item: $it")
}
}
}
}
fun main() = application {
Window(onCloseRequest = ::exitApplication) {
App()
}
}
Any ideas why it does not work in my case?
The Column is populated with 100 Text items, more than enough to exceed the default window height.
It actually works!
For some reason I was trying to use click and drag... which lead me to confusion.
I am trying to figure out the right way to remember a color between re-compose, where the color is used in the parent, but calculated in a child.
var color by remember { mutableStateOf(Color.Transparent) }
Row(Modifier.height(100.dp)) {
Box(
Modifier
.width(6.dp)
.fillMaxHeight()
.background(color)
)
Column {
HorizontalPager(
count = pages.size,
state = pagerState
) { page ->
val page = pages[page]
color = page.color
}
}
}
However I am running into two issues
When the color changes when I page seem to get into an infinite re-compose.
The color seems to be a blend of the new page color and the previous page color.
Rather than having color as state, which is causing your recomposition loop. You could derive the same thing by hoisting your pagerState object and referencing the current page. Something like the following:
val pagerState = rememberPagerState()
var color = remember(pagerState.currentPage) { pages[pagerState.currentPage].color }
Row(Modifier.height(100.dp)) {
Box(
Modifier
.width(6.dp)
.fillMaxHeight()
.background(color)
)
Column {
HorizontalPager(
count = pages.size,
state = pagerState
) { page ->
}
}
}
This code creates a ClickableText element in Jetpack Compose Composable:
ClickableText(
text = forgotPasswordAnnotatedString,
onClick = {
context.startActivity(intent)
},
modifier = Modifier
.padding(top = mediumPadding)
)
The annotated string is defined here to make the text look like a link:
val forgotPasswordAnnotatedString = buildAnnotatedString {
append(stringResource(R.string.forgot_password))
addStyle(
style = SpanStyle(
textDecoration = TextDecoration.Underline,
color = Color.White,
fontSize = 16.sp,
fontWeight = FontWeight.Medium
),
start = 0,
end = 21,
)
}
When I encounter this text using the TalkBalk screen reader in Android, the screenreader does not make it clear that this is clickable text that will do something which tapped on. The reader just reads the text.
Is there a way to make it clear to the screen reader that this text is interactive? Otherwise should I just use a button and style it to look like a link?
It looks like your intention is for the whole text to be clickable? In which you best option is probably a TextButton as suggested by
Gabriele Mariotti.
But if you wan't only part of the link to be clickable, or to have multiple clickable sections, the best I've been able to land on is to draw an invisible box overtop of the Text. It means that I can control the touch target of the clickable area to be at least 48.dp and can use the semantics{} modifier to control how a screen reader interprets it.
Would welcome any suggestions.
// remember variables to hold the start and end position of the clickable text
val startX = remember { mutableStateOf(0f) }
val endX = remember { mutableStateOf(0f) }
// convert to Dp and work out width of button
val buttonPaddingX = with(LocalDensity.current) { startX.value.toDp() }
val buttonWidth = with(LocalDensity.current) { (endX.value - startX.value).toDp() }
Text(
text = forgotPasswordAnnotatedString,
onTextLayout = {
startX.value = it.getBoundingBox(0).left // where 0 is the start index of the range you want to be clickable
endX.value = it.getBoundingBox(21 - 1).right // where 21 is the end index of the range you want to be clickable
}
)
Note that buttonPaddingX is relative to the Text position not the Window, so you may have to surround both in a Box{} or use ConstraintLayout.
Then to draw the invisible box
Box(modifier = Modifier
.sizeIn(minWidth = 48.dp, minHeight = 48.dp) // minimum touch target size
.padding(start = buttonPaddingX)
.width(buttonWidth)
// .background(Color.Magenta.copy(alpha = 0.5f)) // uncomment this to debug where the box is drawn
.clickable(onClick = { context.startActivity(intent) })
.semantics {
// tell TalkBack whatever you need to here
role = Role.Button
contentDescription = "Insert button description here"
}
)
In my code I'm using pushStringAnnotation(TAG, annotation) rather than reference string indexes directly. That way I can get the start and end index of the clickable area with annotatedString.getStringAnnotations(TAG,0,annotatedString.length).first(). Useful if there a multiple links within the text.
It's disappointing that ClickableText doesn't have accessibility in mind from the get go, hopefully we'll be able to use it again in a future update.
Adding .semantics.contentDescription to the Modifier changes what is read by the screen reader. I had to word contentDescription to make it clear that this was a link to reset the your password.
The screen reader still doesn't recognize the element a clickable but hopefully the description will be useful to convey to the user that this element is interactive.
ClickableText(
text = forgotPasswordAnnotatedString,
onClick = {
context.startActivity(intent)
},
modifier = Modifier
.padding(top = mediumPadding)
// new code here:
.semantics {
contentDescription = "Forgot your password? link"
}
)
Edit: Also happens when I swap ConstraintLayout for a Box using alignment as well...
Seems like AnimatedVisibility doesn't play well with ConstraintLayout in JP Compose at the moment.
AnimatedVisibility(
visible = entryListState.firstVisibleItemIndex > 3,
enter = fadeIn() + expandIn(expandFrom = Alignment.Center),
exit = fadeOut() + shrinkOut(shrinkTowards = Alignment.Center)
) {
ExtendedFloatingActionButton(
modifier = Modifier.constrainAs(scrollToTop) {
start.linkTo(parent.start)
bottom.linkTo(parent.bottom)
},
text = { Text(text = "TOP") },
onClick = { scope.launch { entryListState.animateScrollToItem(0) } }
)
}
The ( TOP ) fab should appear in the bottom left corner, but instead I get
When I remove the AnimatedVisibility wrapper, everything works fine. :( I know I can work around this, but I'm curious if there's something I'm doing incorrectly with the configuration of the AnimatedVisibility composable?
Turns out I was thinking about AnimatedVisibility all wrong. It's just another Composable. I needed to lift the FAB's modifiers re: positioning to the AnimatedVisibilty's modifiers.