Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HOW TO CREATE TAB LAYOUT USING TABHOST WITH TABWIDGET AND FRAMELAYOUT

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 71
    Comment on it

    In this blog I will guide you to “Create Tab Layout in Android using TABHOST with TABWIDGET and  Framelayout”.  This will be done by adding android tabs to your app using XML tabhost tabwidget.  

     

    First we will create one project Then  the layout file like(layout_main.xml). This file is located in  ( res -> layout -> layout_main.xml ) folder.

     

    We will place tabhost under the default Linearlayout. Tabhost contains the tabwidget with id of android:id = “@android:id/tabs” and framelayout with id of android:id = “@android:id/tabcontent”.

     

    By using TABWIDGET the list of tabs will get displayed and the each tab level will be represented along with this object will send the message to parent container tabhost when user select the tab and after that the page will get switched by tabhost.

     

    FRAMELAYOUT is a block level element it is used to display the single item on screen. Framelayout it is used to hold a single child view.

     

    So now, we will place the linearlayout under the framelayout for that, we need to add the number of linearlayout according to num of tabs and framelayout contain each of the linearlayout for the tab content. See below code example


    Xml file look like this:

     

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:id="@+id/activity_homepage"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin"
       android:orientation="vertical"
       tools:context="org.loginapp.Homepage">
    
    <TabHost
           android:id="@+id/tab_host"
           android:layout_width="match_parent"
           android:layout_height="wrap_content">
    
           <LinearLayout
               android:layout_width="match_parent"
               android:orientation="vertical"
               android:layout_height="wrap_content">
    
               <TabWidget
                   android:id="@android: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/tab_one"
                       android:orientation="vertical"
                       android:paddingTop="16dp"
                       android:layout_width="match_parent"
                       android:layout_height="match_parent">
    
                       <TextView
                           android:layout_width="match_parent"
                           android:layout_height="wrap_content"
                           android:text="this is first tab"
                           />
                   </LinearLayout>
    
                   <LinearLayout
                       android:id="@+id/tab_two"
                       android:paddingTop="16dp"
                       android:orientation="vertical"
                       android:layout_width="match_parent"
                       android:layout_height="match_parent">
    
                       <TextView
                           android:layout_width="match_parent"
                           android:layout_height="wrap_content"
                           android:text="this is second tab"
                           />          
                   </LinearLayout>
                   <LinearLayout
                       android:id="@+id/tab_third"
                       android:paddingTop="16dp"
                       android:orientation="vertical"
                       android:layout_width="match_parent"
                       android:layout_height="match_parent">
    
                       <TextView
                           android:layout_width="match_parent"
                           android:layout_height="wrap_content"
                           android:text="this is third tab"
                           />
                   </LinearLayout>
               </FrameLayout>
    
           </LinearLayout>
    
       </TabHost>
    </LinearLayout>
    

     

    In java Activity (MainActivity.java)


    Finally let's modify code in java, First we will create the instance of tabhost, tabhost container tabbed window view. tabhost contains two children first set the tab level that user select or user click and second framelayout that display the contain of the page and call the setUp() of this class and add to the tab space.

     

    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.widget.ImageView;
    import android.widget.LinearLayout;
    import android.widget.TabHost;
    
    public class Homepage extends AppCompatActivity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_homepage);       
    
           TabHost mTabHost = (TabHost)findViewById(R.id.tab_host);
           mTabHost.setup();
    
           // add the first tab
           TabHost.TabSpec first_tab = mTabHost.newTabSpec("first");
           first_tab.setIndicator("tab_one");
           first_tab.setContent(R.id.tab_one);
           mTabHost.addTab(first_tab);
    
           // add the second tab
           TabHost.TabSpec sec_Tab = mTabHost.newTabSpec("second");
           sec_Tab.setIndicator("tab_two");
           sec_Tab.setContent(R.id.tab_two);
           mTabHost.addTab(sec_Tab);
    
           // add the third tab
           TabHost.TabSpec third_tab = mTabHost.newTabSpec("third");
           third_tab.setIndicator("tab_three");
           third_tab.setContent(R.id.tab_third);
           mTabHost.addTab(third_tab);
       }
    }
    
    

     

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: