Android best way to change dynamically part of layout in fragment

Question

I have a fragment with its layout (fragment_layout.xml). In this layout I want to change dinamically one of its part (empty layout) to insert others piece layouts (first, second and third layout) as described in the image.

I don't want to change all layout of the fragment but only a part of it.

What is the best way to do it?

Answer 1

The best way is using Fragment Transaction. Check this code,

In your Main Activity, which should extend to FragmentActivity

 @Override
    public void onClick(View button) {
        FragmentTransaction ft=getActivity().getSupportFragmentManager().beginTransaction();
        if(button==groups)// If clicked button is groups, set the layout fragment1.xml
        {
            Fragment fragment = new GroupsFragment();
            FragmentManager fm = getActivity().getSupportFragmentManager();
            FragmentTransaction transaction = fm.beginTransaction();
            transaction.replace(R.id.fragment1, fragment);
            transaction.commit();
        }
        else if(button==photos)
        {
            Fragment fragment2 = new PhotosFragment();
            FragmentManager fm2 = getActivity().getSupportFragmentManager();
            FragmentTransaction transaction2 = fm2.beginTransaction();
            transaction2.replace(R.id.fragment1, fragment2);
            transaction2.commit();
        }   
    }

And in your main layout,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ProfileActivity" >

    <Button
        android:id="@+id/button_profile_photos"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/relativeLayout3"
        android:text="Photos" />

    <Button
        android:id="@+id/button_profile_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button_profile_photos"
        android:layout_alignBottom="@+id/button_profile_photos"
        android:layout_toRightOf="@+id/button_profile_photos"
        android:text="Groups" />

    <FrameLayout
        android:id="@+id/fragment1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/button_profile_photos" >
    </FrameLayout>

And Groups Fragment,

    public class GroupsFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        // Inflating layout
        View v = inflater.inflate(R.layout.groups_fragment, container, false);
        // We obtain layout references
        return v;

    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

    }

}