Android Fragments UI Design Example

Android Fragments are the user Interface which represents a part of an activity , in other words you can also say fragments are the sub-part of an activity .

fragment runs in the context of an activity in which it is placed but it has it's own life which depends on the life cycle of an host activity  , i.e when host activity resumes fragment too , when host activity stops fragments too .

Note: Android introduced fragments in Android 3.0 (API level 11) i.e Honeycomb

Fragment Life Cycle Methods

onAttach() :-Here In this Method Fragment instance gets associate with Activity instance.

onCreate() :- Fragment View hierarchy is created .

onCreateView() :- Fragment View hierarchy is created , and this inflated View become part of the view hierarchy of its containing Activity .

onActivityCreated():- Both Activity and Fragment instance has been created and also there view hierarchy .

onResume():- Fragment becomes visible and active .

onPause():- Fragment becomes visible but not active .

onStop():- Fragment becomes Invisible .

Lets See An Example

In this tutorial we will see an example in which we embed two fragments in one activity , one fragment which we name it as list fragment which contains three Buttons and another fragment which we name it as detail fragment which contain one TextView , onclick of any button inside the list fragment we will update the textview inside the detail fragment .

Below is the diagrammatic representation of UI Design .

Project Detail

Project Name	FragmentDemo
Package	com.pavan.fragmentdemo
Minimum SDK	API 8
Target SDK	API 17
Theme	Holo Light with Dark Action Bar

Fragment XML Layouts

we are defining two xml layouts for fragments inside layout directory of the project

1.  list_fragment.xml
2.  detail_fragment.xml

file : list_fragment.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:background="#CCFF99"
    android:orientation="vertical"
    android:padding="5dp" >

    <Button
        android:id="@+id/android_btn_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android" />

    <Button
        android:id="@+id/ios_btn_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="IOS" />

    <Button
        android:id="@+id/windows_btn_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Windows" />

</LinearLayout>

file : detail_fragment.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:background="#FFFF99"
    android:orientation="vertical"
    android:padding="20dp" >

    <TextView
        android:id="@+id/display_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="40dp" />

</LinearLayout>

Main Activity Layout

file : activity_main.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="fill_parent"
    android:orientation="horizontal" >

    <fragment
        android:id="@+id/list_Fragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        class="com.pavan.fragmentdemo.MyListFragment" >
    </fragment>

    <fragment
        android:id="@+id/detail_Fragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        class="com.pavan.fragmentdemo.DetailFragment" >
    </fragment>

</LinearLayout>

Defining fragments

we have declared two xml fragments layout (  /res/layout/list_fragment.xml  and /res/layout/detail_fragment.xml  ) above .

To define a new fragment we either extend the android.app.Fragment class or one of its subclasses, for example, ListFragment ,    DialogFragment,   PreferenceFragment  or  WebViewFragment

Create Two Classes for above defined xml fragment layout and extend it to Fragment class

1. DetailFragment.java
2. ListFragment.java

Note :  Inside the Main Activity XML Layout  the fragment tag contains an  attribute/ property whose values corresponds to the respective fragment class name  

 file :- DetailFragment.java

package com.pavan.fragmentdemo;

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

public class DetailFragment extends Fragment {
 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  View view = inflater
    .inflate(R.layout.detail_fragment, container, false);
  return view;
 }

 // we call this method when button from listfragment is clicked
 public void setText(String item) {
  TextView view = (TextView) getView().findViewById(R.id.display_tv);
  view.setText(item);
 }
}

file :- ListFragment.java

package com.pavan.fragmentdemo;

import android.app.Activity;
import android.app.Fragment;
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;

public class MyListFragment extends Fragment implements OnClickListener {

 private OnItemSelectedListener listener;

 Button android_btn, ios_btn, windows_btn;

 @Override
 public void onAttach(Activity activity) {
  super.onAttach(activity);
  if (activity instanceof OnItemSelectedListener) {
   listener = (OnItemSelectedListener) activity;
  } else {
   throw new ClassCastException(activity.toString()
     + " must implemenet MyListFragment.OnItemSelectedListener");
  }
 }

 @Override
 public View onCreateView(LayoutInflater inflater, ViewGroup container,
   Bundle savedInstanceState) {
  View view = inflater.inflate(R.layout.list_fragment, container, false);

  // Initialize Views
  android_btn = (Button) view.findViewById(R.id.android_btn_id);
  ios_btn = (Button) view.findViewById(R.id.ios_btn_id);
  windows_btn = (Button) view.findViewById(R.id.windows_btn_id);

  // set on click Listeners for buttons
  android_btn.setOnClickListener(this);
  ios_btn.setOnClickListener(this);
  windows_btn.setOnClickListener(this);

  return view;
 }

 public interface OnItemSelectedListener {
  public void onRssItemSelected(String OS_Name);
 }

 @Override
 public void onClick(View v) {
  switch (v.getId()) {
  case R.id.android_btn_id:
   updateDetailsFragment("Android");
   break;

  case R.id.ios_btn_id:
   updateDetailsFragment("IOS");
   break;

  case R.id.windows_btn_id:
   updateDetailsFragment("Windows");
   break;
  }

 }

 private void updateDetailsFragment(String OS_Name) {
  listener.onRssItemSelected(OS_Name);
 }

}

Communication Between Fragments

The Communication between fragments doesn't happen directly , but instead the communication is done via the activity , for that we define an interface inside the fragment class and require the activity which uses it must  implement it.

Here in this example we are updating TextView of detailfragment , on click of any Buttons inside listfragment , so the communication is happening from  listfragment to detailfragment , so we define the interface for listfragment.

Lets discuss programmatically how the communication takes place.

1. Define OnItemSelectedListener interface inside ListFragment.
2. Declare a method OnItemSelectedListener inside ListFragment.
3. Implement OnItemSelectedListener for MainActivity.
4. override the onRssItemSelected method of OnItemSelectedListener interface inside MainActivity.
5. onclick of button inside listfragment we call onRssItemSelected method via updateDetailsFragment.
6. finally we update the detailfragment inside onRssItemSelected method .

Main Activity

file :- MainActivity.java

package com.pavan.fragmentdemo;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity implements
  ListFragment.OnItemSelectedListener {

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

 //
 @Override
 public void onRssItemSelected(String OS_Name) {
  DetailFragment DF = (DetailFragment) getFragmentManager()
    .findFragmentById(R.id.detail_Fragment);
  if (DF != null && DF.isInLayout()) {
   DF.setText(OS_Name);
  }

 }

}

RUN

Download Code