CirclePageIndicator on top of ViewPager

Question

In my layout I am trying to get the CirclePageIndicator to sit at the bottom of my image and for my image to be aligned at the top of the screen. Whatever I try it doesn't work. Here is how I want it to look like:

What it ends up looking like is this

Here is my code for this.

   <RelativeLayout android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_gravity="top">

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

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

</RelativeLayout>

And because it is a ViewPager I added the ability to scroll through each image. Here is the code for that.

public class SectionsPagerAdapter extends FragmentPagerAdapter {        
    private int[] Images = new int[] { R.drawable.homephoneicon1, R.drawable.homephoneicon2,
            R.drawable.homephoneicon3, R.drawable.homephoneicon4, R.drawable.homephoneicon5};

    public SectionsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return SlideshowFragment.newInstance(Images[position]);
    }

    @Override
    public int getCount() {
        return NUM_SLIDES;
    }
}

Here is the Slideshow code

public class SlideshowFragment extends Fragment {
int imageResourceId;

public static SlideshowFragment newInstance(int i) {
    SlideshowFragment fragment = new SlideshowFragment();
    fragment.imageResourceId = i;

    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    ImageView image = new ImageView(getActivity());
    image.setImageResource(imageResourceId);

    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);

    LinearLayout layout = new LinearLayout(getActivity());
    layout.setLayoutParams(new LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));
    layout.setGravity(Gravity.TOP);
    layout.addView(image, params);

    return layout;
}
}

Thanks for any help!

Answer 1

Here is how I did it

Code

public static SlideshowFragment newInstance(int i) {
    SlideshowFragment fragment = new SlideshowFragment();
    fragment.imageResourceId = i;

    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
    ImageView image = new ImageView(getActivity());
    image.setImageResource(imageResourceId);
    image.setScaleType(ImageView.ScaleType.FIT_XY);

    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);

    RelativeLayout layout = new RelativeLayout(getActivity());
    layout.setLayoutParams(new LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT));

    layout.addView(image, params);

    return layout;
}

Layout

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1.5">

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

    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:padding="5dp"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>