Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create an activity android with a Tabhost view

In this article we will see how to create an activity with multiple tabs.

In some android applications, you need to enter or display a lot of information in one activity. A simple and effective method is to use tabs in your interface form. The tab host class is also known as a container for a tabbed window view. This object holds two children:

  • In order to select a specific tab, a separate set of tab labels is provided for the user; and
  • To display the content of the page, a FrameLayout object is also provided.

The container object usually controls the individual elements, rather than setting values on the child elements themselves.

Here is a simple example, although detailed, all the steps to make.

Example to realize

Figure 1: Example to realize

Step 1: Create all interface independently

Listing 1: File: Creation.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" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Create map adresse"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Latitude"
            android:textAppearance="?android:attr/textAppearanceLarge" />
        <EditText
            android:id="@+id/creat_lat"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1.41"
            android:text="Longitude"
            android:textAppearance="?android:attr/textAppearanceLarge" />
        <EditText
            android:id="@+id/creat_long"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Information"
            android:textAppearance="?android:attr/textAppearanceLarge" />
    </LinearLayout>
    <EditText
        android:id="@+id/creat_info"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.74"
        android:ems="10"
        android:inputType="textMultiLine" />
    <Button
        android:id="@+id/button_creat"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Add adresse" />
</LinearLayout>

This code helps us to create the simple layout for tag “CREATE ADRESSE”.

Listing 2: File: show_all.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" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Show all"
        android:textAppearance="?android:attr/textAppearanceLarge" />
    <ListView
        android:id="@+id/listView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
    </ListView>
</LinearLayout>

In the above code, the simple layout for tag “SHOW ALL” containing a List View is created.

Listing 3: File: delet.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" >
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Delete map adresse"/>
    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Latitude"/>
        <EditText
            android:id="@+id/edit_bdd_creation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:ems="10" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Longitude"/>
        <EditText
            android:id="@+id/edit_table_creation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="10" >
    </EditText>
    </LinearLayout>
    <Button
        android:id="@+id/button_insert"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Delete adresse" />
</LinearLayout>

Step2: Create tabhos.xml file

In this file, we will insert the three layouts already done on the tab host xml file, with xml tag “<include …/>

Listing 4: tabhos.xml file

<?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" >
    <TabHost
        android:id="@+id/TabHost01"
        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 used to creat tabs -->
            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
            </TabWidget>
            <!-- container of tabs -->
            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >

                <!-- tab N°1 -->
                <!-- Inclusion of the interface -->
                <include
                    android:id="@+id/onglet1"
                    android:layout_width="fill_parent"
                    android:layout_height="match_parent"
                    layout="@layout/creation" >
                </include>
                <!-- tab N°2 -->
                <!-- Inclusion of the interface -->
                <include
                    android:id="@+id/Onglet2"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    layout="@layout/delet" >
                </include>
                <!-- tab N°3 -->
                 <!-- Inclusion of the interface -->
                <include
                    android:id="@+id/Onglet3"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    layout="@layout/show_all" >
                </include>
            </FrameLayout>
        </LinearLayout>
    </TabHost>
</LinearLayout>

Step3: Create MainActivity.java file to install and use tabhost.xml file

Listing 5: MainActivity.java file

public class MainActivity extends Activity {

private TabHost myTabHost;
	
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	// Recuperation du TabHost
	myTabHost =(TabHost) findViewById(R.id.TabHost01);
// Before adding tabs, it is imperative to call the method setup()
				mytabhost.setup();

// Adding tabs
	// tab1 settings
		TabSpec spec = mytabhost.newTabSpec("tab_creation");
	// text and image of tab
		spec.setIndicator("Create adresse",getResources().getDrawable(android.R.drawable.ic_menu_add));
	// specify layout of tab
		spec.setContent(R.id.onglet1);
	// adding tab in TabHost
		mytabhost.addTab(spec);

// otherwise :
mytabhost.addTab(mytabhost.newTabSpec("tab_inser").setIndicator("Delete",getResources().getDrawable(android.R.drawable.ic_menu_edit)).setContent(R.id.Onglet2));

mytabhost.addTab(mytabhost.newTabSpec("tab_affiche").setIndicator("Show All",getResources().getDrawable(android.R.drawable.ic_menu_view)).setContent(R.id.Onglet3));
				
ListView lv=(ListView) findViewById(R.id.listView1);
MyListAdapter adapter =new MyListAdapter(this);
lv.setAdapter(adapter);				
	}
}

A tab has a tag, tab indicator and a content which helps to keep track of it. This builder helps the user to choose among these options. For the tab indicator, the choices available to the user are:

  • Set a label; and
  • Set a label and an icon.

For the tab content, the choices for users are:

  • The id of a View;
  • Aa TabHost.TabContentFactory that creates the View content; and
  • An Intent that launches an Activity.

Conclusion

Finally, in this article, we have learned how to create a single activity with multiple tabs.



I am well versed with Computer Programming languages and possess good working knowledge on software languages such as C, Java, PHP, HTML and CSS

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login