ZOFTINO.COM android and web dev tutorials

Android Fragments Transition Animation Example

To minimize the number of un-installations of your app, you need to build it in such way that it performs well, works on all devices and is user friendly. To improve user friendliness, you need to build your app with an excellent UI created using animation and material design guidelines.

One of the transitions where animation can be applied is Fragment transitions. I’ll show how to apply animation to fragment transition with an example.

The example contains login related activity with two fragments. One fragment represents account registration and second fragment represents login. Each fragment has an option to switch to the other fragment. Meaning when user is on login fragment and not registered yet, user can switch to account fragment. Similarly user can switch to login screen from registration screen.

This transition from account registration screen to login screen or login screen to account registration screen is animated by setting animation on FragmentTransaction object.

You can set animation for fragment transitions by calling setTransition method on FragmentTransaction object. This way, you can use standard animation. To set custom animations, you need to call setCustomAnimation method and pass enter and exit animations which you need to define in xml. For various custom animation definitions, see custom animation definitions for activity transition examples.

android fragment transition example

Login Activity

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

    private void showSignupFragment(){
        Fragment signupFragment = new SignupFragment();
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.setCustomAnimations(android.R.anim.fade_in, android.R.anim.fade_out);
        transaction.addToBackStack(null);
        transaction.replace(R.id.account, signupFragment);
        transaction.commit();
    }
}

Activity Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/account"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Login Fragment

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;

public class SigninFragment extends Fragment {

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

        Button button = (Button) view.findViewById(R.id.go_singnup_b);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSignupFragment();
            }
        });

        return view;
    }

    private void showSignupFragment(){
        Fragment signupFragment = new SignupFragment();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        transaction.addToBackStack(null);
transaction.setCustomAnimations(android.R.anim.slide_in_left, 
        android.R.anim.slide_out_right);

        transaction.replace(R.id.account, signupFragment);
        transaction.commit();
    }
}

Login Fragment Layout

<?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:layout_margin="8dp"
    android:background="@color/loginScreen"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="32dp">

        <TextView
            android:id="@+id/email_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Email : "/>

        <EditText
            android:id="@+id/email_t"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"/>

        <TextView
            android:id="@+id/passwd_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="Password : "/>

        <EditText
            android:id="@+id/passwd_t"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:inputType="textWebPassword"/>

        <Button
            android:id="@+id/signin_b"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="32dp"
            android:text="Sign in"/>

        <TextView
            android:id="@+id/no_account_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:layout_gravity="center_horizontal"
            android:text="DON'T HAVE AN ACCOUNT?" />

        <Button
            android:id="@+id/go_singnup_b"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:text="Sign up" />
    </LinearLayout>
</LinearLayout>

Registration Fragment

public class SignupFragment extends Fragment {

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

        Button button = (Button) view.findViewById(R.id.go_singnin_b);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSigninFragment();
            }
        });

        return view;
    }

    private void showSigninFragment(){
        Fragment signinFragment = new SigninFragment();
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
transaction.setCustomAnimations(android.R.anim.slide_in_left, 
        android.R.anim.slide_out_right);
        transaction.addToBackStack(null);
        transaction.replace(R.id.account, signinFragment);
        transaction.commit();
    }
}

Registration Fragment Layout

<?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:layout_margin="8dp"
    android:background="@color/regScreen"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="32dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/name_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Name : " />

        <EditText
            android:id="@+id/name_t"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"/>

        <TextView
            android:id="@+id/email_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="Email : "/>

        <EditText
            android:id="@+id/email_t"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"/>

        <TextView
            android:id="@+id/passwd_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="Password : "/>

        <EditText
            android:id="@+id/passwd_t"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp"
            android:inputType="textWebPassword"/>

        <Button
            android:id="@+id/register_b"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:text="Sign up"/>
        <TextView
            android:id="@+id/yes_account_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="32dp"
            android:layout_gravity="center_horizontal"
            android:text="ALREADY HAVE AN ACCOUNT?" />

        <Button
            android:id="@+id/go_singnin_b"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="16dp"
            android:text="Sign IN" />
    </LinearLayout>
</LinearLayout>