<h3><span style="color: #000080;"><strong>Tabs</strong></span></h3>
<p><span style="color: #008000;"><strong>Tabs</strong> </span>make it easy to explore and switch between different views.</p>
<h4><span style="color: #000080;"><strong>TabLayout</strong></span></h4>
<p><span style="color: #008000;"><strong>TabLayout</strong></span> provides a horizontal layout to display tabs.</p>
<h4><strong><span style="color: #000080;">ViewPager Integration</span></strong></h4>
<p>If you&#8217;re using a<span style="color: #008000;"><strong> ViewPager</strong></span> together with this layout, you can call <strong><span style="color: #008000;">setupWithViewPager(ViewPager)</span></strong> to link the two together. This layout will be automatically populated from the <span style="color: #008000;"><strong>PagerAdapter&#8217;s</strong></span> page titles.</p>
<p>Get <strong><span style="color: #0000ff;">GITHUB</span> </strong>code from<span style="color: #0000ff;"> <a style="color: #0000ff;" href="https://github.com/arunk7839/TabLayoutExample"><strong>Here</strong></a>.</span></p>
<p><amp-youtube layout="responsive" width="1200" height="675" data-videoid="ok-jjDEKhBQ" title="Android Working With Tabs"><a placeholder href="https://youtu.be/ok-jjDEKhBQ"><img src="https://i.ytimg.com/vi/ok-jjDEKhBQ/hqdefault.jpg" layout="fill" object-fit="cover" alt="Android Working With Tabs"></a></amp-youtube></p>
<h3><strong><span style="color: #000080;">Creating New Project</span></strong></h3>
<p>1 .In Android Studio, go to <span style="color: #008000;"><strong>File </strong><strong>⇒</strong><strong> New Project</strong> </span>and fill all the details required to create a new project. When it prompts to select a default activity, select <span style="color: #008000;"><strong>Blank Activity</strong></span> and proceed.</p>
<p>2 . Open <span style="color: #008000;"><strong>build.gradle. </strong><span style="color: #000000;">Now </span></span>add <span style="color: #000000;">design support library </span><strong><span style="color: #008000;">com.android.support:design:26.1.0 </span></strong>and then sync the project.</p>
<p><span style="color: #0000ff;"><strong>Build.gradle</strong></span></p>
<pre><code>dependencies {</code> <strong> 
<span style="color: #008000;">compile 'com.android.support:design:26.1.0'</span></strong> 
}</pre>
<p>3.Open <span style="color: #008000;"><strong>styles.xml</strong></span> located under <span style="color: #008000;"><strong>res </strong><strong>⇒</strong><strong> values</strong></span> and add below styles. The styles defined in this <strong><span style="color: #008000;">styles.xml</span></strong> are common to all the android versions.</p>
<p><span style="color: #0000ff;"><strong>styles.xml</strong></span></p>
<pre><strong><;resources>;</strong>

<strong> <;!-- Base application theme. -->;</strong>
<strong> <;style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">;</strong>
<strong> <;!-- Customize your theme here. -->;</strong>
<strong> <;item name="colorPrimary">;@color/colorPrimary<;/item>;</strong>
<span style="color: #008000;"><strong> <;item name="windowActionBar">;false<;/item>;</strong></span>
<span style="color: #008000;"><strong> <;item name="windowNoTitle">;true<;/item>;</strong></span>
<strong> <;item name="colorPrimaryDark">;@color/colorPrimaryDark<;/item>;</strong>
<strong> <;item name="colorAccent">;@color/colorAccent<;/item>;</strong>
<strong> <;/style>;</strong>

<strong><;/resources>;

</strong></pre>
<p>4.Under your <strong><span style="color: #008000;">main</span></strong> package create a fragment named <strong><span style="color: #008000;">M</span><span style="color: #008000;">oviesFragment.java</span> </strong>and add the below code.</p>
<p><span style="color: #0000ff;"><strong>MoviesFragment.java</strong></span></p>
<pre><strong>package com.example.lenovo.tablayout.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.tablayout.R;


