Left-right arrow indicators over a ViewPager

Question

I want to show left and right arrows over my ViewPager, to indicate swiping.

I added two ImageButtons over the ViewPager-element but those areas then block the ViewPager from triggering the "swiping".

I also want presses on those arrows to trigger the fragment to change accordingly.

In short: The ImageButtons should not interfere with swiping but they should register pressing.

How can I achieve this? Thanks!

Answer 1

The code below worked for me perfectly well. NB: Use FrameLayout as it allows overlapping views

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="wrap_content"
                android:layout_height="200dp" />

            <ImageButton
                android:id="@+id/left_nav"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_gravity="center_vertical|left"
                android:src="@drawable/ic_chevron_left_black_24dp" />

            <ImageButton
                android:id="@+id/right_nav"
                android:layout_width="48dp"
                android:layout_height="48dp"
                android:layout_gravity="center_vertical|right"
                android:src="@drawable/ic_chevron_right_black_24dp" />

        </FrameLayout>

The following part I used to handle ImageButton's click events

viewPager = (ViewPager) view.findViewById(R.id.viewpager);

leftNav = (ImageButton) view.findViewById(R.id.left_nav);
rightNav = (ImageButton) view.findViewById(R.id.right_nav);

// Images left navigation
    leftNav.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tab = viewPager.getCurrentItem();
            if (tab > 0) {
                tab--;
                viewPager.setCurrentItem(tab);
            } else if (tab == 0) {
                viewPager.setCurrentItem(tab);
            }
        }
    });

    // Images right navigatin
    rightNav.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int tab = viewPager.getCurrentItem();
            tab++;
            viewPager.setCurrentItem(tab);
        }
    });

Output