Where is my ViewPagerIndicator?

Question

Here is what my layout looks like:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/titles"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:layout_below="@id/pager" 
        android:background="#808080"/>

</RelativeLayout>  

and my onCreate() based on the example snippet on the website:

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

        pager = (ViewPager) findViewById(R.id.pager);
        adapter = new ScreenSlideAdapter(getSupportFragmentManager());
        pager.setAdapter(adapter);

        lineIndicator = (LinePageIndicator)findViewById(R.id.titles);
        lineIndicator.setViewPager(pager);


    }  

when I run the app, the indicator is not visible. What am I doing wrong ?

Answer 1

Try this mate:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/titles"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" 
        android:background="#808080"/>

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

</RelativeLayout>  

Answer 2

The system reads elements from the top to the bottom of the XML file so your ViewPager is filling the entire height before the system knows that the ViewPagerIndicator needs to be under it. Swap the order and use layout_above instead:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.viewpagerindicator.LinePageIndicator
        android:id="@+id/titles"
        android:layout_height="wrap_content"
        android:layout_width="fill_parent" 
        android:background="#808080"/>

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

</RelativeLayout>  

Answer 3

Use this...

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

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

<com.viewpagerindicator.LinePageIndicator
    android:id="@+id/titles"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/pager"
    android:background="#808080" />

</RelativeLayout>