Weird behavior when using with ViewPager

[akashpathak]

When using the RMSwitch with a ViewPager and a RecyclerView, the switches on the adjacent screen are showing incorrectly. The drawables are rendered incorrectly and clicking it does not move to the other side. See the attached picture,

The workaround is to reload the entire recyclerview by calling notifyDataSetChanged() but I prefer not to do that since it has a visible flash in the data.

[akashpathak]

@RiccardoMoro can you help on this issue please?

[RiccardoMoro]

Hi @akashpathak Sorry if I didn't answer before. Can you please post your recycler item layout? Also, can you give me the drawable you've been using? Thanks

[AkshayPathak]

Hi @RiccardoMoro, I am working on the same project as @akashpathak. Below is the recycler item layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="59dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/imageview_modes_content_app_icon"
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:layout_margin="16dp"
            tools:src="@drawable/circle" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical">

            <TextView
                android:id="@+id/textview_modes_content_app_name"
                style="@style/Base.TextAppearance.AppCompat.Body1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:lines="1"
                tools:text="ES File Explorer Manager" />

            <TextView
                android:id="@+id/textview_modes_content_app_category"
                style="@style/Base.TextAppearance.AppCompat.Small"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="Tools" />

        </LinearLayout>

        <com.rm.rmswitch.RMSwitch
            android:id="@+id/toggle_modes_content_app_enabled"
            android:layout_width="60dp"
            android:layout_height="32dp"
            app:checked="true"
            app:forceAspectRatio="false"
            app:enabled="true"
            app:switchDesign="android"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:switchToggleCheckedImage="@drawable/ic_check_black_24dp"
            app:switchToggleNotCheckedImage="@drawable/ic_block_24dp"
            app:switchBkgCheckedColor="@color/secondaryText"
            app:switchBkgNotCheckedColor="@color/secondaryText"
            android:clickable="true"
            android:layout_margin="16dp"/>

    </LinearLayout>

    <View style="@style/Divider" />

</LinearLayout>

The two drawables we are using are vector drawables. You can find the xml files both below: ic_check_black_24dp (checked image):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>

ic_block_24dp (not checked image):

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#e57373"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM4,12c0,-4.42 3.58,-8 8,-8 1.85,0 3.55,0.63 4.9,1.69L5.69,16.9C4.63,15.55 4,13.85 4,12zM12,20c-1.85,0 -3.55,-0.63 -4.9,-1.69L18.31,7.1C19.37,8.45 20,10.15 20,12c0,4.42 -3.58,8 -8,8z"/>
</vector>

Thank you for looking into this.

[AkshayPathak]

I just tried using png's instead of vector drawables and the problem still keeps happening. I also tried different styles (ie. slim instead of android) and that did not seem to work.

I am using this with a recyclerview inside a viewpager. Could that be an issue?

[IanWambai]

Having the same issue with a RecyclerView. If you put them in the list and scroll, the bottom switch images aren't loaded properly.

[Akshay-Rana-Gujjar]

I am having same issue

[wilsonszh]

I am having similar issue, so if the RMSwitch was first set to "GONE", and later change back to "VISIBLE" on button clicked, the switch image will not display properly until I switch it on/off again.. My guess was, ~if the switch image is not initially drawn, it will have some issue displaying (image not loaded in place)... (I could be wrong)~

Update:

• it was caused by my layout transition, once I remove it, it works fine!

Not sure if this will help, but good luck :D