Swiping screen using fragments and viewpager

wilsonchama 0 Light Poster

8 Years Ago

Hi Guys,

Am trying to develop an android application with 13 fragments. The app works very well with the navigation drawer, but when I tried to add the code for the function to swipe the screen to switch betwenn fragments, the app stopped to work. I am very new to android development, the reason why I am failing to get to the root of the matter. I need your help guys.

Thanks in advance.

Here is the code for main Main Activity.java

package com.aidforpcs.www.myfragmentexample;

import android.content.Context;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Adapter;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.LinearLayout;
import android.widget.ListView;

import java.util.ArrayList;

@SuppressWarnings("ALL")
public class MainActivity extends ActionBarActivity implements AdapterView.OnItemClickListener {

    //Viewpager declaration
    private ViewPager viewPager;

// The statements below pertain to the navigation drawer declarations
    private ActionBarDrawerToggle actionBarDrawerToggle;
    private DrawerLayout drawerLayout;
    private ListView navList;
    private ActionBar actionBar;
    private FragmentTransaction fragmentTransaction;
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

//These statements makes the navigation drawer functional
        drawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
        navList = (ListView) findViewById(R.id.navList);
        ArrayList<String> navArray = new ArrayList<>();
        navArray.add("Home");
        navArray.add("Chapter 1");
        navArray.add("Chapter 2");
        navArray.add("Chapter 3");
        navArray.add("Chapter 4");
        navArray.add("Chapter 5");
        navArray.add("Chapter 6");
        navArray.add("Chapter 7");
        navArray.add("Chapter 8");
        navArray.add("Chapter 9");
        navArray.add("Chapter 10");
        navArray.add("Chapter 11");
        navArray.add("Chapter 12");

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_activated_1, navArray);
        navList.setAdapter(adapter);
        navList.setOnItemClickListener(this);
        navList.setChoiceMode(ListView.CHOICE_MODE_SINGLE);
        actionBarDrawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.openedarwer, R.string.closedrawer);
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
        actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setDisplayHomeAsUpEnabled(true);
        fragmentManager = getSupportFragmentManager();
        fragmentTransaction = fragmentManager.beginTransaction();
        loadSelection(0);

        viewPager = (ViewPager) findViewById(R.id.TheViewPager);
        viewPager.setAdapter(new MyAdapter());

    }

