ListFragments in Android with simple example

            A Fragment represents a behavior of user interface in an Activity. A activity can have more than one fragments and also a fragment can be used in more than one activities. You can use Fragment instead of Activity , TabActivity, ListActivity etc.,

Why Fragments?

            TabActivity was deprecated in API Level 13 Because it is a subclass of ActivityGroup And ActivityGroup was deprecated because of slow performance. You can use the Fragment and FragmentManager APIs instead. When compared to activity the Fragment is much faster.

            This post is an example of ListFragment in android. A Fragment that displays a list of items by binding to a data source such as an array or Cursor, and exposes event handlers when the user selects an item.

            ListFragment hosts a listview object that can be bound to different data sources, typically either an array or a Cursor holding query results.

The following program creates a ListFragment.

ListFragment.java

package com.android.listfragment;

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

public class ListFragment extends Fragment {
   
private OnItemSelectedListener listener;

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

Button button = (Button) view.findViewById(R.id.button1);
Button button1 = (Button) view.findViewById(R.id.button2);
Button button2 = (Button) view.findViewById(R.id.button3);
Button button3 = (Button) view.findViewById(R.id.button4);

button.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {               
updateDetail("layout1");
}
});

button1.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {               
 updateDetail("layout2");
}
});

button2.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {               
updateDetail("layout3");
}
});

button3.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {           
updateDetail("layout4");
}
});
         
return view;
}

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

@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");
}
}

// May also be triggered from the Activity
public void updateDetail(String s) {        
listener.onRssItemSelected(s);
}
}

The Following program implements ListFragment.

MainActivity.java

package com.android.listfragment;

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

public class MainActivity extends Activity implements
ListFragment.OnItemSelectedListener {

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public void onRssItemSelected(String link) {
// TODO Auto-generated method stub
FragmentManager fragmentManager = getFragmentManager();
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

Layout1 layout1; //Fragment 1
Layout2 layout2; //Fragment 2
Layout3 layout3; //Fragment 3
Layout4 layout4; //Fragment 4

if (link.equals("layout1")) {
layout1 = new Layout1();
fragmentTransaction.replace(R.id.detailFragment, layout1);
fragmentTransaction.commit();
} else if (link.equals("layout2")) {
layout2 = new Layout2();
fragmentTransaction.replace(R.id.detailFragment, layout2);
fragmentTransaction.commit();
} else if (link.equals("layout3")) {
layout3 = new Layout3();
fragmentTransaction.replace(R.id.detailFragment, layout3);
fragmentTransaction.commit();
} else if (link.equals("layout4")) {
layout4 = new Layout4();
fragmentTransaction.replace(R.id.detailFragment, layout4);
fragmentTransaction.commit();
}
}
}

The Following describes the content of the first list item of the ListFragment.

Layout1.java

package com.android.listfragment;

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

public class Layout1 extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return  inflater.inflate(R.layout.layout1, container, false);

}
}

The Following describes the content of the second list item of the ListFragment.

Layout2.java

package com.android.listfragment;

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

public class Layout2 extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return  inflater.inflate(R.layout.layout2, container, false);

}
}

The Following describes the content of the third list item of the ListFragment.

Layout3.java

package com.android.listfragment;

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

public class Layout3 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return  inflater.inflate(R.layout.layout3, container, false);
}
}

The Following describes the content of the fourth list item of the ListFragment.

Layout4.java

package com.android.listfragment;

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

public class Layout4 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return  inflater.inflate(R.layout.layout4, container, false);

}
}

Our MainActivity's xml should be.

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#5f5951"
    android:orientation="horizontal" >

    <fragment
        android:id="@+id/listFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_marginBottom="?android:attr/actionBarSize"
        android:layout_marginTop="?android:attr/actionBarSize"
        android:layout_weight="1"
        class="com.android.listfragment.ListFragment" >
    </fragment>

    <FrameLayout
        android:id="@+id/detailFragment"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2" >
    </FrameLayout>

</LinearLayout>

Our ListFragment's xml should be.

list_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:gravity="center"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="8"
        android:gravity="left|center_vertical"
        android:text="Layout1"
        android:textColor="#000000" />
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="8"
        android:gravity="left|center_vertical"
        android:text="Layout2"
        android:textColor="#000000" />
    
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="8"
        android:gravity="left|center_vertical"
        android:text="Layout3"
        android:textColor="#000000" />
    
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="8"
        android:gravity="left|center_vertical"
        android:text="Layout4"
        android:textColor="#000000" />

</LinearLayout>

Our Layout1's xml should be.

layout1.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/darker_gray"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Layout 1"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip"
        android:textColor="#000000" />
    
</LinearLayout>

Our Layout1's xml should be.

layout2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#123456"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Layout 2"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />
    
</LinearLayout>

Our Layout3's xml should be.

layout3.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#056789"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:layout_marginTop="20dip"
        android:text="Layout 3"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />

</LinearLayout>

Our Layout4's xml should be.

layout4.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#654321"
    android:gravity="center_horizontal|center_vertical"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"        
        android:layout_marginTop="20dip"
        android:text="Layout 4"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />

</LinearLayout>

Note: You need to set

android:minSdkVersion="11"

or above to extend Fragment class, under

uses-sdk

in your manifest file.

run the program. your output would be.

screen shot 1 while clicking the button named as layout3.

 

screen shot 2 while clicking the button named as layout2.

 

Complete project on GITHUB

1. Simple Fragments with Action Bar Example in Android

2. Simple ListFragment Example in Android

3. Simple Fragment Example in Android

4. Simple RecyclerView Example in Android

Thank You