Next Tutorial
Coding a Share Intent For Text

Prev Page
View All Tutorials

---

Coding a Tabbed Fragment

If you are just arriving at this page; and you are not familiar with creating Android Apps, we suggest you begin with our tutorials: Android Tutorials i and How To Create a Simple App in Android
From there follow along with each tutorial lesson.

COPY/PASTE CODE
First, create a java/xml android template app using AIDE, (or Android Studio). Then you can get the code for this app from the EXAMPLE CODE section on this page. Replace the code on the pages you need to(with our tutorial code); in order to create this app.
Sometimes, new pages have to be created.
All the other coded pages in your app can remain as they are; they don't need to be changed.

---

This is the App - Fragment Tabs
It has three fragments, and three tabs; one fragment view in each tab.

Where - How To Use Fragments

Fragments can be added to your layout activity. If you only have one activity,(one app page), you can still add as many fragments as you want to it.
For this app; we created a tabbed layout design using fragments.

We added three fragments which give us three distinct views in the app. We added three tabs also. Each fragment is added to each tab. To browse each view, you just goto each tab.

You can add whatever you like to each fragment view; text,photos, buttons; design the layout as you like. With fragments, you can design a modulized or multi paneled layout.

Adding Tabbed Fragments

Each fragment you add to your app must be defined in your layout file(for this app, is main.xml file).

Fragment Container

Because we are adding three fragments; and we want to browse them using tabs; we need a container to hold the fragments. The 'Frame Layout' is used for this purpose.

So instead of defining the 3 individual fragments in our layout file(main.xml); instead we only have to define the FrameLayout element; which will be our fragment_container; as shown in this code.
main.xml

And, we gave it an android id as such:
an android:id: fragment_container.

This android id is then coded in another page; the TabListener.java file, as such: 'R.layout.fragment_container'. By doing so, the android system attaches these two pages, and then loads and displays the fragments into the view. The TabListener.java file has the code that allows us to click on each tab and see the fragment view.

Creating - Naming Your App Using AIDE

When creating your app,(from left menu) choose:
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE

Name your app:

Fragment Tabs for the App Name and,
for the package name(next line) use:
com.aac.fragmenttabexample.

Where Code is Coded - The Coded Pages

Code for the app - Fragment Tabs

For this app you will use these coded pages:

1 layout file, main.xml, located at res/layout/.

3 fragments, you must create 3 new xml pages, one for each fragment; and put them at res/layout/fragment1.xml; and res/layout/fragmenttab2.xml, res/layout/fragmenttab3.xml

Each fragment xml page created requires a fragment java file also. Xml pages and java pages are used together. This is true for coding fragment classes or coding activities.

The java class file is where we define the location of the fragment xml file. The android system needs this in order to display the fragment layout(view) on the screen.

So, for fragmenttab2.xml,(shown here in photo), we also created FragmentTab2.java. Looking at the FragmentTab2.java file, you see the fragmenttab2.xml file is declared as the layout at: R.layout.fragmenttab2

We require 3 fragment java pages, you must create 3 new java pages; one for each fragment; these files are where you define the 'R.layout' for each.fragment xml file created; like shown in the photo.
Put the these java files at: src/java/FragmentTab1.java and src/java/FragmentTab2.java, src/java/FragmentTab3.java

1 Java class MainActivity.java file;

The MainActivity.java file, is where we define everything about the tabbed fragments; the tabs, declare the tab variables(their names),their titles, drawables for the tabs if your adding any; and defines the TabListener code.

1 Java class file; TabListener.java; you must create this page, and add it to src/java/TabListener.java. This coded page controls the clicks on the tabs.

1 AndroidManifest.xml file;

1 strings.xml, page where you define the app name - Fragment Tabs, located at res/values/strings.xml. Also, we added text to each fragment view; and this text is added to our strings.xml file also as: strings - Fragment1, Fragment2, Fragment3.

All these pages are created for us as we used the 'template' app to create our app. To update the code for each page just copy and paste from our Example Code section this page. Some new pages, as mentioned, have to be created.

When creating new xml pages, goto folder res/layout, and select 'create new xml file'; and for creating the new java class pages , goto folder java; and select 'create new class'. Java class file names are camel cased; so use, MyNewPage.java; and not, mynewpage.java. Xml page file names are lower case.

FYI:

The manifest xml page, where we define our app's activity java page(and other things); however, since we are not adding any new activities to our app; we don't need to define any new java pages in the manifest file; so we can leave it as it is.

As for the fragments we are adding; fragments do not need to be defined in the manifest.

