Wednesday, February 22, 2017

android - Fade slide explode transition example

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e9eded">
    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/btn_auto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Auto"
            />
        <Button
            android:id="@+id/btn_fade"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Fade"
            />
        <Button
            android:id="@+id/btn_slide"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Slide"
            />
        <Button
            android:id="@+id/btn_explode"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Explode"
            />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/ll"
        app:layout_anchorGravity="bottom"
        android:layout_gravity="bottom"
        >
        <ImageView
            android:id="@+id/iv"
            android:layout_width="match_parent"
            android:layout_height="125dp"
            android:src="@drawable/road"
            android:layout_margin="10dp"
            android:scaleType="centerCrop"
            />
        <ImageView
            android:id="@+id/iv_second"
            android:layout_width="match_parent"
            android:layout_height="125dp"
            android:src="@drawable/horses"
            android:layout_margin="10dp"
            android:scaleType="centerCrop"
            />
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>
MainActivity.java

package com.cfsuman.me.androidcodesnippets;

import android.app.Activity;
import android.content.Context;
import android.support.design.widget.CoordinatorLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.AutoTransition;
import android.transition.Explode;
import android.transition.Fade;
import android.transition.Slide;
import android.transition.TransitionManager;
import android.view.Gravity;
import android.view.View;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AnticipateOvershootInterpolator;
import android.view.animation.BounceInterpolator;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends AppCompatActivity {
    private Context mContext;
    private Activity mActivity;

    private static final String TAG = MainActivity.class.getSimpleName();

    private CoordinatorLayout mCLayout;
    private Button mButtonAuto;
    private Button mButtonFade;
    private Button mButtonSlide;
    private Button mButtonExplode;
    private ImageView mImageView;
    private ImageView mImageViewSecond;


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

        // Get the application context
        mContext = getApplicationContext();
        mActivity = MainActivity.this;

        // Get the widget reference from XML layout
        mCLayout = (CoordinatorLayout) findViewById(R.id.coordinator_layout);
        mButtonAuto = (Button) findViewById(R.id.btn_auto);
        mButtonFade = (Button) findViewById(R.id.btn_fade);
        mButtonSlide = (Button) findViewById(R.id.btn_slide);
        mButtonExplode = (Button) findViewById(R.id.btn_explode);
        mImageView = (ImageView) findViewById(R.id.iv);
        mImageViewSecond = (ImageView) findViewById(R.id.iv_second);

        // Set a click listener for button widget
        mButtonAuto.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                TransitionManager.beginDelayedTransition(mCLayout,makeAutoTransition());
                toggleVisibility(mImageView,mImageViewSecond);
            }
        });
        mButtonFade.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                TransitionManager.beginDelayedTransition(mCLayout,makeFadeTransition());
                toggleVisibility(mImageView,mImageViewSecond);
            }
        });
        mButtonSlide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                TransitionManager.beginDelayedTransition(mCLayout,makeSlideTransition());
                toggleVisibility(mImageView,mImageViewSecond);
            }
        });
        mButtonExplode.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                TransitionManager.beginDelayedTransition(mCLayout,makeExplodeTransition());
                toggleVisibility(mImageView,mImageViewSecond);
            }
        });
    }

    private Fade makeFadeTransition(){
        Fade fade = new Fade();
        fade.setDuration(3000);
        fade.setInterpolator(new AccelerateInterpolator());
        return fade;
    }

    private Slide makeSlideTransition(){
        Slide slide = new Slide();
        slide.setSlideEdge(Gravity.BOTTOM);
        slide.setInterpolator(new BounceInterpolator());
        slide.setDuration(3000);
        return slide;
    }

    private Explode makeExplodeTransition(){
        Explode explode = new Explode();
        explode.setDuration(3000);
        explode.setInterpolator(new AnticipateOvershootInterpolator());
        return explode;
    }

    private AutoTransition makeAutoTransition(){
        AutoTransition autoTransition = new AutoTransition();
        autoTransition.setDuration(3000);
        autoTransition.setInterpolator(new BounceInterpolator());
        return autoTransition;
    }

    // Custom method to toggle visibility of views
    private void toggleVisibility(View... views){
        // Loop through the views
        for(View v: views){
            if(v.getVisibility()==View.VISIBLE){
                v.setVisibility(View.INVISIBLE);
            }else {
                v.setVisibility(View.VISIBLE);
            }
        }
    }
}