How to set images for ScrollView instead-of fading edges?

Question

I am using Horizontal Scroll View, dynamically i will add items in to that. if no. of items are more than displaying items on the screen i want to show image(arrow) at the edges ( like scroll view shows fading edges). How can i do it.

just look at below image, i want create like that.

this is the xml code

<HorizontalScrollView 
   android:layout_width="wrap_content"
   android:scrollbars="none"
   android:id="@+id/app_category"
   android:layout_below="@+id/top_layout"   
   android:background="@drawable/minitopbar"
   android:layout_height="30dp">

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

</HorizontalScrollView>

Terribly

Adding images means? Any image in place of green color at the edge ? or like adding images to linear layout ? – Curfew

Any image in place of green color at the edge, if scrollview have items to scroll – Terribly

with same width and height equal to green color ? My suggestion is you can remove the fading edges color if you want. – Curfew

i will remove fading edges , now i want to set images in that place.. – Terribly

Answer 1

A. You have to create your own class, that extends HorizontalScrollView:

public class ExtendedHorizontalScrollView extends HorizontalScrollView {

private IScrollStateListener scrollStateListener;

public HorizontalScrollViewForMenu(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public HorizontalScrollViewForMenu(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public HorizontalScrollViewForMenu(Context context) {
    super(context);
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    prepare();
}

private void prepare() {
    if (scrollStateListener != null) {
        View content = this.getChildAt(0);
        if (content.getLeft() >= 0)
            scrollStateListener.onScrollMostLeft();
        if (content.getLeft() < 0)
            scrollStateListener.onScrollFromMostLeft();

        if (content.getRight() <= getWidth())
            scrollStateListener.onScrollMostRight();
        if (content.getLeft() > getWidth())
            scrollStateListener.onScrollFromMostRight();
    }
}

@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
    super.onScrollChanged(l, t, oldl, oldt);
    if (scrollStateListener != null) {
        if (l == 0)
            scrollStateListener.onScrollMostLeft();
        else if (oldl == 0)
            scrollStateListener.onScrollFromMostLeft();
        int mostRightL = this.getChildAt(0).getWidth() - getWidth();
        if (l >= mostRightL)
            scrollStateListener.onScrollMostRight();
        if (oldl >= mostRightL && l < mostRightL)
            scrollStateListener.onScrollFromMostRight();
    }
}

public void setScrollStateListener(IScrollStateListener listener) {
    scrollStateListener = listener;
}

public interface IScrollStateListener {
    void onScrollMostLeft();

    void onScrollFromMostLeft();

    void onScrollMostRight();

    void onScrollFromMostRight();
}
}

B. Use it defining of layout:

<LinearLayout
      .....>
    <ImageView
        android:id="@+id/navigation_left"
        ..... />

    <your.custom.view.package.ExtendedHorizontalScrollView
        android:id="@+id/scroller"
        android:layout_width="0px"
        android:layout_weight="1"
        android:fadingEdge="none"
                ....>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </your.custom.view.package.ExtendedHorizontalScrollView>

    <ImageView
        android:id="@+id/navigation_right"
        ..... />

</LinearLayout>

C. Add logic for disabling arrows when you can't scroll any more.

((ExtendedHorizontalScrollView)findViewById(R.id.scroller)).setScrollStateListener(new IScrollStateListener() {
        public void onScrollMostRight() {
            ((View) scroller.getParent()).findViewById(R.id.navigation_right).setVisibility(View.INVISIBLE);
        }

        public void onScrollMostLeft() {
            ((View) scroller.getParent()).findViewById(R.id.navigation_left).setVisibility(View.INVISIBLE);
        }

        public void onScrollFromMostLeft() {
            ((View) scroller.getParent()).findViewById(R.id.navigation_left).setVisibility(View.VISIBLE);
        }

        public void onScrollFromMostRight() {
            ((View) scroller.getParent()).findViewById(R.id.navigation_right).setVisibility(View.VISIBLE);
        }

    });

Compartment

i am using custom horizontal list view instead of scroll view..is it suitable for that.. – Terribly

Yep, just override onScrollChanged of your list view and see if it is possible to scroll more - if yes - show arrows – Compartment

It used because ScrollView does not allow many children. If you use ListView - you do not need it – Compartment

Actually first i used scroll view , for some reasons in UI now i changed to custom HorizontalListView now i want to set the arrows at the edge..how can i do it. if you want let me know i will show full custom class.. – Terribly

Just take my onScrollChange and setScrollStateListener methods, IScrollStateListener put it in your ListView, and setup logic for showing arrows in onCreate of Activity like (YourCustomListView)findViewById(R.id.list).setScrollStateListener(...) – Compartment

Right side image goes to invisible state always , which code i have to change please tell me.. – Terribly

Great code. Thanks, just one issue: When you get to the most right , it fires onScrollMostRight() then onScrollMostLeft() is also fired for some reason. – Autopilot

Answer 2

An easy alternative is to make a scrollview without fading edges and then add the image with arrow below or on top of the scrollview.

Your xml something similar:

    <FrameLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <ListView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:fadingEdge="none"
        />
        <RelativeLayout 
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <View
                android:layout_height="6dp"
                android:layout_width="fill_parent"
                android:layout_alignParentBottom="true"
                android:background="@drawable/background_effect"/>
        </RelativeLayout>
    </FrameLayout>

Casia