Contoh Kerja Lengkap dari Skenario Animasi Tiga-Fragmen Gmail?

TL; DR: Saya mencari sampel kerja lengkap dari skenario yang akan saya sebut sebagai "animasi tiga-fragmen Gmail". Secara khusus, kami ingin memulai dengan dua fragmen, seperti ini:

Setelah beberapa acara UI (misalnya, mengetuk sesuatu di Fragment B), kami ingin:

• Fragmen A untuk menggeser layar ke kiri
• Fragmen B untuk meluncur ke tepi kiri layar dan menyusut untuk mengambil tempat yang dikosongkan oleh Fragment A
• Fragmen C untuk meluncur dari sisi kanan layar dan untuk mengambil tempat yang dikosongkan oleh Fragment B

Dan, pada tombol BACK tekan, kami ingin set operasi dibalik.

Sekarang, saya telah melihat banyak implementasi parsial; Saya akan mengulas empat di antaranya di bawah ini. Selain tidak lengkap, mereka semua memiliki masalah.

@Reto Meier menyumbangkan jawaban populer ini untuk pertanyaan dasar yang sama, yang menunjukkan bahwa Anda akan menggunakannya setCustomAnimations()dengan a FragmentTransaction. Untuk skenario dua fragmen (misalnya, Anda hanya melihat Fragmen A pada awalnya, dan ingin menggantinya dengan Fragmen B baru menggunakan efek animasi), saya setuju sepenuhnya. Namun:

• Karena Anda hanya dapat menentukan satu animasi "dalam" dan satu "keluar", saya tidak dapat melihat bagaimana Anda akan menangani semua animasi berbeda yang diperlukan untuk skenario tiga-fragmen
• Dalam <objectAnimator>kode sampelnya menggunakan posisi kabel dalam piksel, dan itu tampaknya tidak praktis mengingat berbagai ukuran layar, namun setCustomAnimations()membutuhkan sumber daya animasi, menghalangi kemungkinan mendefinisikan hal-hal ini di Jawa
• Saya bingung bagaimana objek animator untuk skala terkait dengan hal-hal seperti android:layout_weightdalam LinearLayoutuntuk mengalokasikan ruang berdasarkan persentase
• Saya bingung bagaimana Fragment C ditangani sejak awal ( GONE? android:layout_weightDari 0? Pra-animasi ke skala 0? Sesuatu yang lain?)

@Roman Nurik menunjukkan bahwa Anda dapat menghidupkan properti apa pun , termasuk properti yang Anda tetapkan sendiri. Itu dapat membantu menyelesaikan masalah posisi terprogram, dengan biaya menemukan subclass manajer tata letak kustom Anda sendiri. Itu membantu beberapa orang, tetapi saya masih bingung dengan sisa solusi Reto.

Penulis entri pastebin ini menunjukkan beberapa pseudocode yang menggiurkan, pada dasarnya mengatakan bahwa ketiga fragmen akan berada di dalam wadah pada awalnya, dengan Fragment C yang tersembunyi di awal melalui hide()operasi transaksi. Kami kemudian show()C dan hide()A ketika acara UI terjadi. Namun, saya tidak melihat bagaimana itu menangani fakta bahwa B berubah ukuran. Itu juga bergantung pada fakta bahwa Anda tampaknya dapat menambahkan beberapa fragmen ke wadah yang sama, dan saya tidak yakin apakah itu perilaku yang dapat diandalkan dalam jangka panjang (belum lagi harus rusak findFragmentById(), meskipun saya bisa hidup dengan itu).

Penulis posting blog ini menunjukkan bahwa Gmail tidak menggunakan setCustomAnimations()sama sekali, melainkan langsung menggunakan animator objek ("Anda hanya mengubah margin kiri tampilan root + mengubah lebar tampilan kanan"). Namun, ini masih merupakan solusi dua-fragmen AFAICT, dan implementasinya sekali lagi menunjukkan dimensi kabel dalam piksel.

Saya akan terus menghubungkan ini, jadi saya mungkin akan menjawab ini sendiri suatu hari nanti, tetapi saya benar-benar berharap bahwa seseorang telah menemukan solusi tiga-fragmen untuk skenario animasi ini dan dapat memposting kode (atau tautannya). Animasi di Android membuat saya ingin mencabut rambut saya, dan Anda yang telah melihat saya tahu bahwa ini adalah upaya yang tidak membuahkan hasil.

