Viewpage indicator - Tab indicator shows distorted images on Samsung phones. Any workaround?

Question

I am trying to write an app using Viewpage indicator - by Jake Wharton. It worked perfectly till I encountered this problem on a Samsung GT-I9082. The 2 tab indicator images look totally weird. I have no clue where to start debugging from. Please help.

Here is the version which looks ok across a lot of devices:

And here is the version which looks disoriented across Samsung GT-I9082:

Any pointers, where do I start debugging?

Following is my code which stylizes the tab page indicator:

<style name="Widget.HomePageIndicator" parent="Widget">
        <item name="android:gravity">center</item>
        <item name="android:background">@drawable/homepage_tab_indicator</item>
        <item name="android:paddingLeft">22dip</item>
        <item name="android:paddingRight">22dip</item>
        <item name="android:paddingTop">5dp</item>
        <item name="android:paddingBottom">5dp</item>
        <item name="android:textSize">15sp</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:maxLines">1</item>
    </style>

Following is the homepage_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/home_screen_tab_unselected_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/home_screen_selected_holo" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/home_screen_unselected_focused_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="false" android:drawable="@drawable/home_screen_selected_focused" />

    <!-- Pressed -->
    <!--    Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/home_screen_tab_unselected_pressed_holo" />
    <item android:state_focused="false" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/home_screen_selected_pressed_holo" />

    <!--    Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="true" android:drawable="@drawable/home_screen_tab_unselected_pressed_holo" />
    <item android:state_focused="true" android:state_selected="true"  android:state_pressed="true" android:drawable="@drawable/home_screen_selected_pressed_holo" />
</selector>

Answer 1

After a long time - I solved this problem. Hope this helps anyone who comes across this strange behavior. The problem is that I was not using 9 patch Images for all the states. That was causing some rendering problem in some devices. After generating 9 patch images, I got the intended output. Also, do not forget to put .9 in the naming of every 9 patch image - I didn't do that. One more reason for this problem.