Skip to main content

Android Fragment

Fragment is being hanging out since Andriod 3.0, but with the release of 4.0, it has become an obvious choice for Android Application development for both Tabs and Smart phones. Few people think, fragment is a "Superman" which can add any kind of UI layout/style/decoration. But that is not true, rather than being an UI layout or decoration enhancer, Fragment is a very important concept to manage segments of your UI component code base.

Prior to Fragment, developers were able manage UI flow only at the Activity level. All UI components were Views (mentioned in XML layout and part of Activity) and there was no way to manage these components separately. As a result all view management code were in a single file i.e. Activity class. With fragment approach, we can now remove View management code from Activity and place them in their respective Java classes. So, a pretty neat approach for code management.

Here I'll explain various concepts of Fragment with an example application, which has a split layout- List Fragment on Left and Image Viewer fragment on Right. It explains ListFragment, Dynamic fragment width management, switching fragments and back stack concept.

So, how do we add a fragment ? 
Define a container layout (LinearLayout) and add [fragment] tag inside. Inside the fragment tag, we need to mention respective Fragment Java class.

[LinearLayout 
       xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/list_frag_layout"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:background="#FFFFFF"]
       [fragment 
            android:name="com.pras.frags.MyListFrag"
            android:id="@+id/list_frag"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/]
[/LinearLayout]

Here list_frag_layout is the container layout of list_frag. 

We need to attach this layout with an Activity. The Activity class is the parent of the fragment and it gives callback to onAttach() and onContentView() methods of fragment.

How does the Fragment communicates with Activity ?
A fragment can get the instance of its parent Activity by calling getActivity() or during the onAttach() callback, Framework passes the instance of parent Activity to fragment.
You can define an Interface and the Activity should implement that interface. Fragment class can give call to this Interface method to notify any UI event.
An activity can hold multiple Fragments and fragments should communicate via their parent Activity. 

How do I dynamically manage the width/height of Fragment ?
To achieve this we need to keep the fragment inside a container layout, just like above. Following code piece set the width of list_frag to 50% of the screen.
int screenWidth = getWindowManager().getDefaultDisplay().getWidth();
int leftFragWidth = (int)(screenWidth * 0.50);
LinearLayout.LayoutParams leftParm = new LinearLayout.LayoutParams(leftFragWidth, LinearLayout.LayoutParams.MATCH_PARENT);
findViewById(R.id.list_frag_layout).setLayoutParams(leftParm);
How do I switch multiple Fragments ?
In this example, when user click on any list item, it switch to Detail Fragment. To switch/replace fragment, we need to use Fragment Transaction and hide the previous i.e. ListFragment. To get the benefit of BACK handling, we'll add this switch transaction to the Back Stack. So user can go to the List pressing the Back key. It is really a nice concept.
Following code piece adds Detail Fragment on View and hides the previous fragment i.e. List. To keep track of this transaction, it will add this in Back Stack and finally commit the transaction.
           // Change List fragment with Detail Fragment
        FragmentManager fm = getFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        // Hide previous fragment
        transaction.hide(fm.findFragmentById(R.id.list_frag));
        // Add this new Fragment into the layout
        DetailFrag detailFrag = new DetailFrag();
        transaction.add(R.id.list_frag_layout, detailFrag);
        // Add to this transaction into BackStack
        transaction.addToBackStack(null);
        // Commit this transaction
        transaction.commit();


You can download the complete Fragment example source code from http://code.google.com/p/android-java-sample-code/

Comments

  1. This code show error on when run on android 1.6..

    ReplyDelete
    Replies
    1. "Fragment concept is supported since Android 3.0"

      Delete
  2. Hi Prasanta,
    New concept fragment is good and you explained in a best way. All the best. Keep posting.:)

    ReplyDelete
  3. Hey dude expecting more from you..keep posting..gud work and thnx :)

    ReplyDelete
  4. It's really interesting, No need to start more activities..
    But how can we run this concept in below 3.0 version. Is there any way.

    ReplyDelete
  5. Yes you use the android support library v4 which can be downloaded through sdk manager

    ReplyDelete
  6. i am using fragments in my application is it possible to run in lower versions of smart phones if no can u give idea who to maintain..

    ReplyDelete
  7. hello,, does any one have idea about fragment to fragment communication.
    please refer this http://stackoverflow.com/q/14396836/336990 ,I posted my problem here.

    ReplyDelete

