Wednesday 25 June 2014

Fragment Transaction above android 4.0 using ObjectAnimator




1) First create Custom Class for container.

public class SlidingRelativeLayout extends RelativeLayout {
    private float xFraction = 0;

    public SlidingRelativeLayout(Context context) {
        super(context);
    }

    public SlidingRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SlidingRelativeLayout(Context context, AttributeSet attrs,
            int defStyle) {
        super(context, attrs, defStyle);
    }

    private ViewTreeObserver.OnPreDrawListener preDrawListener = null;


    public void setXFraction(float fraction) {
        this.xFraction = fraction;
        if (getWidth() == 0) {
            if (preDrawListener == null) {
                preDrawListener = new ViewTreeObserver.OnPreDrawListener() {
                    @Override
                    public boolean onPreDraw() {
                        getViewTreeObserver().removeOnPreDrawListener(
                                preDrawListener);
                        setXFraction(xFraction);
                        return true;
                    }
                };
                getViewTreeObserver().addOnPreDrawListener(preDrawListener);
            }
            return;
        }
        float translationX = getWidth() * fraction;
        setTranslationX(translationX);
    }
}

2) Four animator files  require.

 1) animator/slide_fragment_left_in.xml

         <objectAnimator
                 xmlns:android="http://schemas.android.com/apk/res/android"
                 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                 android:propertyName="XFraction"
                 android:valueType="floatType"
                 android:valueFrom="-1"
                 android:valueTo="0"
                 android:duration="@android:integer/config_mediumAnimTime"/>

 2)animator/slide_fragment_left_out.xml
          <objectAnimator
                 xmlns:android="http://schemas.android.com/apk/res/android"
                 android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                 android:propertyName="XFraction"
                 android:valueType="floatType"
                 android:valueFrom="0"
                 android:valueTo="-1"
                 android:duration="@android:integer/config_mediumAnimTime"/>

 3)animator/slide_fragment_right_in.xml
            <objectAnimator
                      xmlns:android="http://schemas.android.com/apk/res/android"
                      android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                      android:propertyName="XFraction"
                      android:valueType="floatType"
                      android:valueFrom="1"
                      android:valueTo="0"
                      android:duration="@android:integer/config_mediumAnimTime"/>

 4)animator/slide_fragment_right_out.xml
              <objectAnimator
                     xmlns:android="http://schemas.android.com/apk/res/android"
                     android:interpolator="@android:anim/accelerate_decelerate_interpolator"
                     android:propertyName="XFraction"
                     android:valueType="floatType"
                     android:valueFrom="0"
                     android:valueTo="1"
                     android:duration="@android:integer/config_mediumAnimTime"/>
            

3) Container, activity_main.xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.slidingdemo.SlidingRelativeLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </com.example.slidingdemo.SlidingRelativeLayout>

</RelativeLayout>

4) fragment_first.xml.


<com.example.slidingdemo.SlidingRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="NEXT" />

</com.example.slidingdemo.SlidingRelativeLayout>


5) fragment_second.xml

<com.example.slidingdemo.SlidingRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/btn_back"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Back" />

</com.example.slidingdemo.SlidingRelativeLayout>


6) Now Only setCustomAnimation use in fragmenttransaction and set above animator xml file. 


Like:-

final FragmentManager fragmentManager = getFragmentManager();
                        final FragmentTransaction fragmentTransaction = fragmentManager
                                .beginTransaction();
                        fragmentTransaction.setCustomAnimations(
                                R.animator.slide_fragment_right_in,
                                R.animator.slide_fragment_left_out,
                                R.animator.slide_fragment_left_in,
                                R.animator.slide_fragment_right_out);
                        final SecondFragment firstFragment = new SecondFragment();
                        fragmentTransaction.replace(R.id.container,
                                firstFragment, firstFragment.getClass()
                                        .getSimpleName());
                        fragmentTransaction.addToBackStack(firstFragment
                                .getClass().getSimpleName());
                        fragmentTransaction.commit();




No comments:

Post a Comment