How to implement a ViewPager with different Fragments Layouts

Question

When I start an activity which implements viewpager  the viewpager created various fragments  I want to use different layouts for each fragment  but the problem is that viewpager shows only two layouts at the max  second layout on all of the remaining fragments after 1    Here is the code for SwipeActivity which implements the viewpager    public class SwipeActivity extends FragmentActivity        MyPageAdapter pageAdapter        Override     protected void onCreate Bundle savedInstanceState                super onCreate savedInstanceState           setContentView R layout activity swipe           pageAdapter   new MyPageAdapter getSupportFragmentManager             ViewPager pager  ViewPager findViewById R id pager           pager setAdapter pageAdapter           ActionBar bar   getActionBar            bar setDisplayHomeAsUpEnabled true                       Custom Page adapter            private class MyPageAdapter extends FragmentPagerAdapter               public MyPageAdapter FragmentManager fm                        super fm                      Override         public int getCount                         return 5                     Override         public Fragment getItem int position                        switch position                                case 0  return new MyFragment                    case 1  return SecondFragment newInstance  asdasd                    default   return RamFragment newInstance  s                                       Here is the code for the fragments  public class MyFragment extends Fragment       Override    public View onCreateView LayoutInflater paramLayoutInflater  ViewGroup paramViewGroup     Bundle paramBundle            return paramLayoutInflater inflate R layout processorlayout  paramViewGroup  false            I used 5 fragments like this  all having different layouts  but the viewpager shows only 2 at the max   EDIT   code for SecondFragment  public class SecondFragment extends Fragment      public static final String EXTRA MESSAGE    EXTRA MESSAGE      public static final SecondFragment newInstance String paramString          SecondFragment f   new SecondFragment        Bundle localBundle   new Bundle 1       localBundle putString  EXTRA MESSAGE   paramString       f setArguments localBundle       return f          Override   public View onCreateView LayoutInflater paramLayoutInflater  ViewGroup paramViewGroup  Bundle paramBundle           return paramLayoutInflater inflate R layout motherboardlayout  paramViewGroup  false

User · Answer

This is also fine    lt android support v4 view ViewPager     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android id    id viewPager      android layout width  fill parent      android layout height  fill parent        gt      public class MainActivity extends FragmentActivity        Override     public void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout main activity            ViewPager pager    ViewPager  findViewById R id viewPager           pager setAdapter new MyPagerAdapter getSupportFragmentManager                 public class FragmentTab1 extends Fragment        Override     public View onCreateView LayoutInflater inflater  ViewGroup container              Bundle savedInstanceState            View rootView   inflater inflate R layout fragmenttab1  container  false           return rootView           class MyPagerAdapter extends FragmentPagerAdapter       public MyPagerAdapter FragmentManager fragmentManager           super fragmentManager               Override     public android support v4 app Fragment getItem int position            switch position               case 0                  FragmentTab1 fm     new FragmentTab1                    return fm              case 1  return new FragmentTab2                case 2  return new FragmentTab3                      return null              Override     public int getCount             return 3               lt 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   gt        lt TextView         android layout width  wrap content          android layout height  wrap content          android layout centerHorizontal  true          android layout centerVertical  true          android text   string Fragment1    gt    lt  RelativeLayout gt

User · Answer

Create new instances in your fragments and do like so in your Activity    private class SlidePagerAdapter extends FragmentStatePagerAdapter       public SlidePagerAdapter FragmentManager fm            super fm               Override     public Fragment getItem int position            switch position               case 0                  return Fragment1 newInstance                case 1                  return Fragment2 newInstance                case 2                  return Fragment3 newInstance                case 3                  return Fragment4 newInstance                  default  break                     return null

User · Answer

