CODEWITHSUNDEEP
androidanimationandroid-viewpager
DoruAdryan
DoruAdryan

Reputation: 1334

Simulate Android ViewPager Animation with View in front of it

I would like to simulate the animation of a view pager, for changing the background color, but the idea is to have a view (or more) that stays in front of the background at all time (even when switching it). Any suggestion would be really nice to hear.

Edit: This is an example of what I`m trying to achieve: http://www.youtube.com/watch?v=mB7GmfMxLvY

Upvotes: 0

Views: 985

Answers (1)

Amulya Khare
Amulya Khare

Reputation: 7698

There are couple of ways how this can be done. You can create views with different background and then use animations to get the desired effect. However, since you mentioned ViewPager, and if that is what you need.. an easier solution is use a Relative layout and overlay other views on top of a view pager.

Take a look here:

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

    <android.support.v4.view.ViewPager
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/viewpager"
        android:layout_alignParentRight="false"/>
    <!-- other views go here -->
    <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_launcher"/>
</RelativeLayout>

Then assign views to the view pager with different background colors. (Note: written the code in short time to explain the solution)

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        colors = new ArrayList<Integer>();
        colors.add(Color.RED);
        colors.add(Color.BLACK);
        colors.add(Color.BLUE);
        colors.add(Color.GREEN);
        colors.add(Color.YELLOW);

        mViewPager = (ViewPager)findViewById(R.id.viewpager);
        mPageAdapter = new MyPageAdapter();
        mViewPager.setAdapter(mPageAdapter);
        mPageAdapter.notifyDataSetChanged();
    }

    private MyPageAdapter mPageAdapter;
    private ViewPager mViewPager;
    private List<Integer> colors;

    class MyPageAdapter extends PagerAdapter {


        @Override
        public int getCount() {
            return colors.size();
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            RelativeLayout view = new RelativeLayout(getApplicationContext());
            view.setBackgroundColor(colors.get(position));
            ((ViewPager) mViewPager).addView(view, 0);
            return view;
        }

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

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

    }

}

So this way you can achieve all the properties of the view pager (gestures, slide effect etc.) without writing any extra code).

Upvotes: 2

Related Questions