title: scroll image that has text description using view pager in android
body: <p>My current design lets me swipe (left and right swipe) through images like this:<a href="http://i.stack.imgur.com/1BwMD.png" rel="nofollow">current design</a></p>
  
  <p>But what I really want to do is change it a bit so that I have a text description at the bottom. The text description changes when the image change. The new design is  like this:</p>
  
  <p><a href="http://i.stack.imgur.com/X9Zcs.png" rel="nofollow">new design</a></p>
  
  <p>I'm not sure how do I achieved this design? For example how do I draw those three circles? How do I make the text change when the image changed? Can anyone please advise?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>import android.app.Activity;
  import android.content.Context;
  import android.os.Bundle;
  import android.support.v4.view.PagerAdapter;
  import android.support.v4.view.ViewPager;
  import android.view.View;
  import android.view.ViewGroup;
  import android.widget.ImageView;
  
  public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
  
      ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
      ImagePagerAdapter adapter = new ImagePagerAdapter();
      viewPager.setAdapter(adapter);
    }
  
    private class ImagePagerAdapter extends PagerAdapter {
      private int[] mImages = new int[] {
          R.drawable.chiang_mai,
          R.drawable.himeji,
          R.drawable.petronas_twin_tower,
          R.drawable.ulm
      };
  
      @Override
      public int getCount() {
        return mImages.length;
      }
  
      @Override
      public boolean isViewFromObject(View view, Object object) {
        return view == ((ImageView) object);
      }
  
      @Override
      public Object instantiateItem(ViewGroup container, int position) {
        Context context = MainActivity.this;
        ImageView imageView = new ImageView(context);
        int padding = context.getResources().getDimensionPixelSize(
            R.dimen.padding_medium);
        imageView.setPadding(padding, padding, padding, padding);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setImageResource(mImages[position]);
        ((ViewPager) container).addView(imageView, 0);
        return imageView;
      }
  
      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager) container).removeView((ImageView) object);
      }
    }
  }
  </code></pre>
  
  <p>//activity_main</p>
  
  <pre><code>&lt;android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent" /&gt;
  </code></pre>