I am very new to Android so go easy on me. I have implemented an activity that makes use of the TabSpec to make 2 tabs. I can get them running with content loading from the xml layouts.
My question is how can I add/change content of one of the tabs? Lets use adding a textview as an example. How would I do this?
//set up tabs
TabHost tabs=(TabHost)findViewById(R.id.tabhost);
tabs.setup();
//indicate setting for first tab
TabHost.TabSpec spec=tabs.newTabSpec("tag1");
spec.setContent(R.id.tab1);
spec.setIndicator("Templates");
tabs.addTab(spec);
//indicate setting second tab
spec=tabs.newTabSpec("tag2");
spec.setContent(R.id.tab2);
spec.setIndicator("Stat Sheets");
tabs.addTab(spec);
Here is my XML
<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">
<LinearLayout
android:id="#+id/tab1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
/*I want to add content here at runtime*/
</LinearLayout>
<Button android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="A semi-random button"
/>
</FrameLayout>
Turns out TabSpec approach is a little dated. I turned to properly implementing fragments which turned out to be much more concise and straightforward. I followed this tutorial specifically which really helped.
http://www.androidbegin.com/tutorial/implementing-fragment-tabs-in-android/
I have a tabhost in an application that uses both a Tab Icon and Text for each tab. For the life of me, I cannot get the icon to be centered ABOVE the text instead of filling the entire tab. My searching has only resulted in others trying to get the icon to fill the entire tab. Every other example I have seen has the icon above the text.
Here is how I am setting up and adding the tabs:
tabs = (TabHost) this.findViewById(R.id.conference_tabhost);
tabs.setOnTabChangedListener(this);
tabs.setup();
TabSpec tspecMenu = tabs.newTabSpec(tab_tag_menu);
tspecMenu.setIndicator("Menu", getResources().getDrawable(R.drawable.ic_tab_menu));
tspecMenu.setContent(R.id.tab_menu_view);
tabs.addTab(tspecMenu);
Here is the beginning of my layout:
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/conference_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">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
I am working on a Android project. In my project I am using tab layout. It works fine but all tabs background is black and when I am selecting any tab ,that tabs background changes to light brown.Is it possible to give custom color?
my xml file is
<?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:id="#+id/LinearLayout01"
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"
></TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
></FrameLayout>
</LinearLayout>
</TabHost>
my java code is
Resources res = getResources();
TabHost tb=getTabHost();
Intent i;
TabHost.TabSpec spec;
spec = tb.newTabSpec("mee").setIndicator ("home").setContent(i);
tb.addTab(spec);
spec=tb.newTabSpec("contacts").setIndicator("search").setContent(i);
tb.addTab(spec);
Sure :)
You should define and use styles.
I suggest you to read here - http://developer.android.com/guide/topics/ui/themes.html
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
I never designed UIs (more of a middleware guy) before so I apologize if the question is stupid. I am designing a UI to look something like the following:
ImageView ImageView
TabHost
Tab 0 ------ Tab 1 ------ Tab 2
-----INSIDE EACH TAB-----
TextView
ListView
- Consists of ImageView TextView
The problem is I think I am following a very inefficient way of doing the whole stuff. The onCreate method is as follows:
CODE:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TabHost mTabHost = getTabHost();
Drawable Tab1Icon = getResources().getDrawable(R.drawable.tab1_icon);
Drawable Tab2Icon = getResources().getDrawable(R.drawable.tab2_icon);
Drawable Tab3Icon = getResources().getDrawable(R.drawable.tab3_icon);
mTabHost.addTab(mTabHost.newTabSpec("Tab1").setIndicator("Tab 1", Tab1Icon).setContent(new Intent(this, Tab1.class)));
mTabHost.addTab(mTabHost.newTabSpec("Tab2").setIndicator("Tab 2", Tab1Icon).setContent(new Intent(this, Tab2.class)));
mTabHost.addTab(mTabHost.newTabSpec("Tab3").setIndicator("Tab 3", Tab1Icon).setContent(new Intent(this, Tab3.class)));
mTabHost.setCurrentTab(0);
}
This program crashes on CupCake (v1.5) complaining about StackOverflowException but runs well on Donut (v1.6). This is my 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"
android:background="#color/application_background"
>
<TableLayout
android:id="#+id/TableLayout01"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="0"
android:background="#color/application_background">
<TableRow>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView id="#+id/picview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/leftlogo"
android:paddingRight="105sp"
/>
<Button
android:id="#+id/picview2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/rightlogo"
/>
</LinearLayout>
</TableRow>
<TableRow>
<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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<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">
</FrameLayout>
</LinearLayout>
</TabHost>
</TableRow>
</TableLayout>
</LinearLayout>
Any suggestions regarding the design please?
Thanks
If you are getting StackOverflowExceptions, your UI is too complex. Fire up hierarchyviewer and find ways to remove some layers.
One way to simplify everything and remove layers is to supply the tab contents as Views, not Intents pointing to Activities.
You can just pass the R.drawable ID of the icon to setIndicator().
You should not have the TableLayout inside a LinearLayout (why bother with the LinearLayout?) or a LinearLayout inside of a TableRow (TableRow is a LinearLayout, for all intents and purposes). Please consider dumping the entire TableLayout/TableRow/LinearLayout stuff and just use a single RelativeLayout.