ViewPager with items preview

Question

I want to show a ViewPager with all the days of the week with a preview of the following and previous item of the current one. I've tried a lot of solutions suggested from stackoverflow but none of them is working. I don't wont to use fragments in the ViewPager so I've used a PagerAdapter.

See this image:

My starting point is:

• activity_main.xml

  <TextView
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:text="Choose a day of the week:" />
  <android.support.v4.view.ViewPager
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:id="@+id/weekOfTheDayPager"/>
  

• MainActivity.java

  public class MainActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      setUpAdapter();
  }
  
  private void setUpAdapter() {
      ViewPager _mViewPager = (ViewPager) findViewById(R.id.weekOfTheDayPager);
  
      final String[] daysOfTheWeek = {"Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"};
      final Context myContext = getBaseContext();
  
      _mViewPager.setAdapter(new PagerAdapter() {
          @Override
          public int getCount() {
              return daysOfTheWeek.length;
          }
  
          @Override
          public boolean isViewFromObject(View view, Object object) {
              return view == object;
          }
  
          @Override
          public Object instantiateItem(ViewGroup collection, int position) {
              LayoutInflater inflater = LayoutInflater.from(myContext);
              ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.dayoftheweeklayout, collection, false);
              ((TextView) layout.findViewById(R.id.dayOfTheWeekTextView)).setText(daysOfTheWeek[position]);
              collection.addView(layout);
              return layout;
          }
  
          @Override
          public void destroyItem(ViewGroup collection, int position, Object view) {
              collection.removeView((View) view);
          }
      });
  }}
  

and finally the layout for the ViewPager item:

• dayoftheweeklayout.xml

  <?xml version="1.0" encoding="utf-8"?>
  <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">
      <TextView
          android:id="@+id/dayOfTheWeekTextView"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:gravity="center"
          android:text="Sunday"
          android:layout_gravity="center_horizontal"/>
  </FrameLayout>
  

Any suggestion will be appreciated.

Answer 1

So it looks like you want a carousel view.

Here's the recipe:

First, in order to show pages to the side in ViewPager, you need to provide some padding on the sides and then set clipToPadding to false:

    <android.support.v4.view.ViewPager
        android:id="@+id/weekOfTheDayPager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:paddingEnd="@dimen/view_pager_padding"
        android:paddingLeft="@dimen/view_pager_padding"
        android:paddingRight="@dimen/view_pager_padding"
        android:paddingStart="@dimen/view_pager_padding"/>

Next, you need to override getPageWidth in your PagerAdapter to tell the ViewPager that you want to display three pages at a time:

    @Override
    public float getPageWidth(int position) {
        return 1F / 3F;
    }

Then you need to tell the ViewPager to use a custom PageTransformer:

    viewPager.setPageTransformer(false, new MyPageTransformer());

...

public static class MyPageTransformer implements ViewPager.PageTransformer {

    private ArgbEvaluator mColorFade = new ArgbEvaluator();

    @Override
    public void transformPage(View page, float position) {

         // position is 0 when page is centered (current)
         // -1 when page is all the way to the left 
         // +1 when page is all the way to right

         // Here's an example of how you might morph the color
         int color = mColorFade(Math.abs(position), Color.RED, Color.GRAY);
         TextView tv = (TextView) page.findViewById(R.id.dayOfTheWeekTextView);
         tv.setTextColor(color);
    }
}

There's probably something I forgot, but search SO for "android viewpager carousel" and you will find an answer in there somewhere.