Fixed left and right arrow buttons at the either side of the horizontal scrollview

Question

I have a horizontal scrollview in my app. On either side of the scrollview, I wish to keep a left and a right arrow buttons (ibLeft & ibRight below), which should be visible all the time and should not hide behind the horizontal scrollview images at any point of time.

The issues faced by me are:

1. Somehow, the horizontal scrollview kind of overlaps the two buttons.

2. Also, I do not see any thing happening when I set onclick listeners for the buttons. I read somewhere that this is a problem when we have a horizontal scrollview.

Kindly help.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >


    <RelativeLayout
        android:id="@+id/RelBt"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:text="NEWS" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="LIVE T.V." />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="YOUTH" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tvtmp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Video will come up here" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/RelBt"
        android:layout_below="@+id/tvtmp" >

        <ImageButton
            android:id="@+id/ibLeft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/ibRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher" />

        <HorizontalScrollView
            android:id="@+id/hsv"
            android:layout_width="wrap_content"
            android:fadingEdgeLength="100dp"
            android:layout_height="wrap_content" >

            <RelativeLayout
                android:id="@+id/RelativeLayout1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >

                <ImageView..../>
<ImageView..../>
<ImageView..../>
<ImageView..../>
<ImageView..../>

                            </RelativeLayout>
        </HorizontalScrollView>
    </RelativeLayout>

</RelativeLayout>

The java file is

public class Main extends Activity implements OnClickListener{

    HorizontalScrollView hSV;
    ImageButton ibLeft,ibRight;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        ibLeft=(ImageButton) findViewById(R.id.ibLeft);
        ibLeft.setOnClickListener(this);

        ibRight=(ImageButton) findViewById(R.id.ibRight);
        ibRight.setOnClickListener(this);

        hSV=(HorizontalScrollView) findViewById(R.id.hsv);

    }

    @Override
    public void onClick(View v) {
        if(v.getId()==R.id.ibLeft){
            Toast.makeText(Main.this, "Left", Toast.LENGTH_SHORT).show();
        }
        else if(v.getId()==R.id.ibLeft){
            Toast.makeText(Main.this, "Right", Toast.LENGTH_SHORT).show();
        }
    }

}

Answer 1

Position your HorizontalScrollView relative to your ImageButtons:

//...
<RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/RelBt"
        android:layout_below="@+id/tvtmp" >

        <ImageButton
            android:id="@+id/ibLeft"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/ibRight"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_launcher" />

        <HorizontalScrollView
            android:id="@+id/hsv"
            android:layout_width="wrap_content"
            android:fadingEdgeLength="100dp"
            android:layout_toRightOf="@id/ibLeft"
            android:layout_toLeftOf="@id/ibRight"
            android:layout_height="wrap_content" >
//...

Regardind the buttons not receiving click events they are probably covered by the HorizontalScrollView, also you've set the same id(of the left button) to both buttons, left and right in the onClick() method.