Has anyone found a solution to support Accessible form validation in jetpack compose

I am working on an existing project with a very big recycler view (chat feed) i have a component that is written in compose and is introduced by inflating an XML viewHolder with

ComposeView

in it. When i try to measure this view i get

IllegalStateException: Cannot locate windowRecomposer; View androidx.compose.ui.platform.ComposeView{6542dd8 V.E...... ......I. 0,0-0,0 #7f0a0206 app:id/composeView} is not attached to a window

If i dont try to measure the view everything works fine. It crashes even if i dont invoke

setContent

What can be the problem?

I'm running into a strange issue. The following code should update the text field value, and close the keyboard. However, the onValueChange from the TextField is resetting it back to the prior value right after the selectSuggestion changes it. If I add a 20 ms delay between the two calls then it behaves correctly. What's going on?

.clickable {
    coroutineScope.launch {
        viewModel.selectSuggestion(suggestion)
        focusManager.clearFocus()
    }
}

TextField(
    value = viewModel.textFieldValue,
    onValueChange = viewModel::textFieldValueChange
)

var textFieldValue by mutableStateOf(TextFieldValue())
    private set

fun selectSuggestion(suggestion: String) {
    textFieldValue = TextFieldValue(
        text = suggestion,
        selection = TextRange(suggestion.length)
    )
}

fun textFieldValueChange(value: TextFieldValue) {
    textFieldValue = value
}

Hi. I'm currently using Compose 1.4.0-alpha03 and I'm experiencing a weird behavior where updating bottom padding of

PaddingValue

which is then passed to

LazyColumn(contentPadding = ...)

doesn't actually use the new padding inside of the

rememberLazyListMeasurePolicy

. The bottom padding is updated with the keyboard height everytime it appears/disappears. I'm placing two breakpoints 1. Inside of the

internal fun LazyList(...)

function on

state.placementAnimator = placementAnimator

line. 2. Inside of the

private fun rememberLazyListMeasurePolicy()

function on

checkScrollableContainerConstraints()

line. Then I'm clicking a textfield to make the keyboard appear. Once the first breakpoint is hit I first check that the bottom padding is the value I'm expecting to see (~300dp) then I place a new breakpoint inside of

PaddingValuesImpl.equals()

method. Then I resume the app,

PaddingValuesImpl.equals()

is getting called a couple of times but it's called not from the place I'm expecting it to get called from. I'm expecting a call from

remember<LazyLayoutMeasureScope.(Constraints) -> MeasureResult>() { ... }

line which is in

rememberLazyListMeasurePolicy()

method but it never gets called from that method. Then the second breakpoint which is on

checkScrollableContainerConstraints()

line is getting hit and when I check the contentPadding I'm seeing the old value (24dp). So I'm assuming that the

remember<LazyLayoutMeasureScope.(Constraints) -> MeasureResult>() { ... }

doesn't work for some reason in this situation so the lambda is not re-remebered in other words it's the previous lambda that captured the previous contentPadding. I would really like to see what's going on inside

remember<LazyLayoutMeasureScope.(Constraints) -> MeasureResult>() { ... }

but I can't place a breakpoint there because it tells me to download the sourse code and when I click download it can't find it. I tried installing the

compose-runtime

dependency but it still won't show me the source code of that

remember<LazyLayoutMeasureScope.(Constraints) -> MeasureResult>() { ... }

function. This feels like a bug in that one remember function. However I also tried to create a new project and copy some of the code to try and reproduce the issue but it works just fine there (same compose version). So I'm kinda lost now. I'm not sure I should report this on the issue tracker because I have no MRE and it also works in a new test project but doesn't work in the main project. The app I'm developing is open-source so I can provide the whole project if needed.

I'm trying to add functionality in Showkase that is capable of rendering a preview with an alert inline as opposed to it taking over the screen. Here's some more information about the issue - https://github.com/airbnb/Showkase/issues/235. I'm looking for clues on how I can do this 🤔 I'm guessing there's some inspiration somewhere in the Android Studio Preview tooling but haven't been able to find anything useful. Anyone have ideas?

floatingActionButton = {
    AnimatedVisibility(
        visible = !sheetState.isVisible,
        enter = fadeIn(),
        exit = fadeOut(),
    ) {
        FloatingActionButton(
            onClick = {
                ...
            }
        ) {
            Icon(imageVector = Icons.Rounded.Edit, contentDescription = null)
        }
    }
},

I'm trying to add visibility animation using

AnimatedVisibility

on my FAB, but when the animation is running, the FAB shadow change into weird box shape. How can I fix this? Thanks in advance.

Hi all, I am trying to test a simple @Composable

someComposable()

with a

BasicTextField

,

Text

and

LaunchedEffect

but its showing weird behaviour. When I call

someComposable()

,

onFocusChanged

event occurs first and then

LaunchedEffect

is called and hence Text does not show. But during testing,

LaunchedEffect

is called first and then

onFocusChanged

is called and Text shows up. I can’t figure out why the order is different in simple calling and in testing. Kindly guide me if someone has any idea what is going on. Code attached in the thread.

hello all! Any ideas how to share with some composable screens a view model that has been created in the MainActivity?

class MainActivity : FragmentActivity() { // I use the FragmentActivity because of biometrics

    private val viewModel: MainViewModel by viewModels()

    MyAppTheme {
          val state by viewModel.state.collectAsStateWithLifecycle()
          val incomingEvent = viewModel.incomingEvent

          MyApp(
              isUserRegistered = state.isUserRegistered,
              hasUserProfile = state.hasUserProfile,
              incomingEvent = incomingEvent
          )
    }
}

@Composable
fun MyApp(
   isUserRegistered: Boolean,
   hasUserProfile: Boolean,
   incomingEvent = incomingEvent
) {
    val navController = rememberAnimatedNavController()

    if (isUserRegistered) {
        NavigationHost(
            Screen.OnboardingDestination.route,
            navController
        )
    } else {
        NavigationHost(
             Screen.MainBashboard.route,
             navController
        )
    }

    when (incomingEvent) {
        is profileEvent -> { 
            navController.navigateToProfileScreen(incomingEvent.getSomeArgs)
        }
        is settingsEvent -> { 
            navController.navigateToSettingsScreen(incomingEvent.getSomeArgs)
        }
        ...
    }
}

Now I need to access the

MainViewModel

from other composable screens that are in the NavigationHost. The reason is that I need to show a specific screen based on an incoming event that I collect from a flow in the

MainViewModel

. The

MainVIewModel

holds some data in memory that I need to access them only from other composables.

after I added this to my `buildSrc/build.gradle`:

dependencies {
    implementation "com.android.tools.build:gradle:7.3.1"
}

I'm getting an error when trying to build a module that uses compose:

> Task :app:compileDebugKotlin FAILED
e: org.jetbrains.kotlin.backend.common.BackendException: Backend Internal error: Exception during IR lowering
...
(more in snippet)

I have no idea why should the

implementation

dependency of

buildSrc

affect

app

module in such a way 😮 any ideas?

does anyone have a link to a place where I could read about examples on testing LazyColumn and kind of more complex usecases for tests?

How can i put together LazyColumn and LazyStaggeredVerticalGrid? The titles are already in a separate item {}

Does anyone have any experience adding accessibility “links” to compose annotated strings? When you add clickable segments to a

SpannableString

you get this behavior in XML.

I’m having a problem testing my input field in a robolectric test. I have a custom phone number visual transformation, and i’m trying the following test code:

composeRule.onNodeWithTag("input2")
                .performTextReplacement("5558675309")

And this causes the following error

offset(14) should be less than line limit(0)
java.lang.IndexOutOfBoundsException: offset(14) should be less than line limit(0)
	at android.text.TextLine.measure(TextLine.java:383)
	at android.text.Layout.getHorizontal(Layout.java:1214)
	at android.text.Layout.getHorizontal(Layout.java:1191)
	at android.text.Layout.getPrimaryHorizontal(Layout.java:1161)
	at android.text.Layout.getPrimaryHorizontal(Layout.java:1150)
	at androidx.compose.ui.text.android.LayoutHelper.getDownstreamHorizontal(LayoutHelper.kt:344)
	at androidx.compose.ui.text.android.LayoutHelper.getHorizontalPosition(LayoutHelper.kt:226)
	at androidx.compose.ui.text.android.TextLayout.getPrimaryHorizontal(TextLayout.kt:330)
	at androidx.compose.ui.text.android.TextLayout.getPrimaryHorizontal$default(TextLayout.kt:329)
	at androidx.compose.ui.text.platform.AndroidParagraph.getCursorRect(AndroidParagraph.android.kt:328)

I’m guessing this is due to the use of the visual transformation. Anyone have any ideas?

I am trying to test the values emitted by a

MutableState

using

snapshotFlow

and turbine. A simplified version of the class looks like like this

class Foo(scope: CoroutineScope) {
    val bar = mutableStateOf(1)

    init {
        scope.launch {
            delay(1000)
            bar.value = 2
        }
    }
}

The test method looks like this

@Test
fun test() {
    val testScope = TestScope(StandardTestDispatcher())
    testScope.runTest {
        val foo = Foo(testScope)
        snapshotFlow { foo.bar.value }
            .test {
                val item1 = awaitItem()
                println(item1)
                val item2 = awaitItem()
                println(item2)
            }

    }
}

My expectation was that it would print

1

followed by

2

. This test always fails with timeout after printing

1

. When using

snapshotFlow

outside of the test environment it works as expected. I am unclear on what I am doing wrong and was looking for some guidance. Thank you.

I have a list of views in a `Column`:

A

,

B

,

C

If I add a view

D

to the end of the list to make

A

,

B

,

C

,

D

then

D

is merely added and

A

,

B

,

C

are not recomposed. However if I add it to the head of the list

D

,

A

,

B

,

C

then all are recomposed, I do not want this! I tried setting

layoutId

as a hint to Compose/Column that

A

,

B

,

C

remain the same elements, but this didn't work. Is there some mechanism I'm missing?

Does it possible to change the order so I get 1 2 3?

Row {
    Text(text = "2")
    Text(text = "3")
    Text(text = "1")
}

Hello, I'm reading Compose guidelines and have a question. In the guidelines, there are rules:

Element functions MUST accept a parameter of type

Modifier

. This parameter MUST be named “`modifier`” and MUST appear as the first optional parameter in the element function's parameter list

and

Layout functions SHOULD use the name “`content`” for a

@Composable

function parameter if they accept only one

@Composable

function parameter.

Layout functions SHOULD use the name “`content`” for their primary or most common

@Composable

function parameter if they accept more than one

@Composable

function parameter.

Layout functions SHOULD place their primary or most common

@Composable

function parameter in the last parameter position to permit the use of Kotlin's trailing lambda syntax for that parameter.

So an example of the combination would be

@Composable
fun FancyButton(
    text: String,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit,
) {

What if my Composable accepts a modifier and a lambda? Should the lambda appears after or before modifier (given that it's not optional parameter)? My thinking is that I should move the lambda to the bottom of parameter list to leverage trailing lambda like:

@Composable
fun FancyButton(
    text: String,
    modifier: Modifier = Modifier,
    onClick: () -> Unit,
) {

But in the guideline page, I often see

@Composable
fun FancyButton(
    text: String,
    onClick: () -> Unit,
    modifier: Modifier = Modifier
) {

Can anyone explain the reason of having the lambda before the modifier?

Is it safe to use Compose Compiler 1.4.0-alpha02 in production? We’re dying to release our app with Kotlin 1.7.21 support. I thought Compose Compiler would have shorter release cycle than regular Compose UI library, but it’s been a month since last release of alpha

Looking at design documentation of NavigationBar from material3, the

secondaryContainer

is the property used to change active item color. But, apparently, it completely ignores the alpha channel. Any Idea why?

@Composable
fun NavigationBarTheme(content: @Composable () -> Unit) {
    MaterialTheme(
        colorScheme = lightColorScheme(
            secondaryContainer = orange.copy(alpha = 0.3f) //val orange = Color(0xFFFF5704)
        ),
        ...
    )
}

I couldn’t find a mention of this, is it at all possible to have rounded corners for a bottomsheet opened from navigation

bottomSheet(route = "") { 
    content()
}

I tried having a card with rounded corners as root, also setting bg to transparent just gives white bg thanks!

Is there a way to access (

println

) console output from code executing in the context of a Compose Interactive Preview?

BottomSheetScaffold or ModalBottomSheetLayout depending on your use case.

Looking at Tabs specs from material3 the inactive state color is

On surface variant

. But the implementation we have:

package androidx.compose.material3

@Composable
fun Tab(
    ...
    selectedContentColor: Color = LocalContentColor.current,
    unselectedContentColor: Color = selectedContentColor,
)

Forcing me to do this:

Tab(
    ...
    unselectedContentColor = MaterialTheme.colorScheme.onSurfaceVariant
)

Shouldn’t this be default value and use an approach similar to the one

Switch

uses:

colors: SwitchColors = SwitchDefaults.colors()

?

Anyone want to do code review a search field with "debounce"? My teammate is unsure of the solution that she wrote, but I think it looks fine?

@HiltViewModel
class MyViewModel @Inject constructor(val appState: AppStateHolder) : ViewModel() {
  val searchText = MutableStateFlow("")

  init { viewModelScope.launch { searchText.debounce(1000).collectLatest { doSearch(it) } } }

  fun updateSearchText(text: String) { searchText.update { text } }

  fun doSearch() {...}
}

BasicTextField(value = searchText, onValueChange = { viewModel.updateSearchText(it) } ...

is there a better alternative than this for navigation compose? and don't say you should send only id.

"product/{productId}?picture={productPicture}&name={prodName}&prodType={chatType}&groupId={groupId}&amount={prodAvailable}"

Hello, I have a question about constraint Compose components to use certain colors from the theme. Let’s say I have a disclaimer component that can only use red or green and nothing else. How can I conform this by having a color parameter?

How is

DismissableDrawerSheet

in

material3

If I have a

Text

which is the only thing in the logical row, is there some performance to be gained (as it was with Views) by setting its width to

fillMaxWidth

? (match_parent was said to be cheaper than wrap_content width)