Implementing multiple fragments in a single activity Dynamically

Question

I am working on fragments

---

Use case i am trying to implement ::

• I am using dynamic fragments
• I am using three fragments in a single activity
• my goal is to communicate between all the three fragments
• I am using support package for fragments

---

Each fragment has a single widget

• my_fragment1 has edittext
• my_fragment2 has button
• my_fragment3 has TextView

---

On click of button the text from the edittext must be displayed in the textview

---

What i have tried so far i have constructed most of the scenario below

---

Top_Fragment.java

public class Top_Fragment extends Fragment{

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

        View view=inflater.inflate(R.layout.my_fragment1, container, false);

        return view;
    }
}

Middle_Fragment.java

package com.example.deleteme;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;

public class Middle_Fragment extends Fragment{

    View view;
    Button btn;

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

        view=inflater.inflate(R.layout.my_fragment2, container, false);
        btn=(Button) view.findViewById(R.id.button1);
        btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub



            }
        });
        return view;
    }
}

Bottom_Fragment.java

public class Bottom_Fragment extends Fragment{

    View view;
    TextView display_text;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        view=inflater.inflate(R.layout.my_fragment3, container,false);
        display_text=(TextView) view.findViewById(R.id.editText1);
        return view;
    }

    public void setName(String Name){
        display_text.setText("Result::" + Name);
    }



}

MainActivity.java

public class MainActivity extends FragmentActivity {

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

        Top_Fragment frg=new Top_Fragment();//create the fragment instance for the top fragment
        Middle_Fragment frg1=new Middle_Fragment();//create the fragment instance for the middle fragment
        Bottom_Fragment frg2=new Bottom_Fragment();//create the fragment instance for the bottom fragment

        FragmentManager manager=getSupportFragmentManager();//create an instance of fragment manager

        FragmentTransaction transaction=manager.beginTransaction();//create an instance of Fragment-transaction

        transaction.add(R.id.My_Container_1_ID, frg, "Frag_Top_tag");
        transaction.add(R.id.My_Container_2_ID, frg1, "Frag_Middle_tag");
        transaction.add(R.id.My_Container_3_ID, frg2, "Frag_Bottom_tag");


        transaction.commit();

    }


}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" 
    android:background="@color/black">

    <FrameLayout
        android:id="@+id/My_Container_1_ID"
        android:layout_width="fill_parent"
        android:layout_height="150dp" 
        android:background="@color/yellow">
    </FrameLayout>

    <FrameLayout
        android:id="@+id/My_Container_2_ID"
        android:layout_width="fill_parent"
        android:layout_height="150dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/My_Container_1_ID"
        android:background="@color/Orange" >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/My_Container_3_ID"
        android:layout_width="fill_parent"
        android:layout_height="150dp"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/My_Container_2_ID"
        android:background="@color/purple" >
    </FrameLayout>

</RelativeLayout>

my_fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/green" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:textColor="#000000"
        android:singleLine="true" >

        <requestFocus />
    </EditText>

</RelativeLayout>

my_fragment2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:background="@color/pink">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@color/black"
        android:text="Button"
        android:textColor="#FFFFFF" />

</RelativeLayout>

my_fragment3.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="TextView"
        android:textColor="#000000"
        android:textSize="30dp" />

</RelativeLayout>

My output is Like below ::

---

What I am having problem in achieving ::

• I am not able to set the value obtained from edit text to textview on click of the button

Any Ideas?

Answer 1

All Fragment-to-Fragment communication is done through the associated Activity. Two Fragments should never communicate directly.

http://developer.android.com/training/basics/fragments/communicating.html

test.java // in your case its MainActivity

public class test extends FragmentActivity implements textEntered {

    String value;
    boolean check = false;
    BottomFragment frg2;
    FragmentTransaction transaction;

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

        Top_Fragment frg = new Top_Fragment();
        frg2 = new BottomFragment();

        FragmentManager manager = getSupportFragmentManager();
        transaction = manager.beginTransaction();
        transaction.add(R.id.My_Container_1_ID, frg, "Frag_Top_tag");
        transaction.add(R.id.My_Container_3_ID, frg2, "Frag_Bottom_tag");
        transaction.commit();
    }

    @Override
    public void setValue(String editextvalue) {
        value = editextvalue;
        if (frg2 != null) {
            frg2.setName(value);
        } else {
            Toast.makeText(getApplicationContext(), "fragment 2  is null", 1000).show();
        }
    }

}    

