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/
Related
I'm trying to make tabs in a layout. I've found a lot of examples and tutorials using TabWidget, TabHost, but they all involve one of the following:
Java code in the activity
Separate activities for each tabs
Separate fragments for each tabs
The content inside the tabs is static, so I should just be able to include everything in the layout, in pure XML.
Anyway to do that?
The simple answer, no. You have to setup your TabHost in Java code and create your tabs. You can have static layouts for the tabs without using fragments but it still requires setup in Java.
If you don't do this setup in code, your TabWidget won't know which layout corresponds to which tab and wouldn't be able to function. You're going to have to write a bit of code.
The code for doing this is really simple though.
The XML (placed inside your layout where you want it):
<TabHost android:id="#+id/tab_host"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<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="wrap_content">
<LinearLayout
android:id="#+id/tab_one_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<LinearLayout
android:id="#+id/tab_two_container"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
</TabHost>
The Java code (placed wherever you setup your layout):
TabHost host = (TabHost)findViewById(R.id.tab_host);
host.setup();
TabSpec spec = host.newTabSpec("Tab One");
spec.setContent(R.id.tab_one_container);
spec.setIndicator("Tab One");
host.addTab(spec);
spec = host.newTabSpec("Tab Two");
spec.setContent(R.id.tab_two_container);
spec.setIndicator("Tab Two");
host.addTab(spec);
OK, the best I found is this:
https://gist.github.com/jerolimov/618086
It still involves Java code, but there is no duplication of structure in the code, everything is in XML.
I'm trying to do a simple tab app in android with two tabs. My problem is that when I put this code, in the tab, only is shown the text, but no the icons.
If I put the text to "" the icon is shown.
Could someone help me? My android version is 4.0.3.
Thanks a lot.
<?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="fill_parent" >
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TabWidget android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/tabs" />
<FrameLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/tabcontent" >
<LinearLayout android:id="#+id/tab1"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView android:id="#+id/textView1"
android:text="Contenido Tab 1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout android:id="#+id/tab2"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView android:id="#+id/textView2"
android:text="Contenido Tab 2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
and the activity code is
public class TabTestActivity extends Activity {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Resources res = getResources();
TabHost tabs=(TabHost)findViewById(R.id.tabhost);
tabs.setup();
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setContent(R.id.tab1);
spec.setIndicator("sss",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
tabs.addTab(spec);
spec=tabs.newTabSpec("mitab2");
spec.setContent(R.id.tab2);
spec.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
tabs.addTab(spec);
tabs.setCurrentTab(0);
}
as you can see is very simple. But when I write spec.setIndicator("",
res.getDrawable(android.R.drawable.ic_dialog_map));
I can see the icon, bu when I write spec.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
I can only see TAB2, but no both of them.
It seems that there are no enougth space to show both. So I've tried to get increase the tab height with this
tabs.getTabWidget().getChildAt(1).getLayoutParams().height = 150;
but not seems to work.
I replaced the label name with null value.
Now I can see the icon alone..
Could not find out any other solution.
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setIndicator("",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
Intent sssIntent = new Intent(this, First.class);
spec.setContent(sssIntent);
tabs.addTab(spec);
//your are over loading the 1st one so you can see only the last added one
TabHost.TabSpec spec=tabs.newTabSpec("mitab1");
spec.setIndicator("sss",
res.getDrawable(android.R.drawable.ic_btn_speak_now));
Intent sssIntent = new Intent(this, First.class);
spec.setContent(sssIntent);
tabs.addTab(spec);
TabHost.TabSpec spec2=tabs.newTabSpec("mitab2");
spec2=tabs.newTabSpec("mitab2");
spec2.setIndicator("TAB2",
res.getDrawable(android.R.drawable.ic_dialog_map));
Intent sssIntent2 = new Intent(this, Second.class);
spec2.setContent(sssIntent2 );
tabs.addTab(spec2);
The visibility of the icon (together with the label) in the tab depend on the target device and the android platform version.
I had a deeper look into this issue and added more details and a solution at your other (quite similiar) question about this problem; It can be found here:
https://stackoverflow.com/a/11379708/414581
Adding this in AndroidManifest.xml solved the issue.
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#android:style/Theme.NoTitleBar">
</application>
I am trying to get this TabHost to work. When I add the TabHost to the xml layout and run the program I can see the different content for each tab stacked on top of each other. This tells me that the layout is working properly. I then add my spec code to the activity and then if closes the program on the emulator when I navigate to this screen.
So here is my XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/tWelcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<Button
android:id="#+id/bNewTask"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add Task" />
<TabHost
android:id="#+id/myTabs"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:id="#+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" >
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/tab2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tTest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Test"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
</FrameLayout>
</LinearLayout>
</TabHost>
</LinearLayout>
Here now is my Activity code: (The only part that matters...)
welcomeName = (TextView) findViewById(R.id.tWelcome);
Test = (TextView) findViewById(R.id.tTest);
newTask = (Button) findViewById(R.id.bNewTask);
myTask = (ListView) findViewById(R.id.listView);
TabHost th = (TabHost) findViewById(R.id.myTabs);
welcomeName.setText("Welcome " + ToDoActivity.myUser.getName() + "!");
th.setup();
TabSpec specs = th.newTabSpec("tag1");
specs.setContent(R.id.tab1);
specs.setIndicator("All");
th.addTab(specs);
specs = th.newTabSpec("tag2");
specs.setContent(R.id.tab2);
specs.setIndicator("Personal");
th.addTab(specs);
This is the Android tutorial page for tabs:
http://developer.android.com/resources/tutorials/views/hello-tabwidget.html
It has information and requirements about Tabs and it gives lots of sample code. You should be able to copy-paste from there and then edit.
Specifically, I'd change the ids for all the Tab elements to be the suggested Android ids:
android:id/tabhost
android:id/tabs
android:id/tabcontent
A couple possibilities come to mind.
If you're using a TabActivity (not a requirement, but makes things easier), the tabhost must have android:id="#android:id/tabhost" as the id.
I've also seen it said that the tabhost must be the root node. I cannot confirm that using the android docs. I'd probably make this change after all other avenues have failed (or someone confirms that it is true).
If you are using a TabActivity, you don't need to reference the tabhost by id, or use the setup() method. I see you are using the setup() method, but I can;t tell if your activity is a TabActivity. If it is, maybe that's causing your issue.
Following is the method I use for a tab layout setup and it works for me. Note that this assumes the tabhost as the root node of the layout and it has android:id/tabhost as the id and it is a TabActivity.
tabhost code:
public class Tabs extends TabActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.your_layout);
TabHost tabHost = getTabHost();
TabHost.TabSpec spec;
spec = tabHost.newTabSpec("tag1").setIndicator("All").setContent(R.id.tab1);
tabHost.addTab(spec);
spec = tabHost.newTabSpec("tag2").setIndicator("Personal").setContent(R.id.tab2);
tabHost.addTab(spec);
}
}
Hope this helps! (Be sure to click the check mark to accept the answer if it solves your problem).
I have four tabs in tabbar. Whenever I launch my application I need to run all the tabs (four) of a tabbar, because all the tabs contains webviews that should be loaded whenever the app is launched. But the first tab should gets highlighted. I have used
setCurrentTab(0);
to load the first tab,but iam unable to load remaining tabs without clicking.
To do this, first create a xml file. The sample file is shown as below.
<?xml version="1.0" encoding="utf-8"?>
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#android:id/tabhost"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#drawable/background">
<TabWidget android:layout_width="fill_parent" android:id="#android:id/tabs"
android:layout_height="wrap_content" />
<FrameLayout android:layout_width="fill_parent" android:id="#android:id/tabcontent"
android:layout_gravity="bottom" android:paddingTop="70dp"
android:layout_height="match_parent">
<ScrollView android:layout_height="fill_parent" android:id="#+id/viewTab1"
android:layout_width="match_parent">
<!-- Your view you want -->
</ScrollView>
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:id="#+id/viewTab2">
<!-- Your view you want -->
</LinearLayout>
<!-- Add as many view you want with unique id -->
</FrameLayout>
Each layout will refer to a unique layout.
In main activity use following
TabHost tabHost = getTabHost();
TabSpec spec1 = tabHost.newTabSpec("FirstTabView");
TabSpec spec2 = tabHost.newTabSpec("SecondTabView");
spec1.setContent(R.id.viewTab1);
spec1.setIndicator("First Tab");
spec2.setIndicator("Second Tab");
spec2.setContent(R.id.viewTab2);
tabHost.addTab(spec1);
tabHost.addTab(spec2);
tabHost.setup();
You can add as many tabs needed. And this all will be initialized at same time.
I hope this helps you :)
I have an action bar with 3 tabs in it.
It looks like this:
| All | Calls | Network |
I want them to have the same width. How can I do it?
You can set a tag to any view using setCustomView() method on the ActionBar.Tab. This is how I did it. The custom view is loaded from a layout that in my case was similar to the built-in layout used by ActionBar.Tag, you set the margins, sizes, and content to whatever you need.
They all align in the row with same width
<?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:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<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="fill_parent"
android:layout_height="wrap_content"/>
</HorizontalScrollView>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
</TabHost>
And then set tab host as
TabHost tabHost;
TabHost.TabSpec spec;
tabHost=getTabHost()
Intent intent;
intent=new Intent().setClass(this, BirthDayTab.class);
spec=tabHost.newTabSpec("artists").setIndicator("BirthDay",res.getDrawable(R.drawable.ic_tab_artists)).setContent(intent);
tabHost.addTab(spec);
https://groups.google.com/forum/#!topic/actionbarsherlock/4oT9KwhB0O8
This is the exact solution that I have been looking for days