Divider not working for TitlePageIndicator with viewpagerindicator & actionbarsherlock

Question

I noticed with the latest version of ViewPagerIndicator, ICS style dividers are supported, I tried to follow the issue and solution, but no matter what I do I can't get the divider to show up on my options on the actionbar for the TitlePageIndicator. I added the IcsLayout as the container, put divider, showDividers, and other properties, but am still getting nothing. Here's my layout (oddly enough, if I switch the IcsLayout to the viewpager indicator one, the app crashes):

<com.actionbarsherlock.internal.widget.IcsLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.sosick.android.brink"
    android:layout_width="match_parent"
    android:divider="#ffffff"
    android:showDividers="middle"
    android:dividerPadding="8dp"
    android:dividerHeight="10dp"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.viewpagerindicator.TitlePageIndicator
        android:id="@+id/tpi_header"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        textColor="@color/text_light"
        android:background="@drawable/ab_stacked_solid_brink"
        app:topPadding="10dp"
        app:footerPadding="15dp"
        app:footerColor="#a4ded7"
        app:footerIndicatorHeight="2dp"
        app:footerIndicatorStyle="underline"
        app:footerLineHeight="2dp"
        app:selectedBold="false" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pages"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</com.actionbarsherlock.internal.widget.IcsLinearLayout>

Brickle

Reading the page it seems that they state it works with TabPageIndicator, so I'm not sure if it's possible with the TitleIndicator...? – Brickle

Please post a sketch or a reference in order to better figure out what you want to achieve. Thanks. – Servile

If you have a look at this app, notice the vertical dividers on the Title Pager, that's what I'm trying to achieve. 24.media.tumblr.com/8044b5ed0a7f8ad04468def5973275d7/… – Brickle

You need vertical bars between tabs? Right? – Thundery

Yes, that's exactly what I'm looking for, but in the context of ActionBarSherlock & ViewPager. – Brickle

Answer 1

You need to declare divider params in styles, rather than in layout xml.

../res/values/styles.xml:

<style name="StyledIndicators" parent="@android:style/Theme.Light">
    <item name="vpiIconPageIndicatorStyle">@style/CustomIconIndicator</item>
</style>

<style name="CustomIconIndicator" parent="Widget.TabPageIndicator">
    <item name="android:divider">@drawable/custom_tab_indicator_divider</item>
    <item name="android:showDividers">middle</item>
    <item name="android:dividerPadding">10dp</item>
</style>

In manifest for your activity:

<activity
        android:name=".SampleIconsDefault"
        android:label="Icons/Default"
        android:theme="@style/StyledIndicators"> 
</activity>

Halfbeak

this solution requires API level 11, is there any other way that works for API level 8 too? – Expiate

Answer 2

Following code snippets are mainlyfrom Android Developer site. There is also a very good example app/project.

Use ViewPage as a container for your layout, e.g. res/layout/activity_main.xml:

<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Implement ABS' ActionBar.TabListener in your class, add and extend FragmentPagerAdapter or FragmentStatePagerAdapter from support library e.g.:

public class TheDesertFoxActivity extends SherlockFragmentActivity
        implements ActionBar.TabListener {

    private AppSectionsPagerAdapter mAppSectionsPagerAdapter;
    private ViewPager mViewPager;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mAppSectionsPagerAdapter = new AppSectionsPagerAdapter(getSupportFragmentManager());

        // Set up action bar
        final ActionBar actionBar = getSupportActionBar();
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Set up the ViewPager, attaching the adapter
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mAppSectionsPagerAdapter);
        mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
            @Override
            public void onPageSelected(int position) {
                // When swiping between different app sections, select the corresponding tab
                actionBar.setSelectedNavigationItem(position);
            }
        });

        // For each of the sections in the app, add a tab to the action bar
        for (int i = 0; i < mAppSectionsPagerAdapter.getCount(); i++) {
            // Create a tab with text corresponding to the page title defined by the adapter.
            // Also specify this Activity object, which implements the TabListener interface, as the
            // listener for when this tab is selected.
            actionBar.addTab(actionBar.newTab()
                    .setText(mAppSectionsPagerAdapter.getPageTitle(i))
                    .setTabListener(this));
        }
    }

    public static class AppSectionsPagerAdapter extends FragmentPagerAdapter {

        public AppSectionsPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int i) {
            switch (i) {

                Fragment fragment = new MyTabsFragment();
                Bundle args = new Bundle();
                args.putInt(MyTabsFragment.TAB_ID, i);
                fragment.setArguments(args);
                return fragment;
            }
        }

        @Override
        public int getCount() {
            return <YOUR_TAB_COUNT>;
        }
    }

    public static class MyTabsFragment extends Fragment {

        public static final String TAB_ID = "tab_id";

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            int layoutId = -1;
            switch (getArguments(getInt(TAB_ID))) {
                case 0: 
                    layoutId = R.layout.fragment_first_tab;
                    break;
                case 1:
                    layoutId = R.layout.fragment_second_tab;
                    break;
                ...
                ...
                ...
                default:
                    layoutId = R.layout.fragment_default_tab;

            }
            View rootView = inflater.inflate(layoutId, container, false);
            return rootView;
        }
    }
}

That's it. Dividers will be put by ViewPager for you. You do not have to add them yourself.

Danielledaniels