ViewPager Initial Background?

Question

http://tinypic.com/r/2isk4tz/8

This link will provide the image for the viewpager indicator lined style.

My question is how do I get rid of the default white background and amke it transparent?

For example, to look like this : http://24.media.tumblr.com/d0816263966dcb14f4b6a655f1f6bbc0/tumblr_mwzn1tKAAU1r2wjwko1_1280.png

Here is my code by the way.

Themed Lines Code Layout:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/indicator"
        style="@style/CustomLinePageIndicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.04"
        android:padding="5dip"
        app:lineWidth="30dp"
        app:selectedColor="#FF24248F"
        app:strokeWidth="4dp"
        app:unselectedColor="#FF8FB28F"
         />

</LinearLayout>

Main Activity Code:

import com.viewpagerindicator.PageIndicator;
import com.viewpagerindicator.LinePageIndicator;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;
import co.sav.prime.R;

public class MainActivity extends FragmentActivity {

    FragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    int Number = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.themed_lines);

        mAdapter = new FragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (LinePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

Styles:

<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <style name="StyledIndicators" parent="@android:style/Theme.Light">
        <item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item>
        <item name="vpiLinePageIndicatorStyle">@style/CustomLinePageIndicator</item>
        <item name="vpiTitlePageIndicatorStyle">@style/CustomTitlePageIndicator</item>
        <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>

<item name="vpiUnderlinePageIndicatorStyle">@style/CustomUnderlinePageIndicator</item>
    </style>

    <style name="CustomTitlePageIndicator">
        <item name="android:background">#18FF0000</item>
        <item name="footerColor">#FFAA2222</item>
        <item name="footerLineHeight">1dp</item>
        <item name="footerIndicatorHeight">3dp</item>
        <item name="footerIndicatorStyle">underline</item>
        <item name="android:textColor">#AA000000</item>
        <item name="selectedColor">#FF000000</item>
        <item name="selectedBold">true</item>
    </style>

    <style name="CustomLinePageIndicator">
        <item name="strokeWidth">4dp</item>
        <item name="lineWidth">30dp</item>
        <item name="unselectedColor">#FF8FB28F</item>
        <item name="selectedColor">#FF24248F</item>
        <item name="android:background">@android:color/transparent</item>
    </style>

    <style name="CustomCirclePageIndicator">
        <item name="fillColor">#FF888888</item>
        <item name="strokeColor">#FF000000</item>
        <item name="strokeWidth">2dp</item>
        <item name="radius">10dp</item>
        <item name="centered">true</item>
    </style>

    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:textAppearance">@style/CustomTabPageIndicator.Text</item>
        <item name="android:textColor">#FF555555</item>
        <item name="android:textSize">16sp</item>
        <item name="android:dividerPadding">10dp</item>
        <item name="android:showDividers">middle</item>
        <item name="android:paddingLeft">8dp</item>
        <item name="android:paddingRight">8dp</item>
        <item name="android:fadingEdge">horizontal</item>
        <item name="android:fadingEdgeLength">8dp</item>
    </style>

    <style name="CustomTabPageIndicator.Text" parent="android:TextAppearance.Medium">
        <item name="android:typeface">monospace</item>
    </style>

    <style name="CustomUnderlinePageIndicator">
        <item name="selectedColor">#FFCC0000</item>
        <item name="android:background">#FFCCCCCC</item>
        <item name="fadeLength">1000</item>
        <item name="fadeDelay">1000</item>
    </style>
</resources>

Answer 1

I think I got. You're using LinearLayout, your ViewPager is above your PagerIndicator, so the white color is the background color of the view. You can solve this using RelativeLayout and put:

android:layout_alignParentBottom="true"

in your PagerIndicator.

Try something like this:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

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

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/indicator"
        style="@style/CustomLinePageIndicator"
        android:layout_width="fill_parent"
        android:layout_height="10dp"
        android:layout_alignParentBottom="true"
        android:padding="5dip"
        app:lineWidth="30dp"
        app:selectedColor="#FF24248F"
        app:strokeWidth="4dp"
        app:unselectedColor="#FF8FB28F"
         />

</RelativeLayout>