Since this app has no images; we don't have to add any to our drawable-hdpi folder. The folder src/res/drawable-hdpi also has our ic_launcher.png image; but we don't need to add it because it was added automatically when we created our android template app.

EXAMPLE CODE - Code For This Tutorial

JUST copy the code for this tutorial App Name is 'Fragment Tabs - located at AppProjects/Fragment Tabs in AIDE, open the AIDE app, then open App Projects, THEN select the 'Fragment Tabs', app from your files hierachy(left menu);

then click on any file from the app, like strings.xml Make sure at top of page, the app name 'Fragment Tabs' is there next to AppProjects like so: AppProjects/Fragment Tabs, then you know you have the proper App.
Once a file is in the editor, you can edit, save it, then RUN your APP, Install, and Open your app.

Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been installed on your tablet, you can open it Simply by 'Clicking on the Android little green App Icon',with the wording 'Fragment Tabs' on your tablet. It will be with your other installed apps.

If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.

Example Code App - Fragment Tabs :
Use Mouse To Copy Paste the Code
MainActivity.java package com.aac.fragmenttabexample; import android.app.ActionBar; import android.app.Fragment; import android.os.Bundle; import android.app.Activity; public class MainActivity extends Activity { // Declare Tab Variable ActionBar.Tab Tab1, Tab2, Tab3; Fragment fragmentTab1 = new FragmentTab1(); Fragment fragmentTab2 = new FragmentTab2(); Fragment fragmentTab3 = new FragmentTab3(); @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ActionBar actionBar = getActionBar(); // Hide Actionbar Icon actionBar.setDisplayShowHomeEnabled(false); // Hide Actionbar Title actionBar.setDisplayShowTitleEnabled(false); // Create Actionbar Tabs actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Set Tab Icon and Titles Tab1 = actionBar.newTab().setIcon(R.drawable.tab1); Tab2 = actionBar.newTab().setText("Tab2"); Tab3 = actionBar.newTab().setText("Tab3"); // Set Tab Listeners Tab1.setTabListener(new TabListener(fragmentTab1)); Tab2.setTabListener(new TabListener(fragmentTab2)); Tab3.setTabListener(new TabListener(fragmentTab3)); // Add tabs to actionbar actionBar.addTab(Tab1); actionBar.addTab(Tab2); actionBar.addTab(Tab3); } } _____________________________________ main.xml <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/fragment_container" android:layout_width="match_parent" android:layout_height="match_parent" /> _____________________________________ TabListener.java package com.aac.fragmenttabexample; import android.app.ActionBar.Tab; import android.app.Fragment; import android.app.FragmentTransaction; import android.app.ActionBar; public class TabListener implements ActionBar.TabListener { Fragment fragment; public TabListener(Fragment fragment) { // TODO Auto-generated constructor stub this.fragment = fragment; } @Override public void onTabSelected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub ft.replace(R.id.fragment_container, fragment); } @Override public void onTabUnselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub ft.remove(fragment); } @Override public void onTabReselected(Tab tab, FragmentTransaction ft) { // TODO Auto-generated method stub } } _____________________________________ FragmentTab1.java package com.aac.fragmenttabexample; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.app.Fragment; public class FragmentTab1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragmenttab1, container, false); return rootView; } } _____________________________________ FragmentTab2.java package com.aac.fragmenttabexample; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.app.Fragment; public class FragmentTab2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragmenttab2, container, false); return rootView; } } _____________________________________ FragmentTab3.java package com.aac.fragmenttabexample; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.app.Fragment; public class FragmentTab3 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragmenttab3, container, false); return rootView; } } _____________________________________ 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:textSize="18dp" android:typeface="serif" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/Fragment1" /> </RelativeLayout> _____________________________________ fragmenttab2.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:textSize="18dp" android:typeface="serif" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/Fragment2" /> </RelativeLayout> _____________________________________ fragmenttab3.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:textSize="18dp" android:typeface="serif" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="@string/Fragment3" /> </RelativeLayout> _____________________________________ strings.xml <resources> <string name="app_name">Fragment Tabs </string> <string name="menu_settings">Settings</string> <string name="Fragment1"><b>This is Fragment 1 - fragment1.xml</b>\nYou can add whatever you want to this fragment view; text, photos, buttons.</string> <string name="Fragment2"><b>This is Fragment 2 - fragmenttab2.xml</b>\nYou can add whatever you want to this fragment view; text, photos, buttons.</string> <string name="Fragment3"><b>This is Fragment 3 - fragmenttab3.xml</b>\nYou can add whatever you want to this fragment view; text, photos, buttons.</string> </resources> _____________________________________ AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.aac.fragmenttabexample" 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" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>

This free script provided by
JavaScript Kit