Android simple fragments switch demo | Fragment demo | Android fragments

Friends,

Am going to share a code which demonstrates simple switching between two fragments on button press. To explain about Fragments,

• A fragment has its own layout and its own behaviour with its own life cycle callbacks.
• You can add or remove fragments in an activity while the activity is running.
• You can combine multiple fragments in a single activity to build a multi-plane UI.
• A fragment can be used in multiple activities.
• Fragment life cycle is closely related to the life cycle of its host activity which means when the activity is paused, all the fragments available in the activity will also be stopped.
• A fragment can implement a behaviour that has no user interface component.

Download Code

1) AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.codehelp4you.simplefragmentdemo"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".HomeActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

2) HomeActivity.java

/*
 * Created by Sathishkumar Durai
 * Code Help 4 You
 * Write to: sathish.codehelp4you@gmail.com
 * Web: www.codehelp4you.com
 */

package com.codehelp4you.simplefragmentdemo;

import com.codehelp4you.simplefragmentdemo.R.id;

import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;

/**
 * 
 * @author Sathish
 *
 */

public class HomeActivity extends Activity implements OnClickListener {

 private Button button1;
 private Button button2;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_home);
 }
  
 @Override
 protected void onResume() {
  super.onResume();

  button1 = (Button)findViewById(R.id.fragmentButton1);
  button1.setOnClickListener(this);
  
  button2 = (Button)findViewById(R.id.fragmentButton2);
  button2.setOnClickListener(this);  
 }

 @Override
 public void onClick(View v) {
  Fragment fragment;
  switch(v.getId())
  {
   case id.fragmentButton1:
    fragment = new FragmentOne();
    LoadFragment(fragment);
    break;
    
   case id.fragmentButton2:
    fragment = new FragmentTwo();
    LoadFragment(fragment);
    break;
    
   default:
    break;
  }
  
 }

 /***
  * This function initiates the FragmentManager and loads the Fragment based on sele
  * @param fr
  */
 void LoadFragment(Fragment fr)
 {
  FragmentManager fm = getFragmentManager();
  FragmentTransaction fragmentTransaction = fm.beginTransaction();
  fragmentTransaction.replace(R.id.fragmentHolder, fr);
  fragmentTransaction.commit();
 }
}

3) activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
        android:id="@+id/fragmentButton1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Fragment No.1"/>

     <Button
         android:id="@+id/fragmentButton2"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:text="Fragment No.2" /> 

   <fragment
        android:name="com.codehelp4you.simplefragmentdemo.FragmentOne"
        android:id="@+id/fragmentHolder"
     android:layout_width="match_parent"
     android:layout_height="match_parent" />
    
</LinearLayout>

4) FragmentOne.java

/*
 * Created by Sathishkumar Durai
 * Code Help 4 You
 * Write to: sathish.codehelp4you@gmail.com
 * Web: www.codehelp4you.com
 */

package com.codehelp4you.simplefragmentdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * @author Sathish
 *
 */
public class FragmentOne extends Fragment {
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  
  //Inflates this View
  return inflater.inflate(R.layout.fragment_one, container, false);
 }

}

5) fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="match_parent" 
   android:orientation="vertical"
   android:background="@android:color/black">"

       <TextView
           android:id="@+id/textView1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_weight="1"
           android:text="1"
           android:textColor="@android:color/white"
           android:textSize="300sp"
           android:textStyle="bold" />

</LinearLayout>

6) FragmentTwo.java

/*
 * Created by Sathishkumar Durai
 * Code Help 4 You
 * Write to: sathish.codehelp4you@gmail.com
 * Web: www.codehelp4you.com
 */

package com.codehelp4you.simplefragmentdemo;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * @author Sathish
 *
 */
public class FragmentTwo extends Fragment {
 
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  
  //Inflates this View
  return inflater.inflate(R.layout.fragment_two, container, false);
 }

}

7) fragment_two.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent" 
   android:orientation="vertical"
   android:background="@android:color/white">

       <TextView
           android:id="@+id/textView2"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="center"
           android:layout_weight="1"
           android:text="2"
           android:textColor="@android:color/black"
           android:textSize="300sp"
           android:textStyle="bold" />

</LinearLayout>

8) strings.xml

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

    <string name="app_name">SimpleFragmentDemo</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>

</resources>

Thank you and See you in the next tutorial!