In this tutorial, you will learn how to implement fragment tabs in your Android application. Tabs allow the user to navigate between sibling screens by selecting the appropriate tab indicator available at the top of the display.
Read More - What is Android Fragment with Example
In previous versions of Android, tabs could be implemented using a TabWidget and TabHost. However, these functionality has been deprecated. By using fragments, it allows designs without the need for you to manage complex changes to the view hierarchy. So lets begin…
Create a new project in Eclipse File > New > Android Application Project. Fill in the details and name your project FragmentTabs.
- Application Name : FragmentTabs
- Project Name : FragmentTabs
- Package Name : com.androidbegin.fragmenttabs
- Then name your activity MainActivity.java
- Open your MainActivity.java and paste the following codes.
MainActivity.java
package com.androidbegin.fragmenttabs;
import android.app.ActionBar;
import android.app.ActionBar.Tab;
import android.os.Bundle;
import android.app.Activity;
public class MainActivity extends Activity {
// Declare Tab Variable
Tab tab;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Create the actionbar
ActionBar actionBar = getActionBar();
// Hide Actionbar Icon
actionBar.setDisplayShowHomeEnabled(false);
// Hide Actionbar Title
actionBar.setDisplayShowTitleEnabled(false);
// Create Actionbar Tabs
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
// Create first Tab
tab = actionBar.newTab().setTabListener(new FragmentsTab1());
// Create your own custom icon
tab.setIcon(R.drawable.tab1);
actionBar.addTab(tab);
// Create Second Tab
tab = actionBar.newTab().setTabListener(new FragmentsTab2());
// Set Tab Title
tab.setText("Tab2");
actionBar.addTab(tab);
// Create Third Tab
tab = actionBar.newTab().setTabListener(new FragmentsTab3());
// Set Tab Title
tab.setText("Tab3");
actionBar.addTab(tab);
}
}
For the Tab title, you are allowed to use custom images. For this tutorial, we have prepared a sample image for the tab icon or you can use any image you like. Put your downloaded sample image into your res > drawable-hdpi.
Sample Tab Image
We have created 3 tabs for this tutorial using Action Bar Navigation Mode Tabs. Next we need to create 3 fragments for our tabs in different classes. Below are the codes we use in MainActivity.java to create tabs.// Create first Tab
tab = actionBar.newTab().setTabListener(new FragmentsTab1());
// Create your own custom icon
tab.setIcon(R.drawable.tab1);
actionBar.addTab(tab);
// Create Second Tab
tab = actionBar.newTab().setTabListener(new FragmentsTab2());
// Set Tab Title
tab.setText("Tab2");
actionBar.addTab(tab);
// Create Third Tab
tab = actionBar.newTab().setTabListener(new FragmentsTab3());
// Set Tab Title
tab.setText("Tab3");
actionBar.addTab(tab);
First create a class for FragmentsTab1. Go to File > New > Class and name it FragmentsTab1.java. Select your package named com.androidbegin.fragmenttabs and click Finish.
Open your FragmentsTab1.java and paste the following codes.
FragmentsTab1.java
package com.androidbegin.fragmenttabs;
import android.os.Bundle;
import android.app.ActionBar.Tab;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.ActionBar;
public class FragmentsTab1 extends Fragment implements ActionBar.TabListener {
private Fragment mFragment;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Get the view from fragment1.xml
getActivity().setContentView(R.layout.fragment1);
}
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
mFragment = new FragmentsTab1();
// Attach fragment1.xml layout
ft.add(android.R.id.content, mFragment);
ft.attach(mFragment);
}
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
// Remove fragment1.xml layout
ft.remove(mFragment);
}
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
Following the second fragment. Create another class for FragmentsTab2. Go to File > New > Class and name it FragmentsTab2.java. Select your package named com.androidbegin.fragmenttabs and click Finish.
Open your FragmentsTab2.java and paste the following codes.
FragmentsTab2.java
package com.androidbegin.fragmenttabs;
import android.os.Bundle;
import android.app.ActionBar.Tab;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.ActionBar;
public class FragmentsTab2 extends Fragment implements ActionBar.TabListener {
private Fragment mFragment;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Get the view from fragment2.xml
getActivity().setContentView(R.layout.fragment2);
}
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
mFragment = new FragmentsTab2();
// Attach fragment2.xml layout
ft.add(android.R.id.content, mFragment);
ft.attach(mFragment);
}
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
// Remove fragment2.xml layout
ft.remove(mFragment);
}
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
Finally, create the class for FragmentsTab3. Go to File > New > Class and name it FragmentsTab3.java. Select your package named com.androidbegin.fragmenttabs and click Finish.
Open your FragmentsTab3.java and paste the following codes.
FragmentsTab3.java
package com.androidbegin.fragmenttabs;
import android.os.Bundle;
import android.app.ActionBar.Tab;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.ActionBar;
public class FragmentsTab3 extends Fragment implements ActionBar.TabListener {
private Fragment mFragment;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Get the view from fragment3.xml
getActivity().setContentView(R.layout.fragment3);
}
public void onTabSelected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
mFragment = new FragmentsTab3();
// Attach fragment3.xml layout
ft.add(android.R.id.content, mFragment);
ft.attach(mFragment);
}
public void onTabUnselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
// Remove fragment3.xml layout
ft.remove(mFragment);
}
public void onTabReselected(Tab tab, FragmentTransaction ft) {
// TODO Auto-generated method stub
}
}
Now that we have our fragment classes, lets create the graphical layouts for all the fragments. To do that, create an XML file for your Graphical Layout. Go to res > layout > Right Click on layout > New >Android XML File
Name your new XML file fragment1.xml
Open your fragment1.xml and paste the following codes.
fragment1.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/Fragment1" />
</RelativeLayout>
Create the second layout. Go to res > layout > Right Click on layout > New >Android XML File
Name your new XML file fragment2.xml
Open your fragment2.xml and paste the following codes.
fragment2.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"Create the third layout for the last fragment. Go to res > layout > Right Click on layout > New >Android XML File.
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/Fragment2" />
</RelativeLayout>
Name your new XML file fragment3.xml
Open your fragment3.xml and paste the following codes.
fragment3.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/Fragment3" />
</RelativeLayout>
Change the strings for textview texts in strings.xml. Open your strings.xml and paste the following codes. Go to res > values > strings.xml
strings.xml
<resources>
<string name="app_name">Fragment Tabs</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">Fragment Tabs</string>
<string name="Fragment1">This is Fragment 1</string>
<string name="Fragment2">This is Fragment 2</string>
<string name="Fragment3">This is Fragment 3</string>
</resources>
Unfortunately, using fragment tabs requires “minimum SDK version 13″. To use fragment tabs lower than SDK version 13, you will have to use Actionbarsherlock Fragment Tabs.
Finally, set the “android:minSdkVersion” to “13″
Open your AndroidManifest.xml, and paste the following codes.
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.androidbegin.fragmenttabs"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="13"
android:targetSdkVersion="15" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name=".MainActivity"
android:label="@string/title_activity_main" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
Output
Thanks a lot, great tutorial!! *****
ReplyDelete