StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><em>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.</em></p> <h2>ViewPager with multiple Fragments and Layout files - How To</h2> <blockquote> <p>The following is a complete example of how to implement a ViewPager with different fragment Types and different layout files.</p> </blockquote> <p><strong>In this case, I have 3 Fragment classes, and a different layout file for each class.</strong> In order to keep things simple, the <strong>fragment-layouts only differ in their background color</strong>. Of course, any layout-file can be used for the Fragments.</p> <p>FirstFragment.java has a <strong>orange</strong> background layout, SecondFragment.java has a <strong>green</strong> background layout and ThirdFragment.java has a <strong>red</strong> background layout. Furthermore, each Fragment displays a different text, depending on which class it is from and which instance it is.</p> <blockquote> <p>Also be aware that I am using the support-library's Fragment: <strong>android.support.v4.app.Fragment</strong></p> </blockquote> <p><strong>MainActivity.java</strong> (Initializes the Viewpager and has the adapter for it as an inner class). Again have a look at the <strong>imports</strong>. I am using the <code>android.support.v4</code> package.</p> <pre><code>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; } } } </code></pre> <p><strong>activity_main.xml</strong> (The MainActivitys .xml file) - a simple layout file, only containing the ViewPager that fills the whole screen.</p> <pre><code><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" /> </code></pre> <p>The Fragment classes, <strong>FirstFragment.java</strong> import android.support.v4.app.Fragment;</p> <pre><code>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; } } </code></pre> <p>first_frag.xml</p> <pre><code><?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:background="@android:color/holo_orange_dark" > <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" /> </RelativeLayout> </code></pre> <p><strong>SecondFragment.java</strong></p> <pre><code>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; } } </code></pre> <p>second_frag.xml</p> <pre><code><?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:background="@android:color/holo_green_dark" > <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" /> </RelativeLayout> </code></pre> <p><strong>ThirdFragment.java</strong></p> <pre><code>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; } } </code></pre> <p>third_frag.xml</p> <pre><code><?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:background="@android:color/holo_red_light" > <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" /> </RelativeLayout> </code></pre> <p><strong>The end result is the following:</strong></p> <p>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.</p> <p><img src="https://i.stack.imgur.com/WvXbA.png" alt="enter image description here"></p> <p>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.</p> <p><strong>Last but not least:</strong></p> <blockquote> <p>I would recommend that you use an <strong>empty constructor</strong> in each of your Fragment classes.</p> </blockquote> <p>Instead of handing over potential parameters via constructor, use the <code>newInstance(...)</code> method and the <code>Bundle</code> for handing over parameters. </p> <p>This way if detached and re-attached the object state can be stored through the arguments. Much like <code>Bundles</code> attached to <code>Intents</code>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload