Android Tab Layout with Swipe

Hello friend,

In this blog we are learn how to create tab layout with swipe in android.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
android:id="@+id/PLAY_PARENT" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical" 
android:padding="0dp">

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:visibility="gone"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

<android.support.design.widget.TabLayout
android:id="@+id/tabs"         
android:layout_width="match_parent"         
android:layout_height="wrap_content"         
app:tabGravity="fill"         
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager     
android:id="@+id/view_pager"     
android:layout_width="match_parent"     
android:layout_height="match_parent"     
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</LinearLayout>



MainActivity.java

public class MainActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;
    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        viewPager = (ViewPager) findViewById(R.id.view_pager);
        AddTabOfPage(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
    }
    private void AddTabOfPage(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new FirstTab(), "Tab 1");
        adapter.addFragment(new SecondTab(), "Tab 2");
        adapter.addFragment(new ThirdTab(), "Tab 3");
        viewPager.setAdapter(adapter);
    }
    class ViewPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> fragmnet_list = new ArrayList<>();
        private final List<String> fragment_title = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {
            super(manager);
        }

        @Override     
        public Fragment getItem(int position) {
            return fragmnet_list.get(position);
        }

        @Override     

        public int getCount() {
            return fragmnet_list.size();
        }

        public void addFragment(Fragment fragment, String title) {
            fragmnet_list.add(fragment);
            fragment_title.add(title);
        }

        @Override     

        public CharSequence getPageTitle(int position) {
            return fragment_title.get(position);
        }
    }
}


first.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">

<TextView     
android:layout_width="match_parent"     
android:layout_height="wrap_content"     
android:gravity="center"     
android:textSize="50dp"     
android:layout_centerVertical="true"     
android:text="Tab 1"/>
</RelativeLayout>


FirstTab.java

public class FirstTab  extends android.support.v4.app.Fragment {

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

    @Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment     
return inflater.inflate(R.layout.first, container, false);
    }

}


second.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">

<TextView     
android:layout_width="match_parent"     
android:layout_height="wrap_content"     
android:gravity="center"     
android:textSize="50dp"     
android:layout_centerVertical="true"     
android:text="Tab 2"/>
</RelativeLayout>


SecondTab.java

public class SecondTab extends android.support.v4.app.Fragment {
    @Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment     
return inflater.inflate(R.layout.second, container, false);
    }

}


third.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">
 
<TextView     
android:layout_width="match_parent"     
android:layout_height="wrap_content"     
android:gravity="center"     
android:textSize="50dp"     
android:layout_centerVertical="true"     
android:text="Tab 3"/>
</RelativeLayout>


ThirdTab.java

public class ThirdTab extends android.support.v4.app.Fragment {
    @Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment     
return inflater.inflate(R.layout.third, container, false);
    }
}

output:-