Android Programming Tutorials 17 : Fragments Example In Android

Fragment Example: 


OUT PUT Of The Tutorial:

Create Android Application:

• File >> New >> Android Application
• Enter Project name: FragmentApp
• Package: com.ambilpursunil.newapp
• Keep other default selections, click Next until you reach Finish

                             

1.Simply Copy and Past the Code which is display below in the  MainActivity.java    

package com.ambilpursunil.newapp;

import android.app.Activity;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.Button;

public class MainActivity extends Activity {

                    Button bn;    

           

    @Override

    protected void onCreate(Bundle savedInstanceState) {

                   super.onCreate(savedInstanceState);

                   setContentView(R.layout.activity_main);

                   bn = (Button) findViewById(R.id.b1);

                   bn.setOnClickListener(new OnClickListener() {

                                   

    @Override

    public void onClick(View v) {

                 // TODO Auto-generated method stub

                 FragmentManager fm =  getFragmentManager();

                 FragmentTransaction ft = fm.beginTransaction();

                 FirstFragment f1 = new FirstFragment();

                 ft.add(R.id.main_id, f1);

                 ft.addToBackStack(null);

                 ft.commit();

                 }

                 });

           }

  

    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

                // Inflate the menu; this adds items to the action bar if it is present.

                 getMenuInflater().inflate(R.menu.main, menu);

                return true;

       }

}

2.Now Create fragment class, right click on the src=>package=>New=>java class=>Name it as   FristFragment.java Copy and Past the below code:

package com.ambilpursunil.newapp;

import android.app.Fragment;

import android.app.FragmentManager;

import android.app.FragmentTransaction;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

public class FirstFragment extends Fragment {

            Button bn;

            EditText msg;

            TextView txt;

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

            View v = inflater.inflate(R.layout.first_fragment,container,false);

                        bn = (Button) v.findViewById(R.id.b2);

                       

                        //passing the data from Activity to Fragment class

                        txt = (TextView) v.findViewById(R.id.txData);

                        msg = (EditText)getActivity().findViewById(R.id.etMsg);

                        bn.setOnClickListener(new OnClickListener() {

                                   

              @Override

              public void onClick(View v) {

                       // TODO Auto-generated method stub

                       FragmentManager fm = getFragmentManager();

                       FragmentTransaction ft = fm.beginTransaction();

                       SecondFragment sf = new SecondFragment();

                       ft.add(R.id.first_fragment_id, sf);

                       ft.addToBackStack(null);

                       ft.commit();

                       }

                        });

                        String MSG =  msg.getText().toString();

                        txt.setText(MSG);              

                        return v;

            }

 }

  

3 Create xml file for fragment Right click on res=>New=>Android XML file=>Give name  first_fragment.xml   and click on ok or finish. Copy and Past below xml code:  

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/first_fragment_id"

    android:background="@drawable/hourse">

    <Button

        android:id="@+id/b2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:text="Show Second Fragment" />

    <TextView

        android:id="@+id/txData"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="102dp"

        android:text=" First Fragment"

        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

4.Now Create fragment class, right click on the src=>package=>New=>java class=>Named it as   SecondFragment.java Copy and Past the below code:

package com.ambilpursunil.newapp;

import android.app.Fragment;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class SecondFragment extends Fragment {

           

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

              // TODO Auto-generated method stub

             View v = inflater.inflate(R.layout.second_fragment,container,false);

                       

                        return v;

            }

}

5 Create xml file for fragment Right click on res=>New=>Android XML file=>Give name  second_fragment.xml   and click on ok or finish. Copy and Past below xml code:  

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/tig" >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_centerHorizontal="true"

        android:layout_marginTop="206dp"

        android:text="Second Fragment"

        android:textAppearance="?android:attr/textAppearanceLarge" />

</RelativeLayout>

6.Simple Copy and Past the below code:  actvitiy_main.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"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin"

    tools:context="com.ambilpursunil.newapp.MainActivity"

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

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/b1"

        android:layout_alignParentTop="true"

        android:layout_marginLeft="28dp"

        android:text="Main Activity" />

    <Button

        android:id="@+id/b1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_below="@+id/textView1"

        android:layout_centerHorizontal="true"

        android:text="Show First Fragment" />

   

    <!--  To Pass the Data From Activity to Fragment class we took EditText -->

    <EditText

        android:id="@+id/etMsg"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/b1"

        android:layout_below="@+id/b1"

        android:layout_marginTop="16dp"

        android:ems="10"

        android:hint=" Enter Data" >

    </EditText>

</RelativeLayout>

7.Copy and past the code for  manifest.xml

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

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

    package="com.ambilpursunil.newapp"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="11"

        android:targetSdkVersion="21" />

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name="com.ambilpursunil.newapp.MainActivity"

            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>

8.Right click on the project and Run As-->Android Application

OUT PUT Of The Tutorial:

OutPut:

Enter The data and and click on the above button    show First Fragment

you will see the data on the first fragment, 

If you click on the show Second Fragment  then you get second fragment.

Stay Tune For Next Tutorial... Fragments Through XML file In Android: