Replacing one fragment with another via ListView

Question

I want to replace the fragment that has list view with another fragment when an item on the said list view is clicked.

Here is my MainActivity

public class MainActivity extends FragmentActivity {
private FragmentTabHost hostTab;

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

    hostTab = (FragmentTabHost)findViewById(android.R.id.tabhost);
    //hostTab = (TabHost) findViewById(R.id.tabhost);
    hostTab.setup(this,getSupportFragmentManager(), android.R.id.tabcontent);

    hostTab.addTab(
            hostTab.newTabSpec("tab1").setIndicator("Tab 1",
                    getResources().getDrawable(android.R.drawable.star_on)),
            FragmentTab.class, null);
    hostTab.addTab(
            hostTab.newTabSpec("tab2").setIndicator("Tab 2",
                    getResources().getDrawable(android.R.drawable.star_on)),
            FragmentTab1.class, null);
    hostTab.addTab(
            hostTab.newTabSpec("tab3").setIndicator("Tab 3",
                    getResources().getDrawable(android.R.drawable.star_on)),
            FragmentTab2.class, null);

}

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

}

Here is my activity_main.xml

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/replace"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.app.FragmentTabHost 

    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="horizontal" />

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
   </LinearLayout>
</android.support.v4.app.FragmentTabHost>

And here is the code for "Tab 1".don't mind "Tab 2" and "Tab 3". The two only shows some text view

public class FragmentTab extends ListFragment implements OnItemClickListener {

@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
}

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    String[] values = new String[] { "Fragment1", "Fragment2", "Fragment3"};
    ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(), android.R.layout.simple_list_item_1, values);
    setListAdapter(adapter);
}
@Override
public void onListItemClick(ListView l, View v, int position, long id) {

    // Create new fragment and transaction
    Fragment newFragment = new FragmentInListView();
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    //transaction.show(newFragment);
    // Replace whatever is in the fragment_container view with this fragment,
    // and add the transaction to the back stack
    transaction.replace(R.id.replace, newFragment);
    transaction.addToBackStack(null);
    transaction.setTransitionStyle(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
    // Commit the transaction
    transaction.commit();

@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
    // TODO Auto-generated method stub

}   

 }

and here is the layout xml for "Tab 1"

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

<ListView 
    android:id="@+id/lv"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</ListView>

And here is the class that will appear when an item in the list view is clicked

public class FragmentInListView extends Fragment {
@Override
public void onCreate(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    // TODO Auto-generated method stub

    View view = inflater.inflate(R.layout.fragment_layout1,
            container, false);
        TextView tv= (TextView) view.findViewById(R.id.text);
        tv.setText("Fragment in List View"); 
        return view;

}

 }

Please help and please feel free to ask for codes to be uploaded.Thanks in advance.

Answer 1

I resolved the issue by replacing:

transaction.replace(R.id.replace,newFragment);

with

transaction.replace(R.id.tabcontent,newFragment);

Answer 2

You should create method for example 'ItemSelected' in Activity. Then send id of selected element from FragmentList to Activity and in Activity replace fragment. Here is best example I can recomend you to download sample to see how fragments work