Fragments / Tab Pages in Android

How to create Fragments / Tab Pages in Android Development.

Create Main Activity and clear all paddings and initial Text view tag. Now add library in Gradle.

<?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"

    tools:context="com.example.user.fragmentsclassprac.MainActivity">

Go to Gradle Script > build.gradle(Module: app)

Now copy paste last line from code i.e.

compile 'com.android.support:appcompat-v7:23.4.0'

and change it with following code

compile 'com.android.support:design:23.4.0'

Now click on Sync Now on top right screen.

Now create Tab Layout tag in Relative Layout

<android.support.design.widget.TabLayout

    android:layout_width="match_parent"

    android:layout_height="?attr/actionBarSize"

    android:id="@+id/tlayout"/>

Create View Pager tag in Relative layout next to Tab layout

<android.support.v4.view.ViewPager

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_below="@+id/tlayout"

    android:id="@+id/vpager"/>

Now go to activity’s java class and initialize variable

public class MainActivity extends AppCompatActivity {

TabLayout tablayout;

ViewPager viewpager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.tlayout);

        viewpager = (ViewPager) findViewById(R.id.vpager);

        



    }

}

Create tabs using initialized variable

public class MainActivity extends AppCompatActivity {

TabLayout tablayout;

ViewPager viewpager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.tlayout);

        viewpager = (ViewPager) findViewById(R.id.vpager);

        tablayout.addTab(tablayout.newTab().setText("Red"));

        tablayout.addTab(tablayout.newTab().setText("Blue"));

        tablayout.addTab(tablayout.newTab().setText("Green"));

        tablayout.addTab(tablayout.newTab().setText("Yellow"));

        tablayout.addTab(tablayout.newTab().setText("Purple"));



    }

}

Now create multiple layout in res > Layout > New > Layout Resource File

Name it like red, blue, green, yellow, purple. Change all layout background color as per their names.

Now create their java classes with following codes

Class Red for red layout

package com.example.user.fragmentsclassprac;



import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



/**

 * Created by User on 9/6/2017.

 */

public class Red extends Fragment{

    @Nullable

    @Override

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

        return inflater.inflate(R.layout.red,container,false);

    }

}

Class Blue for blue layout

package com.example.user.fragmentsclassprac;



import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



/**

 * Created by User on 9/6/2017.

 */

public class Red extends Fragment{

    @Nullable

    @Override

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

        return inflater.inflate(R.layout.blue,container,false);

    }

}

Class Green for green layout

package com.example.user.fragmentsclassprac;



import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



/**

 * Created by User on 9/6/2017.

 */

public class Red extends Fragment{

    @Nullable

    @Override

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

        return inflater.inflate(R.layout.green,container,false);

    }

}

Class Yellow for yellow layout

package com.example.user.fragmentsclassprac;



import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



/**

 * Created by User on 9/6/2017.

 */

public class Red extends Fragment{

    @Nullable

    @Override

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

        return inflater.inflate(R.layout.yellow,container,false);

    }

}

Class Purple for purple layout

package com.example.user.fragmentsclassprac;



import android.os.Bundle;

import android.support.annotation.Nullable;

import android.support.v4.app.Fragment;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;



/**

 * Created by User on 9/6/2017.

 */

public class Red extends Fragment{

    @Nullable

    @Override

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

        return inflater.inflate(R.layout.purple,container,false);

    }

}

Now create adapter class for fragments e.g.

package com.example.user.fragmentsclassprac;



import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentStatePagerAdapter;



/**

 * Created by User on 9/6/2017.

 */

public class paggingAdpter extends FragmentStatePagerAdapter {

    int countTabs;

    public paggingAdpter(FragmentManager fm,int countTabs) {

        super(fm);

        this.countTabs = countTabs;

    }



    @Override

    public Fragment getItem(int position) {

        switch (position){

            case 0:

                Red red = new Red();

                return red;

            case 1:

                Blue blue = new Blue();

                return blue;

            case 2:

                Green green = new Green();

                return green;

            case 3:

                Yellow yellow = new Yellow();

                return yellow;

            case 4:

                Purple purple = new Purple();

                return purple;

            default:

                return null;



        }

    }



    @Override

    public int getCount() {

        return countTabs;

    }

}

Now assign adapter to view pager i.e.

public class MainActivity extends AppCompatActivity {

TabLayout tablayout;

ViewPager viewpager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.tlayout);

        viewpager = (ViewPager) findViewById(R.id.vpager);

        tablayout.addTab(tablayout.newTab().setText("Red"));

        tablayout.addTab(tablayout.newTab().setText("Blue"));

        tablayout.addTab(tablayout.newTab().setText("Green"));

        tablayout.addTab(tablayout.newTab().setText("Yellow"));

        tablayout.addTab(tablayout.newTab().setText("Purple"));



paggingAdpter adp = new paggingAdpter(getSupportFragmentManager(),tablayout.getTabCount());

        viewpager.setAdapter(adp);

    }

}

After assigning adapter map view pager with tab layout for functional it on same routine.

public class MainActivity extends AppCompatActivity {

TabLayout tablayout;

ViewPager viewpager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        tablayout = (TabLayout) findViewById(R.id.tlayout);

        viewpager = (ViewPager) findViewById(R.id.vpager);

        tablayout.addTab(tablayout.newTab().setText("Red"));

        tablayout.addTab(tablayout.newTab().setText("Blue"));

        tablayout.addTab(tablayout.newTab().setText("Green"));

        tablayout.addTab(tablayout.newTab().setText("Yellow"));

        tablayout.addTab(tablayout.newTab().setText("Purple"));



        paggingAdpter adp = new paggingAdpter(getSupportFragmentManager(),tablayout.getTabCount());

        viewpager.setAdapter(adp);



        viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));

    }

}

Now map tab layout with view pager

package com.example.user.fragmentsclassprac;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TableLayout;

public class MainActivity extends AppCompatActivity {

ViewPager viewpager;
TabLayout tabLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) findViewById(R.id.tlayout);
        viewpager = (ViewPager) findViewById(R.id.vpager);
        tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        tabLayout.addTab(tabLayout.newTab().setText("Red"));
        tabLayout.getTabAt(0).setIcon(R.drawable.ic_red_dot);
        tabLayout.addTab(tabLayout.newTab().setText("Blue"));
        tabLayout.getTabAt(1).setIcon(R.drawable.ic_blue_dot);
        tabLayout.addTab(tabLayout.newTab().setText("Green"));
        tabLayout.getTabAt(2).setIcon(R.drawable.ic_green_dot);
        tabLayout.addTab(tabLayout.newTab().setText("Yellow"));
        tabLayout.getTabAt(3).setIcon(R.drawable.ic_yellow_dot);
        tabLayout.addTab(tabLayout.newTab().setText("Purple"));
        tabLayout.getTabAt(4).setIcon(R.drawable.ic_purple_dot);
        tabLayout.addTab(tabLayout.newTab().setText("Orange"));
        tabLayout.getTabAt(5).setIcon(R.drawable.ic_orange);
        tabLayout.addTab(tabLayout.newTab().setText("Black"));
        tabLayout.getTabAt(6).setIcon(R.drawable.ic_black);
        paggingAdpter adp = new paggingAdpter(getSupportFragmentManager(),tabLayout.getTabCount());
        viewpager.setAdapter(adp);
        /*viewpager.animate();*/
        viewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewpager.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
           }
}