Mengunggah proposal saya di github (Bekerja dengan semua versi android meskipun melihat akselerasi perangkat keras sangat disarankan untuk animasi semacam ini. Untuk perangkat yang tidak dipercepat perangkat keras, implementasi caching bitmap harus sesuai dengan lebih baik)

Demo video dengan animasinya ada di sini (Laju frame rate dari screen cast. Performa sebenarnya sangat cepat)

Pemakaian:

layout = new ThreeLayout(this, 3);
layout.setAnimationDuration(1000);
setContentView(layout);
layout.getLeftView();   //<---inflate FragmentA here
layout.getMiddleView(); //<---inflate FragmentB here
layout.getRightView();  //<---inflate FragmentC here

//Left Animation set
layout.startLeftAnimation();

//Right Animation set
layout.startRightAnimation();

//You can even set interpolators

Penjelasan :

Membuat RelativeLayout kustom baru (ThreeLayout) dan 2 animasi kustom (MyScalAnimation, MyTranslateAnimation)

ThreeLayoutmendapatkan bobot panel kiri sebagai param, dengan asumsi tampilan lain yang terlihat weight=1.

Sehingga new ThreeLayout(context,3)menciptakan tampilan baru dengan 3 anak dan panel kiri dengan 1/3 dari total layar. Tampilan lain menempati semua ruang yang tersedia.

Ini menghitung lebar saat runtime, implementasi yang lebih aman adalah bahwa dimensi dihitung pertama kali dalam menggambar (). alih-alih di pos ()

Skala dan Terjemahan animasi sebenarnya mengubah ukuran dan memindahkan tampilan dan bukan pseudo- [skala, pindah]. Perhatikan bahwa fillAfter(true)tidak digunakan di mana pun.

View2 adalah right_of View1

dan

View3 adalah right_of View2

Setelah menetapkan aturan ini, RelativeLayout menangani semua hal lainnya. Animasi mengubah margins(bergerak) dan [width,height]dalam skala

