Android Material Design Hero Components Transition Animations

Hi!

Material Design is a boon for developer to make our application with smooth animation on needy places. We are using animation based on different need like Activity, UI Components & etc.,

From android release 5.0 (Lollipop) Material design has introduced. In this tutorial, we are going to learn about UI components Transition (with animation effect) while move to one activity form another activity.

     We can Transition UI components like Button, TextView, Image & etc.., the Transitional UI components called as “Hero Components”, in this tutorial we are going to use a Button as Hero Component.

Gradle :

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    testCompile 'junit:junit:4.12'
}

Style

(values/styles.xml)

<resources>



    <!-- App Theam-->

    <style name="AppMaterialTheame" parent="SuperMaterialTheme">



    </style>





    <!-- Base application theme. -->

    <style name="SuperMaterialTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>

        <item name="windowActionBar">false</item>

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>



</resources>

(values-v21/styles.xml)

<resources>



    <!-- App Theam-->

    <style name="AppMaterialTheame" parent="SuperMaterialTheme">

        <item name="android:windowContentTransitions">true</item>

        <item name="android:windowAllowEnterTransitionOverlap">true</item>

        <item name="android:windowAllowReturnTransitionOverlap">true</item>

</resources>

ActivityOne.Java

Button fblogin;

fblogin = (Button) findViewById(R.id.fblogin);

// On click to move ActivitySecond.Java

ActivityOptions a_optn;

Intent int_edprof = new Intent(Welcome.this,EDProfile.class);



if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

    fblogin.setTransitionName("fblogin1");

    a_optn = ActivityOptions.makeSceneTransitionAnimation(Welcome.this, Pair.create((View)fblogin,"fblogin1"));

    startActivity(int_edprof,a_optn.toBundle());

} else {

    startActivity(int_edprof);

}

ActivitySecond.Java

Button btn_test;

btn_test = (Button) findViewById(R.id.btn_test);

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {

    btn_test.setTransitionName("fblogin1");

} else {

}

The both activity having the different button and the button become common for both activity by set the common name

Eg: setTransitionName("fblogin1");

That’s All..,

Please Leave Your Comment..,

Enjoy the code..,