Android - Sliding Fragments

Shubham Saini picture Shubham Saini · Apr 27, 2013 · Viewed 8.3k times · Source

I'm trying to implement the sliding animation to transit from fragment1 to fragment2. I'm using setCustomAnimations method. And I understand I need to use the frame method in order to replace fragments.

My code:

package com.example.fragmentss;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;

public class MainActivity extends Activity implements MyListFragment.OnItemSelectedListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.fragment_rsslist_overview);
    }

    // if the wizard generated an onCreateOptionsMenu you can delete
    // it, not needed for this tutorial

  @Override
  public void onRssItemSelected(String link) {

  }

} 

activity_main.xml

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

    <fragment
        android:id="@+id/listFragment"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="match_parent"
        class="com.example.fragmentss.MyListFragment" ></fragment>

    <FrameLayout android:id="@+id/details" android:layout_weight="1"
            android:layout_width="0px" android:layout_height="match_parent"
            android:background="?android:attr/detailsElementBackground" />

</LinearLayout> 

MyListFragment class

package com.example.fragmentss;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class MyListFragment extends Fragment {

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.fragment_rsslist_overview,
container, false);
  return view;
  }

   public void onClick2(View view) {
      switch (view.getId()) {
         case R.id.button2:
            FragmentTransaction ft = getFragmentManager().beginTransaction();
            ft.setCustomAnimations(R.anim.slide_in_left, R.anim.slide_out_right);

            DetailFragment newFragment = DetailFragment.newInstance();

            ft.replace(R.id.details, newFragment, "mylistFragment");

            // Start the animated transition.
            ft.commit();
            break;
        }
    }
} ~

fragment_rssitem_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Goto 2" 
        android:onClick="onClick1"/>

    <TextView
        android:id="@+id/detailsText"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:layout_marginTop="20dip"
        android:text="Frag 1"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />

</LinearLayout> 

fragment_rsslist_overview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Goto 1" 
        android:onClick="onClick2" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="256dp"
        android:layout_height="wrap_content"
        android:layout_weight="0.18"
        android:text="Frag 2" 
        android:textSize="30dip"/>

</LinearLayout>

Answer

Kartik Sharma picture Kartik Sharma · Apr 27, 2013

I guess what you are trying to implement can very easily be implemented by a ViewPager

ViewPager is a custom component that was introduced to implement easy and smooth switching between fragments . Android Documentation has a very good and easy to understand example to understand it's use Take a look at http://developer.android.com/training/animation/screen-slide.html .You can also see similar questions that have been answered Example/Tutorial for ViewPager and Fragments and How to use Android ViewPager?