Embed ViewPageIndicator inside Viewpager

Question

I have this layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#FFFFFF"
  android:orientation="vertical" >

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

 <com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/titles"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />

<ListView
    android:id="@id/android:list"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

</LinearLayout>

and this code to attach the indicator in the ViewPager

CirclePageIndicator circleIndicator = (CirclePageIndicator)view.findViewById(R.id.titles);
circleIndicator.setViewPager(viewPager);

The code is working properly but is not doing exactly what i want.

The indicator is displayed at the bottom of my viewPager (below the 3 images i'm using) is it possible to move the indicator inside the images?? So the result should be an image with the indicator "embeded".

Answer 1

You could try this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF" >

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

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/titles"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/view_pager" />

    <ListView
        android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@id/view_pager"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

Explanation: The ViewPager will automatically be aligned top-left within the RelativeLayout. The ListView is is anchored between the bottom of the ViewPager and the bottom of the RelativeLayout (the layout_width="0dp" is intentional). The CirclePagerIndicator has its bottom aligned with the bottom of the ViewPager.