5

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

Improve this question

3 Answers 3

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

devu

Plz have a look at the following links

1) http://android-er.blogspot.in/2012/07/implement-gallery-like.html

2) http://androiddreamers.blogspot.in/2012/09/horizontal-scroll-view-example.html

3)http://code.google.com/p/mobyfactory-uiwidgets-android/

Let me know if u r facing any issues

Thanks

Improve this answer

4 Comments

I am sorry.I could not understand how these posts can solve my issue.
@DevuSoman have u looked at the links i posted,,horizontal scrollview works in this way.Also if you want to hide these button,You have set enablity to false for first condition & vice versa.For performing next previous you have to apply onclick listener on the respective buttons and do what u want according to your choice....
@DevuSoman what exactly u want..U have to just set the padding and minor layout adjustment.did u tried with the links i posted ? just apply on click listener on the buttons..according to ur choice.what u want to do on their click ?
Button click works fine.But i could not hide the next button when scrollview scrolls to last item
-1

In titanium appcelerator, you can do this using scrollableView

var scrollableView = Ti.UI.createScrollableView({ showPagingControl:true, scrollingEnabled: true, top: 360 });

Then, you can run a loop of all images or any content that you have, and add them to this view.

for(loop) {
eval("var view"+i+"=Ti.UI.createView();");

profile_image = Ti.UI.createImageView({ image: result[0]['profile_image'], left:15, width:82, height:104, top: 0 }); eval("view"+i+".add(profile_image);"); eval("scrollableView.addView(view"+i+");");

}

mywin.add(scrollableView);

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.