Introduction to fragments

Introduction to fragments

Fragments can be called as a small portion within an activity interface or simply a subactivity. Therefore, a user can include multiple fragments inside a single activity.

The concept of fragments is more relevant in the case of tablets. Unlike smartphone interfaces, tablet computers are more wide. Therefore, more space can be utilized while developing applications for tablets.

An example for such a view is; Consider a page that holds the names of available books in an e-reader website at the left side of the window. While clicking on each books, the right side of the window pane will display the contents of the particular book. Such a view cannot be integrated inside a smartphone UI. Therefore, fragments are introduced from HoneyComb onwards. ie, Android 3.0 version, mostly used in tablets.

Features of a fragment:

Ø    can use multiple fragments in a single activity

Ø    can reuse fragments in different activities

Ø    fragment has its own lifecycle

Ø    it can receive its own inputs

Ø    fragments can be added or removed while the activity is live

Ø    but, if the host activity is destroyed or paused, fragments too got affected

Sample application that helps in understanding the concept of fragments in Android is given below.

Start with a new project with target version as Android 3.0 and create the main activity class named FragmentTutorialActivity.class.

Insert the code into that class:

package com.febi.tut;

import android.app.Activity;

import android.app.Fragment;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class FragmentTutorialActivity extends Activity implements OnItemClickListener {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

       

        ListView l = (ListView) findViewById(R.id.number_list);

        ArrayAdapter<String> androidVersions = new ArrayAdapter<String>(getApplicationContext(),

                   android.R.layout.simple_list_item_1, new String[]{"Cupcake",

                                                                                                                                                "Donut",

                                                                                                                                                "Eclair","Froyo","Gingerbread","Honeycomb","Ice Cream Sandwich"});

     

        l.setAdapter(androidVersions);

        l.setOnItemClickListener(this);

    }

          /**

           * Called when a version name gets clicked

           */

          public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                  

                   /*Calling the fragment class that decides the view to be displayed in the fragment*/

                   Fragment f = new TestFragment(position+1);

         

        FragmentTransaction ft = getFragmentManager().beginTransaction();

        ft.replace(R.id.the_frag, f);

        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);

        ft.addToBackStack(null);

        ft.commit();

          }

}

Now create a new class named TestFragment.class and insert the code into the file.

package com.febi.tut;

import java.io.ByteArrayOutputStream;

import java.io.IOException;

import java.io.InputStream;

import android.app.ActionBar.LayoutParams;

import android.app.Fragment;

import android.content.Context;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

public class TestFragment extends Fragment {

private int version;

   

    public TestFragment() {

         

    }

   /**

    * Constructor for being created explicitly

    */

   public TestFragment(int position) {

                    this.version = position;

    }

    /**

     * If we are being created with saved state, restore our state

     */

    @Override

    public void onCreate(Bundle saved) {

        super.onCreate(saved);

        if (null != saved) {

          version = saved.getInt("version");

        }

    }

   

    /**

     * Save the Android version to be displayed

     */

    @Override

    public void onSaveInstanceState(Bundle toSave) {

          toSave.putInt("version", version);

    }

    /**

     * Make a grid to view the version image and details

     */

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle saved) {

         

          Context c = getActivity().getApplicationContext();

         

        LinearLayout l = new LinearLayout(c);

        LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT, 0);

       

        l.setLayoutParams(params);

        

        ImageView i = new ImageView(c);

        TextView t=new TextView(c);

        t.setTextSize(20);

       

       

        switch(version){

        case 1:

          i.setImageResource(R.drawable.cupcake);

          t.setText(readTxt("cupcake"));

          break;

        case 2:

          i.setImageResource(R.drawable.donut);

          t.setText(readTxt("donut"));

          break;

        case 3:

          i.setImageResource(R.drawable.eclair);

          t.setText(readTxt("eclair"));

          break;

        case 4:

          i.setImageResource(R.drawable.froyo);

          t.setText(readTxt("froyo"));

          break;

        case 5:

          i.setImageResource(R.drawable.gingerbread);

          t.setText(readTxt("ginger"));

          break;

        case 6:

          i.setImageResource(R.drawable.honeycomb);

          t.setText(readTxt("honey"));

          break;

        case 7:

          i.setImageResource(R.drawable.icecream);

          t.setText(readTxt("ice"));

          break;

        }

         

          l.addView(i);

          l.addView(t);

       

        return l;

    }

    private String readTxt(String version){

          int id = 0;

          if(version.equals("cupcake"))

          {

          id=R.raw.cupcake;

          }else if(version.equals("donut"))

          {

           id=R.raw.donut;

          }

          else if(version.equals("eclair"))

          {

           id=R.raw.eclair;

          }

          else if(version.equals("froyo"))

          {

           id=R.raw.froyo;

          }

          else if(version.equals("ginger"))

          {

           id=R.raw.ginger;

          }

          else if(version.equals("honey"))

          {

           id=R.raw.honey;

          }

          else if(version.equals("ice"))

          {

           id=R.raw.icecream;

          }

       

        InputStream inputStream = getResources().openRawResource(id);

       

        ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();

       

        int i;

     try {

      i = inputStream.read();

      while (i != -1)

         {

          byteArrayOutputStream.write(i);

          i = inputStream.read();

         }

         inputStream.close();

     } catch (IOException e) {

      // TODO Auto-generated catch block

      e.printStackTrace();

     }

    

        return byteArrayOutputStream.toString();

       }

}

Now comes the main xml file. Copy the code below to that file too.

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

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

    android:orientation="horizontal"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/frags">

    <ListView

            android:id="@+id/number_list"

            android:layout_width="250dip"

            android:layout_height="match_parent" />

    <fragment class="com.febi.tut.TestFragment"

            android:id="@+id/the_frag"

            android:layout_width="match_parent"

            android:layout_height="match_parent" />

</LinearLayout>

Add the descriptions for each Android version in a text file and store those text files inside res/raw folder in your project.

A sample text file;

Cupcake.txt

Codename : Cupcake

Platform : Android 1.5

API Level : 3

Mention the first activity class inside the Manifest file and then run the program.