Geek Answers Handbook

How to show different layouts inside fragments

I work with two fragments in Android Honeycomb (Tab). On the left side is a ListView , and on the right is a preview of the item selected from the list. When one of the buttons is pressed, I want to show different layouts on the left. How is this possible?

Thanks in advance.

+1
source share
2 answers

You can do it, I did the same using these links, here is my code that I share with you in the hope that it will be useful for you ... First you will need to create 4 layouts, 2 of which will be for landscape mode, one for portrait mode and the other for tablets. You need to create a couple more folders for layouts, and their name should be both layout-xlarge and layout-xlarge-port , so you can create fragments for both mobile devices and tablets.

Activity MasterFragment:

 public class MasterFragment extends ListFragment { Boolean isDualPane; int position; @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); ArrayList<String> parkNames = new ArrayList<String>(); for (Park park : Resort.PARKS) { parkNames.add(park.getName()); } setListAdapter(new ArrayAdapter<String>(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); } } }

The second activity is 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 need to create the third action, MasterGridActivity for my images, which I use to display in the fragment in the 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 that extend the 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 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 using XML files for these snippets.

main.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="horizontal"> <fragment android:id="@+id/master" android:layout_width="match_parent" android:layout_height="match_parent" class="org.fragment.MasterGridActivity" /> </LinearLayout>

gridview.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" > <GridView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/gridViewImage" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:columnWidth="90dp" android:horizontalSpacing="10dp" android:verticalSpacing="10dp" android:gravity="center" android:stretchMode="columnWidth" /> </LinearLayout>

detail_fragment.xml . This XML is intended to display details in another fragment.

 <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="8dp" /> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:padding="8dp" /> </LinearLayout> </ScrollView>

detail_act.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" > <ImageView android:id="@+id/imageView1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/ic_launcher" /> </LinearLayout>

Make the same XML for landscape mode and for tablets. It works great for me. Hope this helps you.

+8
source

You need to define an event callback for the activity . That is, your left fragment should first notify the container operation that an event has occurred (i.e., one of the list items has been selected). Then the activity of the container will pass this information to the right fragment, which will then update its interface.

I could explain this in more detail, but there are a few textbooks on the Internet that teach just that. I suggest you read some of them , as the concept will make more sense if you do.

+1
source

More articles:


All Articles