title: Android Studio - Sliding Tabs appear below action bar instead of on action bar
body: <p>I've created a set of sliding tabs with view pager to put into my activity_main.xml. In the project the tabs show below the action bar as if they are divided.</p>
  
  <p>I'd like to have them look like they are a part of the action bar.</p>
  
  <p>What should I edit in my code to accomplish this?</p>
  
  <p><a href="http://i.stack.imgur.com/RPpUj.png" rel="nofollow">Project Screenshot</a></p>
  
  <p>MainActivity.java</p>
  
  <pre><code>package com.davidreadiii.android.slidingtabexample;
  
  import android.os.Bundle;
  import android.support.v4.view.ViewPager;
  import android.support.v7.app.ActionBarActivity;
  import android.view.Menu;
  import android.view.MenuItem;
  
  import com.davidreadiii.android.slidingtabexample.tabs.mFragmentPagerAdapter;
  import com.davidreadiii.android.slidingtabexample.tabs.SlidingTabLayout;
  
  
  public class MainActivity extends ActionBarActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
  
      // Get the ViewPager and set it's PagerAdapter so that it can display items
      ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
      viewPager.setAdapter(new mFragmentPagerAdapter(getSupportFragmentManager(),
              MainActivity.this));
  
      // Give the SlidingTabLayout the ViewPager
      SlidingTabLayout slidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
      // Center the tabs in the layout
      slidingTabLayout.setDistributeEvenly(true);
      slidingTabLayout.setViewPager(viewPager);
  
      // Customizes the tab indicator color.
      slidingTabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
          @Override
          public int getIndicatorColor(int position) {
              return getResources().getColor(R.color.accentColor);
          }
      });
  }
  
  
  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.menu_main, menu);
      return true;
  }
  
  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      int id = item.getItemId();
  
      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
          return true;
      }
  
      return super.onOptionsItemSelected(item);
  }
  }
  </code></pre>
  
  <p>SlidingTabLayout.java</p>
  
  <pre><code>    package com.davidreadiii.android.slidingtabexample.tabs;
  
  import android.content.Context;
  import android.graphics.Typeface;
  import android.support.v4.view.PagerAdapter;
  import android.support.v4.view.ViewPager;
  import android.util.AttributeSet;
  import android.util.SparseArray;
  import android.util.TypedValue;
  import android.view.Gravity;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.HorizontalScrollView;
  import android.widget.LinearLayout;
  import android.widget.TextView;
  
  public class SlidingTabLayout extends HorizontalScrollView {
  
  public interface TabColorizer {
  
      int getIndicatorColor(int position);
  
  }
  
  private static final int TITLE_OFFSET_DIPS = 24;
  private static final int TAB_VIEW_PADDING_DIPS = 16;
  private static final int TAB_VIEW_TEXT_SIZE_SP = 12;
  
  private int mTitleOffset;
  
  private int mTabViewLayoutId;
  private int mTabViewTextViewId;
  private boolean mDistributeEvenly;
  
  private ViewPager mViewPager;
  private SparseArray&lt;String&gt; mContentDescriptions = new SparseArray&lt;String&gt;();
  private ViewPager.OnPageChangeListener mViewPagerPageChangeListener;
  
  private final SlidingTabStrip mTabStrip;
  
  public SlidingTabLayout(Context context) {
      this(context, null);
  }
  
  public SlidingTabLayout(Context context, AttributeSet attrs) {
      this(context, attrs, 0);
  }
  
  public SlidingTabLayout(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
  
      // Disable the Scroll Bar
      setHorizontalScrollBarEnabled(false);
      // Make sure that the Tab Strips fills this View
      setFillViewport(true);
  
      mTitleOffset = (int) (TITLE_OFFSET_DIPS * getResources().getDisplayMetrics().density);
  
      mTabStrip = new SlidingTabStrip(context);
      addView(mTabStrip, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
  }
  
  
  public void setSelectedIndicatorColors(int... colors) {
      mTabStrip.setSelectedIndicatorColors(colors);
  }
  
  /**
   * Set the {@link ViewPager.OnPageChangeListener}. When using {@link SlidingTabLayout} you are
   * required to set any {@link ViewPager.OnPageChangeListener} through this method. This is so
   * that the layout can update it's scroll position correctly.
   *
   * @see ViewPager#setOnPageChangeListener(ViewPager.OnPageChangeListener)
   */
  public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {
      mViewPagerPageChangeListener = listener;
  }
  
  /**
   * Set the custom layout to be inflated for the tab views.
   *
   * @param layoutResId Layout id to be inflated
   * @param textViewId id of the {@link TextView} in the inflated view
   */
  public void setCustomTabView(int layoutResId, int textViewId) {
      mTabViewLayoutId = layoutResId;
      mTabViewTextViewId = textViewId;
  }
  
  /**
   * Sets the associated view pager. Note that the assumption here is that the pager content
   * (number of tabs and tab titles) does not change after this call has been made.
   */
  public void setViewPager(ViewPager viewPager) {
      mTabStrip.removeAllViews();
  
      mViewPager = viewPager;
      if (viewPager != null) {
          viewPager.setOnPageChangeListener(new InternalViewPagerListener());
          populateTabStrip();
      }
  }
  
  /**
   * Create a default view to be used for tabs. This is called if a custom tab view is not set via
   * {@link #setCustomTabView(int, int)}.
   */
  protected TextView createDefaultTabView(Context context) {
      TextView textView = new TextView(context);
      textView.setGravity(Gravity.CENTER);
      textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, TAB_VIEW_TEXT_SIZE_SP);
      textView.setTypeface(Typeface.DEFAULT_BOLD);
      textView.setLayoutParams(new LinearLayout.LayoutParams(
              ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
  
      TypedValue outValue = new TypedValue();
      getContext().getTheme().resolveAttribute(android.R.attr.selectableItemBackground,
              outValue, true);
      textView.setBackgroundResource(outValue.resourceId);
      textView.setAllCaps(true);
  
      int padding = (int) (TAB_VIEW_PADDING_DIPS * getResources().getDisplayMetrics().density);
      textView.setPadding(padding, padding, padding, padding);
  
      return textView;
  }
  
  private void populateTabStrip() {
      final PagerAdapter adapter = mViewPager.getAdapter();
      final View.OnClickListener tabClickListener = new TabClickListener();
  
      for (int i = 0; i &lt; adapter.getCount(); i++) {
          View tabView = null;
          TextView tabTitleView = null;
  
          if (mTabViewLayoutId != 0) {
              // If there is a custom tab view layout id set, try and inflate it
              tabView = LayoutInflater.from(getContext()).inflate(mTabViewLayoutId, mTabStrip,
                      false);
              tabTitleView = (TextView) tabView.findViewById(mTabViewTextViewId);
          }
  
          if (tabView == null) {
              tabView = createDefaultTabView(getContext());
          }
  
          if (tabTitleView == null &amp;&amp; TextView.class.isInstance(tabView)) {
              tabTitleView = (TextView) tabView;
          }
  
          if (mDistributeEvenly) {
              LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) tabView.getLayoutParams();
              lp.width = 0;
              lp.weight = 1;
          }
  
          tabTitleView.setText(adapter.getPageTitle(i));
          tabView.setOnClickListener(tabClickListener);
          String desc = mContentDescriptions.get(i, null);
          if (desc != null) {
              tabView.setContentDescription(desc);
          }
  
          mTabStrip.addView(tabView);
          if (i == mViewPager.getCurrentItem()) {
              tabView.setSelected(true);
          }
      }
  }
  
  public void setContentDescription(int i, String desc) {
      mContentDescriptions.put(i, desc);
  }
  
  @Override
  protected void onAttachedToWindow() {
      super.onAttachedToWindow();
  
      if (mViewPager != null) {
          scrollToTab(mViewPager.getCurrentItem(), 0);
      }
  }
  
  private void scrollToTab(int tabIndex, int positionOffset) {
      final int tabStripChildCount = mTabStrip.getChildCount();
      if (tabStripChildCount == 0 || tabIndex &lt; 0 || tabIndex &gt;= tabStripChildCount) {
          return;
      }
  
      View selectedChild = mTabStrip.getChildAt(tabIndex);
      if (selectedChild != null) {
          int targetScrollX = selectedChild.getLeft() + positionOffset;
  
          if (tabIndex &gt; 0 || positionOffset &gt; 0) {
              // If we're not at the first child and are mid-scroll, make sure we obey the offset
              targetScrollX -= mTitleOffset;
          }
  
          scrollTo(targetScrollX, 0);
      }
  }
  
  private class InternalViewPagerListener implements ViewPager.OnPageChangeListener {
      private int mScrollState;
  
      @Override
      public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
          int tabStripChildCount = mTabStrip.getChildCount();
          if ((tabStripChildCount == 0) || (position &lt; 0) || (position &gt;= tabStripChildCount)) {
              return;
          }
  
          mTabStrip.onViewPagerPageChanged(position, positionOffset);
  
          View selectedTitle = mTabStrip.getChildAt(position);
          int extraOffset = (selectedTitle != null)
                  ? (int) (positionOffset * selectedTitle.getWidth())
                  : 0;
          scrollToTab(position, extraOffset);
  
          if (mViewPagerPageChangeListener != null) {
              mViewPagerPageChangeListener.onPageScrolled(position, positionOffset,
                      positionOffsetPixels);
          }
      }
  
      @Override
      public void onPageScrollStateChanged(int state) {
          mScrollState = state;
  
          if (mViewPagerPageChangeListener != null) {
              mViewPagerPageChangeListener.onPageScrollStateChanged(state);
          }
      }
  
      @Override
      public void onPageSelected(int position) {
          if (mScrollState == ViewPager.SCROLL_STATE_IDLE) {
              mTabStrip.onViewPagerPageChanged(position, 0f);
              scrollToTab(position, 0);
          }
          for (int i = 0; i &lt; mTabStrip.getChildCount(); i++) {
              mTabStrip.getChildAt(i).setSelected(position == i);
          }
          if (mViewPagerPageChangeListener != null) {
              mViewPagerPageChangeListener.onPageSelected(position);
          }
      }
  
  }
  
  private class TabClickListener implements View.OnClickListener {
      @Override
      public void onClick(View v) {
          for (int i = 0; i &lt; mTabStrip.getChildCount(); i++) {
              if (v == mTabStrip.getChildAt(i)) {
                  mViewPager.setCurrentItem(i);
                  return;
              }
          }
      }
  }
  
  }
  </code></pre>
  
  <p>SlidingTabStrip.java</p>
  
  <pre><code>package com.davidreadiii.android.slidingtabexample.tabs;
  
  import android.R;
  import android.content.Context;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Paint;
  import android.util.AttributeSet;
  import android.util.TypedValue;
  import android.view.View;
  import android.widget.LinearLayout;
  
  class SlidingTabStrip extends LinearLayout {
  
  private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0;
  private static final byte DEFAULT_BOTTOM_BORDER_COLOR_ALPHA = 0x26;
  private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 3;
  private static final int DEFAULT_SELECTED_INDICATOR_COLOR = 0xFF33B5E5;
  
  private final int mBottomBorderThickness;
  private final Paint mBottomBorderPaint;
  
  private final int mSelectedIndicatorThickness;
  private final Paint mSelectedIndicatorPaint;
  
  private final int mDefaultBottomBorderColor;
  
  private int mSelectedPosition;
  private float mSelectionOffset;
  
  private SlidingTabLayout.TabColorizer mCustomTabColorizer;
  private final SimpleTabColorizer mDefaultTabColorizer;
  
  SlidingTabStrip(Context context) {
      this(context, null);
  }
  
  SlidingTabStrip(Context context, AttributeSet attrs) {
      super(context, attrs);
      setWillNotDraw(false);
  
      final float density = getResources().getDisplayMetrics().density;
  
      TypedValue outValue = new TypedValue();
      context.getTheme().resolveAttribute(R.attr.colorForeground, outValue, true);
      final int themeForegroundColor =  outValue.data;
  
      mDefaultBottomBorderColor = setColorAlpha(themeForegroundColor,
              DEFAULT_BOTTOM_BORDER_COLOR_ALPHA);
  
      mDefaultTabColorizer = new SimpleTabColorizer();
      mDefaultTabColorizer.setIndicatorColors(DEFAULT_SELECTED_INDICATOR_COLOR);
  
      mBottomBorderThickness = (int) (DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS * density);
      mBottomBorderPaint = new Paint();
      mBottomBorderPaint.setColor(mDefaultBottomBorderColor);
  
      mSelectedIndicatorThickness = (int) (SELECTED_INDICATOR_THICKNESS_DIPS * density);
      mSelectedIndicatorPaint = new Paint();
  }
  
  void setCustomTabColorizer(SlidingTabLayout.TabColorizer customTabColorizer) {
      mCustomTabColorizer = customTabColorizer;
      invalidate();
  }
  
  void setSelectedIndicatorColors(int... colors) {
      // Make sure that the custom colorizer is removed
      mCustomTabColorizer = null;
      mDefaultTabColorizer.setIndicatorColors(colors);
      invalidate();
  }
  
  void onViewPagerPageChanged(int position, float positionOffset) {
      mSelectedPosition = position;
      mSelectionOffset = positionOffset;
      invalidate();
  }
  
  @Override
  protected void onDraw(Canvas canvas) {
      final int height = getHeight();
      final int childCount = getChildCount();
      final SlidingTabLayout.TabColorizer tabColorizer = mCustomTabColorizer != null
              ? mCustomTabColorizer
              : mDefaultTabColorizer;
  
      // Thick colored underline below the current selection
      if (childCount &gt; 0) {
          View selectedTitle = getChildAt(mSelectedPosition);
          int left = selectedTitle.getLeft();
          int right = selectedTitle.getRight();
          int color = tabColorizer.getIndicatorColor(mSelectedPosition);
  
          if (mSelectionOffset &gt; 0f &amp;&amp; mSelectedPosition &lt; (getChildCount() - 1)) {
              int nextColor = tabColorizer.getIndicatorColor(mSelectedPosition + 1);
              if (color != nextColor) {
                  color = blendColors(nextColor, color, mSelectionOffset);
              }
  
              // Draw the selection partway between the tabs
              View nextTitle = getChildAt(mSelectedPosition + 1);
              left = (int) (mSelectionOffset * nextTitle.getLeft() +
                      (1.0f - mSelectionOffset) * left);
              right = (int) (mSelectionOffset * nextTitle.getRight() +
                      (1.0f - mSelectionOffset) * right);
          }
  
          mSelectedIndicatorPaint.setColor(color);
  
          canvas.drawRect(left, height - mSelectedIndicatorThickness, right,
                  height, mSelectedIndicatorPaint);
      }
  
      // Thin underline along the entire bottom edge
      canvas.drawRect(0, height - mBottomBorderThickness, getWidth(), height, mBottomBorderPaint);
  }
  
  /**
   * Set the alpha value of the {@code color} to be the given {@code alpha} value.
   */
  private static int setColorAlpha(int color, byte alpha) {
      return Color.argb(alpha, Color.red(color), Color.green(color), Color.blue(color));
  }
  
  /**
   * Blend {@code color1} and {@code color2} using the given ratio.
   *
   * @param ratio of which to blend. 1.0 will return {@code color1}, 0.5 will give an even blend,
   *              0.0 will return {@code color2}.
   */
  private static int blendColors(int color1, int color2, float ratio) {
      final float inverseRation = 1f - ratio;
      float r = (Color.red(color1) * ratio) + (Color.red(color2) * inverseRation);
      float g = (Color.green(color1) * ratio) + (Color.green(color2) * inverseRation);
      float b = (Color.blue(color1) * ratio) + (Color.blue(color2) * inverseRation);
      return Color.rgb((int) r, (int) g, (int) b);
  }
  
  private static class SimpleTabColorizer implements SlidingTabLayout.TabColorizer {
      private int[] mIndicatorColors;
  
      @Override
      public final int getIndicatorColor(int position) {
          return mIndicatorColors[position % mIndicatorColors.length];
      }
  
      void setIndicatorColors(int... colors) {
          mIndicatorColors = colors;
      }
  }
  }
  </code></pre>
  
  <p>mFragmentPagerAdapter.java</p>
  
  <pre><code>package com.davidreadiii.android.slidingtabexample.tabs;
  
  import android.content.Context;
  import android.support.v4.app.Fragment;
  import android.support.v4.app.FragmentManager;
  import android.support.v4.app.FragmentPagerAdapter;
  
  import com.davidreadiii.android.slidingtabexample.fragments.FragmentPage1;
  
  public class mFragmentPagerAdapter extends FragmentPagerAdapter {
  final int PAGE_COUNT = 3;
  private String tabTitles[] = new String[] { "Tab Uno", "Tab Dos", "Tab Tres" };
  private Context context;
  
  public mFragmentPagerAdapter(FragmentManager fm, Context context) {
      super(fm);
      this.context = context;
  }
  
  @Override
  public int getCount() {
      return PAGE_COUNT;
  }
  
  @Override
  public Fragment getItem(int position) {
      return FragmentPage1.newInstance(position + 1);
  }
  
  @Override
  public CharSequence getPageTitle(int position) {
      // Generate title based on item position
      return tabTitles[position];
  }
  }
  </code></pre>
  
  <p>activity_main.xml (In case it's important)</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"&gt;
  
  &lt;!-- Sliding Tab Layout Implementation --&gt;
  &lt;com.davidreadiii.android.slidingtabexample.tabs.SlidingTabLayout
      android:id="@+id/sliding_tabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/primaryColor"&gt;
  &lt;/com.davidreadiii.android.slidingtabexample.tabs.SlidingTabLayout&gt;
  
  &lt;!-- View Pager Implementation --&gt;
  &lt;android.support.v4.view.ViewPager
      android:id="@+id/viewpager"
      android:layout_width="match_parent"
      android:layout_height="0px"
      android:layout_weight="1"
      android:background="@android:color/white"/&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>I've scoured the web for an answer but can turn up nothing that works for my particular project. </p>