Post a Comment

Popular posts from this blog

Android Parcelable Example

Few days back I had a requirement to send a ArrayList of my Custom Class Objects through Android Intent , I guess most of you also find this requirement now and then. I never thought it can be that tricky. There are built in functions in Intent to send ArrayList of primitive objects e.g. String, Integer, but when it comes to Custom Data Handling Objects, BOOM … you need to take that extra pain! Android has defined a new light weight IPC ( Inter Process Communication ) data structure called Parcel , where you can flatten your objects in byte stream, same as J2SDK’s Serialization concept. So let’s come back to my original requirement, I had a Data Handling class, which groups together a set of information- public class ParcelData {       int id;       String name;       String desc;       String[] cities = {"suwon", "delhi"}; } I want an ArrayList<ParcelData> of Data Handling objec...

Call Control in Android

This tutorial is for those who want to control Phone Call in Android OS. Programmatic approach to Accept or Reject call without user intervention. Kindly note, this approach uses Java Reflection to call methods of an internal class of Android Telephony Framework and might not work with all versions of Android OS. The core concept has been explained in this Android open code . 1st thing 1st, Give the permission . You need to define 3 User Permissions to handle call related functionality- android.permission.READ_PHONE_STATE android.permission.MODIFY_PHONE_STATE (For answerRingingCall() method) android.permission.CALL_PHONE (For endCall() method) Define a Receiver... Create a Receiver which accepts broadcasts with intent action android.intent.action.PHONE_STATE, define following in the Manifest- [receiver android:name=".PhoneCall"]         [intent-filter]             [action android:name="android.in...

Android Looper and Toast from WorkerThread

Have you ever tried to launch Android Toast message from worker thread? Probably you are wondering why the heck it is giving this error- java.lang.RuntimeException: Can't create handler inside thread that has not called Looper.prepare() In this article we are going to explore reason behind the above exception and try to understand how Looper works in Android. At the end, I am going to explain one approach to run Toast from a worker thread, but before that we need to understand how Looper works. If you already know in/out of Looper, you can skip below section and directly move to the solution part. Looper is a very basic wrapper class which attach a MessageQueue to a Thread and manage this queue. MessageQueue is a structure to sequentialize simultaneous processing requests of a Thread.  In Android, message/request processing classes like Handler uses Looper to manage their respective MessageQueue. Looper = Thread + MessageQueue Android Looper Life Cycle: As you can see in the abo...

Overlay on Android Layout

This will help you to create custom Layout and add Overlay on a LinearLayout. The concept can be reused on other Layout classes i.e. RelativeLayout, FrameLayout etc. I have added a popup Selection Palette, containing "Map Pin" and "List" icons. You can minimize the popup by clicking on the section in Green on the left side bottom corner of the screen.   How can I do that- You need to follow 4 steps- 1. Override LinearLayout Create a Class MyLinearLayout.java which should overwrite LinearLayout 2. Drawing You need to overwrite dispatchDraw (Canvas canvas) method. It gives control to the whole screen. Make sure you set android:layout_height="fill_parent" for the associated layout definition in XML. You can draw anything and anywhere on the canvas. dispatchDraw (Canvas canvas) gets called only after underlying views are drawn, so whatever you draw comes in the foreground.   3. Event Handling You need to overwrite dispatchTouchEvent (MotionEvent e...

Android Custom TextView

Have you ever tried to add custom behavior to in-build Android Text View or create custom attributes? If yes, this article is going to help you. Here we'll create Single Custom TextView with support for custom attributes to display First and Last Name in different font and colors. During this process we'll learn following topics- 1. How to override default Views in Android 2. How to define custom Layout Attributes in Android So, Let's get started... Following sections explains necessary changes required in Java code and XML layout files. Create Custom Text View (MyTextView.java) 1. Override Android's default TextView   2. Implement Constructors. If you want custom attributes, override Constructor having Attributes in argument. 3. Override onMeasure(): Calculate required width and height, based on Text Size and selected Font. Once calculation is complete, set updated measure using setMeasuredDimension (reqWidth, reqHeight) Note: It’s really important to define the corr...

Google SpreadSheet Library for Android

You might have already tried using Google's GData Lib to access SpreadSheet from Android, and after few hours of try, you start Google for any alternate solution. I have also spent number of hours without any solution. So, I have developed SpreadSheet client Lib [ works on Android :-) ] and ideally work on any Java platform- http://code.google.com/p/google-spreadsheet-lib-android/ Latest version: 2.1 (Added support for List Feed. Please visit above link to get more info.) Supported Features: 1. Create/Delete Spreadsheet 2. List all stored Spreadsheets 3. Add/Delete WorkSheet into/from a given SpreadSheet 4. List all Worksheets of a given Spreadsheet 5. Add Records into WorkSheet/SpreadSheet (It supports Table based record handling) 6. Retrieve Record from WorkSheet/SpreadSheet ( Structured Query support) 7. Retrieve Record as List Feed from Worksheet 8. Update/Delete Records 9. Share ShreadSheet with user/group/domain. 10. Conditional data retrieval- ...

HashMap Internal

I always wanted to implement the logic behind the famous data structure of Java , HashMap and here it comes. Though it’s not the complete implementation considering all optimization scenarios, but it will highlight the basic algorithm behind the HashMap . So let’s start, this implementation will use my LinkedList implementation (Reason: for this implementation I thought to write everything from the scratch apart from primitive data types. Sounds weird? May be ;-) ). You may refer my earlier post on LinkedList , as I’m going to use it. HashMap is a key-value pair data structure, where you retrieve value by passing key. To optimize the search of key, a concept of Bucket (an Array of Java Objects) has been introduced. This is used, so that if search hits this Bucket , corresponding value element is instantly retrieved, otherwise it iterates sequentially through the Linked List associated with each Bucket element. So you can say if all HashMap elements get fit into the Bucket, retrieving...

Accessing Yahoo Finance API

Since last few days I was wondering the right set of Web Service to read Country wise Stock Exchange index information . I found a bunch of scattered information, but no straight forward answer. It seems there are not many "reliable" and "flexible" options and Yahoo Finance is one of the top of this class. Though Yahoo Finance is very powerful, some how its very less documented and it seems Yahoo doesn't care much about this wonderful web service and expect Developers to do some kind of "hacking". The only online resource that I (and most of you as well ) found is one 3rd party web site- http://www.gummy-stuff.org/Yahoo-data.htm and it seems they know much more than what Yahoo dose..;-) Anyway let me continue and share my experience and information to help budding developer who wants to use Yahoo Finance Web Service in their Mobile, Web o r Desktop s olution. There are 2 set of APIs to access Yahoo Finance details- YQL based Web Service : Th...

Eclipse EGIT, Download Code, Attach Framework code & Debug

This article explains procedure to download Android source (few important Apps and Framework base code) using Eclipse EGit plugin and then attach framework code to debug important framework classes (e.g. Activity etc.). Install EGit Download Source from GIT Repository Attach Framework code Debug Download EGit Plug-in EGit is a GIT plugin for Eclipse which helps to mange GIT clone, Check-ins, Sync etc. from your Eclipse workspace. Eclipse (Version: 3.7.x) -> Help -> Install New Software -> "Add" - " http://download.eclipse.org/egit/updates ". Once the plug-in installation is successful, you'll find a new Eclipse View perspective- "Git Repository Exploring"    Download Android source To download code from Android GIT repository, we need to create "local Git clone". Each local clone is associated with Remote Clone URL.   https://android.googlesource.com/ lists Git Repository URLs for different sections of An...