Fragment Intermediate(III): Creating a activity that alternate between fragments onclick of respective button

Question

Aim:

Create a activity that have two buttons, button 1 and button 2. When click, the fragment will alternate between the two fragments.

Background:

Fragmentone will take the edittext from the main activity and settext on the textview on the fragment. Fragmenttwo will take display text to the tablelayout. (My ultimate goal is to use the input from the main activty and display it to one of the textview of the table, but it is not working, kindly advise on that)##issue 1

Problems:

The button1 that is supposed to display fragmentone is not working. After keying in the input into the edittext on the mainactivity, when i click the button, the fragmenttwo persist. FragmentOne did not come out. Place an toast in fragmentone and the toast display my input.

Special Thanks to: Would like to extend a special thanks to helpful people in this community for guiding me this far. And will like to extend my thanks to Raghunandan who guide me through fragment advance I, II. Thanks you very much for assisting me through my learning journey. Hope my questions and raghunandan advice would help reduce the learning curve for those embraking on this journey.

Fragment Intermediate (I)

Fragment Intermediate(I):Getting input from edittext, set text in textview of a fragment

Fragment Intermediate (II)

Fragment Intermediate (II):Dynmically adding row in a fragment, Android

MainActivity.java

import android.os.Bundle;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

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

    public void selectFrag(View view) {
        Fragment fr;    
        if(view == findViewById(R.id.button2)) {
            fr = new FragmentTwo();

        }
        else {
            fr = new FragmentOne();
        }
        FragmentManager fm = getFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        fragmentTransaction.replace(R.id.fragment_place, fr);
        fragmentTransaction.commit();
   }
}

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="vertical" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

            <TableLayout
                android:id="@+id/TableLayout01"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:stretchColumns="1" >

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/dis_input"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Input" />

                    <EditText
                        android:id="@+id/input"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:ems="10" />
                </TableRow>



                <TableRow
                    android:id="@+id/tableRow9"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >

                <Button
                    android:id="@+id/button2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:onClick="selectFrag"
                    android:text="Button2" />

                <Button
                    android:id="@+id/button1"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:onClick="selectFrag"
                    android:text="Calculate" />
                </TableRow>

            </TableLayout>
    </FrameLayout>
    <fragment
        android:name="com.example.sample.FragmentTwo"
        android:id="@+id/fragment_place"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

FragmentOne.java

public class FragmentOne extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) 
    {
        View view = inflater.inflate(R.layout.fragment_one, container, false);
        TextView warcraft=  (TextView) view.findViewById(R.id.moargold);
        EditText moargold = (EditText) getActivity().findViewById(R.id.input);
        Double vespenegas = Double.parseDouble(moargold.getText().toString());

        warcraft.setText(new Double(vespenegas).toString());
        Toast toast = Toast.makeText(getActivity(),new Double(vespenegas).toString() , Toast.LENGTH_SHORT);
        toast.show();
        return view;
    }
}

fragment_one.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="vertical" >

             <TableLayout
                android:id="@+id/TableLayout01"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:stretchColumns="1" >

                <TableRow
                    android:id="@+id/tableRow4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/dis_moargold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Gold Count:" />

                    <TextView
                        android:id="@+id/moargold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="TextView" />
                </TableRow>
 </TableLayout>
</LinearLayout>

FragmentTwo.java

public class FragmentTwo extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) 
    {
        View view = inflater.inflate(R.layout.fragment_two, container, false);
        EditText input = (EditText) getActivity().findViewById(R.id.input);



        TableLayout tl=(TableLayout) view.findViewById(R.id.mainLayout);


        TableRow tr = new TableRow(getActivity());
        tr.setLayoutParams(new LayoutParams( LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));

        TextView textview1 = new TextView(getActivity());
        textview1.setText("happy");
        tr.addView(textview1);

        TextView textview2 = new TextView(getActivity());
        textview2.setText("unhappy");
//###############To insert text from editview to table
//      Double buygas = Double.parseDouble(input.getText().toString());
//        textview2.setText(new Double(buygas).toString());
        tr.addView(textview2);

        tl.addView(tr, new TableLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
        return view;
    }
}

fragment_two.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:orientation="vertical"
   android:background="#ffff00">


        <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/mainLayout">

        <TableRow
                android:id="@+id/infoRow"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                        android:text="First"
                        android:id="@+id/column1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
                </TextView>

                <TextView
                        android:text="Second"
                        android:id="@+id/column2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content">
                </TextView>


        </TableRow>
</TableLayout>  
</LinearLayout>

Why do you have fragment two in xml when you add the same to the contaienr — Raghunandan, Apr 03 '14 at 09:33
Dear Raghunandan, your solution work well, sorry it took a while to get back to you cause i was trying to find out what went wrong in my code by retaining part of my code and run with the rest of your code (eg retaining the activty_main.xml of my code in your solution). Realised that the problem lies with my inappropriate use of FrameLayout and tablelayout as what you have pointed out . Thank you very much for enlightening me. — lonelearner, Apr 08 '14 at 13:03