As this is a very frequently asked question  I wanted to take the time and effort to explain the ViewPager with multiple Fragments and Layouts in detail  Here you go   ViewPager with multiple Fragments and Layout files - How To     The following is a complete example of how to implement a ViewPager   with different fragment Types and different layout files    In this case  I have 3 Fragment classes  and a different layout file for each class  In order to keep things simple  the fragment-layouts only differ in their background color  Of course  any layout-file can be used for the Fragments   FirstFragment java has a orange background layout  SecondFragment java has a green background layout and ThirdFragment java has a red background layout  Furthermore  each Fragment displays a different text  depending on which class it is from and which instance it is      Also be aware that I am using the support-library s Fragment    android support v4 app Fragment   MainActivity java  Initializes the Viewpager and has the adapter for it as an inner class   Again have a look at the imports  I am using the android support v4 package   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 FragmentPagerAdapter  import android support v4 view ViewPager   public class MainActivity extends FragmentActivity         Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main                 ViewPager pager    ViewPager  findViewById R id viewPager           pager setAdapter new MyPagerAdapter getSupportFragmentManager                 private class MyPagerAdapter extends FragmentPagerAdapter            public MyPagerAdapter FragmentManager fm                super fm                       Override         public Fragment getItem int pos                switch pos                 case 0  return FirstFragment newInstance  FirstFragment  Instance 1                case 1  return SecondFragment newInstance  SecondFragment  Instance 1                case 2  return ThirdFragment newInstance  ThirdFragment  Instance 1                case 3  return ThirdFragment newInstance  ThirdFragment  Instance 2                case 4  return ThirdFragment newInstance  ThirdFragment  Instance 3                default  return ThirdFragment newInstance  ThirdFragment  Default                                      Override         public int getCount                 return 5                             activity main xml  The MainActivitys  xml file   - a simple layout file  only containing the  ViewPager that fills the whole screen    lt android support v4 view ViewPager     xmlns android  http   schemas android com apk res android      xmlns app  http   schemas android com apk res-auto      android id    id viewPager      android layout width  fill parent      android layout height  fill parent        gt    The Fragment classes  FirstFragment java     import android support v4 app Fragment   public class FirstFragment extends Fragment         Override     public View onCreateView LayoutInflater inflater  ViewGroup container  Bundle savedInstanceState            View v   inflater inflate R layout first frag  container  false            TextView tv    TextView  v findViewById R id tvFragFirst           tv setText getArguments   getString  msg              return v             public static FirstFragment newInstance String text             FirstFragment f   new FirstFragment            Bundle b   new Bundle            b putString  msg   text            f setArguments b            return f            first frag xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android background   android color holo orange dark   gt        lt TextView         android id    id tvFragFirst          android layout width  wrap content          android layout height  wrap content          android layout centerHorizontal  true          android layout centerVertical  true          android textSize  26dp          android text  TextView    gt   lt  RelativeLayout gt    SecondFragment java  public class SecondFragment extends Fragment     Override public View onCreateView LayoutInflater inflater  ViewGroup container  Bundle savedInstanceState        View v   inflater inflate R layout second frag  container  false        TextView tv    TextView  v findViewById R id tvFragSecond       tv setText getArguments   getString  msg          return v     public static SecondFragment newInstance String text         SecondFragment f   new SecondFragment        Bundle b   new Bundle        b putString  msg   text        f setArguments b        return f        second frag xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android background   android color holo green dark   gt        lt TextView         android id    id tvFragSecond          android layout width  wrap content          android layout height  wrap content          android layout centerHorizontal  true          android layout centerVertical  true          android textSize  26dp          android text  TextView    gt    lt  RelativeLayout gt    ThirdFragment java  public class ThirdFragment extends Fragment     Override public View onCreateView LayoutInflater inflater  ViewGroup container  Bundle savedInstanceState        View v   inflater inflate R layout third frag  container  false        TextView tv    TextView  v findViewById R id tvFragThird             tv setText getArguments   getString  msg          return v     public static ThirdFragment newInstance String text         ThirdFragment f   new ThirdFragment        Bundle b   new Bundle        b putString  msg   text        f setArguments b        return f        third frag xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  match parent      android layout height  match parent      android background   android color holo red light   gt        lt TextView         android id    id tvFragThird          android layout width  wrap content          android layout height  wrap content          android layout centerHorizontal  true          android layout centerVertical  true          android textSize  26dp          android text  TextView    gt    lt  RelativeLayout gt    The end result is the following   The Viewpager holds 5 Fragments  Fragments 1 is of type FirstFragment  and displays the first frag xml layout  Fragment 2 is of type SecondFragment and displays the second frag xml  and Fragment 3-5 are of type ThirdFragment and all display the third frag xml     Above you can see the 5 Fragments between which can be switched via swipe to the left or right  Only one Fragment can be displayed at the same time of course   Last but not least      I would recommend that you use an empty constructor in each of your   Fragment classes    Instead of handing over potential parameters via constructor  use the newInstance      method and the Bundle for handing over parameters    This way if detached and re-attached the object state can be stored through the arguments  Much like Bundles attached to Intents

User · Answer

Code for adding fragment  public Fragment getItem int position         switch  position           case 0              return new Fragment1             case 1              return new Fragment2             case 2              return new Fragment3             case 3              return new Fragment4             default              break             return null      Create an xml file for each fragment say for Fragment1  use fragment one xml as layout file  use the below code in Fragment1 java file   public class Fragment1 extends Fragment        public View onCreateView LayoutInflater inflater  ViewGroup container  Bundle savedInstanceState             View view   inflater inflate R layout fragment one  container  false            return view             Later you can make necessary corrections   It worked for me

