Android Programming Tutorials 18 : Fragments Adding In XML In Android

Adding Fragment in XML File:

We have seen our last tutorial how fragment can be done Programmatically, In this example we are here to discuss how fragment can be achieve by defining in the xml files. 

OUT PUT Of The Tutorial:

Create Android Application:

·         File >> New >> Android Application

·         Enter Project name: FragmentThroughXmlFileAPP

·         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.os.Bundle;

import android.view.Menu;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

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

<ScrollView  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">

<RelativeLayout

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#aa00aa"

    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" >

    <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="50dp"

        android:text="Main Activity"

        android:textSize="25dp" />

    //Here MyFragmentOne is added

    <fragment

        android:id="@+id/fragment3"

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

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignRight="@+id/fragment1"

        android:layout_below="@+id/fragment1"

        android:layout_marginTop="22dp" />

    <fragment

        android:id="@+id/fragment2"

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

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/fragment3"

        android:layout_below="@+id/fragment3"

        android:layout_marginTop="18dp" />

    <fragment

        android:id="@+id/fragment4"

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

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignLeft="@+id/fragment2"

        android:layout_below="@+id/fragment2"

        android:layout_marginTop="23dp" />

</RelativeLayout>

</ScrollView>

Creating Fragment classes:

3.Now Create fragment class, right click on the src=>package=>New=>java class=>Name it as  MyFragmentOne.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 MyFragmentOne extends Fragment{

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

                        View v;

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

                        return v;

            }

}

4 Create xml file for fragment Right click on res=>New=>Android XML file=>Give name  frag_lay1.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/avtar">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:layout_marginLeft="85dp"

        android:layout_marginTop="48dp"

        android:text="My Fragment"

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

</RelativeLayout>

5.Now Create fragment class, right click on the src=>package=>New=>java class=>Named it as  MyFragmentTwo.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 MyFragmentTwo extends Fragment{

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

                        View v;

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

                        return v;

            }

}

6. Create xml file for fragment Right click on res=>New=>Android XML file=>Give name  frag_lay2.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/avtar">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:layout_marginLeft="85dp"

        android:layout_marginTop="48dp"

        android:text="My Fragment"

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

</RelativeLayout>

7.Now Create fragment class, right click on the src=>package=>New=>java class=>Named it as  MyFragmentThree.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 MyFragmentThree extends Fragment{

            @Override

            public View onCreateView(LayoutInflater inflater, ViewGroup container,

                                    Bundle savedInstanceState) {

                        View v;

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

                        return v;

            }

}

8.Create xml file for fragment Right click on res=>New=>Android XML file=>Give name  frag_lay3.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/avtar">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_alignParentTop="true"

        android:layout_marginLeft="85dp"

        android:layout_marginTop="48dp"

        android:text="My Fragment"

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

</RelativeLayout>

9.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>

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

OUT PUT Of The Tutorial:

OutPut:

When our applicatin launched the you will see the all the fragment, Just scroll down to see all fragments.

Please Send Your Comments To ambilpura.sunil@gmail.com

Stay Tune For Next Tutorial... Services In Android: