'Horizontal RecyclerView Acessibility order

I setup a RecyclerView as horizontal, but the traversal order is completely messed up when using talkback. Only the fully-visible views in RecyclerView's item views is being read by talkback. When talkback reaches the last fully-visible view at the item view, it scrolls to the next page instead of keep reading the remaining views on item view.



Solution 1:[1]

Item View:

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:layout_marginStart="@dimen/8_dp"
    android:focusable="false"
    android:orientation="vertical"
    android:importantForAccessibility="no"
    android:padding="@dimen/20_dp">

    <TextView
        android:id="@+id/tv_plan_coverage_title"
        style="@style/FonteItauBold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/seguros_ff6800"
        android:textSize="@dimen/22_sp"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@string/plans_card_title" />

    <TextView
        android:id="@+id/tv_plan_coverage_subtitle"
        style="@style/FonteItauBold"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/24_dp"
        android:layout_marginBottom="@dimen/18_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:text="@string/plans_card_subtitle"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tv_plan_characteristics_1"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_coverage_title" />

    <TextView
        android:id="@+id/tv_plan_characteristics_1"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/tv_plan_characteristics_2"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_coverage_subtitle"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_2"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_1"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_3"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_2"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_4"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_3"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_5"
        style="@style/FonteItauRegular"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_4"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_6"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_5"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_7"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_6"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_characteristics_8"
        style="@style/FonteItauRegular"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/10_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:textColor="@color/seguros_262220"
        android:textSize="@dimen/componentesui_default_text_16_sp"
        tools:visibility="gone"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_7"
        tools:text="@string/plans_card_coverage_tools" />

    <TextView
        android:id="@+id/tv_plan_value_title"
        style="@style/FonteItauBold"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/24_dp"
        android:layout_marginBottom="@dimen/24_dp"
        android:focusable="true"
        android:importantForAccessibility="yes"
        android:text="@string/plans_card_value_title"
        android:textSize="@dimen/text_14sp"
        app:layout_constraintBottom_toTopOf="@id/table"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/tv_plan_characteristics_8"
        app:layout_constraintVertical_bias="0" />

    <TableLayout
        android:id="@+id/table"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/24_dp"
        android:stretchColumns="*"
        app:layout_constraintBottom_toTopOf="@id/bt_dental_plan_get_in_contact"
        app:layout_constraintVertical_bias="1">

        <TableRow>
            <TextView
                android:id="@+id/value_money"
                style="@style/FonteItauBold"
                android:focusable="true"
                android:importantForAccessibility="yes"
                android:textSize="@dimen/text_20sp"
                tools:text="R$ 269,90" />

            <TextView
                android:id="@+id/value_money_max"
                style="@style/FonteItauBold"
                android:focusable="true"
                android:gravity="start"
                android:importantForAccessibility="yes"
                android:textSize="@dimen/text_20sp"
                tools:text="R$ 269,90" />
        </TableRow>

        <TableRow>

            <TextView
                android:id="@+id/value_lifes"
                style="@style/FonteItauRegular"
                android:focusable="true"
                android:importantForAccessibility="yes"
                android:textSize="@dimen/text_14sp"
                tools:text="2-29 vidas" />

            <TextView
                android:id="@+id/value_lifes_max"
                style="@style/FonteItauRegular"
                android:focusable="true"
                android:gravity="start"
                android:importantForAccessibility="yes"
                android:textSize="@dimen/text_14sp"
                tools:text="30-99 vidas" />
        </TableRow>
    </TableLayout>

    <Button
        android:id="@+id/bt_dental_plan_get_in_contact"
        style="@style/BotaoSecundarioItau"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/16_dp"
        android:text="@string/plans_card_coverage_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.6"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 anonymous