Fragment Layout In Android

Android contain several types of layout(i.e. GridLayout, LinearLayout, RelativeLayout etc). In this article I will discuss about fragment layout. Fragments are just like a Sub Activity. It has its own lifecycle, input events, and which we can add or remove while the activity is running. We can use multiple fragments in a single activity. We can also use a fragment in multiple activity. Lifecycle of a fragment is directly attached with its activity. Suppose we if destroy an activity then its all fragments will be destroy automatically or we pause the activity then its all fragments will be pause automatically.

Now we create a simple project to understand the concept of Fragment Layout.

We will create a project like below:



When we click on any item of Listview. It will show the android OS name and its version using textview.

In this project we will use 3 Activity.

First activity is activity_main

This is our main activity. In this activity we use two fragment layout. In first fragment layout we will show the data of Listview . This Listview is present in other activity(list_fragment activity). In second fragment layout we will show the data of TextView. This TextView is present in other activity(text_fragment).

Xml code of activity_main activity is:

<LinearLayout
    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:orientation="horizontal"
    tools:context="com.amal.fragments.MainActivity">
    <fragment
    android:layout_height="match_parent"
    android:layout_width="120dp"
    class="com.example.fragmentlayout.MenuFragment"
    android:id="@+id/fragment"/>
    <fragment
    android:layout_width="200dp"
    android:layout_height="match_parent"
    class="com.example.fragmentlayout.TextFragment"
    android:id="@+id/fragment2"/>
</LinearLayout>

Graphical Layout of activity_main is:



Second Activity is list_fragment.xml:

In this activity we a Listview. We will show the data of Listview in fragment Layout of activity_main activity. Xml code of list_fragment activity is:

<?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" >
    <Listview
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/list" />
</LinearLayout>

Graphical Layout of this activity is:



Our third Activity is text_fragment.xml:

In this activity we use two TextView. In first TextView we will show the name of android OS and in second TextView we will show the version of android OS . We show the data of both textview in fragment layout of activity_main activity. Xml code of text_fragment activity is.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:gravity="center"
    android:background="#5ba4e5"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25px"
        android:textColor="#ffffff"
        android:layout_gravity="center"
        android:text="@string/textview1"
        android:id="@+id/AndroidOs"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textColor="#ffffff"
    android:text="@string/textview2"
    android:textSize="15px"
    android:id="@+id/Version"/>
</LinearLayout>

Graphical Layout of text_fragment activity is:



Now we move to coding part of this project.

As I mention above we are using three activity in this project. So I will explain each activity one by one. First of all we will see the source code(java code ) of activity_main layout.

MainActivity1.java:

This java file contain the source code for activity_main layout. Content of this java file is:

package com.example.fragmentlayout;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity1 extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

We can see that above source code doesn’t contain any method or event. Only we extend(inherit) the FragmentActivity class in above source code. FragmentActivity is Base class for activities that want to use the support-based fragment Api. We are using fragments in this activity to show the content(controls) of other activity. So functionality of these controls are present in their corresponding activity.

MenuFragment.java:

This java file contain source code for list_fragment activity. Source code of this activity is.

package com.example.fragmentlayout;

import android.os.Bundle;
import android.support.v4.app.ListFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Listview;

public class MenuFragment extends ListFragment {
    String[] AndroidOS = new String[] {
        "Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread", "Honeycomb", "Ice Cream SandWich", "Jelly Bean", "KitKat", "LollyPop"
    };
    String[] Version = new String[] {
        "1.5", "1.6", "2.0-2.1", "2.2", "2.3", "3.0-3.2", "4.0", "4.1-4.3", "4.4", "5.0"
    };@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.list_fragment, container, false);
        ArrayAdapter < String > adapter = new ArrayAdapter < String > (getActivity(), android.R.layout.simple_list_item_1, AndroidOS);

        setListAdapter(adapter);
        return view;


        @Override
        public void onListItemClick(Listview l, View v, int position, long id) {
            TextFragment txt = (TextFragment) getFragmentManager().findFragmentById(R.id.fragment2);
            txt.change(AndroidOS[position], "Version : " + Version[position]);
            getListview().setSelector(android.R.color.holo_blue_dark);
        }

    }

In above code we create two array of string type. First array contain information about android os name and second array contain information about android version . We use an onCreateView method in this java file that use 3 parameters. First parameter is LayoutInflater object. LayoutInflater is used for dynamically add and remove control in activity. Second parameter is ViewGroup. ViewGroup is used as a parent container for any view. Third parameter is Bundle Object. When we pass data between two activity then this data is passed in the form of bundles.

View view =inflater.inflate(R.layout.list_fragment, container, false);

In above code we use a inflate method . Infalte method read all xml code of an activity and convert into a View type object. We use an ArrayAdapter object in code. An arrayadapter is used for bind the data with Listview.

 

public void onListItemClick(Listview l, View v, int position, long id) {
   TextFragment txt = (TextFragment)getFragmentManager().findFragmentById(R.id.fragment2);
   txt.change(AndroidOS[position],"Version : "+Version[position]);
   getListview().setSelector(android.R.color.holo_blue_dark);
}

This method will invoke when we click on any item of Listview. In this code we Create an object of TextFragment class. Using this object we call the change method of TextFragement class. We pass two parameter in this method. First one is android OS name and second one is android version.

TextFragment.java: Source code of this java file is:

package com.example.fragmentlayout;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class TextFragment extends Fragment {
    TextView text, vers;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.text_fragment, container, false);
        text = (TextView) view.findViewById(R.id.AndroidOs);
        vers = (TextView) view.findViewById(R.id.Version);
        return view;
    }
    public void change(String txt, String txt1) {
        text.setText(txt);
        vers.setText(txt1);
    }
}

In above code we extend(inherit) Fragment class. We also create two object of TextView control. text object contain the reference of AndroidOs textview and vers object contain the reference of Version textview.

We create a change method. This method will invoke from MenuFragment class. Using this method we insert the text in both textview.

Now our project is ready to run . If we click on any item of Listview then it will show the name of android OS and Its version as below: