HorizontalScrollView with arrows

Question

I'm trying to make a scrollable horizontal menu using HorizontalScrollView using the layout shown below. The menu is scrollable using the previous/next arrow buttons or on fling. When the HorizontalScrollView reach one end I'd like the arrow at the same end to be hidden (in the image shown below I'd like the left arrow to be hidden).

How can I detect that the HorizontalScrollView has reached an end?

Thanks

enter image description here

<RelativeLayout android:background="@drawable/bg_home_menu"
    android:layout_width="fill_parent" android:layout_height="45dp">
    <ImageView android:id="@+id/previous" android:src="@drawable/arrow_l"
        android:layout_height="14dp" android:layout_width="10dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true" />

    <ImageView android:id="@+id/next" android:src="@drawable/arrow_r"
        android:layout_height="14dp" android:layout_width="10dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

    <HorizontalScrollView android:id="@+id/horizontalScroll"
        android:layout_width="fill_parent" android:layout_height="fill_parent"
        android:scrollbars="none" android:fadingEdgeLength="30dp" android:layout_toLeftOf="@id/next"
        android:layout_toRightOf="@id/previous" >

        <LinearLayout android:id="@+id/home_menu"
            android:orientation="horizontal" android:layout_width="wrap_content"
            android:layout_height="fill_parent" android:gravity="center_vertical">

            <Button android:id="@+id/btn_home" android:background="@drawable/btn_home_menu_on"
                android:layout_height="35dp" android:layout_width="wrap_content" android:focusable="true"
                android_clickable="false" android:text="@string/menu_home" android:textColor="#FFFFFF" android:tag="-1"/>

            <!-- More are added dynamically -->

        </LinearLayout>

    </HorizontalScrollView>
</RelativeLayout>

blessanm86 · Answer 1 · 2011-10-06T09:47:56.507

There is no scroll listener for the HorizontalScrollView. What you can do is add an OnTouchListener to it This will fire continously when the user scrolls, and each time you can use the method getScrollX which returns the int.

Now 0 mean its left most, to find the right most(max scroll amount), you need to find the width of the child view of the horzontal scroll view. That is found by using the addOnGlobalLayoutListener else the width will always be 0 inside the onCreate method

Put this code in the onCreate method

final HorizontalScrollView hs = (HorizontalScrollView)findViewById(R.id.scroll);

ViewTreeObserver vto = hs.getViewTreeObserver(); 
vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
    @Override 
    public void onGlobalLayout() { 
        hs.getViewTreeObserver().removeGlobalOnLayoutListener(this); 
        maxScrollX = hs.getChildAt(0) 
                .getMeasuredWidth()-getWindowManager().getDefaultDisplay().getWidth();

    } 
});        

hs.setOnTouchListener(new OnTouchListener() {           
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        Log.e("ScrollValue", Integer.toString(hs.getScrollX()));
  if(hs.getScrollX() == maxScrollX){
      Log.e("MaxRight", "MaxRight");    
  }
  return false;
    }
});

I've updated my answer. If this doesn't work this might be of help http://stackoverflow.com/questions/3948934/synchronise-scrollview-scroll-positions-android — blessanm86, Oct 06 '11 at 09:55
+1 Thanx a lot, Working like Charm. Really very much helpful. — Paresh Mayani, Oct 20 '11 at 12:26
@Mr.G It the width of the immediate child layout of the scrollview. Its width is the max scroll amount. — blessanm86, Nov 05 '14 at 13:00

score 3 · Accepted Answer · edited May 23 '17 at 12:07

Use getScrollX() of the LinearLayout inside your scroller to determine which is the leftmost corner on screen. If it's 0, then left arrow should be disabled.

For the right arrow, retrieve the drawing rectangle's width, add getScrollX() and compare that to getMeasuredWidth (), if it's the same, you're at the right, no need for the right arrow.

So your code will look like this:

if (homeMenu.getScrollX()==0) {
  hideLeftArrow();
} else {
  showLeftArrow();
}
if (homeMenu.getDrawingRect().right == homeMenu.getMeasuredWidth()) {
  hideRightArrow();
} else {
  showRightArrow();
}

Of course you will have to put this in an event listener. I can only think of using your own HorizontalScrollView class, with the onScroll() method overwritten to perform the checks above, see this post.

HorizontalScrollView with arrows

2 Answers2

Linked