How can I create a layout with tabs completely in XML? - android

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.

Related

How to update TabSpec content (ex. add textView)

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/

android: how do I use tabhost/tabwidget (genrally tabs) putting different activities on tabcontents

Firstly!,
I've used the generated Activity using the tab navigation type. I just used it to automatically generate Tab control on the Activity. Its on the latest ADT.I think :(,,
Now my question is how do I use the Fragments from other Activity in to the Tab contents
secondly,
Is there any other way to put another Activity inside the Tab content which on the, lets say its MainACtivity.class?....
Planning to have 3 Tabs with 3 different Activitys, each of which contains 1 Activity per tab content
Really need ur help guys I have run out of ideas and sources :( :( ...
Kind of new to android development so be gentle. :)
tab.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_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_marginTop="60dp"/>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="5dp"/>
</RelativeLayout>
</TabHost>
Add below code in your activity.java file:
extend your activity by android.app.TabActivity instead of Activity
TabHost tabHost=getTabHost();
TabHost.TabSpec spec;
Intent intent;
intent=new Intent().setClass(YourActivity.this, NewActivity.class);
spec=tabHost.newTabSpec("tab1").setIndicator("imageId").setContent(intent);
tabHost.addTab(spec);
intent=new Intent().setClass(YourActivity.this, New1Activity.class);
spec=tabHost.newTabSpec("tab2").setIndicator("imageId").setContent(intent);
tabHost.addTab(spec);
tabHost.setCurrentTab(0);
In the same way you can add as many tabs in your activity.

Best way to implement tabs in android?

I have read looked through some code that implements tabs on the bottom of the app's page. And there is no deprecated method/class inside the code, and to me it is a very easy and clean way to implements tabs.
But I heard the new way of implementing tabs is to use fragments.
So, which one is better? And why?
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TabHost
android:id="#+id/edit_item_tab_host"
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"
android:layout_gravity="bottom" />
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="65px" >
<LinearLayout
android:id="#+id/edit_item_date_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5px" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="date"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/edit_item_geocontext_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5px" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="lieu"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/edit_item_text_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:padding="5px" >
</LinearLayout>
</FrameLayout>
</TabHost>
</LinearLayout>
MainActivity class:
import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
public class MainActivity 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.edit_item_tab_host);
// don't forget this setup before adding tabs from a tabhost using a xml view or you'll get an nullpointer exception
tab_host.setup();
TabSpec ts1 = tab_host.newTabSpec("TAB_DATE");
ts1.setIndicator("tab1");
ts1.setContent(R.id.edit_item_date_tab);
tab_host.addTab(ts1);
TabSpec ts2 = tab_host.newTabSpec("TAB_GEO");
ts2.setIndicator("tab2");
ts2.setContent(R.id.edit_item_geocontext_tab);
tab_host.addTab(ts2);
TabSpec ts3 = tab_host.newTabSpec("TAB_TEXT");
ts3.setIndicator("tab3");
ts3.setContent(R.id.edit_item_text_tab);
tab_host.addTab(ts3);
tab_host.setCurrentTab(0);
}
}
A TabHost cannot contain fragments (well, it can but it's really tricky) so I wouldn't recommend to use it today.
Fragments are the way to go, and if you want to implement the new Tab mechanism (which is integrated to the "new" ActionBar available on Android 3.0) and still support old android versions there is ActionBarSherlock, an open-source project which facilitate the use of the action bar design pattern across all versions of Android with a single API.
A lot of popular apps uses this project nowadays (including Google apps) so it's worth looking at.
A Fragment represents a behavior or a portion of user interface in an
Activity.
The android developer guide.
Your question seems to be worded a little strangely. You are asking about Tabs being at the bottom of the page but asking if you should use Fragments. Those are two different topics.
Yes, you should use Fragments, it is the route android is taking and will continue to take for the future.
Having Tabs at the bottom of the screen or at the top is a design decision. Depends on what would be more comfortable for the user experience, really doesn't have a lot to do with Fragments.
Google has introduced a new View called BottomNavigationView, a standard Bottom Navigation bar for android applications. As per guidelines you can add upto 5 (standard) items and pretty much simple as android's NavigationView.
Please do visit Component Guidelines, to know more about designing.

TabHost android isn't working correctly

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

How to load all the tabs of a tabbar simultaneously in Android

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 :)

Categories

Resources