Jagged edges when container is animated

[jonrundle]

I'm doing a 'pop' animation on a profile picture that's using your code to make it a circle. When I have the scale animation attached to the container it's in then the edges of the circle are really jagged. When I don't have any animation on the profile picture it looks complete fine.

I'm also not quite sure why the size of the image changes either. I'm scaling from 1.0 to 0.9 back to 1.0.

Thanks!

[christophesmet]

The jagged edges are probably due to Android scaling it and not using anti aliasing for performance reasons, I can add this. It should scale it to the full size. Do you have a working sample repo I can use to fix it ? Thanks

[jonrundle]

@christophesmet Unfortunately I don't have a working sample repo to post since it's baked into a clients app that I can't share the code from.

Here's the basic set up that I have it in:

             <RelativeLayout
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:id="@+id/avatarWrapper"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="90dp">

                    <com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout
                        android:id="@+id/photoMask"
                        android:layout_width="35dp"
                        android:layout_centerHorizontal="true"
                        app:porterduffxfermode="DST_IN"
                        app:mask="@drawable/cutout_photo_mask"
                        android:layout_height="35dp">

                        <envoy.co.envoy.custom.Monogram
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:id="@+id/pfMonogram"
                            android:layout_centerHorizontal="true" />

                        <ImageView
                            android:layout_width="35dp"
                            android:layout_height="35dp"
                            android:id="@+id/pfAvatar"
                            android:layout_centerHorizontal="true" />

                    </com.christophesmet.android.views.maskableframelayout.MaskableFrameLayout>

                </RelativeLayout>

And then I'm animating the avatarWrapper relativelayout with this code:

<scale
        android:fromXScale="1.0"
        android:toXScale="0.9"
        android:fromYScale="1.0"
        android:toYScale="0.9"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1200"
        android:duration="400" />
    <scale
        android:fromXScale="0.9"
        android:toXScale="1.0"
        android:fromYScale="0.9"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1600"
        android:duration="200" />

Hope that helps a little bit in replicating!

[christophesmet]

I think you are running the 2 scale animations side by side or only the first one. Again without any project, this is hard to help with. Greets

[jonrundle]

@christophesmet They both seem to run properly. It has a start offset on it so that the first one goes and then the next one. I see them both happen when I watch it, the animation itself is perfect it's just the jagged edges on my circle that are off. Yeah I know this is hard to test for you and see what might fix it just thought I'd give it a try in case you knew something off the top of your head. No worries, thanks for replying :)

[christophesmet]

The jagged edges I can fix, but I'm not sure why the size is incorrect :s Is the end size incorrect when using a normal framelayout instead of the masked framelayout ?

[jonrundle]

Yeah I believe so, it seems to change the size when the scaling animation is applied. I'm ok with the size being different then the non-animated on though since you don't actually see that difference in reality. When the animation is applied it is always that smaller size so it doesn't impact anything. All that I really am looking for is the jagged edges to not be there.

[jonrundle]

Here's what the animation looks like: https://www.youtube.com/watch?v=cOrCTMg9-gg&feature=youtu.be

[christophesmet]

Strange, I tried the scale animation on the test project and I don't get the jagged edged. Did you change the layer type of the view ? I added an xml attribute in the latest commit on the master branch to enable anti-aliasing. Can you check it out and see if it works ? If not, please try to replicate it with the test project, as I can't reproduce it :( Thanks !

[jonrundle]

Ok awesome I'll take a look at that and try these options, thanks!

[jonrundle]

Ok I tried the new version and it didn't work. I've downloaded a copy of the sample project and tried there as well and I'm still getting the jagged edge there too. Here's a zip of the sample project so you can see how it's looking jagged there as well.

android_maskable_layout-master.zip