Android tapstrip that leaves gap below the text and how to remove indicator or change colour?

Question

I have a tabstrip Layout that has been taken from the google github (latest version) and I am having trouble with the tabstrip as there is a gap between the indicator line and the bottom of the tabstrip. To make it more clear the layout consists of a viewPager(white) which goes below the Tabstrip(green), they are both different colors. the text Views in the Tabstrip are evenly distributed along the x axis but not on the Y axis hence there is a gap of green below the Tabstrip. I want to remove this gap but have the same height and when I do reduce the height the text is pushed up.

Code xml layout (in Linear Layout)

    <!-- The pager that allows us to swipe between fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="10"
        android:background="@android:color/white" />

I also want to try different colours for the indicator and if not remove it and finally I want to change the colour of the text.

Any help is appreciated. Thanks in advance.

the black part is a video View I left that out of the code