I want to implement Image Gallery using View Pager with static footer. In footer I have 3 button download, share and Favorite

Question

Now the problem is that when I like the first image remaining images also show the red heart icon and vice versa...can any body help me how to change the icon in footer by swiping the image?

By clicking on favorite button ivFavImage the following listener is called

        if (databaseHandler.checkData(DatabaseModel(stringPaths[vpSingleItem.currentItem]))) {

            ivFavImage.setImageResource(R.drawable.ic_favorite_red)

        } else if (!databaseHandler.checkData(DatabaseModel(stringPaths[vpSingleItem.currentItem]))){

            ivFavImage.setImageResource(R.drawable.ic_favorite_white)

        }

        ivFavImage.setOnClickListener {
            if (!databaseHandler.checkData(DatabaseModel(stringPaths[vpSingleItem.currentItem]))) {
                databaseHandler.insertData(DatabaseModel(stringPaths[vpSingleItem.currentItem]))
                ivFavImage.setImageResource(R.drawable.ic_favorite_red)
                Toast.makeText(context, "Image added to Favorite Designs", Toast.LENGTH_SHORT)
                    .show()
            } else if (databaseHandler.checkData(DatabaseModel(stringPaths[vpSingleItem.currentItem]))) {
                databaseHandler.deleteImage(DatabaseModel(stringPaths[vpSingleItem.currentItem]))
                ivFavImage.setImageResource(R.drawable.ic_favorite_white)
                Toast.makeText(context, "Image removed from Favorite Designs", Toast.LENGTH_SHORT)
                    .show()
            }
        }

I have declared the layout as this

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:orientation="vertical"
        android:weightSum="1">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/vpSingleItem"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.9" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="0.1"
            android:background="@color/colorPrimaryDark">

            <ImageView
                android:id="@+id/ivDownloadImage"
                android:layout_width="30dp"
                android:layout_height="match_parent"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:layout_marginStart="10dp"
                android:src="@drawable/download_white" />

            <ImageView
                android:id="@+id/ivFavImage"
                android:layout_width="30dp"
                android:layout_height="match_parent"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_favorite_white" />

            <ImageView
                android:id="@+id/ivShareImage"
                android:layout_width="30dp"
                android:layout_height="match_parent"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:src="@drawable/share_icon" />

        </RelativeLayout>

    </LinearLayout>

Answer 1

change icon's state in viewPager.setOnPageChangeListener()

get icon state from your model and change footer based on current position of viewPager