how to change default navigation tab view to customized tab view?

Question

my default navigation tabs as per my codes is shown below,

my question is:How would i change the above navigation tab to the below attached tab?

How will i achieve this?

My minimum SDK version is 8.

I have tried a lot, but there was no success. Could anyone help me out?

Thanks.

Answer 1

Download following two classes from github

SlidingTabLayout.java

SlidingTabStrip.java

then create your xml file

<com.emaple.ui.SlidingTabLayout
            android:id="@+id/sliding_tabs_home"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager_home"
            android:layout_width="match_parent"
            android:layout_height="0px"
            android:layout_weight="1"
            android:background="@android:color/white" />

And intiliaze like this in Activity or fragment

 private void init() {
        viewpagerHome.setAdapter(new SamplePagerAdapter());
        slidingTabsHome.setViewPager(viewpagerHome);
    }

SamplePagerAdapter.java

class SamplePagerAdapter extends PagerAdapter {

/**
 * @return the number of pages to display
 */
@Override
public int getCount() {
    return 10;
}

/**
 * @return true if the value returned from {@link #instantiateItem(ViewGroup, int)} is the
 * same object as the {@link View} added to the {@link ViewPager}.
 */
@Override
public boolean isViewFromObject(View view, Object o) {
    return o == view;
}

/**
 * Return the title of the item at {@code position}. This is important as what this method
 * returns is what is displayed in the {@link SlidingTabLayout}.
 * <p/>
 * Here we construct one using the position value, but for real application the title should
 * refer to the item's contents.
 */
@Override
public CharSequence getPageTitle(int position) {
    return "Item " + (position + 1);
}

/**
 * Instantiate the {@link View} which should be displayed at {@code position}. Here we
 * inflate a layout from the apps resources and then change the text view to signify the position.
 */
@Override
public Object instantiateItem(ViewGroup container, int position) {
    // Inflate a new layout from our resources
    View view = HomeActivity.this.getLayoutInflater().inflate(R.layout.pager_item,
            container, false);
    // Add the newly created View to the ViewPager
    container.addView(view);

    // Retrieve a TextView from the inflated View, and update it's text
    TextView title = (TextView) view.findViewById(R.id.item_title);
    title.setText(String.valueOf(position + 1));

    Log.i(LOG_TAG, "instantiateItem() [position: " + position + "]");

    // Return the View
    return view;
}

/**
 * Destroy the item from the {@link ViewPager}. In our case this is simply removing the
 * {@link View}.
 */
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    container.removeView((View) object);
    Log.i(LOG_TAG, "destroyItem() [position: " + position + "]");
}

}