I'm working with Android Lollipop Transitions, and I've sumbled upon the following problem:
I have CardView with an ImageView and, on top of it, a TextView.
When I click on the card, a new Activity is launched, and it contains both the ImageView and the TextView in different positions.
If I don't include the TextView in the Transition as a shared element, it suddenly dissapears [goes behind] the ImageView, which doesn't look, well, great.
If I include it, it doesn't scale the text nicely and suddenly changes to the final size (I am aware of this solution already, but the problem is I want to keep also the default ImageView Transition, which is a combination of a ChangeBounds Transition, a ChangeImageTransform, ... among others).
So, anybody knows how to have different transitions being thrown for different shared views when launching the new Activity?
Cheers
The way you pointed to it in your answer can be applied for this purpose but it's actually for accepting only suitable View types by a special transition (such as only ImageViews for ChangeImageTransform).
You can use addTarget(Class targetType) instead:
final Transition transition = new TransitionSet()
.addTransition(new ChangeTransform()).addTarget(TextView.class) // Only for TextViews
.addTransition(new ChangeImageTransform()).addTarget(ImageView.class) // Only for ImageViews
.addTransition(new ChangeBounds()); // For both
setSharedElementEnterTransition(transition);
This way is more simple and more logical. Also, it can be used for some other filterings (by transitionName and etc). See addTarget() overloaded types.
OK,
This is achievable extending the Transition class. Since I wanted to animate differently an ImageView and a TextView, I just wrote a TextTransform child class ofTransform, analogous to the ChangeImageTransform one which is part of the Android API 21+. The key was overriding this method (shown the case for ChangeImageTransform which looks for ImageView objects):
#Override
private void captureValues(TransitionValues transitionValues) {
View view = transitionValues.view;
if (!(view instanceof ImageView) || view.getVisibility() != View.VISIBLE) {
return;
}
(...)
}
Then you apply all transforms to the new scene, and relevant transform will be attached to their corresponding views:
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<fade android:fadingMode="fade_out" />
<changeBounds />
<changeImageTransform />
<com.mypackage.transforms.TextTransform />
<fade android:fadingMode="fade_in" />
</transitionSet>
And then you set this Transition on the OnCreate method of the new Activity using setSharedElementEnterTransition(inflatedTransitionSet);
Related
I have a custom view that, on a high level, takes whatever drawable one might pass into it and draws a ring around it, the ring is animated, and comes with a whole set of parameters; things such as ringWidth, gradient colors, etc.
Currently, to show/specify this view in my XML, my markup looks a lot like this:
<RingedImageView
android:id="#+id/ringedImageView"
android:layout_height="#dimen/image_gigantic"
android:layout_width="#dimen/image_gigantic"
app:source="#drawable/ic_icon_1"
app:ringWidth="2dp" />
This is all well and good. However, instead of passing in a drawable as the image in the middle, what I would like is to be able to pass in a whole view, entirely seperate from #id/ringedImageView.
Ideally, I'd like this to look as follows in my XML:
<RingedImageView
android:id="#+id/ringedImageView"
android:layout_height="#dimen/image_gigantic"
android:layout_width="#dimen/image_gigantic" ...>
<ImageView
android:id="#+id/imageView" .../>
</RingedImageView>
My question then is, can I access that nested ImageView in my RingedImageView.java class? How can I specify how to handle this situation?
Some answers point to having to extend ViewGroup instead of View, but as this isn't a layout manager per se, and the component comes with its own rules for displaying content, a View seems more appropriate. Would appreciate a pointer.
Thanks all
I have a frame-layout defined in xml a follows:
//pseudo code
<FrameLayout
android:height = "match_parent" // same for width
android:background="#android:color/white"
padding = "20dp"
id = "polygraph"
layout_gravity="center"/>
I access this xml view via code as such:
LayoutInflater inflater = this.getLayoutInflater();
frameInflate = (FrameLayout) inflater.inflate(R.layout.mframe,null);
frar = (FrameLayout)frameInflate.findViewById(R.id.polygraph);
I create the following image-view dynamically but somehow it doesn't show inside this frame-layout which is one of many views inside another frame-layout that holds all the views of my User-Interface
view1 = new ImageView(this);
view1.setAdjustViewBounds(false);
matrix = new Matrix();
view1.setScaleType(ImageView.ScaleType.Matrix);//I have tried: ScaleType.Center it did not work at all
view1.setImageMatrix(matrix);
view1.setBackgroundColor(Color.GRAY);
params11= new FrameLayout.LayoutParams(200,300,Gravity.CENTER);
view1.setLayoutParams(params11);
DummyDraw drawD = new DummyDraw(this);
view1.setImageDrawable(drawD);
frar.addView(view1);
//somewhere down on onWindowsFocusChange()
frar.invalidate(); //try to invalidate to see if it will show the imageview
No image-view shows at all. I have tried different ways, such as:
frar.addView(view1,params11); //did not work
//instead of view1.setImageDrawable
view1.setBackground(drawD); //nothing
view1.setImageResource(R.drawable.somerandomdrawable);//nothing
I have no idea why this view isn't showing. Could it be the drawable "drawD"? If it is this drawable, then why isn't showing at least the background color "gray"
which I set in the code? I have tried to get rid of the ScaleType.Matrix to something else, such as ScaleType.Center, but nothing seems to work.
Any advice or suggestions will be appreciated
thanks
I had ran into the same problem a few months ago. But I did forget how to handle it. LayoutInflater wasn't needed to solve the problem. Seems like I can't do this call inside onCreate() "(FrameLayout)findViewById(R.id.polygraph)" and then try to add my programmatically created image-view to my xml layout element. It gave me a null pointer exception all the time.
Moving both calls way after the layout pass, such as on onStart() or onWindowsFocusChanged() works well. The image-view is added to the xml frame-layout, which in the end it works well for my app, since I had the intentions of adding the image-view well beyond the layout pass.
I'm currently in the process of creating my first android app, and was wondering what the method would be to set a cardview to raise up and then expand into a larger rectangle, revealing a new fragment?
edit: (the new fragment would fill up the center third of the screen, no matter where the original card was located)
Authentic Motion
Tangible surfaces don’t just appear out of nowhere like a jump-cut in
a movie; they move into place helping to focus attention, establish
spatial relationships and maintain continuity. Materials respond to
touch to confirm your interaction and all changes radiate outward from
your touch point. All motion is meaningful and intimate, aiding the
user’s comprehension.
Activity + Fragment Transitions
By declaring ‘shared elements’ that are common across two screens you
can create a smooth transition between the two states.
album_grid.xml
…
<ImageView
…
android:transitionName="#string/transition_album_cover" />
album_details.xml
…
<ImageView
…
android:transitionName="#string/transition_album_cover" />
AlbumActivity.java
Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
albumCoverImageView, // The view which starts the transition
transitionName // The transitionName of the view we’re transitioning to
);
ActivityCompat.startActivity(activity, intent, options.toBundle());
Here we define the same transitionName in two screens. When starting
the new Activity and this transition is animated automatically. In
addition to shared elements, you can now also choreograph entering and
exiting elements.
Source: Implementing Material Design
I have a nested layout like the following:
<LinearLayout> <!----Parent layout--->
<LinearLayout> <!-----child 1--->
...
</LinearLayout> <!----child 1 ended--->
<LinearLayout> <!-----child 2--->
...
</LinearLayout> <!----child 2 ended--->
</LinearLayout> <!----Parent endded--->
The problem I am having now is that since all my data items are within child 1 or child 2 Linearlayout, if I add or delete a item the child linearlayout will animated with the effect of animateLayoutChanges but the parent layout will not do any animation. (I have android:animateLayoutChanges set to true for all linear layouts). Especially when I delete an item within child 1 the animation effect becomes weird (basically child 2 will jump up while child 1 is still doing its animation).
Does anybody have any idea how to solve this?
Thanks
UPDATE
Shortly after I posted this question, I found this on android developer's site in the LayoutTransition API.
Using LayoutTransition at multiple levels of a nested view hierarchy may not work due to the interrelationship of the various levels of layout.
So does anyone have any work around suggestions for this issue?
The animateLayoutChanges property makes use of LayoutTransitions, which animate both the layout's children and, from Android 4.0 onward, ancestors in the layout hierarchy all the way to the top of the tree. In Honeycomb, only the layout's children will be animated. See this Android Developers Blog post for details.
Unfortunately, it seems that there's currently no simple way to have the siblings of a layout react to its LayoutTransitions. You could try using a TransitionListener to get notified when the layout's bounds are being changed, and move the sibling views accordingly using Animators. See Chet Haase's second answer in this Google+ post.
EDIT - Turns out there is a way. In Android 4.1+ (API level 16+) you can use a layout transition type CHANGING, which is disabled by default. To enable it in code:
ViewGroup layout = (ViewGroup) findViewById(R.id.yourLayout);
LayoutTransition layoutTransition = layout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
So, in your example, to have child 2 layout animated, you'd need to enable the CHANGING layout transformation for it. The transformation would then be applied when there is a change in the bounds of its parent.
See this DevBytes video for more details.
Ok, after digesting the first answer, I make it simple here, for those who don't get proper animation result when using android:animateLayoutChanges="true" in NESTED layout:
Make sure you add android:animateLayoutChanges="true" to the will-be-resized ViewGroup (LinearLayout/RelativeLayout/FrameLayout/CoordinatorLayout).
Use setVisibility() to control the visibility of your target View.
Listen carefully from here, add android:animateLayoutChanges="true" to the outer ViewGroup of your will-be-resized ViewGroup, this outer ViewGroup must be the one who wraps all the position-changing View affected by the animation.
Add following code in your Activity before the setVisibility(), here the rootLinearLayout is the outer ViewGroup I mentioned above:
LayoutTransition layoutTransition = rootLinearLayout.getLayoutTransition();
layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
Before:
After:
Reminder: If you miss the 3rd step, you will get null pointer exception.
Good luck!
As a Kotlin Extension
fun ViewGroup.forceLayoutChanges() {
layoutTransition.enableTransitionType(LayoutTransition.CHANGING)
}
Usage
someContainer.forceLayoutChanges()
Notes:
In my experience, this happens when the container is a deep nested layout. For some reason android:animateLayoutChanges="true" just doesn't work, but using this function will force it to work.
We had added the android:animateLayoutChanges attribute to our LinearLayout but the change didn’t trigger an animation. To fix that, use this code:
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
((ViewGroup) findViewById(R.id.llRoot)).getLayoutTransition()
.enableTransitionType(LayoutTransition.CHANGING);
}
More details.
It seems that a delayed transition on the parent also works for animating. At least for me the following code gives a proper expand/collapse animation.
expandTrigger.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
TransitionManager.beginDelayedTransition(parentLayout);
expanded = !expanded;
child1.setVisibility(expanded ? View.VISIBLE : View.GONE);
}
});
For deeply nested layouts you sometimes might need to use a parent higher up in the hierarchy in the call to the TransitionManager.
I had a similar issue:
I was using a animatelayoutchanges in one of my activity with a recycler view, I also added some custom layout transition because I wanted to increase speed of the animation while an item disappears in the list. It was working fine when it was not in a nested layout.
I had used the same adapter for another recyclerview which was in a nested layout. It was not working and I tried all the above solutions, None worked for me.
The real reason was, I forgot to set
mTicketsListAdapter.setHasStableIds(true);
in the nested layout activity. And after setting setHasStableIds to true, the animations was working perfectly in the nested layout.
Suppose I have 2 XML files and my activity will setContentView the appropriate one based on some button press from the user. Is it possible to change the transition animation for the changing of content view?
So far I see super.overridePendingTransition() which is suitable for starting new activities, however my example does not start a new activity, it just changes the layout in the current one.
Mathias Lin has explained it very well.
You can always use default stock animations supplied by Android framework.
Heres an example code:
boolean isFirstXml=evaluatingConditionFunction();
LayoutInflater inflator=getLayoutInflater();
View view=inflator.inflate(isFirstXml?R.layout.myfirstxml:R.layout.myseconxml, null, false);
view.startAnimation(AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right));
setContentView(view);
Call this from any of your activity which holds your Parent View.
For custom animations you can visit developer docs. Heres the documentation link.
Yes, you can apply an animation on almost any view you like. Just via view.startAnimation(animation);
Take the outer viewgroup of your respective layout (content view) and apply the animation to it. Depending what kind of animation you want to do, it might make sense to inflate/load both layouts but hide one of them and then swap. Please specify what kind of transition you have in mind.
For example: if you do an alpha transition, you would run the alphaAnimation on the current layout, when when the animation ends (AnimationListener), you set the content view to the new layout, and fade the content back in, via another alphaAnimation.
A better solution is using ViewFlipper: it is a FrameLayout, that can do animations when changing the views.
<ViewFlipper
android:id="#+id/[your_id_here]"
android:inAnimation="..."
android:outAnimation="..."
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
<!--Your first layout -->
</RelativeLayout>
<RelativeLayout
<!--Your second layout -->
</RelativeLayout>
</ViewFlipper>
Then, switch the views with setDisplayedChild(int) or showNext() or showPrevious. If you want to have different animation for left and right movement, you have to set inAnimation and outAnimation in the code before transition.
More complete example is here.