//The switch statement displays the fragments associated with the selected integer
    private void loadSelection(int i) {

        navList.setItemChecked(i, true);
        switch (i) {
            case 0:
                Home home = new Home();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, home);
                fragmentTransaction.commit();
                break;
            case 1:
                Chapter1 chapter1 = new Chapter1();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter1);
                fragmentTransaction.commit();
                break;
            case 2:
                Chapter2 chapter2 = new Chapter2();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter2);
                fragmentTransaction.commit();
                break;
            case 3:
                Chapter3 chapter3 = new Chapter3();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter3);
                fragmentTransaction.commit();
                break;
            case 4:
                Chapter4 chapter4 = new Chapter4();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter4);
                fragmentTransaction.commit();
                break;
            case 5:
                Chapter5 chapter5 = new Chapter5();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter5);
                fragmentTransaction.commit();
                break;
            case 6:
                Chapter6 chapter6 = new Chapter6();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter6);
                fragmentTransaction.commit();
                break;

            case 7:
                Chapter7 chapter7 = new Chapter7();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter7);
                fragmentTransaction.commit();
                break;

            case 8:
                Chapter8 chapter8 = new Chapter8();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter8);
                fragmentTransaction.commit();
                break;

            case 9:
                Chapter9 chapter9 = new Chapter9();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter9);
                fragmentTransaction.commit();
                break;

            case 10:
                Chapter10 chapter10 = new Chapter10();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter10);
                fragmentTransaction.commit();
                break;

            case 11:
                Chapter11 chapter11 = new Chapter11();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter11);
                fragmentTransaction.commit();
                break;

            case 12:
                Chapter12 chapter12 = new Chapter12();
                fragmentTransaction = fragmentManager.beginTransaction();
                fragmentTransaction.replace(R.id.fragmentholder, chapter12);
                fragmentTransaction.commit();
                break;

        }
    }

    @Override
    protected void onPostCreate(Bundle SavedInstanceState) {
        super.onPostCreate(SavedInstanceState);
        actionBarDrawerToggle.syncState();
    }

    public boolean onOptionsItemSelected(MenuItem item) {

        int id = item.getItemId();
        {

            if (id == android.R.id.home) ;
            if (drawerLayout.isDrawerOpen(navList)) {
                drawerLayout.closeDrawer(navList);
            } else {
                drawerLayout.openDrawer(navList);
            }
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
        loadSelection(position);

        drawerLayout.closeDrawer(navList);
    }

    //Code to implement the viewpager functionality

    public class MyAdapter extends PagerAdapter {
        LayoutInflater layoutInflater;
        int[] layouts = {R.layout.fragment_home, R.layout.fragment_chapter1, R.layout.fragment_chapter2,
                R.layout.fragment_chapter3, R.layout.fragment_chapter4,
                R.layout.fragment_chapter5, R.layout.fragment_chapter6,
                R.layout.fragment_chapter7, R.layout.fragment_chapter8,
                R.layout.fragment_chapter9, R.layout.fragment_chapter10,
                R.layout.fragment_chapter11, R.layout.fragment_chapter12};

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

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return (view == (LinearLayout) object);
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            View home = layoutInflater.inflate(R.layout.fragment_home, container, false);
            View one = layoutInflater.inflate(R.layout.fragment_chapter1, container, false);
            View two = layoutInflater.inflate(R.layout.fragment_chapter2, container, false);
            View three = layoutInflater.inflate(R.layout.fragment_chapter3, container, false);
            View four = layoutInflater.inflate(R.layout.fragment_chapter4, container, false);
            View five = layoutInflater.inflate(R.layout.fragment_chapter5, container, false);
            View six = layoutInflater.inflate(R.layout.fragment_chapter6, container, false);
            View seven = layoutInflater.inflate(R.layout.fragment_chapter7, container, false);
            View eight = layoutInflater.inflate(R.layout.fragment_chapter8, container, false);
            View nine = layoutInflater.inflate(R.layout.fragment_chapter9, container, false);
            View ten = layoutInflater.inflate(R.layout.fragment_chapter10, container, false);
            View eleven = layoutInflater.inflate(R.layout.fragment_chapter11, container, false);
            View twelve = layoutInflater.inflate(R.layout.fragment_chapter12, container, false);

            View viewarr[] = {home, one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve};
            container.addView(viewarr[position]);
            return viewarr[position];
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((LinearLayout) object);
        }

    }
}

This code is for the Main Activity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/fragmentholder"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@drawable/cover6">

    </FrameLayout>

    <ListView
        android:id="@+id/navList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#FFD12A"></ListView>

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

</android.support.v4.view.ViewPager>

</android.support.v4.widget.DrawerLayout>

This is the code for one of the fragments which run from fragment 1 to fragment 12

