View Pager with huge number of fragment

Question

I have to change the views on swipe. This can be obtained through view pager. But I have 60 views and creating 60 different fragment will not be a good approach. Please someone guide me what will be the best way to design swiping 60 views.

Answer 1

Below is the complete code to add Fragments to a View pager. Since this is just a demonstration I have used just a textView and each fragment added will have a random colour.On clicking a button you can add as many fragments as you want.On clicking the Page you can just remove it from the View Pager.You can move from one Page to another in a View Pager by Swiping to the right or left.

MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.Button;
import java.util.ArrayList;
import java.util.Random;

public class MainActivity extends FragmentActivity {

    private MyPagerAdapter mpg;
    private ArrayList<MyFragment> fragmentlist = new ArrayList<>();
    public FragmentManager fmr    = getSupportFragmentManager();

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

        final ViewPager pager  = (ViewPager) findViewById(R.id.viewPager);
        mpg = new MyPagerAdapter(fmr,fragmentlist);
        pager.setAdapter(mpg);

        for (int q = 0; q < 5; q++) {
            int r = new Random().nextInt(100) + 155;
            int g = new Random().nextInt(100) + 155;
            int b = new Random().nextInt(100) + 155;
            fragmentlist.add(MyFragment.newInstance(q, "Page number: " + (q + 1), Color.rgb(r, g, b)));
            mpg.notifyDataSetChanged();
        }

        Button  B1 = (Button) findViewById(R.id.button);
        B1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                int r = new Random().nextInt(100) + 155;
                int g = new Random().nextInt(100) + 155;
                int b = new Random().nextInt(100) + 155;
                int count = mpg.getCount();
                fragmentlist.add(MyFragment.newInstance(count, "Page number: " + (count+1), Color.rgb(r, g, b)));
                mpg.notifyDataSetChanged();

            }
        });
    }

    public void delete(int pos) {

        int i = 0;
        while (i <= fragmentlist.size()) {
            if (pos == fragmentlist.get(i).getPosition()) break;
            i++;

        }

        fragmentlist.remove(i);
        mpg.notifyDataSetChanged();
    }

    public class MyPagerAdapter extends FragmentStatePagerAdapter {

        private ArrayList<MyFragment> fragmentList;
        public MyPagerAdapter(FragmentManager fm, ArrayList<MyFragment> f) {
            super(fm);
            this.fragmentList = f;
        }

        @Override
        public Fragment getItem(int pos) {
            return fragmentlist.get(pos);
        }

        @Override
        public int getCount() {
            return fragmentlist.size();
        }

        @Override
        public int getItemPosition(Object object) {
            return POSITION_NONE;
        }
    }
}

MyFragment.java

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.TextView;

import java.util.List;

public class MyFragment extends Fragment {

    int pos;

    @Override
    public View onCreateView(LayoutInflater inflater, final ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.f_1, container, false);
        pos = getArguments().getInt("num");
        v.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Log.v("MainActivity", "Deleting at pos - " + pos);
                MainActivity activity = (MainActivity) getActivity();
                activity.delete(pos);
            }
        });

        TextView tv = (TextView) v.findViewById(R.id.tvFragFirst);
        FrameLayout fl = (FrameLayout) v.findViewById(R.id.frame_layout);
        tv.setText(getArguments().getString("msg"));
        fl.setBackgroundColor(getArguments().getInt("colour"));
        return v;
    }

    public int getPosition() {
        return pos;
    }

    public static MyFragment newInstance(int num,String text,int clr) {

        MyFragment f = new MyFragment();
        Bundle b = new Bundle();
        b.putString("msg", text);
        b.putInt("colour", clr);
        b.putInt("num",num);
        f.setArguments(b);
        return f;
    }
}

And the xml.files,

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.shakthivels.assingment10.MainActivity"
    android:id="@+id/r_v"
    >

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ADD a fragment"
        android:id="@+id/button"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

</RelativeLayout>

f_1.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/av"
     >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/frame_layout">

        <TextView
            android:id="@+id/tvFragFirst"
            android:layout_width="203dp"
            android:layout_height="127dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:textSize="26sp"
            android:text="TextView"
            android:layout_gravity="center"
            android:textColor="#000000" />

    </FrameLayout>
</RelativeLayout>

1 2

Answer 2

Firstly create one fragment where you can inflate different views using "position" parameter as follow..

public class SuperAwesomeCardFragment extends Fragment {

private static final String ARG_POSITION = "position";

private int position;
View mainView;

public static SuperAwesomeCardFragment newInstance(int position) {
    SuperAwesomeCardFragment f = new SuperAwesomeCardFragment();
    Bundle b = new Bundle();
    b.putInt(ARG_POSITION, position);
    f.setArguments(b);
    return f;
}

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

    position = getArguments().getInt(ARG_POSITION);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)          {

  if(position==1){

  mainview = inflater.inflate(R.layout.layout1, null);

  }else if(position==2){

  mainview =inflater.inflate(R.layout.layout2, null);
  .
  .
  .
  .
  }else if(position==50){

  mainview =inflater.inflate(R.layout.layout50, null);
  }

return mainView;    
}

}

Now in Your MainActivity Create an Adapter that extends FragmentPagerAdpater and in getItem() method create the instances of previously create fragment as follow

public class MyPagerAdapter extends FragmentPagerAdapter {

    private final String[] TITLES = { "Title1", "Title2"...., "Title50"};

    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return TITLES[position];
    }

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

    @Override
    public Fragment getItem(int position) {
        return SuperAwesomeCardFragment.newInstance(position);
    }

}

}

Then finally add this in your Activity's OnCreat() method...

MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
yourViewPager.setAdapter(adapter);

Thus you will have to create single fragment and use it for multiple views. Thank you. Hope it helps..!!

Answer 3

You can safely use the ViewPager with an implementation of FragmentStatePagerAdapter. The adapter will optimize the memory usage by destroying fragments that are not visible at a given moment. Check the documentation for details and code sample.