Untuk mengakses setiap anak (sehingga Anda dapat mengembang dengan Fragmen Anda, Anda dapat menelepon

public FrameLayout getLeftLayout() {}

public FrameLayout getMiddleLayout() {}

public FrameLayout getRightLayout() {}

Di bawah ini ditunjukkan 2 animasi

Tahap 1

--- DI Layar ----------! ----- OUT ----

[View1] [_____ View2 _____] [_____ View3_____]

Tahap 2

--OUT -! -------- DI Layar ------

[View1] [View2] [_____ View3_____]

OK, ini solusi saya sendiri, berasal dari aplikasi Email AOSP, sesuai saran @ Christopher dalam komentar pertanyaan.

https://github.com/commonsguy/cw-omnibus/tree/master/Animation/ThreePane

Solusi @ lemahwire mengingatkan saya, meskipun ia menggunakan klasik Animationdaripada animator, dan ia menggunakan RelativeLayoutaturan untuk menegakkan penentuan posisi. Dari sudut pandang karunia, ia mungkin akan mendapatkan karunia itu, kecuali jika orang lain dengan solusi yang lebih licin belum mengirimkan jawaban.

Singkatnya, ThreePaneLayoutdalam proyek itu adalah LinearLayoutsubkelas, yang dirancang untuk bekerja di lanskap dengan tiga anak. Lebar anak-anak itu dapat diatur dalam tata letak XML, melalui cara apa pun yang diinginkan - Saya menunjukkan menggunakan bobot, tetapi Anda dapat memiliki lebar tertentu yang ditetapkan oleh sumber daya dimensi atau apa pun. Anak ketiga - Fragmen C dalam pertanyaan - harus memiliki lebar nol.

package com.commonsware.android.anim.threepane;

import android.animation.Animator;
import android.animation.AnimatorListenerAdapter;
import android.animation.ObjectAnimator;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.LinearLayout;

public class ThreePaneLayout extends LinearLayout {
  private static final int ANIM_DURATION=500;
  private View left=null;
  private View middle=null;
  private View right=null;
  private int leftWidth=-1;
  private int middleWidthNormal=-1;

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

  void initSelf() {
    setOrientation(HORIZONTAL);
  }

  @Override
  public void onFinishInflate() {
    super.onFinishInflate();

    left=getChildAt(0);
    middle=getChildAt(1);
    right=getChildAt(2);
  }

  public View getLeftView() {
    return(left);
  }

  public View getMiddleView() {
    return(middle);
  }

  public View getRightView() {
    return(right);
  }

  public void hideLeft() {
    if (leftWidth == -1) {
      leftWidth=left.getWidth();
      middleWidthNormal=middle.getWidth();
      resetWidget(left, leftWidth);
      resetWidget(middle, middleWidthNormal);
      resetWidget(right, middleWidthNormal);
      requestLayout();
    }

    translateWidgets(-1 * leftWidth, left, middle, right);

    ObjectAnimator.ofInt(this, "middleWidth", middleWidthNormal,
                         leftWidth).setDuration(ANIM_DURATION).start();
  }

  public void showLeft() {
    translateWidgets(leftWidth, left, middle, right);

    ObjectAnimator.ofInt(this, "middleWidth", leftWidth,
                         middleWidthNormal).setDuration(ANIM_DURATION)
                  .start();
  }

  public void setMiddleWidth(int value) {
    middle.getLayoutParams().width=value;
    requestLayout();
  }

  private void translateWidgets(int deltaX, View... views) {
    for (final View v : views) {
      v.setLayerType(View.LAYER_TYPE_HARDWARE, null);

      v.animate().translationXBy(deltaX).setDuration(ANIM_DURATION)
       .setListener(new AnimatorListenerAdapter() {
         @Override
         public void onAnimationEnd(Animator animation) {
           v.setLayerType(View.LAYER_TYPE_NONE, null);
         }
       });
    }
  }

  private void resetWidget(View v, int width) {
    LinearLayout.LayoutParams p=
        (LinearLayout.LayoutParams)v.getLayoutParams();

    p.width=width;
    p.weight=0;
  }
}

Namun, pada saat runtime, tidak peduli bagaimana Anda awalnya mengatur lebar, manajemen lebar diambil alih ThreePaneLayoutsaat pertama kali Anda gunakan hideLeft()untuk beralih dari menampilkan apa yang disebut pertanyaan sebagai Fragmen A dan B ke Fragmen B dan C. Dalam terminologi ThreePaneLayout- yang tidak memiliki hubungan khusus untuk fragmen - tiga potongan left, middledan right. Pada saat Anda menelepon hideLeft(), kami merekam ukuran leftdan middledan nol bobot apa pun yang digunakan pada salah satu dari ketiganya, sehingga kami dapat sepenuhnya mengontrol ukuran. Pada titik waktu hideLeft(), kami mengatur ukuran rightmenjadi ukuran asli middle.

Animasi ada dua:

• Gunakan ViewPropertyAnimatoruntuk melakukan terjemahan dari tiga widget ke kiri dengan lebar left, menggunakan lapisan perangkat keras
• Gunakan ObjectAnimatorproperti pseudo-custom middleWidthuntuk mengubah middlelebar dari apa pun yang dimulai dengan lebar aslileft

(Ada kemungkinan bahwa itu adalah ide yang lebih baik untuk menggunakan AnimatorSetdan ObjectAnimatorsuntuk semua ini, meskipun ini bekerja untuk saat ini)

(Mungkin juga bahwa middleWidth ObjectAnimatormeniadakan nilai lapisan perangkat keras, karena itu memerlukan pembatalan yang cukup berkelanjutan)

(itu adalah pasti mungkin bahwa saya masih memiliki kesenjangan dalam pemahaman animasi saya, dan yang saya suka pernyataan kurung)

Efek bersihnya adalah leftslide dari layar, middleslide ke posisi asli dan ukuran left, dan rightditerjemahkan tepat di belakang middle.

showLeft() hanya membalikkan proses, dengan campuran animator yang sama, hanya dengan arah terbalik.

Aktivitas ini menggunakan a ThreePaneLayoutuntuk menampung sepasang ListFragmentwidget dan a Button. Memilih sesuatu di fragmen kiri menambahkan (atau memperbarui konten) fragmen tengah. Memilih sesuatu di fragmen tengah menetapkan keterangan Button, ditambah dijalankan hideLeft()pada ThreePaneLayout. Menekan KEMBALI, jika kita menyembunyikan sisi kiri, akan mengeksekusi showLeft(); jika tidak, KEMBALI keluar dari aktivitas. Karena ini tidak digunakan FragmentTransactionsuntuk memengaruhi animasi, kami terjebak mengelola "back stack" itu sendiri.

Proyek yang ditautkan ke atas menggunakan fragmen asli dan kerangka animator asli. Saya memiliki versi lain dari proyek yang sama yang menggunakan backport fragmen Dukungan Android dan NineOldAndroids untuk animasi:

https://github.com/commonsguy/cw-omnibus/tree/master/Animation/ThreePaneBC

Backport berfungsi dengan baik pada Kindle Fire generasi pertama, meskipun animasinya sedikit tersentak mengingat spesifikasi perangkat keras yang lebih rendah dan kurangnya dukungan akselerasi perangkat keras. Kedua implementasi tampak mulus pada Nexus 7 dan tablet generasi sekarang lainnya.

Saya tentu saja terbuka untuk ide-ide bagaimana meningkatkan solusi ini, atau solusi lain yang menawarkan keuntungan yang jelas atas apa yang saya lakukan di sini (atau apa yang digunakan @weakwire).

Sekali lagi terima kasih kepada semua orang yang telah berkontribusi!

Kami membangun perpustakaan yang disebut PanesLibrary yang memecahkan masalah ini. Ini bahkan lebih fleksibel daripada apa yang ditawarkan sebelumnya karena:

• Setiap panel bisa berukuran dinamis
• Ini memungkinkan untuk sejumlah panel (bukan hanya 2 atau 3)
• Fragmen di dalam panel dipertahankan dengan benar pada perubahan orientasi.

Anda dapat memeriksanya di sini: https://github.com/Mapsaurus/Android-PanesLibrary

Berikut ini demo: http://www.youtube.com/watch?v=UA-lAGVXoLU&feature=youtu.be

Ini pada dasarnya memungkinkan Anda untuk dengan mudah menambahkan sejumlah panel berukuran dinamis dan melampirkan fragmen ke panel itu. Semoga bermanfaat! :)

