How to implement Android Tabs Fragment

How to implement Android Tabs Fragment

In this tutorial, i will take you step by step on how to implement Android Tabs Fragments.Android Tabs Fragments allows you to switch from one screen to another that are related.

Our Previous Post Creating Fragments Using Android Studio

Let get started.

• Open your IDE.Click New `Projects.
• Enter Project name as "FragmentsTabsExample"
• Select minimum SDK
• Enter MainActivity name as "MainActivity.java"

Copy Below code.

package net.techoverload.www.fragmentstabsexample;

import android.os.Bundle;

import android.app.ActionBar;

import android.app.Activity;

import android.app.Fragment;

public class MainActivity extends Activity

{

ActionBar.Tab tab1,tab2,tab3;

FragmentTab1 fragTab1=new FragmentTab1();

FragmentTab2 fragTab2=new FragmentTab2();

FragmentTab3 fragTab3=new FragmentTab3();

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ActionBar bar=getActionBar();

bar.setDisplayHomeAsUpEnabled(false);

bar.setDisplayShowTitleEnabled(false);

bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

tab1=bar.newTab().setText("Tab 1");

tab2=bar.newTab().setText("Tab 2");

tab3=bar.newTab().setText("Tab 3");

tab1.setTabListener(new TabListener(fragTab1));

tab2.setTabListener(new TabListener(fragTab2));

tab3.setTabListener(new TabListener(fragTab3));

bar.addTab(tab1);

bar.addTab(tab2);

bar.addTab(tab3);

}

}

 activity_main.xml layout

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/fragment_location"

tools:context="net.techoverload.www.fragmentstabsexample.MainActivity">

</FrameLayout>

Create FragmentTab1

FragmentTab1.java code

package net.techoverload.www.fragmentstabsexample;

import android.os.Bundle;

import android.app.Fragment;

import android.view.ViewGroup;

import android.view.View;

import android.view.LayoutInflater;

public class FragmentTab1 extends Fragment

{

public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState)

{

View rootView=inflater.inflate(R.layout.fragment_fragment_tab1,container,false);

return rootView;

}

}

FragmentTab1 layout Xml code

<FrameLayout 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"

tools:context="net.techoverload.www.fragmentstabsexample.FragmentTab1">

<!-- TODO: Update blank fragment layout -->

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Fragment Tab 1" />

</FrameLayout>

FragmentTab2.java code

package net.techoverload.www.fragmentstabsexample;

import android.os.Bundle;

import android.app.Fragment;

import android.view.ViewGroup;

import android.view.View;

import android.view.LayoutInflater;

/**

* A simple {@link Fragment} subclass.

*/

public class FragmentTab2 extends Fragment {

public FragmentTab2() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

View rootView=inflater.inflate(R.layout.fragment_fragment_tab2, container, false);

return rootView;

}

}

FragmentTab2 layout Xml code

<FrameLayout 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"

tools:context="net.techoverload.www.fragmentstabsexample.FragmentTab2">

<!-- TODO: Update blank fragment layout -->

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="Fragment Tab 2" />

</FrameLayout>

FragmentTab3.java code

package net.techoverload.www.fragmentstabsexample;

import android.os.Bundle;

import android.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

/**

* A simple {@link Fragment} subclass.

*/

public class FragmentTab3 extends Fragment {

public FragmentTab3() {

// Required empty public constructor

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

// Inflate the layout for this fragment

View rootView= inflater.inflate(R.layout.fragment_fragment_tab3, container, false);

return rootView;

}

}

FragmentTab3 layout Xml code

<FrameLayout 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"

tools:context="net.techoverload.www.fragmentstabsexample.FragmentTab3">

<!-- TODO: Update blank fragment layout -->

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="@string/hello_blank_fragment" />

</FrameLayout>

TabListener.java code

package net.techoverload.www.fragmentstabsexample;

/**

* Created by Eric

* www.techoverload.net

*/

import android.app.ActionBar;

import android.app.ActionBar.Tab;

import android.app.FragmentTransaction;

import android.app.Fragment;

public class TabListener implements ActionBar.TabListener

{

Fragment fragment;

public TabListener(Fragment fragment)

{

this.fragment=fragment;

}

public void onTabSelected(ActionBar.Tab Tab,FragmentTransaction ft)

{

ft.replace(R.id.fragment_location,fragment);

}

public void onTabUnselected(ActionBar.Tab tab,FragmentTransaction ft)

{

ft.remove(fragment);

}

public void onTabReselected(Tab tab,FragmentTransaction ft)

{

}

}

Download Example source code

Output: