Thursday, 27 September 2012

Action Bar Tab with Fragments example in android

Before getting started with Fragment, See creating Tab with action bar.  Fragment support in android from API level 11 naturally. But if you want to use fragment below this API level then you need to add backward support library, else it will work fine with any library support above API level 10.

These important classes are used while implementing fragment -

  • FragmentManager
  • FragmentTransaction
FragmentTransaction is responsible to add Fragment, Remove Fragment and commit transaction.

If we start from basic step by step- Then first we will get FragmentManager and and will assign it to FragmentTransaction.

                 fragMentTra = getFragmentManager().beginTransaction();  

Now we have object of FragmentTransaction, so we can perform any addition, removal of new Fragment classes.

I have integrated action bar tab with fragment. I have Three classes FragMent1, FragMent2, FragMent3. On changing of Tab every time i added new fragment inside a Relative Layout. So it looks like you are changing activity inside a Tab Layout.

In my main activity, On changing of action bar Tab i added a new Fragment Every time and remove the previous one. So the output of these procedure is look like screen shot given below

                   
               Fragment With ListView
   
Fragment with Grid View

Fragment with Just Simple Image
Now our main concern is to adding  and removing Fragment inside a Relative Layout, You can take other layout also

1:  if (tab.getText().equals("Listing")) {  
2:                 try {  
3:                      rl.removeAllViews();  
4:                 } catch (Exception e) {  
5:                 }  
6:                 fram1 = new FragMent1();  
7:                 fragMentTra.addToBackStack(null);  
8:                 fragMentTra = getFragmentManager().beginTransaction();  
9:                 fragMentTra.add(rl.getId(), fram1);  
10:                 fragMentTra.commit();  
11:            } else if (tab.getText().equals("Image")) {  
12:                 try {  
13:                      rl.removeAllViews();  
14:                 } catch (Exception e) {  
15:                 }  
16:                 fram2 = new FragMent2();  
17:                 fragMentTra.addToBackStack(null);  
18:                 fragMentTra = getFragmentManager().beginTransaction();  
19:                 fragMentTra.add(rl.getId(), fram2);  
20:                 fragMentTra.commit();  
21:            } else if (tab.getText().equals("Details")) {  
22:                 try {  
23:                      rl.removeAllViews();  
24:                 } catch (Exception e) {  
25:                 }  
26:                 fram3 = new FragMent3();  
27:                 fragMentTra.addToBackStack(null);  
28:                 fragMentTra = getFragmentManager().beginTransaction();  
29:                 fragMentTra.add(rl.getId(), fram3);  
30:                 fragMentTra.commit();  
31:            }  
32:       }  

So this is how we are handling of Fragment. The main benefit is that we have only one activity in complete application. And We separate the complexity of code by using different classes of Fragment.

Every Fragment has one Life Cycle like activity. in oncreateView method we will create the design and will return it. In this method we have inf-later to add one complete layout inside a fragment .

                                                                   Download Source Code

Android News and source code