title: How to add a rectangle border to current view of view pager
body: <p>In bottom view pager how to add rectangle border to only selected page like gallery </p>
  
  <p>I have tried following code </p>
  
  <p><strong>viewpagerFragment.class</strong></p>
  
  <pre><code> private void loadViewPager() {
          String subAlbum = Constants.VEHICLE_NAME + "" + Constants.VEHICLE_REG_NO;
          final String[] columns = {MediaStore.Images.Media.DATA, MediaStore.Images.Media._ID};
          final String orderBy = MediaStore.Images.Media._ID + " DESC";
          Cursor imagecursor = context.getContentResolver().query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                  columns,
                  MediaStore.Images.Media.DATA + " like ? ",
                  new String[]{"%/ADC/" + subAlbum + "%"},
                  orderBy);
          int image_column_index = imagecursor.getColumnIndex(MediaStore.Images.Media._ID);
          this.count = imagecursor.getCount();
          this.thumbnails = new Bitmap[this.count];
          this.arrPath = new String[this.count];
  
          for (int i = 0; i &lt; this.count; i++) {
              imagecursor.moveToPosition(i);
              int id = imagecursor.getInt(image_column_index);
              int dataColumnIndex = imagecursor.getColumnIndex(MediaStore.Images.Media.DATA);
              thumbnails[i] = MediaStore.Images.Thumbnails.getThumbnail(
                      context.getApplicationContext().getContentResolver(), id,
                      MediaStore.Images.Thumbnails.MINI_KIND, null);
              arrPath[i] = imagecursor.getString(dataColumnIndex);
          }
  
          bitmaps = new ArrayList&lt;Bitmap&gt;(thumbnails.length);
          for (int j = 0; j &lt; thumbnails.length; j++) {
              bitmaps.add(thumbnails[j]);
          }
  
          galImageAdapter = new ViewPagerAdapter(mainActivity, bitmaps);
          viewPager.setAdapter(galImageAdapter);
  
          viewPager.setPageMargin(
                  getResources().getDimensionPixelOffset(R.dimen.viewpager_margin));
  
          //A little space between pages
          //If hardware acceleration is enabled, you should also remove
          // clipping on the pager for its children.
          viewPager.setClipChildren(false);
          viewPager.setClipToPadding(false);
          viewPager.setPadding(10, 0, 10, 0);
  
          viewPager.setOffscreenPageLimit(3);
  
  
  
          Log.d(Constants.LOG_TAG,"Constants.SELECTED_PHOTO"+Constants.SELECTED_PHOTO);
          viewPager.setCurrentItem(Constants.SELECTED_PHOTO);
  
          imagecursor.close();
      }
  
  
  viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
              @Override
              public void onPageSelected(int position) {
                  imagePath = arrPath[position];
                  selectedPosition = position;
                  setSelectedImage(selectedPosition);
                  View view = ((ViewGroup)viewPager.findViewById(R.id.home_container)).getChildAt(position);
  
                  if(viewPager.getCurrentItem()==position) {
                      view.setBackground(context.getResources().getDrawable(R.drawable.imageview_rectangle_selection));
                  }
              }
  
              @Override
              public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                  View view =((ViewGroup)viewPager.findViewById(R.id.home_container)).getChildAt(position);
                  Log.d(Constants.LOG_TAG, "view" + view);
                  if(viewPager.getCurrentItem()==position) {
                      view.setBackground(context.getResources().getDrawable(R.drawable.imageview_rectangle_selection));
                  }
              }
  
              @Override
              public void onPageScrollStateChanged(int state) {
  
  
              }
          });
  </code></pre>
  
  <p><strong>viewPager Adapter</strong></p>
  
  <pre><code>public class ViewPagerAdapter extends PagerAdapter {
  
      private Activity context=null;
      private View mCurrentView;
  
      //ImageView imageView;
  
      private List&lt;Bitmap&gt; plotsImages;
  
      private static ViewHolder holder;
      ImageView imageView;
      public static int flag=0;
  
      public ViewPagerAdapter(Activity context, List&lt;Bitmap&gt; plotsImages) {
  
          this.context = context;
          this.plotsImages = plotsImages;
      }
  
      public int getCount() {
          return plotsImages.size();
      }
  
      private static class ViewHolder {
          ImageView imageView;
      }
      public void removeitem(int position){
          plotsImages.remove(position);
      }
  
      public int getItemPosition(Object object) {
          return POSITION_NONE;
      }
  
      @Override
      public Object instantiateItem(final ViewGroup container, int position) {
          final int pos=position;
          container.setId(R.id.home_container);
          View page=
                  context.getLayoutInflater().inflate(R.layout.view_pager_page_layout, container, false);
          imageView=(ImageView)page.findViewById(R.id.imageView);
          imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
          imageView.setImageBitmap(plotsImages.get(position));
          container.addView(page);
  
          imageView.setOnClickListener(new View.OnClickListener() {
  
              @Override
              public void onClick(View v) {
                  flag = 1;
                  PhotoGalleryFragment.setSelectedImage(pos);
                  PhotoGalleryFragment.imagePath = PhotoGalleryFragment.arrPath[pos];
              }
          });
          return page;
      }
  
      @Override
      public void destroyItem(ViewGroup container, int position,
                              Object object) {
          container.removeView((View) object);
      }
  
      @Override
      public boolean isViewFromObject(View view, Object object) {
          return(view == object);
      }
  
  
      @Override
      public float getPageWidth(int position) {
          return (0.17f);
      }
  }
  </code></pre>
  
  <p><strong>viewpagerFragment.xml</strong></p>
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/relativeLayout"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@color/black"
      tools:context=".MainActivity"&gt;
  
  
  
  
      &lt;app.adc.com.utils.GalleryViewPager
          android:id="@+id/view_pager"
          android:layout_width="fill_parent"
          android:layout_height="45dp"
          android:layout_alignParentBottom="true"
          android:background="@android:color/transparent"
          android:layout_marginBottom="10dp"&gt;
  
      &lt;/app.adc.com.utils.GalleryViewPager&gt;
  
  
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p><strong>For eg.</strong></p>
  
  <p>I want to hightlight the selected page as shown in image below. (mouse is selected)</p>
  
  <p><a href="https://i.stack.imgur.com/xNwF6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xNwF6.png" alt="enter image description here"></a></p>