[FIXED] How to disable switch's response to touch event in android compose ui?

Issue

I want to turn my xml layout below to a compose code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/dp_15"
        android:layout_marginTop="@dimen/dp_15"
        android:layout_marginBottom="@dimen/dp_15"
        android:layout_weight="1"
        android:ellipsize="end"
        android:fontFamily="sans-serif"
        android:maxLines="2"
        android:textColor="@android:color/black"
        android:textSize="16sp"
        tools:text="Title" />

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switch_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginEnd="@dimen/dp_10"
        android:clickable="false"
        android:focusable="false"
        android:visibility="visible"
        tools:visibility="visible" />

</LinearLayout>

Here is my compose code:

    @Composable
    fun TestUI(onRowClick: () -> Unit) {
        val switchOpen = remember {
            mutableStateOf(false)
        }
        Row(Modifier.clickable { switchOpen.value = !switchOpen.value }) {
            Text(
                text = "Go Go Go Go Go Go Go ",
                Modifier
                    .weight(1f)
                    .padding(15.dp),
                maxLines = 2
            )
            Switch(
                checked = switchOpen.value, onCheckedChange = null,
                Modifier
                    .align(Alignment.CenterVertically)
                    .padding(10.dp)
                    .clickable(enabled = false) { }
                    .focusable(enabled = false)
            )
        }
    }

But when I use xml layout, I can disable a SwitchCompat to respond to touch event. And I can toggle the SwitchCompat by click everywhere of the LinearLayout.

I try to ensure the same effect by compose. But It's not exactly the same. The click effect of the Switch seems already disabled. I can click the row to toggle the Switch except for the Switch region, It looks like the Switch can still consume the click event.

I click here, the Switch toggled

I click the Switch region, there has none effect.

I am a new user of compose ui, I hope anybody can give me some advice.

Solution

As far as I see, you should not add clickable to child components.
Parent is not detecting child gestures if you add clickable for each component.

        Row(
            Modifier
                .clickable { switchOpen.value = !switchOpen.value }
        ) {
            Text(
                modifier = Modifier,
                text = "Go Go Go Go Go Go Go ",
                maxLines = 2
            )
            Switch(
                checked = switchOpen.value, onCheckedChange = null,
                Modifier
                    .align(Alignment.CenterVertically)
                    .padding(10.dp))
        }      

Answered By - talhatek
Answer Checked By - Timothy Miller (JavaFixing Admin)