title: Multi-Pane fragments within viewpager
body: <p>I'm currently working on an app that will hopefully act like an "eBook" player. Having read through a number of tutorials related to fragments, I decided to take the 'Fragment/ Viewpager' approach.</p>
  
  <p>Moving into a little more detail, I decided to follow a great tutorial on nested fragments by Linden Darlinghttps://plus.google.com/100467024733771542884/posts/24HcFW5hEiV.</p>
  
  <p>I created a 'webview' fragment for each individual book page, with it's own layout. So if my book consists of 6 pages, then I'll have BookPage1Fragment, BookPage2Fragment, BookPage3Fragment, BookPage4Fragment, BookPage5Fragment, BookPage6Fragment etc. I the managed to get this working within the viewpager, so all swiping through fragments etc working fine. The problem is, only one fragment at a time is visible on screen. I'd like to have two fragments (multi-pane), when on running the app on large devices and landscape orientation and single-pane (one fragment at a time) when running on smaller devices or portrait view. I want to display a two pane layout with one fragment left and one fragment righT. </p>
  
  <p>See code below:</p>
  
  <pre><code>public class ParentFragment extends Fragment {
  
  public static final String TAG = ParentFragment.class.getSimpleName();
  
  public static ParentFragment newInstance() {
  return new ParentFragment();
  }
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setRetainInstance(true);
  }
  
  @Override
  
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle            savedInstanceState) {
  return inflater.inflate(R.layout.fragment_parent, container, false);
  }
  
  @Override
  public void onViewCreated(View view, Bundle savedInstanceState) {
  super.onViewCreated(view, savedInstanceState);
  
  ViewPager mViewPager = (ViewPager) view.findViewById(R.id.viewPager);
  mViewPager.setAdapter(new MyAdapter(getChildFragmentManager()));
  }
  
  public static class MyAdapter extends FragmentPagerAdapter {
  public MyAdapter(FragmentManager fm) {
      super(fm);
  }
  
  @Override
  public int getCount() {
      return 6;
  }
  
  /*
  
  @Override
  public Fragment getItem(int position) {
      Bundle args = new Bundle();
      args.putInt(TextViewFragment.POSITION_KEY, position);
      return TextViewFragment.newInstance(args);
  }
  
  
  */
  
  @Override
  public Fragment getItem(int position) {
      switch (position) {
      case 0:
          return new BookPage1Fragment();
      case 1:
          return new BookPage2Fragment();
      case 2:
          return new BookPage3Fragment();
      case 3:
          return new BookPage4Fragment();
      case 4:
          return new BookPage5Fragment();
      case 5:
          return new BookPage6Fragment();
  
  
      default:
          return getItem(0);
      }
  }
  
  
  @Override
  public CharSequence getPageTitle(int position) {
      return "Fragment # " + position;
  }
  
  }
  
  }
  </code></pre>
  
  <p>Basically two fragments appearing on landscape mode and one fragment appearing at a time when in portrait mode, just as the example describes on developer.blogspot <a href="http://android-developers.blogspot.in/2011/02/android-30-fragments-api.html" rel="nofollow">http://android-developers.blogspot.in/2011/02/android-30-fragments-api.html</a>, but embedded within a viewpager. </p>
  
  <p>Here is my main.layout.</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;RelativeLayout&gt; xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" &gt;
  
  &lt;android.support.v4.view.ViewPager
      android:id="@+id/pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
       /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>Here is what my webview fragment </p>
  
  <pre><code>public class WebViewFragment extends Fragment {
  
   @SuppressLint("SetJavaScriptEnabled")
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
          View mainView = (View) inflater.inflate(R.layout.fragment_web, container, false);
          WebView myWebView = (WebView) mainView.findViewById(R.id.webview);
          myWebView.loadUrl("file:///android_asset/Ebook-001.html");
  
  
          myWebView.setWebViewClient(new MyWebViewClient());
          myWebView.getSettings().setBuiltInZoomControls(true); 
          myWebView.getSettings().setJavaScriptEnabled(true);
          myWebView.getSettings().setSupportZoom(true);
          myWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);   
          myWebView.getSettings().setAllowFileAccess(true); 
          myWebView.getSettings().setDomStorageEnabled(true);
          myWebView.getSettings().setUseWideViewPort(true);
          myWebView.getSettings().setLoadWithOverviewMode(true);
              return mainView;
          }
  
      }
  </code></pre>
  
  <p>here is my webview fragment layout:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" &gt;
  
  &lt;WebView
      android:id="@+id/webview"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent" /&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>So in conclusion I'd like to:</p>
  
  <p>1: Display two fragments within viewpager in landscape mode, and single in portrait mode.</p>
  
  <p>2: Use one activity regardless of the device size, and decide at runtime whether to combine fragments in the layout (to create a multiple-pane design) or swap fragments (to create a single-pane design)</p>
  
  <p>Hope this all makes sense! Thank you in advance for any suggestions...</p>