new IconTabProvider interface to support iconified tabs

library/src/com/astuetz/viewpager/extensions/PagerSlidingTabStrip.java

@@ -35,11 +35,16 @@
 import android.view.View;
 import android.view.ViewTreeObserver.OnGlobalLayoutListener;
 import android.widget.HorizontalScrollView;
+import android.widget.ImageButton;
 import android.widget.LinearLayout;
 import android.widget.TextView;
 
 public class PagerSlidingTabStrip extends HorizontalScrollView {
 
+	public interface IconTabProvider {
+		public int getPageIconResId(int position);
+	}
+
 	// @formatter:off
 	private static final int[] ATTRS = new int[] {
 		android.R.attr.textSize,
@@ -178,7 +183,13 @@ public void notifyDataSetChanged() {
 		tabCount = pager.getAdapter().getCount();
 
 		for (int i = 0; i < tabCount; i++) {
-			addTab(i, pager.getAdapter().getPageTitle(i).toString());
+
+			if (pager.getAdapter() instanceof IconTabProvider) {
+				addIconTab(i, ((IconTabProvider) pager.getAdapter()).getPageIconResId(i));
+			} else {
+				addTextTab(i, pager.getAdapter().getPageTitle(i).toString());
+			}
+
 		}
 
 		updateTabStyles();
@@ -205,7 +216,7 @@ public void onGlobalLayout() {
 
 	}
 
-	private void addTab(final int position, String title) {
+	private void addTextTab(final int position, String title) {
 
 		TextView tab = new TextView(getContext());
 		tab.setText(title);
@@ -224,22 +235,45 @@ public void onClick(View v) {
 
 	}
 
+	private void addIconTab(final int position, int resId) {
+
+		ImageButton tab = new ImageButton(getContext());
+		tab.setFocusable(true);
+		tab.setImageResource(resId);
+
+		tab.setOnClickListener(new OnClickListener() {
+			@Override
+			public void onClick(View v) {
+				pager.setCurrentItem(position);
+			}
+		});
+
+		tabsContainer.addView(tab);
+
+	}
+
 	private void updateTabStyles() {
 
 		for (int i = 0; i < tabCount; i++) {
 
-			TextView tab = (TextView) tabsContainer.getChildAt(i);
+			View v = tabsContainer.getChildAt(i);
 
-			tab.setLayoutParams(defaultTabLayoutParams);
-			tab.setBackgroundResource(tabBackgroundResId);
+			v.setLayoutParams(defaultTabLayoutParams);
+			v.setBackgroundResource(tabBackgroundResId);
 			if (shouldExpand) {
-				tab.setPadding(0, 0, 0, 0);
+				v.setPadding(0, 0, 0, 0);
 			} else {
-				tab.setPadding(tabPadding, 0, tabPadding, 0);
+				v.setPadding(tabPadding, 0, tabPadding, 0);
+			}
+
+			if (v instanceof TextView) {
+
+				TextView tab = (TextView) v;
+				tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
+				tab.setTypeface(tabTypeface, tabTypefaceStyle);
+				tab.setTextColor(tabTextColor);
+
 			}
-			tab.setTextSize(TypedValue.COMPLEX_UNIT_PX, tabTextSize);
-			tab.setTypeface(tabTypeface, tabTypefaceStyle);
-			tab.setTextColor(tabTextColor);
 
 		}
 
@@ -272,6 +306,10 @@ protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 	}
 
 	private void scrollToChild(int position, int offset) {
+
+		if (tabCount == 0) {
+			return;
+		}
 
 		int newScrollX = tabsContainer.getChildAt(position).getLeft() + offset;
 

sample/AndroidManifest.xml

@@ -1,11 +1,11 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.astuetz.viewpager.extensions.sample"
-    android:versionCode="2"
-    android:versionName="1.01" >
+    android:versionCode="3"
+    android:versionName="1.02" >
 
     <uses-sdk
-        android:minSdkVersion="14"
+        android:minSdkVersion="8"
         android:targetSdkVersion="17" />
 
     <application

sample/res/drawable/background_tabs_diagonal.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
+    android:src="@drawable/tabs_pattern_diagonal"
+    android:tileMode="repeat" />

sample/res/layout-land/fragment_quick_contact.xml

@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout 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"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content" >
+
+    <ImageView
+        android:id="@+id/image"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_alignParentLeft="true"
+        android:layout_toLeftOf="@+id/center"
+        android:scaleType="centerCrop"
+        android:src="@drawable/contact" />
+
+    <TextView
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignBottom="@+id/image"
+        android:layout_alignParentLeft="true"
+        android:layout_toLeftOf="@+id/center"
+        android:background="#77000000"
+        android:paddingBottom="14dip"
+        android:paddingLeft="8dip"
+        android:paddingTop="14dip"
+        android:text="Quick Contact"
+        android:textColor="#FFFFFFFF"
+        android:textSize="18sp" />
+
+    <View
+        android:id="@+id/center"
+        android:layout_width="0dip"
+        android:layout_height="match_parent"
+        android:layout_centerHorizontal="true" />
+
+    <com.astuetz.viewpager.extensions.PagerSlidingTabStrip
+        android:id="@+id/tabs"
+        android:layout_width="wrap_content"
+        android:layout_height="62dip"
+        android:layout_alignParentRight="true"
+        android:layout_toRightOf="@+id/center"
+        android:background="@drawable/background_tabs_diagonal"
+        app:dividerColor="#00000000"
+        app:indicatorColor="#FF33B5E6"
+        app:tabPaddingLeftRight="14dip"
+        app:underlineColor="#FF33B5E6" />
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/pager"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_alignParentRight="true"
+        android:layout_below="@+id/tabs"
+        android:layout_toRightOf="@+id/center" />
+
+</RelativeLayout>

sample/res/layout/activity_main.xml

@@ -34,47 +34,53 @@
             android:layout_margin="4dip"
             android:layout_weight="1"
             android:background="#FF666666"
-            android:onClick="onColorClicked" />
+            android:onClick="onColorClicked"
+            android:tag="#FF666666" />
 
         <ImageView
             android:layout_width="0dip"
             android:layout_height="match_parent"
             android:layout_margin="4dip"
             android:layout_weight="1"
             android:background="#FF96AA39"
-            android:onClick="onColorClicked" />
+            android:onClick="onColorClicked"
+            android:tag="#FF96AA39" />
 
         <ImageView
             android:layout_width="0dip"
             android:layout_height="match_parent"
             android:layout_margin="4dip"
             android:layout_weight="1"
             android:background="#FFC74B46"
-            android:onClick="onColorClicked" />
+            android:onClick="onColorClicked"
+            android:tag="#FFC74B46" />
 
         <ImageView
             android:layout_width="0dip"
             android:layout_height="match_parent"
             android:layout_margin="4dip"
             android:layout_weight="1"
             android:background="#FFF4842D"
-            android:onClick="onColorClicked" />
+            android:onClick="onColorClicked"
+            android:tag="#FFF4842D" />
 
         <ImageView
             android:layout_width="0dip"
             android:layout_height="match_parent"
             android:layout_margin="4dip"
             android:layout_weight="1"
             android:background="#FF3F9FE0"
-            android:onClick="onColorClicked" />
+            android:onClick="onColorClicked"
+            android:tag="#FF3F9FE0" />
 
         <ImageView
             android:layout_width="0dip"
             android:layout_height="match_parent"
             android:layout_margin="4dip"
             android:layout_weight="1"
             android:background="#FF5161BC"
-            android:onClick="onColorClicked" />
+            android:onClick="onColorClicked"
+            android:tag="#FF5161BC" />
     </LinearLayout>
 
 </RelativeLayout>

sample/res/layout/fragment_quick_contact.xml

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="utf-8"?>
+<RelativeLayout 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"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content" >
+
+    <ImageView
+        android:id="@+id/image"
+        android:layout_width="match_parent"
+        android:layout_height="170dip"
+        android:scaleType="centerCrop"
+        android:src="@drawable/contact" />
+
+    <TextView
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_alignBottom="@+id/image"
+        android:background="#77000000"
+        android:paddingBottom="14dip"
+        android:paddingLeft="8dip"
+        android:paddingTop="14dip"
+        android:text="Quick Contact"
+        android:textColor="#FFFFFFFF"
+        android:textSize="18sp" />
+
+    <com.astuetz.viewpager.extensions.PagerSlidingTabStrip
+        android:id="@+id/tabs"
+        android:layout_width="match_parent"
+        android:layout_height="62dip"
+        android:layout_below="@+id/image"
+        android:background="@drawable/background_tabs_diagonal"
+        app:dividerColor="#00000000"
+        app:indicatorColor="#FF33B5E6"
+        app:tabPaddingLeftRight="14dip"
+        app:underlineColor="#FF33B5E6" />
+
+    <android.support.v4.view.ViewPager
+        android:id="@+id/pager"
+        android:layout_width="match_parent"
+        android:layout_height="96dip"
+        android:layout_below="@+id/tabs" />
+
+</RelativeLayout>

sample/res/menu/main.xml

@@ -1,9 +1,9 @@
 <menu xmlns:android="http://schemas.android.com/apk/res/android" >
 
     <item
-        android:id="@+id/action_settings"
-        android:orderInCategory="100"
-        android:showAsAction="never"
-        android:title="@string/action_settings"/>
+        android:id="@+id/action_contact"
+        android:icon="@drawable/ic_action_user"
+        android:showAsAction="ifRoom"
+        android:title="@string/action_contact"/>
 
 </menu>

sample/res/values/strings.xml

@@ -2,6 +2,6 @@
 <resources>
 
     <string name="app_name">PagerSlidingTabStrip</string>
-    <string name="action_settings">Settings</string>
+    <string name="action_contact">Contact</string>
 
 </resources>