Develop Reference

Android TabHost strange error

Since TabHost itself is not deprecated, and I just need a very simple solution to switch between two controls (maybe 3) I decided TabHost was perfect for my needs. However I get a very mysterious error....
This is the code I have
myTabHost = (TabHost) findViewById(android.R.id.tabhost);
myTabHost.setup();
TabHost.TabSpec tmpSpec = null;
TabContentFactory tmpContentFactory = null;
tmpSpec = myTabHost.newTabSpec("main_param_time");
tmpSpec.setIndicator("sometext");
// error happens here here
tmpSpec.setContent(R.id.charts_stickchart);
// rest of code here. e.g. addTab etc.
The error I get is
java.lang.RuntimeException: Could not create tab content because could
not find view with id 2131427359
My XML file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TabHost
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/tabhost"
>
<LinearLayout
android:id="#+id/LinearLayout01"
android:orientation="vertical"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_height="wrap_content"
android:layout_width="fill_parent">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
>
</FrameLayout>
</LinearLayout>
</TabHost>
<cn.limc.androidcharts.view.StickChart
android:id="#+id/charts_stickchart"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:visibility="gone"
/>
<cn.limc.androidcharts.view.SpiderWebChart
android:id="#+id/charts_spiderwebchart"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:visibility="gone"
/>
</LinearLayout>

Move your two charts to be children of the <FrameLayout>, as in this sample app:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<AnalogClock android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<Button android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="A semi-random button"
/>
</FrameLayout>
</LinearLayout>
</TabHost>

Adding scroll in tabhost in android

I have a tab host in which i have more than 6 buttons. However the screen shows only 3-4 buttons.
Following is the code which i am using along with the image.
<?xml version="1.0" encoding="utf-8"?>
<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="#777777">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:id="#+id/layTab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:background="#drawable/navbar_background"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
/>
</RelativeLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/layTab"/>
</RelativeLayout>
</TabHost>
The question is, How am i suppose to add a scroll so that i can scroll upto all 6 buttons or any other trick.
Best Regards

Just nest the TabWidget inside a HorizontalScrollingView, like this:
<?xml version="1.0" encoding="utf-8"?>
<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="#777777" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<RelativeLayout
android:id="#+id/layTab"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:background="#drawable/navbar_background"
android:gravity="center"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<HorizontalScrollView
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="wrap_content"
android:layout_height="wrap_content" >
</TabWidget>
</HorizontalScrollView>
</RelativeLayout>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/layTab"
android:layout_alignParentTop="true" />
</RelativeLayout>
</TabHost>
By the way, this solution works for many other scenarios, RadioGroup, for example

Android 2.3.3, making the tab list scrollable?

I have this simple layout that i found as an example:
<?xml version="1.0" encoding="utf-8"?>
<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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:fillViewport="true"
android:scrollbars="none" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center" />
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</FrameLayout>
</LinearLayout>
</TabHost>
After adding 8 tabs in the code, i can see that they get squeezed together.
How can i add scrollable capabilities to the tabs? (just the tabs, not the content)
One app on my phone has this and that is also done without any scrollbars. Basically, to move i just press-down and hold and then drag the tabs to the left to reveal more tabs. How can this be achieved?

Have you tried this?
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</TabHost>
</HorizontalScrollView>

Please try this for your TabWidget:
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:scrollbars="none"
android:layout_alignParentBottom="true">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"/>
</HorizontalScrollView>

You could try setting the minimum width of each tab like so:
for (int i = 0; i < tabHost.getTabWidget().getChildCount(); i++) {
tabHost.getTabWidget().getChildAt(i).setMinimumWidth(200);
}

Fragment Tab header/label size

I am sure it needs a simple flag but I am not finding the correct one, spent at least 2 hours to find a correct solution. Hope to get help from you guru's.
I am trying to create a two tab layout using fragmentActivity. I want to give 50% screen space to each tab. I am able to do that (see attached Screen shot) the next hurdle is I want the tab header e.g. Financial with black bkg should take 50% and Others with gary bkg to take remaining 50%.
I hope I am clear with my question. :-)
attaching my xml
<?xml version="1.0" encoding="utf-8"?>
<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="#EFEFEF" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<FrameLayout
android:id="#+id/financial"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"
android:tag="#string/financial" />
<FrameLayout
android:id="#+id/other"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:tag="#string/others" />
</FrameLayout>
</RelativeLayout>
</TabHost>
**The calling xml would be**
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ListView
android:id="#+id/listView1"
android:layout_width="fill_parent"
android:layout_height="48dp"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView1" >
</ListView>
<fragment
class="com.......android.activity.AccountsTab"
android:id="#+id/tabs_fragment"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"/>
</RelativeLayout>
adding tab.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="150dp"
android:layout_height="#dimen/tab_height"
android:background="#drawable/tab_selector"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:padding="#dimen/tab_padding"
android:weightSum="0.5" >
<TextView
android:id="#+id/text"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:gravity="center_horizontal|center_vertical"
android:textColor="#drawable/tab_text_selector"
android:textSize="#dimen/text_default"
android:textStyle="italic" />
</RelativeLayout>

I think you should do it like this.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TabWidget
android:id="#android:id/tabs"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="0"/>
<FrameLayout
android:id="#+android:id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
</LinearLayout>
</TabHost>
</LinearLayout>
With this you can add as many tabs as you want.
Hope you want this.

How to add an ActionBar above a TabWidget?

I am creating a custom bar above a TabHost. For some reason the custom bar does not appear above the TabHost, instead it is drawn behind it. Not sure why. Here is my XML:
<?xml version="1.0" encoding="utf-8"?>
<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">
<!--
<RelativeLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:id="#+id/actionbarRelativeLayout">
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="#drawable/icon" android:id="#+id/stocktwitsImageButton"></ImageButton>
<ImageButton android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="#drawable/icon" android:id="#+id/composeImageButton" android:layout_alignParentRight="true"></ImageButton>
</RelativeLayout>
-->
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>

Do not use TabHost as the root of your layout. Put your TabHost inside a LinearLayout with orientation:vertical.
Then inside the LinearLayout and before the TabHost, you can put your ActionBar.