Richard Graham

    Richard Graham

    1 year ago
    Hi there. Has anyone had trouble with using Compose in an existing screen? I have an Composable button that handles its own text. When the text is updated the whole element flashes on screen and appears to enter on the left or right side depending on whether the text is expanding or shrinking. I've tried adding
    android:animateLayoutChanges="false"
    to the xml file and have played around with
    AnimatedContent()
    and
    .animateContentSize()
    to no avail. I'm assuming it has something to do with the whole element being updated for some reason but am out of ideas on how to fix it, any thoughts?
    Update: managed to fix this - it looks like if you're going to combine the old UI system with compose with something like this:
    fun bind() {
                binding.root.apply {
                    findViewById<ComposeView>(R.id.filter_button).setContent {
                        Random.Theme {
                            FilterButton()
                        }
                    }
                }
            }
    Adding anything like padding or margin to the filterButton defined in XML will cause the element to re-render each time it is updated. E.g This works:
    <androidx.compose.ui.platform.ComposeView
            android:id="@+id/filter_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>
    This doesn't:
    <androidx.compose.ui.platform.ComposeView
            android:id="@+id/filter_button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginTop="6dp"
            android:paddingTop="@dimen/find_match_transactions_header_top_padding"
            android:paddingEnd="@dimen/material_cell_side_padding"
            android:paddingBottom="@dimen/find_match_transactions_header_bottom_padding"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>