public class MoviesFragment extends Fragment{

 
 @Override
 public void onCreate(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.fragment_movies, container, false);
 }

}</strong>
</pre>
<p>5.Open <span style="color: #008000;"><strong>fragment_movies.xml</strong></span> located under <span style="color: #008000;"><strong>res </strong><strong>⇒</strong><strong> layout</strong></span> and do the below changes.</p>
<p><span style="color: #0000ff;"><strong>fragment_movies.xml</strong></span></p>
<pre><strong><;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"
 android:background="@android:color/holo_orange_light"
 tools:context="com.example.lenovo.tablayout.fragment.MoviesFragment">;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Movies"
 android:textSize="40dp"
 android:textStyle="bold"
 android:layout_centerInParent="true"/>;

<;/RelativeLayout>;</strong>
</pre>
<p>6.Similarly, again under your main package create a fragment named <strong><span style="color: #008000;">PlaysFragment.java,EventsFragment.java</span></strong> and add the below code.<br />
Also,open <span style="color: #008000;"><strong>fragment_plays.xml</strong></span> and <span style="color: #008000;"><strong>fragment_events.xml </strong></span>located under <span style="color: #008000;"><strong>res </strong><strong>⇒</strong><strong> layout</strong> </span>and do the below changes.</p>
<p><span style="color: #0000ff;"><strong>PlaysFragment.java</strong></span></p>
<p><code></code></p>
<pre><strong>package com.example.lenovo.tablayout.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.tablayout.R;


public class PlaysFragment extends Fragment {


 @Override
 public void onCreate(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.fragment_plays, container, false);
 }

}</strong>
</pre>
<p> ;</p>
<p><span style="color: #0000ff;"><strong>EventsFragment.java</strong></span></p>
<pre><strong>package com.example.lenovo.tablayout.fragment;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.lenovo.tablayout.R;


public class EventsFragment extends Fragment{


 @Override
 public void onCreate(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.fragment_events, container, false);
 }

}</strong>
</pre>
<p> ;</p>
<p><span style="color: #0000ff;"><strong>fragment_plays.xml</strong></span></p>
<pre><strong><;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"
 android:background="@android:color/holo_blue_light"
 tools:context="com.example.lenovo.tablayout.fragment.PlaysFragment">;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:text="Plays"
 android:textSize="40dp"
 android:textStyle="bold" />;

<;/RelativeLayout>;</strong>
</pre>
<p> ;</p>
<p><span style="color: #0000ff;"><strong>fragment_events.xml</strong></span></p>
<!-- WP QUADS Content Ad Plugin v. 2.0.98.1 -->
<div class="quads-location quads-ad2" id="quads-ad2" style="float:none;margin:0px;">

</div>

<pre><strong><;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"
 android:background="@android:color/holo_green_light"
 tools:context="com.example.lenovo.tablayout.fragment.EventsFragment">;

 <;TextView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text="Events"
 android:textSize="40dp"

 android:textStyle="bold"
 android:layout_centerInParent="true"/>;

<;/RelativeLayout>;
</strong>
</pre>
<p>7.Open the layout file <strong><span style="color: #008000;">activity_tab.xml</span></strong> and add below layout code.</p>
<p><span style="color: #0000ff;"><strong>activity_tab.xml</strong></span></p>
<pre><strong><;android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:layout_width="match_parent"
 android:layout_height="match_parent">;

 <;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/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 android:background="?attr/colorPrimary"
 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/viewpager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_behavior="@string/appbar_scrolling_view_behavior" />;
<;/android.support.design.widget.CoordinatorLayout>;


