Multi-Pane fragments within viewpager

Question

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.

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.

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.

See code below:

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;
}

}

}

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 http://android-developers.blogspot.in/2011/02/android-30-fragments-api.html, but embedded within a viewpager.

Here is my main.layout.

<?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:orientation="vertical" >

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     />

</RelativeLayout>

Here is what my webview fragment

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;
        }

    }

here is my webview fragment layout:

<?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" >

<WebView
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" />

</LinearLayout>

So in conclusion I'd like to:

1: Display two fragments within viewpager in landscape mode, and single in portrait mode.

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)

Hope this all makes sense! Thank you in advance for any suggestions...

score 1 · Answer 1 · answered Jul 01 '16 at 10:05

You have to create a layout file for the landscape mode.You have to create a file in res folder with layout-land name.In that folder create a layout with same name which is placed in layout file.Android automatically access it when screen is change to landscape mode.

Multi-Pane fragments within viewpager

1 Answers1