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>

Answer 2

late comer but seems a better workaround

<RelativeLayout
    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="@dimen/height"/>

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

Answer 3

activity_main.xml:-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<RelativeLayout
    android:layout_width="fill_parent"
    android:background="#ffffff"
    android:layout_height="300dp">

    <android.support.v4.view.ViewPager

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:background="@android:color/transparent"
        android:gravity="center_horizontal"
        android:textSize="50sp" />

</RelativeLayout>

view_pager_item.xml:-

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
    android:id="@+id/pagerItem"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:textAlignment="center" />

</RelativeLayout>

ViewPagerAdapter.java:-

public class ViewPagerAdapter extends PagerAdapter {
Context con;
String[] data;

public ViewPagerAdapter(Context con, String[] data) {
    this.data = data;
    this.con = con;
}

@Override
public int getCount() {
    return data.length;
}

@Override
public boolean isViewFromObject(View view, Object o) {
    return view == o;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    LayoutInflater inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.view_pager_item, container, false);
    try {

        TextView textView = (TextView) view.findViewById(R.id.pagerItem);
        textView.setText(data[position]);
        ((ViewPager) container).addView(view);
    } catch (Exception ex) {
        ex.printStackTrace();
    }
    return view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((RelativeLayout) object);
}
}

MainActivity.java:-

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    try {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String[] data = new String[]{
                "page 1",
                "page 2",
                "page 3",
                "page 4"
        };
        final ViewPagerAdapter adapter = new ViewPagerAdapter(this, data);
        final ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        viewPager.setOffscreenPageLimit(2);
        viewPager.setAdapter(adapter);

        final TextView textView = (TextView) findViewById(R.id.textView);

        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                textView.setText("");
                for (int i = 0; i < adapter.getCount(); i++) {
                    Spannable word = new SpannableString(" " + ".");
                    if (i == position) {
                        word.setSpan(new ForegroundColorSpan(Color.RED), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    } else {
                        word.setSpan(new ForegroundColorSpan(Color.BLUE), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
                    }
                    textView.append(word);
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    } catch (Exception ex) {
        ex.printStackTrace();
    }

}


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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}
}

Answer 4

Simple way import pagerlibrary and use this code into .xml file.

  <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_above="@+id/twoImage"
            android:id="@+id/slideLay"
            >
            <android.support.v4.view.ViewPager
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/offer_pager"
                />
            <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/page_indicatorr"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@null"
                app:fillColor="#000000"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_marginBottom="10dp"
                android:padding="5dip"
                >
            </com.viewpagerindicator.CirclePageIndicator>

        </RelativeLayout>