Attach Layouts To Tabs - Android

I am making use of PagerTabStrip in my android app like the ones used in the new Google play store app. I went through a few tutorials and was succesfull in creating three tabs. Th

Solution 1:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><android.support.v4.view.ViewPagerxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/pager"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity" ><android.support.v4.view.PagerTabStripandroid:id="@+id/pager_title_strip"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="top"android:textSize="30dp"android:background="#000000"android:paddingBottom="4dp"android:paddingTop="4dp"android:textColor="#ffffff" /></android.support.v4.view.ViewPager>

page1.xml

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:text="Click here" />

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button1"
    android:text="I am Page one" />

page2.xml

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_centerInParent="true"
    android:text="Click here" />

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button2"
    android:text="I am Page two" />

page3.xml

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    android:layout_centerInParent="true"
    android:text="Click here" />

<TextView
    android:id="@+id/text3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_below="@id/button3"
    android:text="I am Page three" />

MainActivity.java

publicclassMainActivityextendsFragmentActivity 
{
    SectionsPagerAdapter mSectionsPagerAdapter;
    ViewPager mViewPager;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) 
        {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mSectionsPagerAdapter = newSectionsPagerAdapter(getSupportFragmentManager());
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mSectionsPagerAdapter);
        }

    publicclassSectionsPagerAdapterextendsFragmentPagerAdapter 
    {
        publicSectionsPagerAdapter(FragmentManager fm) 
        {
            super(fm);
        }

        @Overridepublic Fragment getItem(int position) 
        {

             switch (position) {
             case0:
                 // Top Rated fragment activityreturnnewInformation();
             case1:
                 // Games fragment activityreturnnewElectonicConfiguration();
             case2:
                 // Movies fragment activityreturnnewFact();
             }

             returnnull;
        }

        @OverridepublicintgetCount() 
        {
            return3;
        }

        @Overridepublic CharSequence getPageTitle(int position) {
        switch (position) 
        {
            case0:
                return"Information";
            case1:
                return"Electronic Configuration";
            case2:
                return"Facts";
            }
        returnnull;
        }
    }

    //Page 1 FragmentpublicstaticclassInformationextendsFragment {


    publicInformation()
        {
        }

    @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
         Viewview= inflater.inflate(R.layout.page1, null);
         TextViewtextView= (TextView)view.findViewById(R.id.text1);
         Button button=(Button)view.findViewById(R.id.button1);

       return view ;
        }
    }

    //Page 2 FragmentpublicstaticclassElectonicConfigurationextendsFragment {


        publicElectonicConfiguration()
            {
            }

        @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
             Viewview= inflater.inflate(R.layout.page2, null);
             TextViewtextView= (TextView)view.findViewById(R.id.text2);
             Button button=(Button)view.findViewById(R.id.button2);

           return view ;
            }
        }

    //Page 3 FragmentpublicstaticclassFactextendsFragment {

        publicFact()
            {
            }

        @Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
             Viewview= inflater.inflate(R.layout.page3, null);
             TextViewtextView= (TextView)view.findViewById(R.id.text3);
             Button button=(Button)view.findViewById(R.id.button3);

           return view ;
            }
        }
}

page1.xml, page2.xml,page3.xml are the layout file for the first,second and third page respectively.And There are 3 different fragments declared in the MainActivity.java for the 3 different pages. getItem() of SectionsPagerAdapter class manages all the 3 fragment pages. Make changes in the xml file as per your wish.I think the code is pretty self explanatory.If you have any doubt don't hesitate to ask.

Hope it helps. Cheers!