fragment_chapter1.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:background="#F7F7F7">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <View
            android:id="@+id/view1"
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:layout_alignParentRight="true"
            android:layout_marginTop="10dp"
            android:background="#000000" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/page1"
            android:text="@string/page1"
            android:layout_gravity="left"
            android:textStyle="italic"
            android:textSize="12sp"/>
        <View
            android:id="@+id/view2"
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:layout_alignParentRight="true"
            android:background="#000000" />
        <TextView
            android:id="@+id/chapterheading"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/chapter1_heading"
            android:textAllCaps="true"
            android:paddingTop="16dp"
            android:paddingLeft="8dp"
            android:textColor="@android:color/black" />

        <TextView
            android:id="@+id/generaladvice"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:textAllCaps="true"
            android:paddingTop="16dp"
            android:text="@string/generaladvice"
            android:textColor="@android:color/black"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/generaladvicecontent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/generaladvicecontent"
            android:textColor="@android:color/holo_red_dark"
            />

        <TextView
            android:id="@+id/targetgroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:textAllCaps="true"
            android:paddingRight="10dp"
            android:paddingTop="16dp"
            android:text="@string/targetgroup"
            android:textColor="@android:color/black"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/targetgroupcontent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/targetgroupcontent"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/briefdescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="16dp"
            android:textAllCaps="true"
            android:text="@string/briefdescription"
            android:textColor="@android:color/black"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/briefdescriptioncontent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/briefdescriptioncontent"
            android:textColor="@android:color/black"
            />
        <TextView
            android:id="@+id/vehicleanddriverlegaldocumentation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:paddingTop="16dp"
            android:textAllCaps="true"
            android:text="@string/vehicleanddriverlegaldocumentation"
            android:textColor="@android:color/black"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/vehicleanddriverlegaldocumentationcontent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/vehicleanddriverlegaldocumentationcontent"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/driverslicense"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/driverslicensecontent"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/ProvisionalDriverLicence"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/ProvisionalDriverLicence"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/RoadVehicleTax"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/RoadVehicleTax"
            android:textColor="@android:color/black"/>

        <TextView
            android:id="@+id/CertificateofRoadworthiness"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/CertificateofRoadworthiness"
            android:textColor="@android:color/black"
            />

        <TextView
            android:id="@+id/InsuranceCertificate"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingBottom="8dp"
            android:paddingTop="10dp"
            android:paddingLeft="38dp"
            android:paddingRight="20dp"
            android:text="@string/InsuranceCertificate"
            android:textColor="@android:color/black"
            />

    </LinearLayout>

</ScrollView>

This code is for the Chapter1 fragment (Chapter1.java)

package com.aidforpcs.www.myfragmentexample;

import android.app.Activity;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;
import android.widget.TextView;

/**
 * A simple {@link Fragment} subclass.
 */
public class Chapter1 extends Fragment {

//Initializing the webview
    private WebView mywebview1;

    public Chapter1() {
        // Required empty public constructor
    }

    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
    }

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

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_chapter1, container, false);

    }

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

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public void onDetach() {
        super.onDetach();
    }
}

google:android-development

Edited 8 Years Ago by wilsonchama

1 Contributor
0 Replies
340 Views

Dani AI

Generated 9 Months Ago

Likely cause and quick diagnosis for : the app crash after adding swiping almost always comes from the custom PagerAdapter implementation rather than the drawer itself. In this case the adapter was casting the returned page object to a specific view type and inflating every page up front. If a layout root is not the type you cast to (for example a ScrollView instead of a LinearLayout) that produces a ClassCastException at runtime. Also mixing manual fragment transactions into a separate FrameLayout and simultaneously inflating the same fragment layouts into a ViewPager doubles up UI logic—pick one approach (ViewPager-managed pages or manual fragment replacements), not both.

Minimal fixes (safe, easy to apply)

Make the adapter treat pages as generic View objects (no risky casts).
Inflate only the layout for the requested position.
Let the adapter return the View itself and remove it with View casting.

Example (replace only the three adapter methods—keeps it short and different from existing code):

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == object;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    LayoutInflater inf = LayoutInflater.from(container.getContext());
    View page = inf.inflate(layouts[position], container, false);
    container.addView(page);
    return page;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
}

Better design suggestions

For 13 pages prefer FragmentStatePagerAdapter (or the AndroidX equivalents). It manages lifecycles and saves memory by destroying off-screen fragments.
Sync the drawer with the ViewPager instead of doing manual fragment replaces. Example pattern: call viewPager.setCurrentItem(position) from the drawer item click, and use viewPager.addOnPageChangeListener(...) to navList.setItemChecked(position, true) so the UI stays consistent.
Make the ViewPager the main content view (first child of the DrawerLayout) and remove the separate fragment holder if you use ViewPager.

Final checks

Inspect Logcat for the exact FATAL EXCEPTION and line number (ClassCastException is common here).
Replace deprecated ActionBarActivity with AppCompatActivity and use FragmentStatePagerAdapter/getSupportFragmentManager.
Consider offscreen page limits and memory if pages are heavy (images, WebViews).

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.