How to Show Different Layouts inside Fragments

Question

I am working with two fragments in Android Honeycomb (Tab). In the left is a ListView and in the right is a preview of the item selected from the list. When one

Answer 1

You can do this, I made the same thing with use of these links, here is my code which I am sharing with you in the hope that it will be helpful for you... You will first have to create 4 layouts. 2 of which will be for landscape mode, one for portrait mode and another for tablets. You have to create a couple more folders for layouts and their name should be like layout-xlarge and layout-xlarge-port, this way you can create fragments for both mobile devices and tablets.

MasterFragment Activity:

public class MasterFragment extends ListFragment {
    Boolean isDualPane;
    int position;

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        ArrayList parkNames = new ArrayList();
        for (Park park : Resort.PARKS) {
            parkNames.add(park.getName());
        }

        setListAdapter(new ArrayAdapter(getActivity(),
                android.R.layout.simple_list_item_1, parkNames));
        View detailFrame = getActivity().findViewById(R.id.detail);
        isDualPane = detailFrame != null && detailFrame.getVisibility() == View.VISIBLE;

        if (savedInstanceState != null) {
            position = savedInstanceState.getInt("position", 0);
        }

        if (isDualPane) {
            getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
            showDetail(position);
        }
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt("position", position);
    }

    @Override
    public void onListItemClick(ListView l, View v, int position, long id) {
        showDetail(position);
    }

    void showDetail(int position) {
        this.position = position;
        if (isDualPane) {
            getListView().setItemChecked(position, true);
            DetailFragment detailFragment = (DetailFragment) getFragmentManager()
                    .findFragmentById(R.id.detail);

            if (detailFragment == null || detailFragment.getIndex() != position) {
                detailFragment = new DetailFragment(position);
                FragmentTransaction ft = getFragmentManager()
                        .beginTransaction();
                ft.replace(R.id.detail, detailFragment);
                ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
                ft.commit();
            }
        } else {
            Intent intent = new Intent();
            intent.setClass(getActivity(), DetailActivity.class);
            intent.putExtra("position", position);
            startActivity(intent);
        }
    }
}        

Second Activity - DetailFragment Activity:

public class DetailActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.detail_act);
        Bundle bundle = getIntent().getExtras();
        int position = bundle.getInt("position");
        System.out.println("RR : position is : " + position);

        Integer[] images = { R.drawable.pic1, R.drawable.pic2, R.drawable.pic3,
                R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
                R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,
                R.drawable.pic10, R.drawable.pic11, R.drawable.pic12,
                R.drawable.pic13 };

        final ImageView imgview = (ImageView) findViewById(R.id.imageView1);
        imgview.setImageResource(images[position]);

        // DetailFragment detailFragment = new DetailFragment(position);
        // FragmentManager fm = getSupportFragmentManager();
        // FragmentTransaction ft =fm.beginTransaction();
        // ft.add(android.R.id.content, detailFragment).commit();

    }
}

Now you have to create a third activity, MasterGridActivity for my images which I am using for showing in fragment in GridView.

public class MasterGridActivity extends Fragment {

    Boolean isDualPane;
    GridView gridView;
    ListView listView;
    int position;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

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

        gridView = (GridView) view.findViewById(R.id.gridViewImage);
        gridView.setAdapter(new MyAdapter(view.getContext()));

        return view;
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        View detailFrame = getActivity().findViewById(R.id.detail);

        isDualPane = detailFrame != null && detailFrame.getVisibility() == View.VISIBLE;

        gridView.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView arg0, View arg1, int pos, long arg3) {
                if (!isDualPane) {
                    Intent intent = new Intent();
                    intent.setClass(getActivity(), DetailActivity.class);
                    intent.putExtra("position", pos);
                    startActivity(intent);
                } else {
                    DetailFragment detailFragment = (DetailFragment) getFragmentManager().findFragmentById(R.id.detail);

                    if (detailFragment == null || detailFragment.getIndex() != pos) {

                        detailFragment = new DetailFragment(pos);
                        FragmentTransaction ft = getFragmentManager().beginTransaction();

                        ft.replace(R.id.detail, detailFragment);
                        ft.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE);
                        ft.commit();
                    }
                }
            }
        });

        super.onActivityCreated(savedInstanceState);
    }
}

Now here is my image adapter - MyAdapter - for my images which extends a BaseAdapter.

public class MyAdapter extends BaseAdapter {

    private Context mContext;

    public MyAdapter(Context c) {
        mContext = c;
    }

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int arg0) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) { // if it's not recycled, initialize some attributes
            imageView = new ImageView(mContext);
            imageView.setLayoutParams(new GridView.LayoutParams(100, 100));
            imageView.setImageResource(mThumbIds[position]);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(0, 0, 0, 0);
        } else {
            imageView = (ImageView) convertView;
        }
        imageView.setImageResource(mThumbIds[position]);
        return imageView;
    }

    static Integer[] mThumbIds = { R.drawable.pic1, R.drawable.pic2,
            R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6,
            R.drawable.pic7, R.drawable.pic8, R.drawable.pic9,
            R.drawable.pic10, R.drawable.pic11, R.drawable.pic12,
            R.drawable.pic13,
    };
}

Now I am sharing the XML files for these fragments.

Main.xml

gridview.xml

detail_fragment.xml: This XML is for showing the detail in another fragment.

detail_act.xml

Make the same XML for landscape mode and for tablets. It's working fine for me. Hope it will helpful for you.