Membangun salah satu contoh yang Anda tautkan ( http://android.amberfog.com/?p=758 ), bagaimana dengan menjiwai layout_weightproperti? Dengan cara ini, Anda dapat menganimasikan perubahan berat dari 3 fragmen bersama, DAN Anda mendapatkan bonus bahwa mereka semua meluncur bersama dengan baik:

Mulailah dengan tata letak yang sederhana. Karena kita akan menghidupkan layout_weight, kita perlu LinearLayoutsebagai tampilan root untuk 3 panel .:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/container"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:id="@+id/panel1"
    android:layout_width="0dip"
    android:layout_weight="1"
    android:layout_height="match_parent"/>

<LinearLayout
    android:id="@+id/panel2"
    android:layout_width="0dip"
    android:layout_weight="2"
    android:layout_height="match_parent"/>

<LinearLayout
    android:id="@+id/panel3"
    android:layout_width="0dip"
    android:layout_weight="0"
    android:layout_height="match_parent"/>
</LinearLayout>

Kemudian kelas demo:

public class DemoActivity extends Activity implements View.OnClickListener {
    public static final int ANIM_DURATION = 500;
    private static final Interpolator interpolator = new DecelerateInterpolator();

    boolean isCollapsed = false;

    private Fragment frag1, frag2, frag3;
    private ViewGroup panel1, panel2, panel3;

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

        panel1 = (ViewGroup) findViewById(R.id.panel1);
        panel2 = (ViewGroup) findViewById(R.id.panel2);
        panel3 = (ViewGroup) findViewById(R.id.panel3);

        frag1 = new ColorFrag(Color.BLUE);
        frag2 = new InfoFrag();
        frag3 = new ColorFrag(Color.RED);

        final FragmentManager fm = getFragmentManager();
        final FragmentTransaction trans = fm.beginTransaction();

        trans.replace(R.id.panel1, frag1);
        trans.replace(R.id.panel2, frag2);
        trans.replace(R.id.panel3, frag3);

        trans.commit();
    }

    @Override
    public void onClick(View view) {
        toggleCollapseState();
    }

    private void toggleCollapseState() {
        //Most of the magic here can be attributed to: http://android.amberfog.com/?p=758

        if (isCollapsed) {
            PropertyValuesHolder[] arrayOfPropertyValuesHolder = new PropertyValuesHolder[3];
            arrayOfPropertyValuesHolder[0] = PropertyValuesHolder.ofFloat("Panel1Weight", 0.0f, 1.0f);
            arrayOfPropertyValuesHolder[1] = PropertyValuesHolder.ofFloat("Panel2Weight", 1.0f, 2.0f);
            arrayOfPropertyValuesHolder[2] = PropertyValuesHolder.ofFloat("Panel3Weight", 2.0f, 0.0f);
            ObjectAnimator localObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(this, arrayOfPropertyValuesHolder).setDuration(ANIM_DURATION);
            localObjectAnimator.setInterpolator(interpolator);
            localObjectAnimator.start();
        } else {
            PropertyValuesHolder[] arrayOfPropertyValuesHolder = new PropertyValuesHolder[3];
            arrayOfPropertyValuesHolder[0] = PropertyValuesHolder.ofFloat("Panel1Weight", 1.0f, 0.0f);
            arrayOfPropertyValuesHolder[1] = PropertyValuesHolder.ofFloat("Panel2Weight", 2.0f, 1.0f);
            arrayOfPropertyValuesHolder[2] = PropertyValuesHolder.ofFloat("Panel3Weight", 0.0f, 2.0f);
            ObjectAnimator localObjectAnimator = ObjectAnimator.ofPropertyValuesHolder(this, arrayOfPropertyValuesHolder).setDuration(ANIM_DURATION);
            localObjectAnimator.setInterpolator(interpolator);
            localObjectAnimator.start();
        }
        isCollapsed = !isCollapsed;
    }

    @Override
    public void onBackPressed() {
        //TODO: Very basic stack handling. Would probably want to do something relating to fragments here..
        if(isCollapsed) {
            toggleCollapseState();
        } else {
            super.onBackPressed();
        }
    }

    /*
     * Our magic getters/setters below!
     */

    public float getPanel1Weight() {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams)     panel1.getLayoutParams();
        return params.weight;
    }

    public void setPanel1Weight(float newWeight) {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel1.getLayoutParams();
        params.weight = newWeight;
        panel1.setLayoutParams(params);
    }

    public float getPanel2Weight() {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel2.getLayoutParams();
        return params.weight;
    }

    public void setPanel2Weight(float newWeight) {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel2.getLayoutParams();
        params.weight = newWeight;
        panel2.setLayoutParams(params);
    }

    public float getPanel3Weight() {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel3.getLayoutParams();
        return params.weight;
    }

    public void setPanel3Weight(float newWeight) {
        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) panel3.getLayoutParams();
        params.weight = newWeight;
        panel3.setLayoutParams(params);
    }


    /**
     * Crappy fragment which displays a toggle button
     */
    public static class InfoFrag extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle     savedInstanceState) {
            LinearLayout layout = new LinearLayout(getActivity());
            layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
            layout.setBackgroundColor(Color.DKGRAY);

            Button b = new Button(getActivity());
            b.setOnClickListener((DemoActivity) getActivity());
            b.setText("Toggle Me!");

            layout.addView(b);

            return layout;
        }
    }

    /**
     * Crappy fragment which just fills the screen with a color
     */
    public static class ColorFrag extends Fragment {
        private int mColor;

        public ColorFrag() {
            mColor = Color.BLUE; //Default
        }

        public ColorFrag(int color) {
            mColor = color;
        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            FrameLayout layout = new FrameLayout(getActivity());
            layout.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));

            layout.setBackgroundColor(mColor);
            return layout;
        }
    }
}

