title: Customize the tab layout with Multiple Level tabs
body: <p>Hi i am trying to add a sub tablayout  for my custom layout as this one:
  <a href="https://i.stack.imgur.com/CbEB9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CbEB9.png" alt="enter image description here"></a></p>
  
  <p>I have successfully added the tablayout but:</p>
  
  <p>How to add the sublayout as shown below??
  As we see in the picture the first sub layout is related to the first tab layout</p>
  
  <p>My layout.xml:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.design.widget.CoordinatorLayout 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"
      xmlns:ads="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      tools:context="com.example.tiger.alahedclub.activity.navigation"&gt;
  
      &lt;android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:popupTheme="@style/generalnotitle"
       &gt;
          &lt;android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              app:titleTextColor="@android:color/black"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@color/yellow"
              app:popupTheme="@style/generalnotitle"&gt;
  
  
  
              &lt;RelativeLayout
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"&gt;
  
  
              &lt;TextView
                  android:id="@+id/action_bar_title"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_gravity="center"
                  android:layout_centerHorizontal="true"
                  android:text="@string/app_name"
                  android:textColor="@android:color/black"
                  android:textSize="24sp" /&gt;
  
  
              &lt;/RelativeLayout&gt;
          &lt;/android.support.v7.widget.Toolbar&gt;
  
          &lt;android.support.design.widget.TabLayout
              android:id="@+id/tabs"
              android:background="@color/yellow"
              app:tabTextColor="@android:color/black"
              app:tabTextAppearance="@style/MineCustomTabText"
              app:tabSelectedTextColor="#1B5E20"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              app:tabIndicatorHeight="2dp"
              app:tabMaxWidth="0dp"
              app:tabMode="fixed"
              app:tabGravity="fill"  /&gt;
  
  
      &lt;/android.support.design.widget.AppBarLayout&gt;
  
  
      &lt;android.support.v4.view.ViewPager
          android:id="@+id/viewpager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="#B71C1C"
          app:layout_behavior="@string/appbar_scrolling_view_behavior" /&gt;
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>
  
  <p>UPDATED :</p>
  
  <p>activity holding the viewpager:</p>
  
  <pre><code>public class Detail_match extends AppCompatActivity {
      private TabLayout tabLayout,tabLayout2;
      private ViewPager viewPager;
  
      int onStartCount = 0;
  
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          onStartCount = 1;
          if (savedInstanceState == null) // 1st time
          {
              this.overridePendingTransition(R.anim.anim_slide_in_left,
                      R.anim.anim_slide_out_left);
          } else // already created so reverse animation
          {
              onStartCount = 2;
          }
          setContentView(R.layout.activity_detail_match);
          Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
          setSupportActionBar(toolbar);
          getSupportActionBar().setDisplayShowTitleEnabled(false);
          getSupportActionBar().setDisplayHomeAsUpEnabled(true);
          getSupportActionBar().setDisplayShowHomeEnabled(true);
  
  
          viewPager = (ViewPager) findViewById(R.id.viewpager);
          setupViewPager(viewPager);
  
  
          tabLayout = (TabLayout) findViewById(R.id.tabs);
          tabLayout.setupWithViewPager(viewPager);
  
          tabLayout2 = (TabLayout) findViewById(R.id.tabs2);
  
  
      }
  
  
      @Override
      protected void onPause() {
          super.onPause();
      }
      @Override
      protected void onStart() {
          // TODO Auto-generated method stub
          super.onStart();
          if (onStartCount &gt; 1) {
              this.overridePendingTransition(R.anim.anim_slide_in_right,
                      R.anim.anim_slide_out_right);
  
          } else if (onStartCount == 1) {
              onStartCount++;
          }
  
      }
  
      private void setupViewPager(ViewPager viewPager) {
          ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
          adapter.addFrag(new FiveFragment(), getString(R.string.lineup));
          adapter.addFrag(new SixFragment(), getString(R.string.stats));
          viewPager.setAdapter(adapter);
      }
  
      class ViewPagerAdapter extends FragmentPagerAdapter {
          private final List&lt;Fragment&gt; mFragmentList = new ArrayList&lt;&gt;();
          private final List&lt;String&gt; mFragmentTitleList = new ArrayList&lt;&gt;();
  
          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 addFrag(Fragment fragment, String title) {
              mFragmentList.add(fragment);
              mFragmentTitleList.add(title);
          }
  
          @Override
          public CharSequence getPageTitle(int position) {
              return mFragmentTitleList.get(position);
          }
      }
  }
  </code></pre>
  
  <p>My fragment five.xml</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.design.widget.CoordinatorLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:id="@+id/coordinatorLayout"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      &gt;
  
      &lt;RelativeLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"&gt;
  
          &lt;android.support.v4.widget.SwipeRefreshLayout
              android:id="@+id/swipe_refresh"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              app:layout_behavior="@string/appbar_scrolling_view_behavior"&gt;
              &lt;ScrollView
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"&gt;
  
                  &lt;android.support.v7.widget.RecyclerView
                  android:id="@+id/recycler_post"
                  android:layout_width="match_parent"
                      android:layout_height="wrap_content" /&gt;
  
  
              &lt;/ScrollView&gt;
  
          &lt;/android.support.v4.widget.SwipeRefreshLayout&gt;
  
      &lt;/RelativeLayout&gt;
  
  
  
  &lt;/android.support.design.widget.CoordinatorLayout&gt;
  </code></pre>