</strong></pre>
<h4><span style="color: #000080;"><strong>xml attribute :</strong></span></h4>
<p><span style="color: #008000;"><em><strong>app:tabMode</strong></em> </span>– Defines the mode of the tab layout. In our case the value should be <span style="color: #008000;">“<strong>fixed</strong>”</span></p>
<h4><span style="color: #0000ff;"><strong>Fixed Tabs</strong></span></h4>
<p><strong><span style="color: #008000;">Fixed tabs</span></strong> should be used when you have a limited number of tabs. These tabs are <strong><span style="color: #008000;">fixed</span></strong> in position.</p>
<p><img class="size-medium wp-image-234 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-22-31-161-300x180.png" alt="" width="300" height="180" /></p>
<h4><span style="color: #0000ff;"><strong>Scrollable Tabs</strong></span></h4>
<p>The <strong><span style="color: #008000;">scrollable tabs</span></strong> should be used when you have many number of tabs where there is insufficient space on the screen to fit all of them. To make the tabs <strong><span style="color: #008000;">scrollable</span></strong>, set <span style="color: #008000;"><strong>app:tabMode=”scrollable”</strong></span> to TabLayout.</p>
<p><img class="size-medium wp-image-236 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-22-42-071-300x180.png" alt="" width="300" height="180" /></p>
<h4><span style="color: #0000ff;"><strong>Center Aligned Tabs</strong></span></h4>
<p>If you want to keep your tabs<span style="color: #008000;"><strong> horizontally centered</strong></span>, assign <span style="color: #008000;"><strong>app:tabGravity=”center”</strong></span> to TabLayout.</p>
<p><img class="size-medium wp-image-235 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-22-43-061-300x180.png" alt="" width="300" height="180" /></p>
<p> ;</p>
<h4><strong><span style="color: #0000ff;">Full Width Tabs</span></strong></h4>
<p>If you want the tabs to be occupied the <span style="color: #008000;"><strong>fullwidth</strong></span> of the screen, you need to assign <span style="color: #008000;"><strong>app:tabGravity=”fill”</strong></span> to our TabLayout.</p>
<p><img class="size-medium wp-image-234 aligncenter" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-22-31-161-300x180.png" alt="" width="300" height="180" /></p>
<p> ;</p>
<p>8.Open <span style="color: #008000;"><strong>TabsActivity.java</strong></span> and do the below changes.</p>
<p><span style="color: #008000;"><strong>setupWithViewPager()</strong></span> – Assigns the ViewPager to TabLayout.</p>
<p><span style="color: #008000;"><strong>setupViewPager()</strong></span> – Defines the number of tabs by setting appropriate fragment and tab name.</p>
<p><span style="color: #008000;"><strong>ViewPagerAdapter</strong></span> – Custom adapter class provides fragments required for the view pager.</p>
<p><span style="color: #0000ff;"><strong>TabsActivity.java</strong></span></p>
<pre><strong>package com.example.lenovo.tablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;

import com.example.lenovo.tablayout.fragment.MoviesFragment;
import com.example.lenovo.tablayout.fragment.EventsFragment;
import com.example.lenovo.tablayout.fragment.PlaysFragment;

import java.util.ArrayList;
import java.util.List;


public class TabsActivity extends AppCompatActivity {

 private Toolbar toolbar;
 private TabLayout tabLayout;
 private ViewPager viewPager;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_tabs);

 toolbar = (Toolbar) findViewById(R.id.toolbar);
 setSupportActionBar(toolbar);

 getSupportActionBar();

 viewPager = (ViewPager) findViewById(R.id.viewpager);
 setupViewPager(viewPager);

 tabLayout = (TabLayout) findViewById(R.id.tabs);
 tabLayout.setupWithViewPager(viewPager);
 }

 private void setupViewPager(ViewPager viewPager) {
 ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
 adapter.addFragment(new MoviesFragment(), "MOVIES");
 adapter.addFragment(new PlaysFragment(), "PLAYS");
 adapter.addFragment(new EventsFragment(), "EVENTS");
 viewPager.setAdapter(adapter);
 }

 class ViewPagerAdapter extends FragmentPagerAdapter {
 private final List<;Fragment>; mFragmentList = new ArrayList<;>;();
 private final List<;String>; mFragmentTitleList = new ArrayList<;>;();

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

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

 @Override
 public int getCount() {
 return mFragmentList.size();
 }

 public void addFragment(Fragment fragment, String title) {
 mFragmentList.add(fragment);
 mFragmentTitleList.add(title);
 }

 @Override
 public CharSequence getPageTitle(int position) {
 return mFragmentTitleList.get(position);
 }
 }
}

</strong></pre>
<p><strong><span style="color: #008000;">Now run the app. You should able to see the tabs displayed with swipe functionality between the tabs.</span></strong></p>
<p><img class="alignnone wp-image-229" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-18-02-02-180x300.png" alt="" width="215" height="358" /> <img class="alignnone wp-image-230" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-18-02-12-180x300.png" alt="" width="214" height="357" /> <img class="alignnone wp-image-231" src="https://c1ctech.com/wp-content/uploads/2018/03/Screenshot_2018-03-15-18-02-23-180x300.png" alt="" width="214" height="356" />