Juga contoh ini tidak menggunakan FragmentTransactions untuk mencapai animasi (lebih tepatnya, ia menganimasikan pandangan fragmen yang dilampirkan), jadi Anda perlu melakukan semua transaksi backstack / fragmen sendiri, tetapi dibandingkan dengan upaya membuat animasi berfungsi baik, ini sepertinya bukan trade-off yang buruk :)

Video beresolusi rendah yang mengerikan sedang beraksi: http://youtu.be/Zm517j3bFCo

Ini tidak menggunakan fragmen .... Ini tata letak khusus untuk 3 anak. Ketika Anda mengklik pesan, Anda mengimbangi 3 anak menggunakan offsetLeftAndRight()dan animator.

Di dalamnya JellyBeanAnda dapat mengaktifkan "Tampilkan batas tata letak" di pengaturan "Opsi Pengembang". Ketika animasi slide selesai, Anda masih dapat melihat bahwa menu kiri masih ada, tetapi di bawah panel tengah.

Ini mirip dengan menu aplikasi Cyril Mottier Fly-in , tetapi dengan 3 elemen, bukan 2.

Selain itu, ViewPageranak-anak ketiga adalah indikasi lain dari perilaku ini: ViewPagerbiasanya menggunakan Fragmen (saya tahu mereka tidak harus melakukannya, tetapi saya belum pernah melihat implementasi yang lain Fragment), dan karena Anda tidak dapat menggunakan Fragmentsdi dalam yang lain Fragment3 anak-anak mungkin bukan fragmen ....

