On an Android app (min sdk 11, target sdk 18), a class which extends Fragment ought to create the TabHost tabs (TabSpec) with one label AND one icon. But...
TabSpec ts1;
// if the label is set to "Home", the label is displayed but not the image
ts1 = tab_host.newTabSpec("TAB_ONE").setIndicator("Home", getActivity().getResources().getDrawable(R.drawable.ic_tabone)).setContent(R.id.edit_species_tab);
// if the label is null or empty, the image is displayed
ts1 = tab_host.newTabSpec("TAB_ONE").setIndicator(null, getActivity().getResources().getDrawable(R.drawable.ic_tabone)).setContent(R.id.edit_species_tab);
As far as I can see the documentation does not mention that the label and the icon are mutually exclusive.
At first I thought that the label had a solid background colour hiding the icon, but this is not the case. In fact, when I set the TabHost background I can see that the label is transparent:
tab_host.getTabWidget().setBackgroundResource(R.drawable.ic_mybackground);
How can I set the TabSpec background so that both the label AND the icon are displayed for each tab?
tab_host.xml
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="65dp" >
<LinearLayout
android:id="#+id/edit_species_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/edit_regions_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/edit_quiz_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
<LinearLayout
android:id="#+id/edit_about_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
</FrameLayout>
In holo theme, the tab only support label or icon and mutually exclusive.
After Holo, as a default the tab supposed only have label, please check the design guideline.
http://developer.android.com/design/building-blocks/tabs.html
If you willing to both label & icon at the same time, there are two options.
Option 1: Using old Gingerbread theme. Set your android:targetSdkVersion 9 or below. (Before Honeycomb)
Option 2: Using custom layout & view for your tab. Of course, it required some efforts, but you can use any custom layout what you want. For example:
in your activity code:
TabHost.TabSpec ts1;
View tabView = getLayoutInflater().inflate(R.layout.custom_tab, tab_host, false);
ts1 = tab_host.newTabSpec("TAB_ONE").setIndicator(tabView).setContent(R.id.edit_species_tab);
in your layout: (whatever you want)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher"
/>
</LinearLayout>
Related
I'm getting a resource not found error when I try to do this:
TabWidget tabz = FindViewById<TabWidget>(Resource.Id.tabs);
compiler doesn't see the TabWidget even when it's clearly labeled by id in my Main.axml file
Error CS0117 'Resource.Id' does not contain a definition for 'tabs'
Here's my full code:
<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"
android:visibility="visible" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
EDIT, sorry, this is the full code... I don't know why I didn't copy this last time. The above example is missing TabHost
<?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="wrap_content"
android:minWidth="25px"
android:minHeight="25px"
android:id="#+id/tabHost1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/linearLayout1">
<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" />
</LinearLayout>
</TabHost>
</LinearLayout>
How can I force the compiler to recognize my tabs id? I've tried rebuilding the resource.designer.cs .. putting the declaration of TabWidget inside all of the activities... nothing works. My C# can't see the TabWidget
full project can be found here:
https://github.com/hexag0d/BitChute_Mobile_Android_a2
I also tried this and it didn't work
Xamarin Android Resource file not found
thanks, in advance
The issue is not with the visual studio compiler but the way that you have declared the id for your View,
If you check this blog by James White you will see how Id and the Layout Attributes actually work in Android,
The Right way of declaring the Id would be something like this android:id="#+id/tabs" whereas what you are doing is this android:id="#android:id/tabs"
Hence, When you do add them and try to find it using Resource.Id.tabs, There is nothing available in Id by the name tabs as it was never added by the Xamarin ResourceDesginer.cs file.
So the end result should actually be something like this :
<TabHost
android:id="#+id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffc916"
android:orientation="vertical">
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
Also, note that I have replaced all the fill_parent's with match_parent's the reason behind it being that fill parent is now obsolete or you can say replaced (After API-8) and hence must not be used, which can be found here.
Update:
I have updated the way tab host works, Also updated the XML above and I am adding a reference link where you can find the right way of using both the TabHost and TabWidget, Also a good SO example for the same.
About the questions in your comment:
1,
that is very good advice, but one note is that when
SetContentView(localLayout); is used inside an activity that already
has a content view, it crashes the app.
The app crashed because localLayout in SetContentView(localLayout) is a LinearLayout but a TabWidget needs a TabHost. So you can directly use:
SetContentView(Resource.Layout.Main);
where Main.xaml is like:
<?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:theme="#style/MyTheme">
<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"
android:layout_weight="0.0"
android:visibility="visible" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp" />
</LinearLayout>
</TabHost>
2,
LinearLayout localLayout =
FindViewById(Resource.Layout.Main); View
whichYouWantToUse_findViewById =
LayoutInflater.Inflate(Resource.Layout.Main, null); TextView tv =
FindViewById(Resource.Id.textView169); TabHost _tabHost =
(TabHost)whichYouWantToUse_findViewById.FindViewById(Resource.Id.tabhost);
' still can't see the tabhost ... I'm losing my mind here
The reason why you cannot see the tabhost is, firt, TabHost is FrameLayout, not LinearLayout, second, Resource.Id.tabhost should be Android.Resource.Id.TabHost. So I edited your code to :
FrameLayout localLayout = FindViewById<FrameLayout>(Resource.Layout.Main);
whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.Main, null);
//TextView tv = FindViewById<TextView>(Resource.Id.textView1);
TabHost _tabHost = (TabHost)whichYouWantToUse_findViewById.FindViewById(Android.Resource.Id.TabHost);
3,
So the interesting thing is if I change tabhost to tahost ala
android:id="#+id/tahost" the resource appears in the designer but when
I change to android:id="#+id/tabhost" the resource disappears.. very
strange..
The id of TabHost need always be #android:id/tabhost", it cannot be modified to tahost or any others.
So the code in the onCreat Method is like this:
base.OnCreate(bundle);
SetContentView(Resource.Layout.Main);
View whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.layout1, null);
TextView textInAnotherLayout = (TextView)whichYouWantToUse_findViewById.FindViewById(Resource.Id.textView1);
textInAnotherLayout.Text = "Yeah";
TabHost tabHost = FindViewById<TabHost>(Android.Resource.Id.TabHost);
TabWidget tabWidget = tabHost.TabWidget;
var tabContent = tabHost.TabContentView;
FrameLayout localLayout = FindViewById<FrameLayout>(Resource.Layout.Main);
whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.Main, null);
TabHost _tabHost = (TabHost)whichYouWantToUse_findViewById.FindViewById(Android.Resource.Id.TabHost);
The following is the old answer.
Answer modified: The way to get TabHost and TabWidget in Activity:
TabHost tabHost = this.TabHost;
TabWidget tabWidget = tabHost.TabWidget;
The way to use one resource from one XAML file in the activity for
another:
LinearLayout localLayout = FindViewById<LinearLayout>(Resource.Layout.Main);
SetContentView(localLayout);
View whichYouWantToUse_findViewById = LayoutInflater.Inflate(Resource.Layout.layout1, null);
Button button1 = (Button)whichYouWantToUse_findViewById.FindViewById(Resource.Id.button1);
I download your project and fixed this problem by modifying the property of >android:id
I have been trying to change the theme for TabHost. So far I have got till here:
I have achieved this by using the following xml:
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/signupLinearLayout"
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:layout_gravity="center"
android:layout_weight="0"
android:gravity="center"
android:orientation="horizontal" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0" >
<ScrollView
android:id="#+id/scrollView02"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ScrollView>
<ScrollView
android:id="#+id/scrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ScrollView>
</FrameLayout>
</LinearLayout>
My MainActivity.java:
ContextThemeWrapper wrapper = new ContextThemeWrapper(
ActivityMain.this,
android.R.style.Theme_Holo_Light);
final LayoutInflater inflater = (LayoutInflater) wrapper
.getSystemService(LAYOUT_INFLATER_SERVICE);
dialog = new Dialog(wrapper);
dialog
.requestWindowFeature(Window.FEATURE_NO_TITLE);
dialog
.setContentView(R.layout.dialog_layout);
TabHost tabs = (TabHost) dialog
.findViewById(android.R.id.tabhost);
tabs.setup();
tabs.setCurrentTab(0);
TabSpec tspec1 = tabs.newTabSpec("Tab1");
tspec1.setIndicator("SIGN UP");
tspec1.setContent(R.id.scrollView02);
tabs.addTab(tspec1);
TabSpec tspec2 = tabs.newTabSpec("Tab2");
tspec2.setIndicator("LOG IN");
tspec2.setContent(R.id.scrollView01);
tabs.addTab(tspec2);
As I'm using Dialog class for the view and integrating TabHost inside the dialog, that's why I'm using ContextThemeWrapper for this to have some theme on the Dialog.
Now, my question is that how can I change the Holo.Light theme to Dark theme. Here is the picture what I want:
I know that android does not have Holo.Dark theme as of now. That is only available for ActionBars. So how can I achieve this solution.
Any kind of help will be appreciated.
This will work:
//Changing the tabs background color and text color on the tabs
for(int i=0;i<tabs.getTabWidget().getChildCount();i++)
{
tabs.getTabWidget().getChildAt(i).setBackgroundColor(Color.BLACK);
TextView tv = (TextView) tabs.getTabWidget().getChildAt(i).findViewById(android.R.id.title);
tv.setTextColor(Color.parseColor("#ffffff"));
}
And for the indicator, have a layout like this beneath tabwidget
<LinearLayout
android:id="#+id/tab_indicator"
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#bdbdbd" >
<LinearLayout
android:id="#+id/tab_indicator_left"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:layout_weight="1"
android:background="#f44b3b" >
</LinearLayout>
<LinearLayout
android:id="#+id/tab_indicator_right"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:layout_weight="1"
android:background="#bdbdbd" >
</LinearLayout>
</LinearLayout>
And change the background color of indicator like this based on the tab selection.
tabindicator1.setBackgroundColor(Color
.parseColor("#f44b3b"));
See the link it will helpful
How to change default color to Tab Host
and also refer this it will helpful
http://joshclemm.com/blog/?p=136
I would suggest using as much of android's source as possible. It really makes things cleaner in my opinion. I added a basic example of what I used below. Not perfect but closer than anything else I was able to fine and cleaner than most examples.
https://github.com/android/platform_frameworks_base/tree/master/core/res/res
For instance, for the holo theme, use this.
https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/tab_indicator_holo.xml
and get all the resources and put them into your project. After that, use the link
http://joshclemm.com/blog/?p=136
and modify it to work as you want.
Your Layout file
<TabHost
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabHost">
<LinearLayout
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:layout_marginLeft="0dip"
android:layout_marginRight="0dip"
android:background="#000">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</FrameLayout>
Code - same as josh clemm
mTabHost=(TabHost)getActivity().findViewById(R.id.tabHost);
mTabHost.setup();
//mTabHost.getTabWidget().setDividerDrawable(R.drawable.tab_divider);
setupTab(new TextView(getActivity()), "Tab 1");
setupTab(new TextView(getActivity()), "Tab 2");
setupTab(new TextView(getActivity()), "Tab 3");
private void setupTab(final View view, final String tag) {
View tabview = createTabView(mTabHost.getContext(), tag);
TabHost.TabSpec setContent = mTabHost.newTabSpec(tag).setIndicator(tabview).setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {return view;}
});
mTabHost.addTab(setContent);
}
private static View createTabView(final Context context, final String text) {
View view = LayoutInflater.from(context).inflate(R.layout.tabs_bg, null);
TextView tv = (TextView) view.findViewById(R.id.tabsText);
tv.setText(text);
return view;
}
And then tab_bg file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabsLayout" android:layout_width="fill_parent"
android:layout_height="fill_parent" android:background="#drawable/tab_selector"
android:padding="10dip" android:gravity="center" android:orientation="vertical">
<TextView android:id="#+id/tabsText" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Title"
android:textSize="15dip" android:textColor="#android:color/white" />
</LinearLayout>
In res/values/styles.xml, change the theme parent to "android:Theme.Holo" instead of "android:Theme.Holo.Light"
This will change the entire app's theme obviously, but you can also use different styles for different activities.
i'm making an android application, and i have a tabhost and two tabs in my xml. I have called them and they work just fine. But i want to get rid of the ugly grey/orange color on tabs. I have tried setting the bg using an image. I used this code:
th.getTabWidget().setBackgroundResource(R.drawable.tab_normal);
But it shows up like this:
How can i get it to replace the gray and orange color?
Thanks
Steps to fully customize tabwidget:
Create custom layout for tabwidget: this layout similar to default one which consist of one Icon and one TextView. You can choose whatever layout you want. Notice that the parent layout has stateful background tabwidget_selector. This drawable is the key to replace default orange focus color. You can choose your own focus color.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#drawable/tabwidget_selector"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/tabIndicatorIcon"
android:layout_width="28dp"
android:layout_height="28dp"
android:layout_marginTop="2dp" />
<TextView
android:id="#+id/tabIndicatorText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:textColor="#color/white" />
Write function which return a view for tabwidget. Set text, icon drawable for your tabwidget
private View getTabIndicatorView(Context context, String tag, int drawable) {
View view = LayoutInflater.from(context).inflate(
R.layout.tab_widget_custom, null);
TextView tv = (TextView) view.findViewById(R.id.tabIndicatorText);
tv.setText(tag);
ImageView tabIndicatorIcon = (ImageView) view
.findViewById(R.id.tabIndicatorIcon);
tabIndicatorIcon.setBackgroundResource(drawable);
return view;
}
Use this function in your activity:
TabHost.TabSpec setIndicator(View view) Specify a view as the tab
indicator.
Intent intent;
TabHost.TabSpec spec;
spec = tabHost.newTabSpec("Inbox").setIndicator(
getTabIndicatorView(MainTabActivity.this, "Hộp thư",
R.drawable.tin_nhan_tab_selector));
intent = new Intent(this, xxxx.InboxActivity.class);
spec.setContent(intent);
tabHost.addTab(spec);
You can have background for tabwidget:
<TabHost
android:id="#android:id/tabhost"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RelativeLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<TabWidget
android:id="#android:id/tabs"
android:layout_alignParentBottom="true"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/tabbackground"
android:layout_margin="7dp"
/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#android:id/tabs"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_margin="5dp"
android:background="#drawable/list_shape">
</FrameLayout>
</RelativeLayout>
I'm currently trying to create an application according the customer's specs, and these include a double tab set.
Meaning that the user needs to click in a tab at the bottom, and for example in the first tab, he will also see a set of tabs at the top where he can click (but when clicking in these, only the ones at the top will change, while the tabs at the bottom will remain the same).
How could I perform this with Android?
So far I could only implement the normal tabs creating a root item 'TabHost' just 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" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true" >
</FrameLayout>
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</TabHost>
Thanks a lot in advance!
I found this, thanks to the ActionBar (and SherlockActionBar for pre-Honeycomb devices):
http://developer.android.com/resources/samples/ApiDemos/src/com/example/android/apis/app/ActionBarTabs.html
and also this:
http://www.youtube.com/watch?v=gMu8XhxUBl8
can anybody tell how to reduce the height of tab bar and display tab bar in bottom
Thanks
use the following line of code to change the height, this is the last line in my onCreate method
tabHost.getTabWidget().getChildAt(0).getLayoutParams().height =35;
Add the following method to your class that extends TabActivity
public void addNewTab(Context context, String title, int height){
TabHost tabHost = getTabHost(); // The activity TabHost
Intent intent = new Intent().setClass(context, HelloTabsActivity.class);
TabHost.TabSpec spec = tabHost.newTabSpec(title.toLowerCase()).setIndicator(title).setContent(intent);
tabHost.addTab(spec);
int totalTabs = tabHost.getTabWidget().getChildCount();
((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).removeViewAt(0);
((TextView)((RelativeLayout)tabHost.getTabWidget().getChildTabViewAt(totalTabs-1)).getChildAt(0)).setHeight(30);
tabHost.getTabWidget().getChildAt(totalTabs-1).getLayoutParams().height = height;
}
then call it like this addNewTab(this, "tab title", 30);
Note that you have to change the height of each tab. For two tabs:
#Override
public void onCreate(Bundle savedInstanceState) {
... // other code
final int height = 45;
mTabHost.getTabWidget().getChildAt(0).getLayoutParams().height = height;
mTabHost.getTabWidget().getChildAt(1).getLayoutParams().height = height;
}
You could either
Build your own tab using a TableLayout at the bottom of the screen - which gives you quite a lot of flexibility
or
Modify use the existing TabHost/TabWidget - works in principle but I don't know how to reduce the tab bar height. Works like that:
Layout file main.xml:
<?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="#+id/tab_host"
android:layout_width="fill_parent" android:layout_height="fill_parent">
<TabWidget android:layout_width="fill_parent"
android:layout_height="wrap_content" android:id="#android:id/tabs"
android:layout_gravity="bottom" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent" >
<LinearLayout android:id="#+id/first_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="First Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/second_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="Second Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/third_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView android:layout_width="fill_parent"
android:layout_height="fill_parent" android:text="One More Tab" />
<!-- Replace TextView with your layout content for this tab -->
</LinearLayout>
<LinearLayout android:id="#+id/edit_item_text_tab"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
</TabHost>
</LinearLayout>
Source code of your activity, in this case StartActivity.java
import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class StartActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost tab_host = (TabHost) findViewById(R.id.tab_host);
tab_host.setup();
TabSpec tabspec1 = tab_host.newTabSpec("TAB_1");
tabspec1.setIndicator("Tab 1");
tabspec1.setContent(R.id.first_tab);
tab_host.addTab(tabspec1);
TabSpec tabspec2 = tab_host.newTabSpec("TAB_2");
tabspec2.setIndicator("Tab 2");
tabspec2.setContent(R.id.second_tab);
tab_host.addTab(tabspec2);
TabSpec tabspec3 = tab_host.newTabSpec("TAB_3");
tabspec3.setIndicator("Tab 3");
tabspec3.setContent(R.id.third_tab);
tab_host.addTab(tabspec3);
tab_host.setCurrentTab(0);
}
}
Turns out to look like:
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tabhost" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="1dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent" android:layout_height="60dp"
android:layout_alignParentBottom="true" />
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:padding="1dp">
</FrameLayout>
</RelativeLayout>
Most likely you'll have to implement tabs by your own. As far as I know that's impossible with regular android tabs.
<TabWidget android:id="#android:id/tabs"
android:tabStripEnabled="false"
android:padding="0dip"
android:layout_width="wrap_content"
android:layout_height="fill_parent"/>
Working with tabs in the Eclipse "graphical layout" mode is not quite intuitive.
NOTE - Currently I am not able to attach pictures to this answer as my reputation is
below 10. Maybe in the future I will edit it and add them.
1) To change tab bar height:- Select "tabs (TabWidget)" in the Outline view. A selection/resize box should appear around the tab bar and its height can now be modified. I have made it thinner in picture1.
2) To move the tab bar to bottom:- Select "tabs (TabWidget)" in the Outline view and drop it into the LinearLayout above it (as marked in the picture 1). This will send the "tabs (TabWidget)" to the bottom of the list (see picture2). Tabs Bar might disappear at this stage. So adjust the weights of "tabcontent" & "tabs (TabWidget)" till it looks ok. I have used 10 & 1 respectively.
3) To bring tab2 to the top:- After design/layout of tab1 is complete, we want to work on the next tab. But Eclipse does not allow selecting it. To bring tab2 to the top select tab1 and drop it into tabcontent. This will send tab1 to the bottom of the list and tab2 to the top.
Later when work on tab2 is complete, tab3 can be brought up.
This pretty roundabout way of working in graphical layout mode but maybe better than typing xml code.
Cheers