Raghunandan · Accepted Answer · 2014-04-03T09:57:03.740

Just have the FrameLayout and EditText in activity_main.xml. FrameLayout is a container (ViewGroup) to which you add or replace fragments. Your TableLayout can be in fragment layout.

You are adding/replacing fragment programatically so what is the need to have the same in xml.

Have this in activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <EditText
        android:id="@+id/input"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <FrameLayout
        android:id="@+id/container" // id is container
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/button1"
        android:layout_below="@+id/input"
      >
    </FrameLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/input"
        android:onClick="selectFrag"
        android:text="Button1" />

    <Button
        android:id="@+id/button2"
        android:onClick="selectFrag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/input"
        android:layout_alignParentBottom="true"
        android:text="Button2" />

</RelativeLayout>

Then in MainActivity

   public class MainActivity extends Activity {
    Fragment fr; 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

    public void selectFrag(View view) {

        if(view == findViewById(R.id.button2)) {
            fr = new FragmentTwo();

        }
        else {
            fr = new FragmentOne();
        }
        FragmentManager fm = getFragmentManager();
        FragmentTransaction fragmentTransaction = fm.beginTransaction();
        fragmentTransaction.replace(R.id.container, fr);
        fragmentTransaction.commit();
   }
}

FragmentOne

public class FragmentOne extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) 
    {
        View view = inflater.inflate(R.layout.frag1, container, false);
        TextView warcraft=  (TextView) view.findViewById(R.id.moargold);
        EditText moargold = (EditText) getActivity().findViewById(R.id.input);
        Double vespenegas = Double.parseDouble(moargold.getText().toString());

        warcraft.setText(String.valueOf(vespenegas));
        Toast toast = Toast.makeText(getActivity(),String.valueOf(vespenegas) , Toast.LENGTH_SHORT);
        toast.show();
        return view;
    }
}

frag1.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="vertical" >

             <TableLayout
                android:id="@+id/TableLayout01"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:stretchColumns="1" >

                <TableRow
                    android:id="@+id/tableRow4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/dis_moargold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Gold Count:" />

                    <TextView
                        android:id="@+id/moargold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="TextView" />
                </TableRow>
 </TableLayout>
</LinearLayout>

FragmentTwo

public class FragmentTwo extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) 
    {
        View view = inflater.inflate(R.layout.frag2, container, false);
        EditText input = (EditText) getActivity().findViewById(R.id.input);



        TableLayout tl=(TableLayout) view.findViewById(R.id.TableLayout01);


        TableRow tr = new TableRow(getActivity());
        tr.setLayoutParams(new LayoutParams( LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));

        TextView textview1 = new TextView(getActivity());
        textview1.setText("happy");
        tr.addView(textview1);

        TextView textview2 = new TextView(getActivity());
        textview2.setText("unhappy");
//###############To insert text from editview to table
//      Double buygas = Double.parseDouble(input.getText().toString());
//        textview2.setText(new Double(buygas).toString());
        tr.addView(textview2);

        tl.addView(tr, new TableLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT));
        return view;
    }
}

frag2.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="vertical" >

             <TableLayout
                android:id="@+id/TableLayout01"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:stretchColumns="1" >

                <TableRow
                    android:id="@+id/tableRow4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content" >

                    <TextView
                        android:id="@+id/dis_moargold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Gold Count:" />

                    <TextView
                        android:id="@+id/moargold"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="TextView" />
                </TableRow>
 </TableLayout>
</LinearLayout>

Snap

enter image description here

Blo · Answer 2 · 2014-04-03T10:17:54.647

While you add your Fragments dynamically, you keep your FragmentTwo inside your layout. Try to remove this in your layout:

<fragment
    android:name="com.example.sample.FragmentTwo"
    android:id="@+id/fragment_place"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Also, in your code, you add dynamically a Fragment and with replace method, you set the container as id fragment_place:

fragmentTransaction.replace(R.id.fragment_place, fr);

However, this id is using by your fragment (FragmentTwo, the first piece of code above) and you cannot replace a fragment which is not added dynamically. You need to host your fragment inside a FrameLayout but yours has no id, try to add this:

<FrameLayout
    android:id="@+id/fragment_place"     /// this line to create and id
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

Then, you will be able to host, add and replace your fragments into your framelayout as you want.

Hi filo, thanks for pointing the main problem. I managed to understand where my problem lies in. — lonelearner, Apr 08 '14 at 13:06

Fragment Intermediate(III): Creating a activity that alternate between fragments onclick of respective button

2 Answers2

Linked