Top_Fragment.java

public class Top_Fragment extends Fragment {
    textEntered mCallback;
    Button b;
    EditText ed;

    public interface textEntered {
        public void setValue(String editextvalue);
    }

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

        View view = inflater.inflate(R.layout.my_fragment1, container, false);
        ed = (EditText) view.findViewById(R.id.editText1);


        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onActivityCreated(savedInstanceState);
        b = (Button) getView().findViewById(R.id.button1);
        b.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                String s = ed.getText().toString();
                mCallback.setValue(s);
            }

        });
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);

        // This makes sure that the container activity has implemented
        // the callback interface. If not, it throws an exception
        try {
            mCallback = (textEntered) activity;
        } catch (ClassCastException e) {
            throw new ClassCastException(activity.toString() +
                " must implement textEntered");
        }
    }
}

my_fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:ems="10"
        android:textColor="#000000"
        android:singleLine="true" >

        <requestFocus />
    </EditText>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editText1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:text="Button" />

</RelativeLayout>

Change to

 display_text=(TextView) view.findViewById(R.id.textView1);
 // id is textView 1 not editText1

in BottomFragment

snap

Answer 2

Communication between Fragments

There can be many scenarios where communication between fragment is required. You need to pass data between fragments on button click event. You may also use Android toolbar to switch between fragments. When you add buttons to your toolbar, you need to dynamically change screen using fragment.

Create an interface which will help us to communicate

Communicate.java

package com.example.amaanmemon.testfragment;

interface Communicate {
 public void sendData();
}

TopFragment.java

package com.example.amaanmemon.testfragment;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;

public class TopFragment extends Fragment {

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

    View view=inflater.inflate(R.layout.my_fragment1, container, false);
    return view;
}

public void onActivityCreated(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onActivityCreated(savedInstanceState);
    firstName = (EditText) getActivity().findViewById(R.id.editText1);
}

public String getData(){
    return firstName.getText().toString();
}
}

MiddleFragment.java

package com.example.amaanmemon.testfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;

public class MiddleFragment extends Fragment implements OnClickListener{

View view;
Button btn;
Communicate cm;

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

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onActivityCreated(savedInstanceState);
    cm = (Communicate) getActivity();
    btn = (Button) getActivity().findViewById(R.id.button1);
    btn.setOnClickListener(this);
}

@Override
public void onClick(View arg0) {
    // TODO Auto-generated method stub
    cm.sendData();
}
}

BottomFragment.java

package com.example.amaanmemon.testfragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.TextView;

public class BottomFragment extends Fragment{

int count;
View view;
TextView display_text;

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

@Override
public void onActivityCreated(Bundle savedInstanceState) {
    // TODO Auto-generated method stub
    super.onActivityCreated(savedInstanceState);
    display_text = (TextView)getActivity().findViewById(R.id.textView1);
}

public void incrementData(String displayText){
    display_text.setText(displayText);
}
}

MainActivity.java

package com.example.amaanmemon.testfragment;

import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;

public class MainActivity extends FragmentActivity implements Communicate{

TopFragment frg;
MiddleFragment frg1;
BottomFragment frg2;
FragmentTransaction transaction;

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

    frg = new TopFragment();
    frg1 = new MiddleFragment();
    frg2 = new BottomFragment();

    FragmentManager manager=getSupportFragmentManager();
    transaction=manager.beginTransaction();
    transaction.add(R.id.My_Container_1_ID, frg, "Frag_Top_tag");
    transaction.add(R.id.My_Container_2_ID, frg1, "Frag_Middle_tag");
    transaction.add(R.id.My_Container_3_ID, frg2, "Frag_Bottom_tag");
    transaction.commit();
}

@Override
public void sendData() {
    String temp = frg.getData();
    frg2.incrementData(temp);
}
}

You can copy xml files from question. you can watch the output below.

Answer 3

You can use the Activity for that.

in the onClick of the bottom fragment you can do something like

((MainActivity) getActivity()).doIt();

And make a method doIt in your MainActivity maybe something like this

public void doIt(){
    frg2.setName(frg.getText())
}

and in the top fragment make a method getText that returns the text of the EditText