User · Answer

Basic ViewPager Example  This answer is a simplification of the documentation  this tutorial  and the accepted answer  It s purpose is to get a working ViewPager up and running as quickly as possible  Further edits can be made after that     XML  Add the xml layouts for the main activity and for each page  fragment   In our case we are only using one fragment layout  but if you have different layouts on the different pages then just make one for each of them   activity main xml   lt  xml version  1 0  encoding  utf-8   gt   lt 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      tools context  com example verticalviewpager MainActivity  gt        lt android support v4 view ViewPager         android id    id viewpager          android layout width  match parent          android layout height  match parent    gt    lt  RelativeLayout gt    fragment one xml   lt  xml version  1 0  encoding  utf-8   gt   lt RelativeLayout xmlns android  http   schemas android com apk res android                  android layout width  match parent                  android layout height  match parent   gt        lt TextView         android id    id textview          android textSize  30sp          android layout width  wrap content          android layout height  wrap content          android layout centerInParent  true    gt    lt  RelativeLayout gt    Code  This is the code for the main activity  It includes the PagerAdapter and FragmentOne as inner classes  If these get too large or you are reusing them in other places  then you can move them to their own separate classes   import android support v4 app Fragment  import android support v4 app FragmentManager  import android support v4 app FragmentPagerAdapter  import android support v4 view ViewPager   public class MainActivity extends AppCompatActivity        static final int NUMBER OF PAGES   2       MyAdapter mAdapter      ViewPager mPager        Override     protected void onCreate Bundle savedInstanceState            super onCreate savedInstanceState           setContentView R layout activity main            mAdapter   new MyAdapter getSupportFragmentManager             mPager   findViewById R id viewpager           mPager setAdapter mAdapter              public static class MyAdapter extends FragmentPagerAdapter           public MyAdapter FragmentManager fm                super fm                       Override         public int getCount                 return NUMBER OF PAGES                      Override         public Fragment getItem int position                 switch  position                    case 0                      return FragmentOne newInstance 0  Color WHITE                   case 1                         return a different Fragment class here                        if you want want a completely different layout                     return FragmentOne newInstance 1  Color CYAN                   default                      return null                                     public static class FragmentOne extends Fragment            private static final String MY NUM KEY    num           private static final String MY COLOR KEY    color            private int mNum          private int mColor              You can modify the parameters to pass in whatever you want         static FragmentOne newInstance int num  int color                FragmentOne f   new FragmentOne                Bundle args   new Bundle                args putInt MY NUM KEY  num               args putInt MY COLOR KEY  color               f setArguments args               return f                      Override         public void onCreate Bundle savedInstanceState                super onCreate savedInstanceState               mNum   getArguments      null   getArguments   getInt MY NUM KEY    0              mColor   getArguments      null   getArguments   getInt MY COLOR KEY    Color BLACK                      Override         public View onCreateView LayoutInflater inflater  ViewGroup container                                   Bundle savedInstanceState                View v   inflater inflate R layout fragment one  container  false               v setBackgroundColor mColor               TextView textView   v findViewById R id textview               textView setText  Page     mNum               return v                      Finished  If you copied and pasted the three files above to your project  you should be able to run the app and see the result in the animation above   Going on  There are quite a few things you can do with ViewPagers  See the following links to get started    Creating Swipe Views with Tabs ViewPager with FragmentPagerAdapter  CodePath tutorials are always good

User · Answer

Create an array of Views and apply it to  container addView viewarr position     public class Layoutes extends PagerAdapter        private Context context      private LayoutInflater layoutInflater      Layoutes Context context           this context context            int layoutes    R layout one R layout two R layout three        Override     public int getCount             return layoutes length              Override     public boolean isViewFromObject View view  Object object            return  view   LinearLayout object              Override     public Object instantiateItem ViewGroup container  int position           layoutInflater  LayoutInflater  context getSystemService Context LAYOUT INFLATER SERVICE           View one layoutInflater inflate R layout one container false           View two layoutInflater inflate R layout two container false           View three layoutInflater inflate R layout three container false           View viewarr    one two three           container addView viewarr position            return viewarr position              Override     public void destroyItem ViewGroup container  int position  Object object           container removeView  LinearLayout  object

[android] How to implement a ViewPager with different Fragments / Layouts

Examples related to android

Examples related to android-layout

Examples related to android-fragments

Examples related to android-viewpager

Examples related to fragmentpageradapter