Horizontal Curved list view

Question

The UI I want to achieve is

I am trying to use a view pager as follows

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

In my java code I am setting these properties for the view pager

vpSalary.setAdapter(new CustomPagerAdapter(getContext(),this));
vpSalary.setClipToPadding(false);
vpSalary.setPadding(330,0,330,0);
vpSalary.setCurrentItem(2);

And my adapter is

public class CustomPagerAdapter extends PagerAdapter {

    String salarylist[] = {"30,000","40,000","50,000","60,000"};
    private Context mContext;
    private PagerCallBack mPagerCallBack;
    private Fragment fragment;
    public CustomPagerAdapter(Context context,Fragment fragment) {
        mContext = context;
        this.fragment=fragment;
        mPagerCallBack= (PagerCallBack) fragment;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
        //if Length of both array's  (salarylist and tipler) Always remains same then we can do code like below.

        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.adapter_salary_list, collection, false);
        TextView textView= (TextView) layout.findViewById(R.id.txtSalary);
        textView.setTextColor(mContext.getResources().getColor(R.color.highlight_grey));
        collection.addView(layout);
        collection.requestFocus();

        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }

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

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

    public interface PagerCallBack{
        void getPagerCallBack(View view);
    }
}

After which I get this

My question is, how do I get the view of the page in focus in my fragment? I just want to change the TextView which has the focus.

Answer 1

One way to achieve this is add your view pager to an OnPageChangeListener. When page selected meaning that in onPageSelected method whenever position changes update your adapter.

Note: About how to update view pager adapter dynamically see this

Step 1:

class CustomPagerAdapter extends PagerAdapter {

    private int mCurrentPosition;
    //rest of your code 

    void setCurrentPosition(int position) {
        mCurrentPosition = position;
        notifyDataSetChanged();
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
        //if Length of both array's  (salarylist and tipler) Always remains same then we can do code like below.

        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(R.layout.adapter_salary_list, collection, false);
        TextView textView= (TextView) layout.findViewById(R.id.txtSalary);
        if(position == mCurrentPosition) {
            textView.setTextColor(highlightedTextColor);
        } else {
            textView.setTextColor(defaultTextColor)
        }
        collection.addView(layout);
        collection.requestFocus();

        return layout;
    }
}

Step 2:

   CustomPagerAdapter adapter = new CustomPagerAdapter(getContext(),this);
   vpSalary.setAdapter(adapter);

    vpSalary.addOnPageChangeListener(new OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override public void onPageSelected(int position) {
            adapter.setCurrentPosition(position);
        }

        @Override public void onPageScrollStateChanged(int state) {

        }
    });