Android: How to Fill SwipeyTabs?

Question

I'm using SwipeyTabs in my application. I'm not sure how to fill tabs content. It does not even have any own xml.

I'm using tabs like this:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_swipey_tabs);
    initViewPager(4, 0xFFFFFFFF, 0xFF000000);
    mSwipeyTabs = (SwipeyTabsView) findViewById(R.id.swipey_tabs);
    mSwipeyTabsAdapter = new SwipeyTabsAdapter(this);
    mSwipeyTabs.setAdapter(mSwipeyTabsAdapter);
    mSwipeyTabs.setViewPager(mPager);
}

private void initViewPager(int pageCount, int backgroundColor, int textColor) {
    mPager = (ViewPager) findViewById(R.id.pager);
    mPagerAdapter = new ExamplePagerAdapter(this, pageCount, backgroundColor, textColor);
    mPager.setAdapter(mPagerAdapter);
    mPager.setCurrentItem(1);
    mPager.setPageMargin(1);
}

And here is activity_swipey_tabs.xml layout:

<android.ex.com.viewpager.extension.SwipeyTabsView
    android:id="@+id/swipey_tabs"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#3B3B3B" />

<View
    android:id="@+id/colorline"
    android:layout_width="fill_parent"
    android:layout_height="2dip"
    android:layout_below="@+id/swipey_tabs"
    android:background="#FF91A438" />

<View
    android:id="@+id/blackline"
    android:layout_width="fill_parent"
    android:layout_height="1dip"
    android:layout_below="@+id/colorline"
    android:background="#FF000000" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_below="@+id/blackline" />

Are there any examples or tutorials?

Any support would great.

Answer 1

Tabs of SwipeyTabs are like virtual layout, I mean they don't have own defined layout. You should define every component in dynamically.

Let me explain with details. In example, you need a ListView (custom). You created layout like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="70dp"
    android:padding="5dp"
    android:background="#ffffff" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="80dp"
        android:layout_height="60dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:src="@drawable/i1" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_alignParentRight="true"
        android:textColor="@android:color/black"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/textView2"
        android:layout_alignTop="@+id/imageView1"
        android:textColor="@android:color/black" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView1"
        android:layout_toRightOf="@+id/imageView1"
        android:textColor="@android:color/black"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

Now you need an ArrayAdapter too for adapting this custom ListView, I'm not including ArrayAdapter.

So in your PagerAdapter class, define a ListView and use this layout. In example:

@Override
public Object instantiateItem(View container, int position) {
    ListView v = new ListView( mContext );
    //test_list_layout which is above
    TestAdapter adapter = new TestAdapter(mContext, R.layout.test_list_layout, objs);

    v.setAdapter( adapter );
    ((ViewPager)container ).addView( v, 0 );
    v.setSelection( scrollPosition[ position ] );
    v.setOnScrollListener( new OnScrollListener() {             
         public void onScrollStateChanged( AbsListView view, int scrollState ){}
         public void onScroll( AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount ) {
        scrollPosition[ pos ] = firstVisibleItem;
         }
    });
    return v;
}

Now it's work well. If you need more tabs, use position parameter as a seperator like if(position == 0). In this you're gonna need this line:

((ViewPager) container).removeView((View) container);

That's all. I hope, it's clear.