Saturday 16 February 2013

Creating Tabs using Fragments

    Tabs are excellent way to provide user access to multiple functionality very easily. Tabs were earlier implemented  with multiple activity inside one activity however with Honeycomb(thats long time back) Android discourages use of Activity inside Activity.

    With HoneyComb Android Sdk introduced Fragment .Fragments are very powerful part of Android SDK. Fragment is UI component that provides better control.They provide more modular control of different functionality inside Activity.

     However to provide backwards compatibility you can use Compatibility Package .

The primary classes related to fragments are:


The base class for all activities using compatibility-based fragment (and loader) features

The base class for all fragment definitions

The class for interacting with fragment objects inside an activity

The class for performing an atomic set of fragment operations

Now lets start with our example,
We will create Application with two Tabs. So for each tab we will need two Fragment.

here is our sample fragment

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class FragmentA extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
      TextView textView=new TextView(getActivity());
      textView.setText("Hello I am fragment A");
      return textView;
   }
}

Similarly we can have FragmentB. Now we create our Activity that will be our tab container.For using Fragments inside Activity we must extend FragmentActivity.
import android.support.v4.app.FragmentActivity;
//Some more imports

public class MainActivity extends FragmentActivity {
      //More code to come later
Now its time for layout of our Activity


<tabhost  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/tab_activity_bg" >


    <linearlayout 
 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

        <tabwidget android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />



        <framelayout 
            android:id="@android:id/tabcontent" 
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />


        <framelayout android:id="@+android:id/realtabcontent" 
           android:layout_width="match_parent" 
           android:layout_height="0dp"
           android:layout_weight="1" />
           </tabwidget>
      </linearlayout>
</tabhost>
Please note the android:id it must be the same Now back to our Activity
    TabHost mTabHost;
    TabManager mTabManager;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTabHost = (TabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup();
        mTabManager = new TabManager(this, mTabHost, R.id.realtabcontent);
        setTabView();

        mTabManager.addTab(
             mTabHost.newTabSpec("tabA").setIndicator(TabAText),
             FragmentA.class, null);
        mTabManager.addTab(
             mTabHost.newTabSpec("tabB").setIndicator(TabBText),
             FragmentB.class, null);



Here TabManager mTabManager is only thing that we will we discussing
TabManager will manage our tabs for us.



    
import java.util.HashMap;

import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentTransaction;
import android.view.View;

import android.widget.TabHost;
import android.widget.TabHost.OnTabChangeListener;

public class TabManager implements OnTabChangeListener {

    private final FragmentActivity mActivity;
    private final TabHost mTabHost;
    private final int mContainerId;
    private final HashMap mTabs = new  
             HashMap();
    TabInfo mLastTab;

   static final class TabInfo {
       private final String tag;
       private final Class clss;
       private final Bundle args;
       private Fragment fragment;

       TabInfo(String _tag, Class _class, Bundle _args) {
           tag = _tag;
           clss = _class;
           args = _args;
       }

   }

  static class DummyTabFactory implements TabHost.TabContentFactory {
  private final Context mContext;

   public DummyTabFactory(Context context) {
       mContext = context;
   }

   public View createTabContent(String tag) {
       View v = new View(mContext);
       v.setMinimumWidth(0);
       v.setMinimumHeight(0);
       return v;
  }

 }

  public TabManager(FragmentActivity activity, TabHost tabHost,
   int containerId) {
      mActivity = activity;
      mTabHost = tabHost;
      mContainerId = containerId;
      mTabHost.setOnTabChangedListener(this);
 }

  public void addTab(TabHost.TabSpec tabSpec, Class clss, Bundle args) {
      tabSpec.setContent(new DummyTabFactory(mActivity));
      String tag = tabSpec.getTag();

      TabInfo info = new TabInfo(tag, clss, args);

  // Check to see if we already have a fragment for this tab,probably
  // from a previously saved state. If so, deactivate it, because our
  // initial state is that a tab isn't shown.

      info.fragment = mActivity.getSupportFragmentManager().findFragmentByTag(tag);
      if (info.fragment != null && !info.fragment.isDetached()) {
          FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();
          ft.detach(info.fragment);
          ft.commit();
      }

      mTabs.put(tag, info);
      mTabHost.addTab(tabSpec);
 }

  public void onTabChanged(String tabId) {
      TabInfo newTab = mTabs.get(tabId);
      if (mLastTab != newTab) {
      FragmentTransaction ft = mActivity.getSupportFragmentManager().beginTransaction();
      if (mLastTab != null) {
          if (mLastTab.fragment != null) {
              ft.detach(mLastTab.fragment);
          }
      }
      if (newTab != null) {
          if (newTab.fragment == null) {
              newTab.fragment = Fragment.instantiate(mActivity,newTab.clss.getName(),newTab.args);
              ft.add(mContainerId, newTab.fragment, newTab.tag);
          } else {
              ft.attach(newTab.fragment);
          }
      }
      mLastTab = newTab;
      ft.commit();
      mActivity.getSupportFragmentManager().executePendingTransactions();
  }
 }
}

14 comments:

  1. can u tell what is setTabView(); method for?

    ReplyDelete
  2. Hello.
    What is setTabView(); in line 10 of MainActivity ?

    Thanks.

    ReplyDelete
  3. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
    Android Training in chennai | Android Training|Android Training in chennai with placement | Android Training in velachery

    ReplyDelete
  4. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area.
    digital marketing training in tambaram

    digital marketing training in annanagar

    digital marketing training in marathahalli

    digital marketing training in rajajinagar

    Digital Marketing online training

    full stack developer training in pune

    ReplyDelete
  5. It is amazing and wonderful to visit your site.Thanks for sharing this information,this is useful to me...
    python training in rajajinagar
    Python training in btm
    Python training in marathahalli

    ReplyDelete
  6. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.

    Data Science Training in Chennai
    Data science training in bangalore
    Data science online training
    Data science training in pune

    ReplyDelete
  7. Great post! I am actually getting ready to across this information, It’s very helpful for this blog.Also great with all of the valuable information you have Keep up the good work you are doing well.
    angularjs-Training in pune

    angularjs-Training in chennai

    angularjs Training in chennai

    angularjs-Training in tambaram

    angularjs-Training in sholinganallur

    ReplyDelete
  8. I found your blog while searching for the updates, I am happy to be here. Very useful content and also easily understandable providing.. Believe me I did wrote an post about tutorials for beginners with reference of your blog. 
    Microsoft Azure online training
    Selenium online training
    Java online training
    Java Script online training
    Share Point online training

    ReplyDelete
  9. Very good and interesting article, really helpful for the confirmation, I really like to visit this site because it provides very useful information.

    Accident Attorney Fort Lauderdale

    ReplyDelete
  10. This is a very knowledge and informative blog..
    Thanks for sharing with us,
    We are again come on your website,
    Thanks and good day,
    Please visit our site,
    buylogo

    ReplyDelete
  11. HEY!
    Visit our site for many beautiful logo designs with 5O% off I expect You will be happy with us.Logo Designers

    ReplyDelete
  12. this is such a great blog I ever say thanks for sharing it with us...
    we surely can help you if you have an interest in web designing or logo designing then visit us?
    Logo Designers

    ReplyDelete
  13. I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.
    data science course fee in hyderabad

    ReplyDelete