2

I have a tab activity with three tabs. I need the sliding animation with the finger movement that does like in Home or "News & Weather" app. With the help of documentation and forum, I could manage to animate the tab contents in some extent but not like in those mention above.

So, would you please help me to solve this issue?

Here is my code:

MyTabActivity.java

public class MyTabActivity extends TabActivity {

    int current_tab;
    TabHost tabHost;

    private static final int SWIPE_MIN_DISTANCE = 120;
    private static final int SWIPE_MAX_OFF_PATH = 250;
    private static final int SWIPE_THRESHOLD_VELOCITY = 200;

    private GestureDetector gestureDetector;
    private Animation slideLeftIn;
    private Animation slideLeftOut;
    private Animation slideRightIn;
    private Animation slideRightOut;
    private ViewFlipper viewFlipper;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.mains);

        viewFlipper = (ViewFlipper) findViewById(R.id.flipper);

        slideLeftIn = AnimationUtils.loadAnimation(this, R.anim.slide_left_in);
        slideLeftOut = AnimationUtils
                .loadAnimation(this, R.anim.slide_left_out);
        slideRightIn = AnimationUtils
                .loadAnimation(this, R.anim.slide_right_in);
        slideRightOut = AnimationUtils.loadAnimation(this,
                R.anim.slide_right_out);

        gestureDetector = new GestureDetector(new MyGestureDetector());

        Resources res = getResources(); 
        tabHost = getTabHost();
        TabHost.TabSpec spec;
        Intent intent;

        intent = new Intent().setClass(this, FirstTabContentAcitivity.class);
        spec = tabHost.newTabSpec("first").setIndicator("First",
                res.getDrawable(R.drawable.first)).setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, SecondTabContentActivity.class);
        spec = tabHost.newTabSpec("second").setIndicator("Second",
                res.getDrawable(R.drawable.second)).setContent(intent);
        tabHost.addTab(spec);

        intent = new Intent().setClass(this, ThirdTabContentAcitivity.class);
        spec = tabHost.newTabSpec("third").setIndicator("Third",
                res.getDrawable(R.drawable.third)).setContent(intent);
        tabHost.addTab(spec);


        tabHost.setCurrentTab(0);

    }


    class MyGestureDetector extends SimpleOnGestureListener {
        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            Log.d("Gesture", "Detected inside class.");
            try {
                if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
                    return false;

                if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {

                        viewFlipper.setInAnimation(slideLeftIn);
                        viewFlipper.setOutAnimation(slideLeftOut);
                        viewFlipper.showNext();                     

                        //overridePendingTransition(R.anim.slide_left_in, R.anim.slide_left_out);
                    }
                } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
                        && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {


                        viewFlipper.setInAnimation(slideRightIn);
                        viewFlipper.setOutAnimation(slideRightOut);
                        viewFlipper.showPrevious();                     
                    }
                }
            } catch (Exception ex) {
                Log.d("onFling", ex.getMessage());
            }
            return false;
        }
    }

    /*
     * @Override public boolean onTouchEvent(MotionEvent event) { if
     * (gestureDetector.onTouchEvent(event)) { Log.d("onTouchEvent",
     * "screen touched"); return true; } else { return false; } }
     */

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        super.dispatchTouchEvent(event);
        return gestureDetector.onTouchEvent(event);
    }   
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TabHost xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@android:id/tabhost" android:layout_width="fill_parent"
        android:layout_height="fill_parent" android:layout_weight="1">
        <LinearLayout android:orientation="vertical"
            android:layout_width="fill_parent" android:layout_height="fill_parent">
            <TabWidget android:id="@android:id/tabs"
                android:layout_width="fill_parent" android:layout_height="wrap_content" />
            <ViewFlipper xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/flipper" android:layout_width="fill_parent"
                android:layout_height="fill_parent">
                <FrameLayout android:id="@android:id/tabcontent"
                    android:layout_width="fill_parent" android:layout_height="fill_parent">
                </FrameLayout>
            </ViewFlipper>
        </LinearLayout>
    </TabHost>
</LinearLayout>

slide_left_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="50%p" android:toXDelta="0"
        android:duration="800" />
</set>

slide_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-50%p"
        android:duration="800" />
</set>

slide_right_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate android:fromXDelta="-50%p" android:toXDelta="0"
        android:duration="800" />
</set>

slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="50%p"
        android:duration="800" />
</set>

1 Answer 1

1

With your approach that would be really hard and messy...

I think you should use ViewPager from the v4 support package, it looks useful...

http://android-developers.blogspot.com/2011/08/horizontal-view-swiping-with-viewpager.html


Here is the flingable tab implementation from the samples (I think this is exactly what you were looking for):

http://developer.android.com/resources/samples/Support4Demos/src/com/example/android/supportv4/app/FragmentTabsPager.html

I've tried it out, it works nicely.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.