How to scroll a HorizontalScrollView on button click in android?

Devu Soman picture Devu Soman · Feb 15, 2013 · Viewed 14.4k times · Source

I have horizontal scrollview in my android app with Next and Previous buttons.I want to show the these buttons only when the scollview needs scrolling.ie,width of scrollview content exceeds display width.Also want to hide previous and Next buttons when reaching first and last items respectively.How to to next/previous items when click on these buttons?

main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/mainLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff" >

        <Button
            android:id="@+id/btnPrevoius"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="Previous"
            android:visibility="gone" />

        <HorizontalScrollView
            android:id="@+id/horizontalScrollView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_toLeftOf="@+id/btnNext"
            android:layout_toRightOf="@+id/btnPrevoius"
            android:fillViewport="true" >

            <LinearLayout
                android:id="@+id/linearLayout1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >
            </LinearLayout>
        </HorizontalScrollView>

        <Button
            android:id="@+id/btnNext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="Next"
            android:visibility="gone" />

    </RelativeLayout>

activity

 public class SampleActivity extends Activity {
            private static LinearLayout linearLayout;
            private static HorizontalScrollView horizontalScrollView;
            private static Button btnPrevious;
            private static Button btnNext;
            private static int displayWidth = 0;
            private static int arrowWidth = 0;
            @Override
            public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
                horizontalScrollView = (HorizontalScrollView) findViewById(R.id.horizontalScrollView1);
                linearLayout = (LinearLayout) findViewById(R.id.linearLayout1);
                btnPrevious = (Button) findViewById(R.id.btnPrevoius);
                btnNext = (Button) findViewById(R.id.btnNext);
                for (int i = 0; i < 15; i++) {
                    Button button = new Button(this);
                    button.setTag(i);
                    button.setText("---");
                    linearLayout.addView(button);
                }
                ViewTreeObserver vto = linearLayout.getViewTreeObserver();
                vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() {

                    @Override
                    public void onGlobalLayout() {
                        ViewTreeObserver obs = linearLayout.getViewTreeObserver();
                        obs.removeGlobalOnLayoutListener(this);
                        Display display = getWindowManager().getDefaultDisplay();
                        displayWidth = display.getWidth();
                        if (linearLayout.getMeasuredWidth() > (displayWidth - 40)) {
                            btnPrevious.setVisibility(View.VISIBLE);
                            btnNext.setVisibility(View.VISIBLE);
                        }
                    }

                });
                btnPrevious.setOnClickListener(listnerLeftArrowButton);
                horizontalScrollView.setOnTouchListener(listenerScrollViewTouch);
            }

            private OnTouchListener listenerScrollViewTouch = new OnTouchListener() {

                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    showHideViews();
                    return false;
                }
            };

            private OnClickListener listnerLeftArrowButton = new OnClickListener() {

                @Override
                public void onClick(View v) {
                    horizontalScrollView.onKeyDown(KeyEvent.KEYCODE_DPAD_RIGHT, new KeyEvent(0, 0));
                }
            };


        public static void showHideViews() {
            int maxScrollX = horizontalScrollView.getChildAt(0).getMeasuredWidth()- displayWidth;
            Log.e("TestProjectActivity", "scroll X = " +horizontalScrollView.getScrollX() );
            Log.i("TestProjectActivity", "scroll Width = " +horizontalScrollView.getMeasuredWidth() );
            Log.d("TestProjectActivity", "Max scroll X = " + maxScrollX);

            if (horizontalScrollView.getScrollX() == 0) {
                hideLeftArrow();
            } else {
                showLeftArrow();
            }
            if (horizontalScrollView.getScrollX() == maxScrollX) {
                showRightArrow();
            } else {
                //hideRightArrow();
            }
        }

        private static void hideLeftArrow() {
            btnPrevious.setVisibility(View.GONE);
        }

        private static void showLeftArrow() {
            btnPrevious.setVisibility(View.VISIBLE);
        }

        private static void hideRightArrow() {
            btnNext.setVisibility(View.GONE);
        }

        private static void showRightArrow() {
            btnNext.setVisibility(View.VISIBLE);
        }
    }

The 'maxScrollX' value is not correct for me.How to find maximum scrollvalue for this? Thanks in Advance

Answer

ViksaaSkool picture ViksaaSkool · Jul 31, 2014

This might come a bit late, but for anyone out there that will face this problem I suggest alternative solution(s).

First, use different component than HorizontalScrollView. Here are the options:

OPTION 1: Horizontal ListView - add this class to your project (create a separate package, something like com.yourproject.widgets). Also you'll need to create custom Adapter, see how that's done in this example. I suggest you create separate adapter class (exp. HorizontalListViewAdapter) and put it in already created com.yourproject.widgets package.

  • add this widget to your layout in the xml (put it between buttons that need to mimic the scrolling behavior) you'll need to add something like:
<com.yourproject.widgets.HorizontalListView
            android:id="@+id/hList"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
  • reference this (along with the buttons) in the Activity/Fragment that utilizes the widget
HorizontalListView mHList = (HorizontalListView) findViewById (R.id.hList); 
Button bPrevoius = (Button) findViewById (R.id.btnPrevoius);
Button bNext = (Button) findViewById (R.id.btnNext);
  • add onClickListeners to the Buttons. Use the scrollTo() function predefined in the HorizontalListView widget. As you can see in the code, it takes int dp value to scroll. Add positive values if you want to scroll in right (next), and use negative values if you want to scroll in left (previous):

    bPrevoius.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            //value 500 is arbitrarily given. if you want to achieve 
            //element-by-element scroll you should get the width of the 
            //previous element dynamically or if the elements of the 
            //list have uniform width just put that value instead
             mHList.scrollTo(-500);
            //if it's the first/last element you can bPrevoius.setEnabled(false)
    
        }
    });
    
    
    bNext.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            mHList.scrollTo(500);
    
        }
    });
    

OPTION 2: More up to date solution to this issue can be the new widget RecyclerView introduced in Android L (addition of android:scrollbars="vertical" seems that would do the trick; other than that should have conventional ListView behavior). For more info check the official documentation.