From 901d62c65bbe70f55d944b718b8e6c6c2c69839d Mon Sep 17 00:00:00 2001 From: Saul M Date: Fri, 17 Oct 2014 02:47:11 +0200 Subject: [PATCH] Added appeal and unnappear effect on the second layout --- .../com/saulmm/material/AnimListener.java | 25 +++++ .../java/com/saulmm/material/MyActivity.java | 35 ++----- .../java/com/saulmm/material/MyActivity2.java | 69 +++++++++++-- .../main/java/com/saulmm/material/Utils.java | 23 +++-- .../layout/activity_hierarchical_timing.xml | 97 +++++++++++++++++++ app/src/main/res/layout/activity_my2.xml | 50 ++++++++-- .../main/res/layout/activity_my_activity2.xml | 22 ----- app/src/main/res/layout/view_sample_row.xml | 4 +- .../main/res/transition/circular_reveal.xml | 3 + .../main/res/transition/move_resize_image.xml | 4 + app/src/main/res/values-v21/styles.xml | 4 - app/src/main/res/values/colors.xml | 2 +- 12 files changed, 254 insertions(+), 84 deletions(-) create mode 100644 app/src/main/java/com/saulmm/material/AnimListener.java create mode 100644 app/src/main/res/layout/activity_hierarchical_timing.xml create mode 100644 app/src/main/res/transition/circular_reveal.xml create mode 100644 app/src/main/res/transition/move_resize_image.xml diff --git a/app/src/main/java/com/saulmm/material/AnimListener.java b/app/src/main/java/com/saulmm/material/AnimListener.java new file mode 100644 index 0000000..c8e83b1 --- /dev/null +++ b/app/src/main/java/com/saulmm/material/AnimListener.java @@ -0,0 +1,25 @@ +package com.saulmm.material; + +import android.animation.Animator; + +public class AnimListener implements Animator.AnimatorListener { + @Override + public void onAnimationStart(Animator animator) { + + } + + @Override + public void onAnimationEnd(Animator animator) { + + } + + @Override + public void onAnimationCancel(Animator animator) { + + } + + @Override + public void onAnimationRepeat(Animator animator) { + + } +} diff --git a/app/src/main/java/com/saulmm/material/MyActivity.java b/app/src/main/java/com/saulmm/material/MyActivity.java index 7dd3d97..ce8885e 100644 --- a/app/src/main/java/com/saulmm/material/MyActivity.java +++ b/app/src/main/java/com/saulmm/material/MyActivity.java @@ -3,26 +3,12 @@ import android.app.Activity; import android.app.ActivityOptions; import android.content.Intent; -import android.graphics.Outline; import android.os.Bundle; -import android.transition.CircularPropagation; -import android.transition.Explode; -import android.transition.Scene; -import android.transition.Slide; -import android.transition.TransitionManager; import android.util.Pair; -import android.view.Menu; import android.view.View; -import android.widget.FrameLayout; -import android.widget.Toast; - -import com.saulmm.material.R; - public class MyActivity extends Activity { - private FrameLayout frameContainer; - private View holderView; private View fabButton; @Override @@ -31,22 +17,13 @@ protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_my); - Utils.configureWindowEnterExitTransition(getWindow());; + // Set explode animation when enter and exit the activity + Utils.configureWindowEnterExitTransition(getWindow()); // Fab Button - int fabSize = getResources().getDimensionPixelSize(R.dimen.fab_size); - Outline fabOutLine = new Outline(); - fabOutLine.setOval(0, 0, fabSize, fabSize); - - // Fragment container - frameContainer = (FrameLayout) findViewById(R.id.container); - - holderView = findViewById(R.id.holder_view); - - // FabView fabButton = findViewById(R.id.fab_button); fabButton.setOnClickListener(fabClickListener); - fabButton.setOutline(fabOutLine); + Utils.configureFab(fabButton); } @@ -55,7 +32,11 @@ protected void onCreate(Bundle savedInstanceState) { public void onClick(View view) { Intent i = new Intent (MyActivity.this, MyActivity2.class); - startActivity(i); + + ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(MyActivity.this, + Pair.create(fabButton, "fab")); + + startActivity(i, transitionActivityOptions.toBundle()); } }; } diff --git a/app/src/main/java/com/saulmm/material/MyActivity2.java b/app/src/main/java/com/saulmm/material/MyActivity2.java index 3db9121..8bbff7f 100644 --- a/app/src/main/java/com/saulmm/material/MyActivity2.java +++ b/app/src/main/java/com/saulmm/material/MyActivity2.java @@ -1,5 +1,7 @@ package com.saulmm.material; +import android.animation.Animator; +import android.animation.LayoutTransition; import android.app.Activity; import android.app.Fragment; import android.graphics.Outline; @@ -9,39 +11,86 @@ import android.transition.Explode; import android.transition.Scene; import android.transition.Slide; +import android.transition.Transition; import android.transition.TransitionManager; import android.view.Menu; import android.view.MenuItem; +import android.view.View; +import android.view.ViewGroup; +import android.view.ViewPropertyAnimator; import android.widget.FrameLayout; +import android.widget.LinearLayout; import com.saulmm.material.R; public class MyActivity2 extends Activity { - private FrameLayout frameContainer; + private static final int NUM_VIEWS = 5; + private static final int SCALE_ITEM_ANIMATION_DELAY = 30; + private LinearLayout rowContainer; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); + setContentView(R.layout.activity_my2); - // Fab Button - int fabSize = getResources().getDimensionPixelSize(R.dimen.fab_size); - Outline fabOutLine = new Outline(); + rowContainer = (LinearLayout) findViewById(R.id.row_container2); Utils.configureWindowEnterExitTransition(getWindow()); - fabOutLine.setOval(0, 0, fabSize, fabSize); + getWindow().getEnterTransition().addListener(new Transition.TransitionListener() { + @Override + public void onTransitionStart(Transition transition) {} + + @Override + public void onTransitionCancel(Transition transition) {} + + @Override + public void onTransitionPause(Transition transition) {} + + @Override + public void onTransitionResume(Transition transition) {} + + @Override + public void onTransitionEnd(Transition transition) { + getWindow().getEnterTransition().removeListener(this); + + for (int i = 0; i < rowContainer.getChildCount(); i++) { + + View rowView = rowContainer.getChildAt(i); + rowView.animate().setStartDelay(i * SCALE_ITEM_ANIMATION_DELAY) + .scaleX(1).scaleY(1); + } + } + }); } @Override - protected void onResume() { + public void onBackPressed() { + + for (int i = 0; i < rowContainer.getChildCount(); i++) { + + View rowView = rowContainer.getChildAt(i); + ViewPropertyAnimator propertyAnimator = rowView.animate().setStartDelay(i * SCALE_ITEM_ANIMATION_DELAY) + .scaleX(0).scaleY(0); + + propertyAnimator.setListener(new Animator.AnimatorListener() { + @Override + public void onAnimationStart(Animator animator) {} + + @Override + public void onAnimationEnd(Animator animator) { - super.onResume(); + finishAfterTransition(); + } - frameContainer = (FrameLayout) findViewById(R.id.container); + @Override + public void onAnimationCancel(Animator animator) {} - Scene scene1 = Scene.getSceneForLayout(frameContainer, R.layout.activity_my_activity2, this); - TransitionManager.go(scene1, new Explode()); + @Override + public void onAnimationRepeat(Animator animator) {} + }); + } } } diff --git a/app/src/main/java/com/saulmm/material/Utils.java b/app/src/main/java/com/saulmm/material/Utils.java index 7c54699..0149dfe 100644 --- a/app/src/main/java/com/saulmm/material/Utils.java +++ b/app/src/main/java/com/saulmm/material/Utils.java @@ -1,24 +1,29 @@ package com.saulmm.material; -import android.transition.CircularPropagation; +import android.graphics.Outline; import android.transition.Explode; +import android.transition.Slide; +import android.view.View; import android.view.Window; +import android.view.animation.PathInterpolator; -/** - * Created by saulmm on 16/10/14. - */ public class Utils { public static void configureWindowEnterExitTransition (Window w) { Explode ex = new Explode(); + ex.setInterpolator(new PathInterpolator(0.4f, 0, 1, 1)); + w.setExitTransition(ex); + w.setEnterTransition(ex); + } - CircularPropagation c = new CircularPropagation(); - c.setPropagationSpeed(2f); + public static void configureFab (View fabButton) { - ex.setPropagation(c); + int fabSize = fabButton.getContext().getResources() + .getDimensionPixelSize(R.dimen.fab_size); - w.setExitTransition(ex); - w.setEnterTransition(ex); + Outline fabOutLine = new Outline(); + fabOutLine.setOval(0, 0, fabSize, fabSize); + fabButton.setOutline(fabOutLine); } } diff --git a/app/src/main/res/layout/activity_hierarchical_timing.xml b/app/src/main/res/layout/activity_hierarchical_timing.xml new file mode 100644 index 0000000..33015c7 --- /dev/null +++ b/app/src/main/res/layout/activity_hierarchical_timing.xml @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/src/main/res/layout/activity_my2.xml b/app/src/main/res/layout/activity_my2.xml index 3059b30..4482e53 100644 --- a/app/src/main/res/layout/activity_my2.xml +++ b/app/src/main/res/layout/activity_my2.xml @@ -3,14 +3,13 @@ android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" - tools:context=".MyActivity" > @@ -23,18 +22,49 @@ android:layout_marginRight="@dimen/activity_horizontal_margin" android:background="@drawable/ripple_round" android:stateListAnimator="@anim/fab_anim" - android:src="@drawable/ic_action_add" android:elevation="5dp" - android:layout_alignParentBottom="true" - android:layout_alignParentEnd="true" /> + android:layout_centerHorizontal="true" + android:layout_alignParentBottom="true"/> - + android:layout_height="match_parent" + android:layout_below="@id/holder_view" + android:orientation="vertical" + android:layout_centerHorizontal="true" + android:paddingLeft="@dimen/activity_horizontal_margin" + android:paddingRight="@dimen/activity_horizontal_margin" + android:paddingTop="@dimen/activity_vertical_margin" + android:paddingBottom="@dimen/activity_vertical_margin"> + + + + + + + + + + + + + + + - diff --git a/app/src/main/res/layout/activity_my_activity2.xml b/app/src/main/res/layout/activity_my_activity2.xml index 8b01e38..ada0660 100644 --- a/app/src/main/res/layout/activity_my_activity2.xml +++ b/app/src/main/res/layout/activity_my_activity2.xml @@ -5,29 +5,7 @@ android:orientation="vertical" tools:context="com.saulmm.material.MyActivity2"> - - - - - - - - - - - - - - - diff --git a/app/src/main/res/layout/view_sample_row.xml b/app/src/main/res/layout/view_sample_row.xml index b4af4fc..b4f4373 100644 --- a/app/src/main/res/layout/view_sample_row.xml +++ b/app/src/main/res/layout/view_sample_row.xml @@ -3,8 +3,10 @@ \ No newline at end of file diff --git a/app/src/main/res/transition/circular_reveal.xml b/app/src/main/res/transition/circular_reveal.xml new file mode 100644 index 0000000..b80d24b --- /dev/null +++ b/app/src/main/res/transition/circular_reveal.xml @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/app/src/main/res/transition/move_resize_image.xml b/app/src/main/res/transition/move_resize_image.xml new file mode 100644 index 0000000..e2df150 --- /dev/null +++ b/app/src/main/res/transition/move_resize_image.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/app/src/main/res/values-v21/styles.xml b/app/src/main/res/values-v21/styles.xml index 5333630..60d7441 100644 --- a/app/src/main/res/values-v21/styles.xml +++ b/app/src/main/res/values-v21/styles.xml @@ -3,15 +3,11 @@ diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml index 7af9704..db35435 100644 --- a/app/src/main/res/values/colors.xml +++ b/app/src/main/res/values/colors.xml @@ -6,5 +6,5 @@ #0097A7 #2A2A2A #EEFF41 - + #ff515252 \ No newline at end of file