Fragment Layout In Android

Introduction

 

Android contains several types of layout(i.e. GridLayout, LinearLayout, RelativeLayout, etc). In this article, I will discuss the 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 activities. The lifecycle of a fragment is directly attached to its activity. Suppose we if destroy an activity then it's all fragments will be destroyed automatically or we pause the activity then it's 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.

 

The first activity is activity_main

 

This is our main activity. In this activity, we use two fragment layout. In the first fragment layout, we will show the data of Listview. This Listview is present in other activity(list_fragment activity). In the 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 mentioned above we are using three activities 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 contains the source code for the 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 the above source code doesn’t contain any method or event. Only we extend(inherit) the FragmentActivity class in the above source code. FragmentActivity is a 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 activities. So the functionality of these controls is present in their corresponding activity.

 

MenuFragment.java

 

This java file contains 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 the above code we create two arrays of string types. The first array contains information about the android os name and the second array contains information about the android version. We use an onCreateView method in this java file that use 3 parameters. The first parameter is the LayoutInflater object. LayoutInflater is used to dynamically add and remove control in the activity. The second parameter is ViewGroup. ViewGroup is used as a parent container for any view. The 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 the above code, we use a inflate method. Inflate method read all xml code of activity and convert it into a View type object. We use an ArrayAdapter object in code. An arrayadapter is used to 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: