Android Dynamic Tab Layout

The actual TabWidget within Android is placed as much as enable you to very easily define tabs during compile time. On the other hand, occasionally, you would like to include tabs to your activity while in runtime.

One example is, think about an email client exactly where individual email messages obtain opened up within their individual tab, with regard to simple toggling in between messages.
In cases like this, you cannot discover how many tabs or even exactly what their own contents is going to be right up until runtime, once the user selects to open a message.

Luckily for us, Android at the same time supports including tabs dynamically in runtime, Now we are going to see how to do this.

With regard to compile-time-defined tabs, within your Java code, to put together tabs along with contents provided within layout XML, you just create a TabHost.TabSpec object and give us a call at setContent() onto it, using the widget ID in the tab’s contents.

        TabHost.TabSpec spec=tabs.newTabSpec("buttontab");
        spec.setContent(R.id.buttontab);
        spec.setIndicator("Add Tab");
        tabs.addTab(spec);

Including tabs dynamically in runtime performs very similar way, other than you utilize an alternative flavor of setContent(), one which requires a TabHost.TabContentFactory example.

This really is only a callback which will be invoked — you offer an implementation associated with createTabContent() and employ it to create as well as return the View that will becomes the content of the tab.

How about looking at a good example?

Initially, the following is the layout XML for all activities which creates the actual tabs as well as defines one tab, that contains just one ImageButton. By Clicking the button new Tab will be created dynamically

Creating Layout for Tab Widget

main.xml

<?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: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">
    	  <ImageButton
        	android:id="@+id/buttontab"
          	android:layout_width="75dp"
          	android:layout_height="75dp"
          	android:background="@layout/corner"
          	android:contentDescription="@string/image_description"
          	android:onClick="addTab"
          	android:src="@drawable/clock_img"
          	android:layout_gravity="center"/>
    </FrameLayout>
  </LinearLayout>
</TabHost>

Creating Corner Round Shape for the Image Button

corner.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
 </shape>

TabWidget as well as FrameLayout are actually indirect children belonging to the TabHost, and also the FrameLayout by itself includes children which represents the different tabs.
In this example, there are two tabs : a clock and a button.
In the case of more advanced circumstance, the actual tabs are most likely some type of LinearLayout making use of their own contents.

Java code to configure the Tab Widget

main.xml

package com.vimaltuts.android.tablayouts;
import android.app.Activity;
import android.content.res.Resources;
import android.os.Bundle;
import android.view.View;
import android.widget.AnalogClock;
import android.widget.TabHost;
public class AndroidTabLayoutActivity extends Activity {
	private TabHost tabs=null;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        tabs=(TabHost)findViewById(R.id.tabhost);
        tabs.setup();
        Resources res=getResources();
        TabHost.TabSpec tspec=tabs.newTabSpec("buttontab");
        tspec.setContent(R.id.buttontab);
        tspec.setIndicator("Add a Tab");
        tabs.addTab(tspec);
      }
      public void addTab(View v) {
        TabHost.TabSpec tspec=tabs.newTabSpec("Tab1");
        tspec.setContent(new TabHost.TabContentFactory() {
          public View createTabContent(String tag) {
            return(new AnalogClock(AndroidTabLayoutActivity.this));
          }
        });
        Resources res=getResources();
        tspec.setIndicator("Clock");
        tabs.addTab(tspec);
      }
}

Output : Android Dynamic Tab Layout

Android Tab Layout application, showing the first tab

The same application, showing the second tab — after clicking the ImageButton

The same application, generating more Tabs

So far we have create new Android Tab Layout Dynamically through this Android Dynamic Tab Layout example. On the next tutorial we gonna see about the Android Context Menu

Google+