Anroid Tabs Layout with Fragments

Posted: 28/03/2013 in Android
 

My last article was on the use of basic fragments. It showed how and when to use a fragment. You can find the article at http://www.c-sharpcorner.com/UploadFile/2fd686/fragments-in-android/
 
This article shows one of the major uses of fragments.

You might have seen many applications with bottom or top tab bars. 

In Android we previouslly implemented it using TabActivity and ActivityGroup but now that these two have been deprecated from the Android SDK, we will implement the functionality using fragments.

So let’s start. Create a new project and create the main class as MainTabActivity.java and a layout file activity_main_tab.xml will be created for you.

1. Add two .png files to the “res/drawable” folder for the icons of the tabs and name them tab_icon1.png and tab_icon2.png.

2. Create a new file tab_style.xml in “res/drawable” for the background of the tabs. You can check out this article : http://www.c-sharpcorner.com/UploadFile/2fd686/android-buttons-background2/ to create an awesome background but for now you can use this code:

tab_style.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”&gt;
    <!– state selected –>    
    <item android:state_selected=”true”>
        <shape android:shape=”rectangle”>
            <gradient
                android:startColor=”#555555″
                android:centerColor=”#444444″
                android:endColor=”#333333″
                android:angle=”90″/>
            <padding android:left=”7dp”
                android:top=”7dp”
                android:right=”7dp”
                android:bottom=”7dp” />
            <stroke
                android:width=”2dip”
                android:color=”#555555″ />
         </shape> 
    </item>
    <!– state normal –>
    <item>
        <shape android:shape=”rectangle”>
            <gradient
                android:startColor=”#222222″
                android:centerColor=”#181818″
                android:endColor=”#111111″
                android:angle=”90″/>
            <padding android:left=”7dp”
                android:top=”7dp”
                android:right=”7dp”
                android:bottom=”7dp” />
            <stroke
                android:width=”2dip”
                android:color=”#222222″ />
        </shape>
     </item>
</selector>

3. Create “tabs_icon.xml” in “res/layout”, this is the view for the tabs. You can use this code:

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    android:id=”@+id/tabsLayout” android:layout_width=”fill_parent”
    android:layout_height=”fill_parent” android:background=”@drawable/tab_style”
    android:gravity=”center” android:orientation=”vertical”>
    <ImageView android:layout_width=”fill_parent” android:layout_height=”wrap_content”
        android:layout_weight=”1″
        android:id=”@+id/tab_icon” />
    <TextView
        android:id=”@+id/tab_text”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:textColor=”#ffffff”
        android:text=”asdfads”
        android:paddingTop=”5dp”
        android:paddingBottom=”2dp”
        android:textSize=”14sp”
    />
</LinearLayout>

4. Create fragment1.xml and fragment2.xml in the “res/layout” folder. 

fragment1.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    android:layout_width=”match_parent”
    android:layout_height=”match_parent” 
    android:background=”#AA1111″>
    <TextView
        android:layout_height=”wrap_content”
        android:layout_width=”wrap_content”
        android:text=”This is Tab 1″ 
        android:textSize=”20sp”
        android:textColor=”#dddddd”
        android:layout_centerInParent=”true”
        />
</RelativeLayout>

fragment2.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    android:layout_width=”match_parent”
    android:layout_height=”match_parent” 
    android:background=”#AAAA11″>
    <TextView
        android:layout_height=”wrap_content”
        android:layout_width=”wrap_content”
        android:text=”This is Tab 2″ 
        android:textSize=”20sp”
        android:textColor=”#333333″
        android:layout_centerInParent=”true”
        />
</RelativeLayout>

5. Open “activity_main_tab.xml” from the “res/layout” folder, the root element is TabHost that contains the FrameLayout for the fragment and TabWidget to hold the tabs and paste this code.

