Vertical Scroll bar with Horizontal Scroll Android

Question

Running into "unable to scroll" issues

• I am trying to get a customized vertical scrollbar working with the ability to scroll horizontally.
• I am trying to put 7 vertical scrollbars (@+id/verticalSeekbar, @+id/verticalSeekbar_2 etc.) in a horizontal scrollbar.
• I am (with the help of stackoverflow) able to get my custom vertical scrollbar.

However, I am unable to scroll through it horizontally. I want to be able to scroll horizontally but it just doesn't work. Attached is the image of how I want it to be. Here is my code for Activity_vertical_slider

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.verticalsliderandroid.HScroll android:id="@+id/hScroll"
            android:layout_width="400dp" android:layout_height="wrap_content">

        <RelativeLayout
            android:id="@+id/relative_layout_sample"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

        <com.example.verticalsliderandroid.VerticalSeekBar
        android:id="@+id/verticalSeekbar"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:max="255"
        android:progress="10"
        android:rotation="180"
        android:progressDrawable="@android:color/transparent"
        android:thumb="@drawable/eco_seekbar" />

        <com.example.verticalsliderandroid.VerticalSeekBar
            android:id="@+id/verticalSeekbar_2"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/verticalSeekbar"
            android:max="255"
            android:progress="10"
            android:progressDrawable="@android:color/transparent"
            android:rotation="180"
            android:thumb="@drawable/eco_seekbar" />    

        </RelativeLayout>

    </com.example.verticalsliderandroid.HScroll>


</RelativeLayout>

Here is my verticalseekbar.java

public class VerticalSeekBar extends SeekBar {

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

    public VerticalSeekBar(Context context, AttributeSet attrs, int defStyle) {

        super(context, attrs, defStyle);
    }

    public VerticalSeekBar(Context context, AttributeSet attrs) {

        super(context, attrs);
    }


    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(h, w, oldh, oldw);
    }

    @Override
    protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(heightMeasureSpec, widthMeasureSpec);
        setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());

    }

    protected void onDraw(Canvas c) {
        c.rotate(-90);
        c.translate(-getHeight(), 0);
        super.onDraw(c);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (!isEnabled()) {
            return false;
        }

        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:


            case MotionEvent.ACTION_MOVE:


            case MotionEvent.ACTION_UP:
                setProgress(getMax() - (int) (getMax() * event.getY() / getHeight()));
                onSizeChanged(getWidth(), getHeight(), 0, 0);
                break;
            case MotionEvent.ACTION_CANCEL:
               break;
        }
        return true;
    }

} 

I have searched enough on the internet. Just not getting what I need. Please help.

Answer 1

I got the correct way of doing this. The approach is have a ScrollView in that a HorizontalScrollView in that a TableLayout. You can play around with the TableRow and get whatever you want. Here is the code for activity_main. The code for VerticalSeekbar remains the same.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >


    <ScrollView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

      <HorizontalScrollView
            android:layout_width="fill_parent"          
            android:layout_height="fill_parent" >

       <TableLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent">

                    <TableRow 
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent">

                         <com.example.verticalslider.VerticalSeekBar
                            android:id="@+id/seekBar1"
                            android:layout_width="wrap_content"
                            android:layout_height="500dp"
                            android:padding="20dp"
                            />

                            <com.example.verticalslider.VerticalSeekBar
                            android:id="@+id/seekBar2"
                            android:layout_width="wrap_content"
                            android:layout_height="500dp"
                            android:padding="20dp"
                            />

                            <com.example.verticalslider.VerticalSeekBar
                            android:id="@+id/seekBar3"
                            android:layout_width="wrap_content"
                            android:layout_height="500dp"
                            android:padding="20dp"                              
                            />

                            <com.example.verticalslider.VerticalSeekBar
                            android:id="@+id/seekBar4"
                            android:layout_width="wrap_content"
                            android:layout_height="500dp"
                            android:padding="20dp"                              
                            />

                            <com.example.verticalslider.VerticalSeekBar
                            android:id="@+id/seekBar5"
                            android:layout_width="wrap_content"
                            android:layout_height="500dp"
                            android:padding="20dp"                              
                            />

                            <com.example.verticalslider.VerticalSeekBar
                            android:id="@+id/seekBar6"
                            android:layout_width="wrap_content"
                            android:layout_height="500dp"
                            android:padding="20dp"                              
                            />

                    </TableRow>

               </TableLayout>

       </HorizontalScrollView>

    </ScrollView>



</RelativeLayout>

Works perfectly.