Is it possible to check if a specific “tab” is displayed in a TabWidget in the current view or not?

Question

I have a TabWidget with 5 tabs. tabs : one, two, three, four, five. TabHost is in HorizontalScrollView . Now I have one arrow (<and>) on each side of the TabWidget to indicate that there are more tabs in this direction (which are currently not visible).

Now, what I want to do is if the first tab is not visible ( in the current view ), then the left arrow (<) should be visible and if the last tab is not visible ( in the current view ), then the right arrow should be visible, and if both tabs are not visible ( in the current view ), then both arrows should be visible. I tried to do this 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 will not work, my both tabs are invisible at the beginning:

my xml is as follows.

 <?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 your own HorizontalScrollView class and show ImageViews based on scrolling (although I have not tested how much the code below works). 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 onCreate activity you will do:

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

and implementation of the activity of the PositionListener interface:

 @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 is not an elegant solution, but you can display the left arrow if the x coordinate of the leftmost tab was less than zero and display the right tab if the rightmost edge x plus its width was greater than the width of the screen.