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.
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);
}