Flip between Views Android

Question

I am coding an application that has an activity that can supply the end user with data in two formats a bar graph view using the Teechart api (available here: http://www.steema.com/teechart/mobile) and a listview native in android. Currently I have some logic like so

first i Initialize a boolean flag = true;

I then use this button logic to change between views.

OnClickListener changeViewListener = new OnClickListener(){

  public void onClick(View v){
    if(!flag){
       listLayout.setVisibility(View.GONE);
       chartView.setVisibility(View.VISIBLE);
       changeView.setText("List");
       flag = true;
    }else{
       listLayout.setVisibility(View.VISIBLE);
       chartView.setVisibility(View.GONE);
       changeView.setText("Graph");
       flag = false;
    }
  }
};

This code works great and gives me no trouble, I am just questioning whether this can be done a better way such as using a view flipper? And if so how do I implement the view flipper code to switch between these two views?

Or should I be using fragments for each view? Any help would be much appreciated.

Answer 1

Maybe this could be of help to you: Animate between Views

It gives a generic example, may be you can tweak it to get the flip effect you want.

Update: That tutorial also gives links to various Animation docs. From that, I think you can use Rotate Animation to create the flip effect. You can give the angle of rotation and the pivot about which to rotate the view.

The concept is that you rotate one view out and rotate in the other view.

Update:

View Flipper is an implementation of Animating between views. The above method I posted was generic, you can toy around with values and create animations with you having much more finer control. You can create transitions between Views that others may never have tried.

Steps for View Flipper:

1. In View Flipper, you define a Flipper element in your Layout XML file. To this flipper element, you add two child elements, which could simply be two Views OR two Layouts OR one View and one Layout. The View Flipper flips between these two Views you have defined.

2. Once you have created this much in XML, you then create four animation rules under /res/anim for the following types of entry and exit transitions:

a. Left In

b. Left Out

c. Right In

d. Right Out

3. After 1 and 2, you now add Touch or Gesture listeners in your code, to listen for Touch and Listen events. Inside these listeners, you then initiate the animation using vf.setInAnimation() or vf.setOutAnimation(), where vf is your ViewFlipper instance.

You can find complete code over here:

1. View Flipper Tutorial 1

2. View Flipper Tutorial 2

Update: A few tweaks have to be made to make View Flipper work with ListView. I found this other SO question where the same problem was solved with a minor edit. Check it out here.

Answer 2

If you only have two views that you want to switch between, this approach is good enough. However, you can use a view pager to implement this Such an approach would particularly be useful if you have several views so that you don't render them all at once and waste memory. ViewPager will manage when to create and destroy views.

1. Define in layout

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

2. Create an adapter

   class MyPagerAdapter extends PagerAdapter {
   
       public int getCount() {
           return 2;
       }
   
       public Object instantiateItem(View collection, int position) {
           LayoutInflater inflater = (LayoutInflater) collection.getContext().getSystemService(
                   Context.LAYOUT_INFLATER_SERVICE);
   
           // Inflate the correct view based on position
           View view = inflater.inflate(R.layout.yourLayoutHere, null);
   
           // ... Setup the view
   
           ((ViewPager) collection).addView(view, 0);
           return view;
       }
   
       @Override
       public void destroyItem(View arg0, int arg1, Object arg2) {
           ((ViewPager) arg0).removeView((View) arg2);
       }
   
       @Override
       public boolean isViewFromObject(View arg0, Object arg1) {
           return arg0 == ((View) arg1);
       }
   
       @Override
       public Parcelable saveState() {
           return null;
       }
   }
   

3. Set the adapter

   ViewPager viewPager = findViewById(R.id.viewPager);
   viewPager.setAdapter(new MyPagerAdapter());
   

Now on button click, you can set the current item of view pager.

    viewPager.setCurrentItem(position);