How To Code a Tabbed Fragment '
Prev Page Coding A ListView Fragment
This Tutorial App Coding a Tabbed Fragment

Next App Tutorial Coding a Share Intent For Text



Coding a Tabbed Fragment



If you are just arriving at this page; and you are not familiar with with creating Android Apps, we suggest you begin with our tutorials: Coding Android App Pages and How To Create a Simple App in Android

From there follow along with each tutorial lesson.

AIDE and ANDROID STUDIO

We are using AIDE(programming language java/xml), to create these tutorial apps on our
tablet(7" screen) that has android version 5.0.
Once we build and RUN our app; we then install the app on this same tablet; and the app is also installed on a smartphone that has android version 6.

AIDE has a free and paid version. As of this year, the paid version of AIDE is about $20 canadian. Once you create your apps code pages, you need to RUN the app to INSTALL it on your tablet or smartphone.

You can also create; RUN your apps using the code in these tutorials, with Android Studio. Android Studio is for desktop computers. Choose Java XML as the programming language. Android Studio is free to install and use for your android app development. Although not as convenient as testing your app on an actual android device; you can test your newly created app in Android Studio using an android emulator.

Complete Example Codes are available for each of our tutorials. With these example codes you can make a functioning android app in either AIDE or Android Studio.

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.

Fragment Tabs Android App

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, the main.xml file); or if not, then they must be defined in the java class file for the code method your creating.
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 will define the FrameLayout element; which will be our fragment_container; as shown in this code.
main.xml
Fragment Frame Layout Container
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 now knows to load and display 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

You can name your app whatever you like; if your using the name as shown in our example code use;

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

If you want to name it differently, you can, just change the code to whatever name you choose where it says, com.aac.fragmenttabexample, in the coded pages, usually at the top of the java class pages like; MainActivity.java

The Coded Pages


Code for the app - Fragment Tabs

For this app you will use these coded pages:

1 layout file, main.xml,(already created just copy paste this tutorial app code); 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; requires a fragment java file also. Why? Because the java 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
Fragment xml Layout File Fragment xml Defined in Java Class File
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 this 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; (already created, just copy paste this tutorial app code).

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; (already created, just add at line,
android:targetSdkVersion="15", change the number to 15).
We need the sdk version 15 because this version supports the 'fragment transaction code class', which is required for our fragments(to add - remove them, as we click the tabs).

1 strings.xml page(already created), 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 as: strings - Fragment1, Fragment2, Fragment3. Just copy paste the code from this app tutorial code.

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 USE YOUR MOUSE to 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.





Example Code App - Fragment Tabs :
Use Mouse To Copy Paste the Code


This free script provided by
JavaScript Kit

Share This Page


AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid - with Free, create java/xml android template apps, and there is a couple free android coding lessons.
With paid, create java/xml android template apps, and you can create a 'keystore' for your app, so you can publish your apps to the marketplaces like Google Playstore and Amazon.
GoTo Aide

ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
GoTo Android Studio Learn more - Android Studio

The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.



TUTORIALS I
Java XML
The Coded Pages

Beginners Article
About Our Tutorials
Coding androidmanifest.xml
Coding R.java
Coding buildconfig.java
Coding mainactivity.java
Coding main.xml
Coding strings.xml
Coding drawables

TUTORIALS II
Java XML
Learning To Code

Create A Simple
Android App

Change App Icon

Add Text and Style

Add Buttons To App

Placing Text in
Buttons


Change View
Background Color


Change Screen
Orientation


Add Image to
Activity View


Add Horizontal
Scroll View


Add a Frame Layout

How to Add Themes
To Your App

How To Code
Customized Styles

Code a Toast Message

Coding Resource
Identifiers



TUTORIALS III

Java XML
Adding Features,
Functionality

Coding Shape
Drawable - Lines


Coding A WebView

Coding A Timed
Screen Splash


Coding A Gradient
Drawable


Coding Fragments


Coding A
ListView Fragment


Coding a
Tabbed Fragment


Share Intent
for Text


Share Intent
for Images


Media Player
with Audio
Coding A
Video Player


Localize Your App
World Languages





from the Web
SPECIFIC CODING TASKS

Add Clickable Button
To textView

Image Button with
Selector

Linear Layout with
weight attribute

OnClick Displays
Message

Screen Density
Coding Practices


CODING ENVIRONMENTS

AIDE
for android tablets

Android Studio
For desktop computers


IMAGES ICONS FOR YOUR APPS

Code Canyon Paid From $1

IconFinder.com Free and Paid From $1


Our ARTICLES

App Distribution
Launching Your Android App
How To Be Successful

Android App Libraries
What are they and how
to implement them


ScrollView
How To Implement
ScrollView


View All Articles


Coding Tools

Android Studio
Course - Paid

Java Programming
Course - Free

Git Hub Course
Free



About Our Images

All images on this page are copyrighted material.
You can use the images included with each tutorial for the purpose of creating your android app. These images are not to be distributed or sold.

APP SIGNING KEY- GOOGLE


How To Add Your Google Key
To Manifest.xml
Web Article

How To Sign Your APK Web Article

Google Developer Console
Create Account Submit Your App
Web Article


APP SIGNING - AMAZON
Amazon App DRM - APK KEY
Amazon Developer Portal
Create Account - Submit Your App


MONETIZE YOUR APP
InMobi
AdMob
Google's In-App Billing for App monetization.

Monetizing Your App
How Tos




Follow Us On Twitter