<?xml version=”1.0″ encoding=”utf-8″?>
<TabHost
    xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
    android:id=”@android: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”>

        <FrameLayout
            android:id=”@android:id/tabcontent”
            android:layout_width=”fill_parent”
            android:layout_height=”0dp”
            android:layout_weight=”1″/>

       <TabWidget
            android:id=”@android:id/tabs”
            android:orientation=”horizontal”
            android:layout_width=”fill_parent”
            android:layout_height=”wrap_content”
            android:layout_weight=”0″/>

    </LinearLayout>
</TabHost>

6. Now create 2 Java files, Fragment1.java and Fragment2.java, they have the minimum code for a Fragment.

Fragment1.java

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

public class Fragment1 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        
        View view = inflater.inflate(R.layout.fragment1, container, false);
        
        return view;
    }
}

Fragment2.java

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

public class Fragment2 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        
        View view = inflater.inflate(R.layout.fragment2, container, false);
        
        return view;
    }
}

7. Open MainTabActivity.java. I have added comments to the code for the explanation. Paste this code and run the app.

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import android.widget.TabHost;
import android.widget.TextView;

public class MainTabActivity extends FragmentActivity {
    
    /* Tab identifiers */
    static String TAB_A = “First Tab”;
    static String TAB_B = “Second Tab”;
    
    TabHost mTabHost;
    
    Fragment1 fragment1;
    Fragment2 fragment2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_tab);
        
        fragment1 = new Fragment1();
        fragment2 = new Fragment2();
        
        mTabHost = (TabHost)findViewById(android.R.id.tabhost);
        mTabHost.setOnTabChangedListener(listener);
        mTabHost.setup();
        
        initializeTab();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main_tab, menu);
        return true;
    }

    /*
     * Initialize the tabs and set views and identifiers for the tabs
     */
    public void initializeTab() {
        
        TabHost.TabSpec spec    =   mTabHost.newTabSpec(TAB_A);
        mTabHost.setCurrentTab(-3);
        spec.setContent(new TabHost.TabContentFactory() {
            public View createTabContent(String tag) {
                return findViewById(android.R.id.tabcontent);
            }
        });
        spec.setIndicator(createTabView(TAB_A, R.drawable.tab_icon1));
        mTabHost.addTab(spec);

        spec                    =   mTabHost.newTabSpec(TAB_B);
        spec.setContent(new TabHost.TabContentFactory() {
            public View createTabContent(String tag) {
                return findViewById(android.R.id.tabcontent);
            }
        });
        spec.setIndicator(createTabView(TAB_B, R.drawable.tab_icon2));
        mTabHost.addTab(spec);
    }
    
    /*
     * TabChangeListener for changing the tab when one of the tabs is pressed
     */
    TabHost.OnTabChangeListener listener    =   new TabHost.OnTabChangeListener() {
          public void onTabChanged(String tabId) {
            /*Set current tab..*/
              if(tabId.equals(TAB_A)){
                pushFragments(tabId, fragment1);
              }else if(tabId.equals(TAB_B)){
                pushFragments(tabId, fragment2);
              }
          }
        };
        
    /*
     * adds the fragment to the FrameLayout
     */
    public void pushFragments(String tag, Fragment fragment){
        
        FragmentManager   manager         =   getSupportFragmentManager();
        FragmentTransaction ft            =   manager.beginTransaction();
        
        ft.replace(android.R.id.tabcontent, fragment);
        ft.commit();
    }
    
    /*
     * returns the tab view i.e. the tab icon and text
     */
    private View createTabView(final String text, final int id) {
        View view = LayoutInflater.from(this).inflate(R.layout.tabs_icon, null);
        ImageView imageView =   (ImageView) view.findViewById(R.id.tab_icon);
        imageView.setImageDrawable(getResources().getDrawable(id));
        ((TextView) view.findViewById(R.id.tab_text)).setText(text);
        return view;
    }
}

This is the result:

Article3Img1.png    Article3Img2.png

Happy Coding.
 

 

 
Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s