Customising the ViewPager

28 Sep

So we found out how to use the ViewPager here and so next is how to customise the ViewPager indicator to match with your app’s theme – all the colors and stuff. If you haven’t already, please check the previous blog post. This is the continuation

We are going to build a style, which we will reference in the manifest as the Activity’s theme.

  1. Go to the values folder in you project  and add the following entry
  2. <resources>
        <style name="StyledIndicators" parent="@android:style/Theme.Light.NoTitleBar">
            <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
        <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
            <item name="android:background">@drawable/custom_tab_indicator</item>
            <item name="android:textColor">#FF555555</item>
  3. in the drawable folder (any of them drawable – hdpi, mdpi…) add a new xml known as custom_tab_indicator.xml as referenced above
  4. <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="">
        <!-- Non focused states -->
        <item android:drawable="@drawable/custom_tab_indicator_unselected" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
        <item android:drawable="@drawable/custom_tab_indicator_selected" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
        <!-- Focused states -->
        <item android:drawable="@drawable/custom_tab_indicator_unselected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
        <item android:drawable="@drawable/custom_tab_indicator_selected_focused" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
        <!-- Pressed -->
        <!-- Non focused states -->
        <item android:drawable="@drawable/custom_tab_indicator_unselected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
        <item android:drawable="@drawable/custom_tab_indicator_selected_pressed" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>
        <!-- Focused states -->
        <item android:drawable="@drawable/custom_tab_indicator_unselected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
        <item android:drawable="@drawable/custom_tab_indicator_selected_pressed" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>

The images are here. Download them and place in your drawable folder. You can photoshop them to get the right color you want.

Lastly at the manifest, add the following theme in your activity tag.


And So you should have:

            android:label="@string/title_activity_main" >
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

Here is a screenshot.


Posted by on September 28, 2012 in Android, Android tutorials, Code


Tags: , , ,

2 responses to “Customising the ViewPager

  1. Nebz

    November 20, 2012 at 8:07 pm

    This part,,, I got problem apply vpi style along with actionbarsherlock style. Do you have any hint?

  2. pumidru

    August 5, 2013 at 4:25 am

    Please, post source code tutorial.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: