Is it possible to check if a specific “TAB” in TabWidget is visible in current View or not?

Question

I have a TabWidget with 5 tabs in it. Tabs : "One","Two","Three","Four","Five". The TabHost is in a HorizontalScrollView. Now I've one arrow (< and >) each on each side of the TabWidget to indicate that there are more tabs in that direction(which are currently not visible in view).

Now what I want to do is, if the first tab is not visible(in current view) then the arrow to left (<) should be visible and if the last tab is not visible(in current view) then the arrow to right should be visible and if both tabs are not visible(in current view) then both arrows should be visible. I tried doing it with:

if (horizontablscrollview.getLeft == 0)
{
   arrowRight.setVisiblity(View.VISIBLE)
   arrowLeft.setVisiblity(View.INVISIBLE)
}
else if( horizontablscrollview.getRight == 0)
{
   arrowLeft.setVisiblity(View.VISIBLE)
   arrowRight.setVisiblity(View.INVISIBLE)
}

else if ( horizontablscrollview.getRight == 0 && horizontablscrollview.getLeft == 0)
{
    arrowRight.setVisiblity(View.VISIBLE)
    arrowLeft.setVisiblity(View.VISIBLE)
}

But this doesn't work, my both tabs are invisible in the start:

my xml looks like this..

<?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"
    android:background="#ffffff" >

    <RelativeLayout
        android:id="@+id/RL_Header"
        android:layout_width="fill_parent"
        android:layout_height="50dip"
        android:layout_marginBottom="3dip"
        android:background="@drawable/gradient" >

        <ImageButton
            android:id="@+id/btn_Home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="3dp"
            android:background="@android:color/transparent"
            android:contentDescription="@string/description_home"
            android:onClick="onHomeButtonClick"
            android:src="@drawable/title_home" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dip"
            android:layout_marginTop="5dip"
            android:background="@android:color/transparent"
            android:contentDescription="@string/description_about"
            android:onClick="onClickAbout"
            android:src="@drawable/title_about" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/FL_Tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/RL_Header" >
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/FL_Tabs"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/RL_Header" >

        <TabHost
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@android:id/tabhost"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:background="#ffffff" >

                    <ImageView android:id="@+id/arrow_left"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/i_button"
                        android:layout_alignParentLeft="true"/>            

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

                    <ImageView android:id="@+id/arrow_left"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/i_button"
                        android:layout_alignParentLeft="true"
                        android:visibility="invisible"/>

                    <ImageView android:id="@+id/arrow_Right"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/i_button"
                        android:layout_alignParentRight="true"
                        android:visibility="invisible"/>                    

                <HorizontalScrollView
                    android:id="@+id/my_scrollView"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:fillViewport="true"
                    android:scrollbars="none" 
                    android:layout_toRightOf="@+id/arrow_left"
                    android:layout_toLeftOf="@+id/arrow_Right">

                    <TabWidget
                        android:id="@android:id/tabs"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:tabStripEnabled="true"/>
                </HorizontalScrollView>
            </RelativeLayout>

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:paddingTop="65dip" >

                <RelativeLayout
                    android:id="@+id/myTabContent"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="50dip" >

                    <TableLayout
                        android:id="@+id/tabSubs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="#ffffff"
                        android:shrinkColumns="*"
                        android:stretchColumns="*" >

                        <TableRow
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="20dip"
                            android:layout_marginTop="20dip"
                            android:gravity="center_horizontal" >

                            <Button
                                android:id="@+id/btntestno1"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:padding="20dip"
                                android:text="Test 1"
                                android:textColor="#000000" />

                            <Button
                                android:id="@+id/btntestno2"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:padding="20dip"
                                android:text="Test 2"
                                android:textColor="#000000" />
                        </TableRow>

                        <TableRow
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="20dip"
                            android:gravity="center_horizontal" >

                            <Button
                                android:id="@+id/btntestno3"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:padding="20dip"
                                android:text="Test 3"
                                android:textColor="#000000" />

                            <Button
                                android:id="@+id/btntestno4"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:padding="20dip"
                                android:text="Test 4"
                                android:textColor="#000000" />
                        </TableRow>

                        <TableRow
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginBottom="20dip"
                            android:gravity="center_horizontal" >

                            <Button
                                android:id="@+id/btntestno5"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:padding="20dip"
                                android:text="Test 5"
                                android:textColor="#000000" />

                            <Button
                                android:id="@+id/btntestno6"
                                android:layout_weight="1"
                                android:gravity="center"
                                android:padding="20dip"
                                android:text="Test 6"
                                android:textColor="#000000" />
                        </TableRow>
                    </TableLayout>
                </RelativeLayout>
            </FrameLayout>
        </TabHost>
    </RelativeLayout>

</RelativeLayout>

Any help would be greatly appreciated.

Answer 1

One solution would be to make you own HorizontalScrollView class and show the ImageViews based on the scroll(although I didn't tested that much the code below should work). Your layout will look like this:

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

                    <ImageView android:id="@+id/arrow_left"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/i_button"
                        android:layout_alignParentLeft="true"
                        android:visibility="gone"/>

                    <ImageView android:id="@+id/arrow_Right"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:src="@drawable/i_button"
                        android:layout_alignParentRight="true"
                        />                    

                <com.your.package.here.SpecialScroll
                    android:id="@+id/my_scrollView"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:fillViewport="true"
                    android:scrollbars="none" >

                    <TabWidget
                        android:id="@android:id/tabs"
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:tabStripEnabled="true"/>
                </com.your.package.here.SpecialScroll>
            </RelativeLayout>

//...

The SpecialScroll class will look like this:

public class SpecialScroll extends HorizontalScrollView {

    public interface PositionListener {

        public void onLeftArrowRequired(boolean required);

        public void onRightArrowRequired(boolean required);

        public View implementScrolledView();
    }

    private PositionListener listener;

    public void setPositionListener(PositionListener listener) {
        this.listener = listener;
    }

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

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

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

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if (l == 0) {
            listener.onLeftArrowRequired(false);
        } else {
            listener.onLeftArrowRequired(true);
        }
        View v = listener.implementScrolledView();
        Rect r = new Rect();
        v.getDrawingRect(r);
        if ((r.width() - l) == getWidth()) {
            listener.onRightArrowRequired(false);
        } else {
            listener.onRightArrowRequired(true);
        }

    }

}

Then in your activity's onCreate method you'll do:

SpecialScroll hsv = (SpecialScroll) findViewById(R.id.my_scrollView);
hsv.setPositionListener(this); // I made the activity implement the SpecialScroll.PositionListener interface

and the activity's implementation of the PositionListener interface is:

@Override
    public void onLeftArrowRequired(boolean required) {
        if (required) {
            ((ImageView) findViewById(R.id.arrow_left))
                    .setVisibility(View.VISIBLE);
        } else {
            ((ImageView) findViewById(R.id.arrow_left))
                    .setVisibility(View.GONE);
        }
    }

    @Override
    public void onRightArrowRequired(boolean required) {
        if (required) {
            ((ImageView) findViewById(R.id.arrow_right))
                    .setVisibility(View.VISIBLE);
        } else {
            ((ImageView) findViewById(R.id.arrow_right))
                    .setVisibility(View.GONE);
        }
    }

    @Override
    public View implementScrolledView() {
        return findViewById(android.R.id.tabs);
    }

Answer 2

This isn't an elegant solution, but you could display the left arrow if the x coordinate of the leftmost tab was less than zero and display the right tab if the rightmost tab's x plus its width was greater than the screen width.