Make NEXT button in HorizontalView to scroll through different ImageView

Question

I have an HorizontalView. Inside, there is a LinearLayout where I add multiple ImageView through code. I want to implement the NEXT and PREVIOUS button so it scrolls automatically. I also want to hide the buttons when I reach the end of my HorizontalView.

https://i.sstatic.net/WnPkm.jpg

I don't know how to do it.

Edit: This CardView is inside of a recyclerView.

Here is the XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="350dp"
    android:layout_gravity="center"
    android:layout_margin="8dp"
    card_view:cardCornerRadius="4dp"
    >

    <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="1"
        android:paddingTop="5dp">

        <TextView
            android:id="@+id/nombrecito"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"

            android:maxLines="1"
            android:textAppearance="@style/TextAppearance.AppCompat"
            android:textSize="20sp"
            android:fontFamily="fonts/rugs_font.otf"/>

        <RelativeLayout>

            <HorizontalScrollView
                android:id="@+id/horizontal_scroll"
                android:layout_width="wrap_content"
                android:layout_height="254dp"                >

                <LinearLayout
                    android:id="@+id/linear"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"

                    android:fitsSystemWindows="false">

                    <ImageView

                        android:id="@+id/foto"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="-10dp"
                        android:contentDescription="fotografía"
                        android:scaleType="fitEnd"
                        android:src="@android:drawable/ic_menu_camera" />
                </LinearLayout>

            </HorizontalScrollView>
            <ImageButton
                android:shape="ring"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="#ceb06a"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_keyboard_arrow_left_black_48dp"/>
            <ImageButton
                android:shape="ring"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="#ceb06a"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_keyboard_arrow_right_black_48dp"/>
        </RelativeLayout>


        <GridLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:rowCount="1">

            <ImageButton
                android:id="@+id/btnLike"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="@android:color/transparent"
                android:inAnimation="@anim/slide_in_likes_counter"
                android:outAnimation="@anim/slide_out_likes_counter"
                android:src="@drawable/ic_heart_outline_grey" />

            <ImageButton
                android:id="@+id/btnShare"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:background="@android:color/transparent"
                android:onClick="share"
                android:src="@android:drawable/ic_menu_share" />

        </GridLayout>
    </GridLayout>
</android.support.v7.widget.CardView>

Answer 1

I think that the best way to implement this case, is to use RecyclerView, because ViewPager wont show you two pics without listing to certain pic

Make it horizontal with

mRecyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, true)

add recycler and two buttons in RelativeLayout, put buttons over the recycler in correct positins

for example, for left button use

android:layout_alignParent=true & android:layout_centerHorizontal="true"

To make buttons work use smth like

recyclerView.scrollToPosition(position);