Saat ini saya mencoba melakukan sesuatu seperti itu, kecuali skala Fragment B untuk mengambil ruang yang tersedia dan bahwa 3 panel dapat dibuka pada saat yang sama jika ada cukup ruang. Ini solusi saya sejauh ini, tapi saya tidak yakin apakah saya akan tetap menggunakannya. Saya harap seseorang akan memberikan jawaban yang menunjukkan The Right Way.

Alih-alih menggunakan LinearLayout dan menjiwai bobot, saya menggunakan RelativeLayout dan menghidupkan margin. Saya tidak yakin itu cara terbaik karena memerlukan panggilan ke requestLayout () di setiap pembaruan. Ini lancar di semua perangkat saya.

Jadi, saya menghidupkan tata letak, saya tidak menggunakan fragmen transaksi. Saya menangani tombol kembali secara manual untuk menutup fragmen C jika terbuka.

FragmentB menggunakan layout_toLeftOf / ToRightOf agar tetap sejajar dengan fragmen A dan C.

Ketika aplikasi saya memicu suatu acara untuk menampilkan fragmen C, saya geser masuk fragmen C, dan saya geser keluar fragmen A pada saat yang sama. (2 animasi terpisah). Sebaliknya, ketika Fragment A terbuka, saya menutup C pada saat yang sama.

Dalam mode potret atau pada layar yang lebih kecil, saya menggunakan tata letak yang sedikit berbeda dan geser Fragment C di atas layar.

Untuk menggunakan persentase untuk lebar Fragmen A dan C, saya pikir Anda harus menghitungnya pada waktu berjalan ... (?)

Berikut ini tata letak aktivitas:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rootpane"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <!-- FRAGMENT A -->
    <fragment
        android:id="@+id/fragment_A"
        android:layout_width="300dp"
        android:layout_height="fill_parent"
        class="com.xyz.fragA" />

    <!-- FRAGMENT C -->
    <fragment
        android:id="@+id/fragment_C"
        android:layout_width="600dp"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        class="com.xyz.fragC"/>

    <!-- FRAGMENT B -->
    <fragment
        android:id="@+id/fragment_B"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_marginLeft="0dip"
        android:layout_marginRight="0dip"
        android:layout_toLeftOf="@id/fragment_C"
        android:layout_toRightOf="@id/fragment_A"
        class="com.xyz.fragB" />

</RelativeLayout>

Animasi untuk menggeser masuk atau keluar FragmentC:

private ValueAnimator createFragmentCAnimation(final View fragmentCRootView, boolean slideIn) {

    ValueAnimator anim = null;

    final RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) fragmentCRootView.getLayoutParams();
    if (slideIn) {
        // set the rightMargin so the view is just outside the right edge of the screen.
        lp.rightMargin = -(lp.width);
        // the view's visibility was GONE, make it VISIBLE
        fragmentCRootView.setVisibility(View.VISIBLE);
        anim = ValueAnimator.ofInt(lp.rightMargin, 0);
    } else
        // slide out: animate rightMargin until the view is outside the screen
        anim = ValueAnimator.ofInt(0, -(lp.width));

    anim.setInterpolator(new DecelerateInterpolator(5));
    anim.setDuration(300);
    anim.addUpdateListener(new AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            Integer rightMargin = (Integer) animation.getAnimatedValue();
            lp.rightMargin = rightMargin;
            fragmentCRootView.requestLayout();
        }
    });

    if (!slideIn) {
        // if the view was sliding out, set visibility to GONE once the animation is done
        anim.addListener(new AnimatorListenerAdapter() {

            @Override
            public void onAnimationEnd(Animator animation) {
                fragmentCRootView.setVisibility(View.GONE);
            }
        });
    }
    return anim;
}