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!

score 46 · Answer 1 · answered Feb 07 '16 at 12:49

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

score 17 · Answer 2 · edited Feb 02 '17 at 01:21

17

No need to manage the current index for this or to handle any swiping manually. Simply call method viewPager.arrowScroll(int direction) method on the click events of left and right arrows.

In a nutshell follow these 2 simple steps:

Implement 2 ImageViews/ImageButtons/Buttons for left and right arrows.
On clicking them, call:

a) if left arrow is clicked - viewPager.arrowScroll(View.FOCUS_LEFT);

b) if right arrow is clicked - viewPager.arrowScroll(View.FOCUS_RIGHT);

edited Feb 02 '17 at 01:21

Dan Lowe

51,713
20
123
112

answered Feb 02 '17 at 01:01

Keshav Bansal

407
4
6

Great! Thanks alot :D – Rohan Taneja Aug 16 '17 at 05:08
This is an easy approach if it works, but `arrowScroll()` isn't designed to page left/right unconditionally. It's supposed to move focus left/right, and only page left/right if it gets to the end of the focus chain. So it can fail, in confusing ways, if you have views on the screen that are focusable. See https://stackoverflow.com/a/57679214/423105 about the problem, and @Christopher's answer for the robust way to page left/right. – LarsH Aug 27 '19 at 17:24

score 10 · Answer 3 · answered Dec 15 '17 at 15:12

Implement left & right arrow buttons in your fragment. Then register their onClick in your activity and call viewpager's arrowScroll method to scroll the viewPager programmatically.

public void onRightClick(View view) {
    viewPager.arrowScroll(ViewPager.FOCUS_RIGHT);
}

public void onLeftClick(View view) {
    viewPager.arrowScroll(ViewPager.FOCUS_LEFT);
}

Create a method to toggle left/right arrow visibility in your fragment.

public void toggleArrowVisibility(boolean isAtZeroIndex, boolean isAtLastIndex) {
    if(isAtZeroIndex)
        leftBtn.setVisibility(View.INVISIBLE);
    else
        leftBtn.setVisibility(View.VISIBLE);
    if(isAtLastIndex)
        rightBtn.setVisibility(View.INVISIBLE);
    else
        rightBtn.setVisibility(View.VISIBLE);

}

Now implement ViewPager.OnPageChangeListener in your activity. Use SmartFragmentStatePagerAdapter to keep track of registered fragments in memory.

@Override
public void onPageSelected(int position) {
    MyFragment fragment = (MyFragment) smartAdapter.getRegisteredFragment(position);
    fragment.toggleArrowVisibility(position == 0, position == list.size() - 1);
}

Thank you for also adding the toggle visibility. Very useful as well. — Florinache, Aug 04 '20 at 17:29

distractedhamster · Accepted Answer · 2021-03-28T17:03:09.627

4

Instead of using ImageButtons for displaying the arrows, I now use ImageViews because they pass on any touch events to the layer underneath.

Then, I put transparent Buttons on the fragments themselves instead, that way they won't block the ViewPagers swiping behaviour but they will fire onClick Events!

edited Mar 28 '21 at 17:03

answered Aug 06 '14 at 15:37

distractedhamster

689
2
8
22

1

Hello! I was wondering if you could elaborate on how or which arrows did you use to display via `ImageViews`. Would like to do the same thing for my project. Thanks! – w_lpz May 04 '15 at 18:32
Hi! Not sure I understand the question:) I designed the arrows in photoshop – distractedhamster May 04 '15 at 18:39
Ok, were there any specific image format (jpeg, png, bmp... Etc) that is has to be done with? – w_lpz May 04 '15 at 18:43
.png is probably your best option since it supports transparency! – distractedhamster May 04 '15 at 18:48
Cool! And one more question, the last paragraph you wrote on your answer is to make the arrows funtionable with a click to switch pages right? – w_lpz May 04 '15 at 18:51
Awesome... Thanks! Would you mind if I contact you again if I have issues implementing it? – w_lpz May 04 '15 at 20:04
1

No problem! Feel free – distractedhamster May 04 '15 at 20:07

score 1 · Answer 5 · answered Aug 06 '14 at 09:55

1

First use relative layout as your parent layout

second then add view pager inside it with match parent attribute on it

third take two image buttons over the view pager but in under the hierarchy of parent layout give them center vertical as a gravity and keep their side as right and left as per your requirement

fourth write functional code for buttons

fifth take static counter to get current view pager page

on left and right button set minus and plus the view pager counter resp. and according to that show data in view pager

this is the simple logic for code you can search it on google you will easily get it

answered Aug 06 '14 at 09:55

Android is everything for me

3,781
4
28
37

can u elobrate in brief what is mean by interfere? you want to change page by clickng on buttons? – Android is everything for me Aug 06 '14 at 10:09
When I start the swiping-motion with my finger on one of the ImageButtons, the ViewPager won't register the swipe. Sorry if unclear! – distractedhamster Aug 06 '14 at 10:11
have you register your listner for image button? – Android is everything for me Aug 06 '14 at 10:12
No, will that make a difference? – distractedhamster Aug 06 '14 at 10:12
yes if you implemented the onClickListner for your activity and your trying to access onClick event then you must register your onClickListner for the object of that view ex. imgBtn.setOnClickListener(this); – Android is everything for me Aug 06 '14 at 10:15
I tried it. Didn't make a difference. I am not trying to access onClick for the ImageButton, I am trying to make the ImageButton not prevent the ViewPager from getting the swipe. – distractedhamster Aug 06 '14 at 10:18
@Androidiseverythingforme, I have a similar problem with the person above: http://stackoverflow.com/questions/26262806/onclicklistener-is-not-detected-using-viewpager-and-pageradapter – Kala J Oct 08 '14 at 19:47
for anyone still interest: check this also: https://github.com/sembozdemir/ViewPagerArrowIndicator – CDrosos Oct 07 '16 at 16:11

Left-right arrow indicators over a ViewPager

5 Answers5

Linked